desarrollo de la aplicacion web (hospiflorida) para...
TRANSCRIPT
DESARROLLO DE LA APLICACION WEB (HOSPIFLORIDA) PARA LA
ASISTENCIA DE LAS ACTIVIDADES ADMINISTRATIVAS DEL HOSPITAL SAN
JUAN DE DIOS DEL MUNICIPIO DE FLORIDABLANCA- SANTANDER
AUTOR OSCAR JAVIER VARGAS GONZALEZ
UNIVERSIDAD COOPERATIVA DE COLOMBIA FACULTAD DE INGENIERÍAS INGENIERIA DE SISTEMAS
BUCARAMANGA 2016
DESARROLLO DE LA APLICACION WEB (HOSPIFLORIDA) PARA LA
ASISTENCIA DE LAS ACTIVIDADES ADMINISTRATIVAS DEL HOSPITAL SAN
JUAN DE DIOS DEL MUNICIPIO DE FLORIDABLANCA- SANTANDER
AUTOR OSCAR JAVIER VARGAS GONZALEZ
Trabajo presentado como requisito para optar al título de Ingeniero de Sistemas
DOCENTE INVESTIGADOR:
MANUEL FERNANDO BARRERA MEZA Tecnólogo de Sistemas
UNIVERSIDAD COOPERATIVA DE COLOMBIA FACULTAD DE INGENIERÍAS INGENIERIA DE SISTEMAS
BUCARAMANGA 2016
DEDICATORIAS
A mi madre Miryam González Suarez por su paciencia comprensión y su apoyo
incondicional, a mi hermana y familiares que siempre me han apoyado en todo
momento y han creído en mí.
A mi novia que siempre ha estado apoyándome y contribuyéndome para alcanzar
esta meta.
A la Doctora EDNA RUTH OVALLE ZULETA quien me permitió realizar mi práctica profesional en el ESE HOSPITAL DE FLORIDA Al Doctor RAUL DANIEL VILLAMIL por apoyarme y contribuir en el desarrollo de este proyecto. A todo el personal del Hospital de Florida por su apoyo y comprensión.
OSCAR VARGAS
AGRADECIMIENTO
Al profesora Lina María Torres Barreto, por su dirección y permitirnos realizar este
proyecto
Al profesor Carlos Acevedo, por su dirección y apoyo
A Manuel Barrera por sus orientaciones en el desarrollo de este trabajo de grado.
Al profesor José Ricardo Arismendi Santos por compartir su conocimiento y
colaboración en nuestro desarrollo profesional.
A la Universidad Cooperativa de Colombia y facultad de Ingeniería de Sistemas
A nuestros padres, familiares y amigos quienes creyeron en mi esfuerzo y han
hecho realidad este sueño de ser ingeniero de sistemas.
A La Doctora Edna Ruth Ovalle Zuleta Gerente del Hospital de Florida Al Doctor Raúl Daniel Villamil Subgerente del Hospital de Florida
CONTENIDO
Pág.
RESUMEN ..................................................................................................................................................... 5
ABSTRACT .................................................................................................................................................... 6
INTRODUCCION ............................................................................................................................................ 7
1. EL PROBLEMA ...................................................................................................................................... 8
1.1 DESCRIPCIÓN DEL PROBLEMA ................................................................................................................ 8
1.2 FORMULACIÓN DE LA PREGUNTA DE INVESTIGACION ........................................................................... 8
1.3 JUSTIFICACIÓN .............................................................................................................................................. 9
1.4 DELIMITACIÓN ............................................................................................................................................ 10
1.4.1 Conceptual. .................................................................................................................................. 10
1.4.2 Espacial. ................................................................................................................................ 10
1.4.3 Temporal. .............................................................................................................................. 10
1.5 OBJETIVOS .................................................................................................................................................. 11
1.5.1 General. ........................................................................................................................................ 11
1.5.2 Específicos. ................................................................................................................................. 11
2. MARCO TEÓRICO .......................................................................................................................................... 12
2.1 ANTECEDENTES ........................................................................................................................................... 13
2.1.1 Históricos. .................................................................................................................................... 13
NAVEGADORES Y BUSCADORES .................................................................................................................................. 13
2.1.2 Legales ......................................................................................................................................... 14
2.1.3 Investigativos . ......................................................................................................................... 14
2.2 BASES TEÓRICAS ......................................................................................................................................... 14
2.4 TERMINOS BÁSICOS ..................................................................................................................................... 16
3. DISEÑO METODOLÓGICO ...................................................................................................................... 16
3.1 TIPO DE INVESTIGACIÓN ............................................................................................................................. 16
3.2 METODOLOGÍA DE INVESTIGACIÓN ............................................................................................................ 16
3.5 FACTIBILIDAD .............................................................................................................................................. 18
4. ASPECTOS DE INGENIERIA DE SOFTWARE .............................................................................................. 18
4.1 ANALISIS ...................................................................................................................................................... 18
4.1.2 Análisis de Requerimientos. ...................................................................................................... 18
4.1.3 Diagrama de Casos de Uso. ..................................................................................................... 19
4.1.4 Diagramas de Colaboración...................................................................................................... 19
4.3 DESARROLLO ............................................................................................................................................... 20
1. SIMPLEFORMS ........................................................................................................................................ 33
1.1. INSTALANDO SIMPLEFORMS ............................................................................................................................... 33
4.4 PRUEBAS Y/O VALIDACION ......................................................................................................................... 34
4.5 DOCUMENTACION ...................................................................................................................................... 35
4.6 CONCLUSIONES ........................................................................................................................................... 35
4.7 RECOMENDACIONES................................................................................................................................... 36
BIBLIOGRAFÍA ............................................................................................................................................ 37
WEBGRAFIA ............................................................................................................................................... 37
1. INTRODUCCIÓN ...................................................................................................................................... 44
2. INSTALACIÓN ......................................................................................................................................... 45
2.1. REQUISITOS DEL SERVIDOR WEB ........................................................................................................................ 45
2.2. OBTENIENDO BOLT .......................................................................................................................................... 45
2.3. PREPARANDO LA BASE DE DATOS ........................................................................................................................ 46
2.4. CONFIGURACIÓN INICIAL ................................................................................................................................... 49
3. CONFIGURACIÓN .................................................................................................................................... 54
3.1. PANEL ADMINISTRATIVO ................................................................................................................................... 54
3.2. CONFIGURANDO TIPOS DE CONTENIDO ................................................................................................................ 55
3.2.1. Definición de tipos de contenido............................................................................................... 56
3.2.2. Definición de fields ..................................................................................................................... 57
3.2.3. Definición de Taxonomías ......................................................................................................... 60
3.2.4. Definición de relaciones ............................................................................................................. 61
3.2.5. Ejemplo de taxonomy.yml ......................................................................................................... 61
3.2.6. Ejemplo de contenttype ............................................................................................................. 62
3.2.7. Verificando la base de datos ..................................................................................................... 62
4. PRESENTACIÓN DE LA PÁGINA WEB ....................................................................................................... 66
4.1. PLANTILLAS .................................................................................................................................................... 66
4.1.1. Plantillas por defecto .................................................................................................................. 66
4.1.2. Plantillas Auxiliares ..................................................................................................................... 66
4.1.3. Mostrando contenido en las plantillas ..................................................................................... 67
4.2. TEMAS .......................................................................................................................................................... 68
4.3. TEMA HOSPITAL .............................................................................................................................................. 68
5. CONTENIDO DE LA PÁGINA WEB ............................................................................................................ 72
5.1. TIPOS DE CONTENIDO DEFINIDOS ........................................................................................................................ 72
5.2. EDICIÓN DE CONTENIDO ................................................................................................................................... 72
5.2.1. Añadiendo contenido ................................................................................................................. 73
5.2.2. Editando el título y slug .............................................................................................................. 74
5.2.3. Editando el cuerpo del contenido ............................................................................................. 76
5.2.4. Selección de plantilla ................................................................................................................. 79
5.2.5. Agregando una imagen o archivo ............................................................................................ 81
5.2.6. Añadiendo Mapa de Ubicación ................................................................................................. 82
5.2.7. Indicando contenido destacado ................................................................................................ 83
5.2.8. Editando Fechas ......................................................................................................................... 83
5.2.9. Agregando un Video ................................................................................................................... 84
5.2.10. Agregando varias imágenes ................................................................................................... 84
LISTAS DE FIGURAS
Pág.
FIGURA 1 .................................................................................................................................................... 17
FIGURA 2 .................................................................................................................................................... 20
FIGURA 3 .................................................................................................................................................... 21
FIGURA 4 .................................................................................................................................................... 21
FIGURA 5 .................................................................................................................................................... 22
FIGURA 6 .................................................................................................................................................... 22
FIGURA 7 .................................................................................................................................................... 23
FIGURA 8 .................................................................................................................................................... 23
FIGURA 9 .................................................................................................................................................... 24
FIGURA 10 .................................................................................................................................................. 24
FIGURA 11 .................................................................................................................................................. 25
FIGURA 12 .................................................................................................................................................. 25
FIGURA 13 .................................................................................................................................................. 26
FIGURA 14 .................................................................................................................................................. 26
FIGURA 15 .................................................................................................................................................. 27
FIGURA 16 .................................................................................................................................................. 27
FIGURA 17 .................................................................................................................................................. 28
FIGURA 18 .................................................................................................................................................. 28
FIGURA 19 .................................................................................................................................................. 29
FIGURA 20 .................................................................................................................................................. 29
FIGURA 21 .................................................................................................................................................. 30
FIGURA 22 .................................................................................................................................................. 30
FIGURA 23 .................................................................................................................................................. 31
FIGURA 24 .................................................................................................................................................. 31
FIGURA 25 .................................................................................................................................................. 32
LISTAS DE DIAGRAMAS
Pág.
DIAGRAMA 1 ................................................................................................................................... 19
DIAGRAMA 2 ................................................................................................................................... 19
LISTAS DE ANEXOS
Pág. Anexo A.. Titulo 5
1
UNIVERSIDAD COOPERATIVA DE COLOMBIA
RESUMEN ANALÍTICO
1. GENERALIDADES:
A. TIPO DE DOCUMENTO: Proyecto de grado
B. TIPO DE IMPRESIÓN: Procesador de texto
C. NIVEL DE CIRCULACIÓN: Biblioteca de la Universidad Cooperativa de
Colombia
2. TÍTULO: DESARROLLO DE LA APLICACION WEB (HOSPIFLORIDA) PARA
LA ASISTENCIA DE LAS ACTIVIDADES ADMINISTRATIVAS DEL HOSPITAL
SAN JUAN DE DIOS DEL MUNICIPIO DE FLORIDABLANCA- SANTANDER
3. AUTOR: OSCAR JAVIER VARGASGONZALEZ
4. PUBLICACIÓN: Bucaramanga, Universidad Cooperativa de Colombia, de
2011.
5. UNIDAD PATROCINANTE: Universidad Cooperativa de Colombia
6. TEMAS RELACIONADOS: Programación web, diseño grafico
PALABRAS CLAVES: Dinámica de sistemas, Pensamiento sistémico, difusión de
la dinámica de sistemas.
7. DESCRIPCIÓN DE LA INVESTIGACIÓN:
Es un proyecto realizado en la ESE Hospital San Juan De Dios de Floridablanca
Santander por medio de modalidad de grado Practica Profesional con convenio
con la Universidad Cooperativa de Colombia Sede Bucaramanga, En la Cual se
Desarrolla una Aplicación web, la cual mejorara el proceso Convocatorias y
licitaciones ofertadas por el Hospital, dando cumplimiento a los requerimientos de
la Secretaria de salud Departamental.
2
8. FUENTES:
Artículos y libros publicados en la web por los autores relacionados con el tema.
Libros publicados por personal capacitado en el tema, asesorías con personal apto
Para orientar sobre el tema. Personal administrativo del hospital, personal de
jurídica, personal de calidad y planeación, subgerente del hospital de florida.
9. CONTENIDOS:
9.1. JUSTIFICACIÓN:
Siendo el área de los sistemas de información una de las base del sostenimiento
de una empresa, ésta se debe comportar de forma eficiente para garantizar el
buen funcionamiento de la entidad; para ello se requiere de personal capacitado
para su correcto funcionamiento y mejoramiento continuo, efectuando procesos de
actualización con base de los nuevos requerimientos exigidos por HOSPITAL SAN
JUAN DE DIOS.
Dicha entidad no cuenta con suficiente personal capacitado en el manejo de
nuevas tecnologías utilizadas para cumplir los requerimientos exigidos, por esta
razón se hace necesario recurrir a personal con perfil de ingeniero de sistemas
que efectúe esta labor con el fin de garantizar un funcionamiento confiable de los
distintos procesos que se relacionan con los sistemas informáticos.
LA E.S.E. HOSPITAL SAN JUAN DE DIOS DE FLORIDABLANCA, No puede ser
ajena a estas situaciones de cambio, es por ello que dentro de este "Portafolio de
Servicios y Productos de la Canasta Hospitalaria se encontrará programas para la
atención de niveles 1 y 2 en cuanto a educación-prevención y atención en las
áreas de Hospitalización, programas ambulatorios, servicios complementarios,
asistencia en rehabilitación y capacitación del recurso humano para una gran
franja de la población y su área de influencia utilizando el recurso técnico humano
y científico para el beneficio de la comunidad vulnerable que contiene el espectro
del sistema socioeconómico de la estructura social de este país.
3
9.2. ANTECEDENTES Y FORMULACIÓN DEL PROBLEMA:
La ESE HOSPITAL SAN JUAN DE DIOS del municipio Floridablanca es un
establecimiento de disposiciones, normas y reglamentos que comprometen a
todas las instituciones contratantes y prestadoras de servicios de la Salud son el
resultado de acciones emanadas de la ley 100 en procura por una parte de
mejorar el sistema de Seguridad Social y por otra generar agresivamente
situaciones de competencia en la prestación de servicios para la optimización y la
calidad total de los productos y procedimientos para consumo de la clientela
establecida en las políticas de descentralización y de la ley 100.
La ESE HOSPITAL SAN JUAN DE DIOS del municipio Floridablanca no cuenta
con un aplicativo web que cumpla con la LEY ANTITRAMITES DECRETO 019
Enero 10 de 2012. Debido a esto el personal administrativo está teniendo
inconvenientes con el cumplimento de los requerimientos exigidos por la
SECRETARIA DE SALUD DEPARTAMENTAL
9.3. FUNDAMENTOS TEÓRICOS:
Los conceptos más relevantes extraídos de la aplicación web se convirtieron en el
pilar de la elaboración de este proyecto, a continuación se mencionan.(Html, php,
java, dreamviwer).
Los conceptos sobre la terminología de la Salud son aportados por la oficina de
Calidad y Planeación, la cual está encargada del proceso de acreditación,
intervención de los diferentes servicios que se prestan en la institución.
9.4. METODOLOGÍA:
La metodología que se utilizara en el desarrollo de este proyecto es la
metodología espiral, ya que esta metodología es una evolución del método clásico
en cascada y permite flexibilizar y compensar el tiempo de desarrollo total y
alcanzar resultados funcionales en etapas tempranas.
El modelo en espiral se divide en un número de actividades de marco de trabajo,
también llamadas REGIONES DE TAREAS, Cada una de las regiones están
4
compuestas por un conjunto de tareas que se adaptan a las características del
proyecto que va a emprenderse
9.5. ANÁLISIS DE RESULTADOS:
El resultado del proyecto fue el desarrollo de una aplicación web para la ESE
HOSPITAL SAN JUAN DE DIOS del municipio Floridablanca , este proyecto
permite integrar, visualizar e interactuar con la comunidad, en esta aplicación se
podrán visualizar el portafolio de servicios que ofrece el HOSPITAL a la
comunidad (Consulta externa, Vacunación, Laboratorio, etc.)Tendrán visible los
horarios de atención para el usuario y el estado actual es decir horarios de
atención del servicio de Urgencias y consulta externa, de manera que los usuarios
tengan la información en línea, esta información será confiable y ágil ya que el
personal de sistemas del Hospital San Juan de Dios serán los encargados de
administrar y registrar la información.
El usuario podrá dar su opinión y puntuación al servicio.
9.6. CONCLUSIONES Y RECOMENDACIONES:
Este proyecto demuestra el avance tecnológico de la IPS (ESE HOSPITAL SAN
JUAN DE DIOS DE FLORIDABLANCA) quienes podrán cumplir con los
requerimientos solicitados por la SECRETARIA DE SALUD DE SANTANDER
(SSS) y dar cumplimiento a LEY ANTITRAMITES DECRETO 019
Enero 10 de 2012
Se recomienda la innovación y creación de nuevos diseños logos y actualización
de la aplicación para que en una nueva versión se puedan asignar citas online.
10. LUGAR: Universidad Cooperativa de Colombia
REVISÓ: Ing.
FECHA: _________________
5
RESUMEN
TÍTULO: DESARROLLO DE LA APLICACION WEB (HOSPIFLORIDA) PARA LA
ASISTENCIA DE LAS ACTIVIDADES ADMINISTRATIVAS DEL HOSPITAL SAN JUAN
DE DIOS DEL MUNICIPIO DE FLORIDABLANCA- SANTANDER
AUTOR: OSCAR JAVIER VARGAS GONZALEZ
PALABRAS CLAVES: Dinámica de sistemas, Pensamiento sistémico, difusión de la
dinámica de sistemas.
DESCRIPCION:
Este proyecto de grado trata sobre el diseño, desarrollo e implantación de una aplicación
web llamada Hospiflorida, cuyo propósito es contribuir en la difusión de la dinámica de
sistemas en el HOSPITAL SAN JUAN DE DIOS DE FLORIDABLANCA.
Esta herramienta web principalmente está formada por el personal administrativo que
trabajan en la ESE HOSPITAL SAN JUAN DE DIOS DE FLORIDABLANCA.
La principal funcionalidad de la aplicación web es el cumplimiento con la
LEY ANTITRAMITES DECRETO 019 Enero 10 de 2012 donde los usuarios puedan
acceder en tiempo real a: un portafolio de servicios, que le brinde la información necesaria
El desarrollo de esta aplicación aporta a la sociedad un nuevo modelo en atención a sus
usuarios, permitiendo su presencia en Internet teniendo una participación activa con los
clientes.
Teniendo en cuenta que es una red de información debe existir una interacción constante
entre los participantes del sitio, por tal razón se prestó especial atención al diseño y
desarrollo de las funcionalidades, entre las cuales encontramos: Cartelera de noticias,
Envió y recepción de mensajes y foros
6
ABSTRACT TITLE: WEB APPLICATION DEVELOPMENT (HOSPIFLORIDA) FOR THE ASSISTANCE
FOR ADMINISTRATIVE ACTIVITIES OF SAN JUAN DE DIOS HOSPITAL OF THE
FLORIDABLANCA CITY – SANTANDER
AUTHOR: OSCAR JAVIER VARGAS GONZALEZ
KEYWORDS: System Dynamics , Systems Thinking , dissemination of system dynamics .
DESCRIPTION:
This graduation project is about the design, development and implementation of a web
application called Hospiflorida , whose purpose is to contribute to the dissemination of
system dynamics at the Hospital San Juan de Dios of Floridablanca.
This web tool is mainly composed of administrative staff working in the hospital San Juan
de Dios of Floridablanca.
The main functionality of the Web application is compliance with the Anti-paperwork
Decree Law 019 of January 10, 2012 where users can Access in real- time to: a portfolio of
services , which will provide the necessary information.
The development of this application brings to society a new model in response to its users,
allowing its Internet presence having an active role with customers.
Given that it is an information network should be a constant interaction between the
participants of the site, for this reason, a special attention was paid to the design and
development of functionalities , among which we find: Billboard news , sending and
receiving messages and fórums.
7
INTRODUCCION
Los sistemas es uno de los temas que están más sujetos a cambios, en el transcurso del
tiempo ha nacido la necesidad de aplicar nuevos conocimientos y experiencias en todas
las empresas que hagan uso de sistemas de información, ya que son sujetos a los
cambios y a causa de esto nace la necesidad y la oportunidad para que las empresas
adopten nuevas posibilidades que traen un personal capacitado como lo es un
INGENIERO DE SISTEMAS, el cual está capacitado para innovar y ejecutar los cambios
que sean pertinentes a cada caso.
Hospiflorida es el nombre que recibe la aplicación web que ofrece un espacio para
informar a los usuarios, empleados, acontecimientos, licitaciones, eventos, noticias,
jornadas de salud ocurridos en la institución.
El objetivo de este proyecto es otorgar un mejor rendimiento a la E.S.E Hospital San
Juan de Dios de Floridablanca ya que en la actualidad no se cuenta con un aplicativo web
que cumpla con la LEY ANTITRAMITES DECRETO 019 Enero 10 de 2012. El desarrollo
de la aplicación será de gran utilidad ya que ahorrara tiempo y desgaste a la respectiva
administración en procesos dispendiosos.
Viendo lo anterior, se desarrolla una herramienta web, utilizando código HTML MySQL
con conexión a base de datos, que soporta la asignación de actividades, material y
seguimiento de los grupos de trabajo en la E.S.E HOSPITAL SAN JUAN DE DIOS DE
FLORIDABLANCA
8
1. EL PROBLEMA
1.1 DESCRIPCIÓN DEL PROBLEMA
La ESE HOSPITAL SAN JUAN DE DIOS del municipio Floridablanca es un
establecimiento de disposiciones, normas y reglamentos que comprometen a todas las
instituciones contratantes y prestadoras de servicios de la Salud son el resultado de
acciones emanadas de la ley 100 en procura por una parte de mejorar el sistema de
Seguridad Social y por otra generar agresivamente situaciones de competencia en la
prestación de servicios para la optimización y la calidad total de los productos y
procedimientos para consumo de la clientela establecida en las políticas de
descentralización y de la ley 100.
La ESE HOSPITAL SAN JUAN DE DIOS del municipio Floridablanca no cuenta con un
aplicativo web que cumpla con la LEY ANTITRAMITES DECRETO 019 Enero 10 de 2012.
Debido a esto el personal administrativo está teniendo inconvenientes con el cumplimento
de los requerimientos exigidos por la SECRETARIA DE SALUD DEPARTAMENTAL
1.2 FORMULACIÓN DE LA PREGUNTA DE INVESTIGACION
¿De qué manera el desarrollo e implementación de un aplicativo web fortalece los
procesos de difusión y licitaciones, de la ESE HOSPITAL SAN JUAN DE DIOS en el
municipio de Floridablanca Santander fortaleciendo la ley antitramites del 2012?
9
1.3 JUSTIFICACIÓN
Siendo el área de los sistemas de información una de las base del sostenimiento de una
empresa, ésta se debe comportar de forma eficiente para garantizar el buen
funcionamiento de la entidad; para ello se requiere de personal capacitado para su
correcto funcionamiento y mejoramiento continuo, efectuando procesos de actualización
con base de los nuevos requerimientos exigidos por HOSPITAL SAN JUAN DE DIOS.
Dicha entidad no cuenta con suficiente personal capacitado en el manejo de nuevas
tecnologías utilizadas para cumplir los requerimientos exigidos, por esta razón se hace
necesario recurrir a personal con perfil de ingeniero de sistemas que efectúe esta labor
con el fin de garantizar un funcionamiento confiable de los distintos procesos que se
relacionan con los sistemas informáticos.
LA E.S.E. HOSPITAL SAN JUAN DE DIOS DE FLORIDABLANCA, No puede ser ajena a
estas situaciones de cambio, es por ello que dentro de este "Portafolio de Servicios y
Productos de la Canasta Hospitalaria se encontrará programas para la atención de niveles
1 y 2 en cuanto a educación-prevención y atención en las áreas de Hospitalización,
programas ambulatorios, servicios complementarios, asistencia en rehabilitación y
capacitación del recurso humano para una gran franja de la población y su área de
influencia utilizando el recurso técnico humano y científico para el beneficio de la
comunidad vulnerable que contiene el espectro del sistema socioeconómico de la
estructura social de este país.
10
1.4 DELIMITACIÓN
1.4.1 Conceptual.
El presente proyecto tiene una cobertura a nivel de la ESE - HOSPITAL SAN JUAN DE
DIOS del municipio Floridablanca Santander que pretende desarrollar una aplicación web
que otorgue un mejor rendimiento a la E.S.E Hospital San Juan de Dios de Floridablanca.
El desarrollo de la aplicación es de gran utilidad ya que ahorrara tiempo y desgaste a la
respectiva administración.
1.4.2 Espacial.
Este proyecto recopilara y analizara la información referente al desarrollo de una
herramienta web y los marcos jurídicos que intervienen en cuenta la
LEY ANTITRAMITES DECRETO 019 Enero 10 de 2012.
1.4.3 Temporal.
El desarrollo de este proyecto fue realizado en los meses comprendidos de febrero 2014 a
febrero del 2015, en LA E.S.E HOSPITAL SAN JUAN DE DIOS del municipio
FLORIDABLANCA
11
1.5 OBJETIVOS
1.5.1 General.
Realizar un aplicativo web que apoye el proceso administrativo de: planeación, ejecución,
licitación, para la ESE - HOSPITAL SAN JUAN DE DIOS del municipio Floridablanca
Santander
1.5.2 Específicos.
Analizar los requerimientos de la ESE - HOSPITAL SAN JUAN DE DIOS DE
FLORIDABLANCA.
Diseñar el modelo que se implementara en el aplicativo web, teniendo en cuenta los
requerimientos funcionales y no funcionales del cliente final
Desarrollar una aplicación WEB, utilizando el lenguaje de programación HTML y
MySQL.
Realizar las pruebas respectivas a la aplicación web que verifiquen su
funcionalidad.
Realizar un manual de usuario para facilitar el manejo del aplicativo.
12
2. MARCO TEÓRICO1
Actualmente hay que reconocer la importancia de las aplicaciones web, para reconocer los
procesos que se realizan en nuestro país y el mundo, la integración de la sociedad con las
nuevas tecnologías es completa y fácil.
Un sitio web es un sitio (localización) en la World Wide Web que contiene documentos
(páginas web) organizados jerárquicamente. Cada documento (Aplicación web) contiene
texto y o gráficos que aparecen como información digital en la pantalla de un ordenador.
Un sitio puede contener una combinación de gráficos, texto, audio, vídeo, y otros
materiales dinámicos o estáticos.
Una aplicación Web es una herramienta en la cual los usuarios acceden a través de un
servidor web, internet o intranet mediante un navegador, el servidor retorna la información
en formato HTML así que cualquier navegador es capaz de interpretar el código para
poderlo visualizar.
La efectividad de una aplicación web se basa en el protocolo HTTP y HTML.
El protocolo HTTP
Protocolo HTTP ( Hypertext Transfer Protocol), en español "Protocolo de Transferencia de
Hipertexto es un protocolo de conexión que emplea para su funcionamiento un protocolo
de comunicaciones hypertext Transfer Protocol", en español "Protocolo de Transferencia
de Hipertexto", el protocolo de transferencia es el sistema mediante el cual se transfiere la
información entre los servidores y clientes, por ejemplo: Los navegadores
Lenguaje HTML
Es el lenguaje con el cual se definen las aplicaciones web, se trata de un conjunto de
etiquetas que funcionan para definir textos y otros elementos que compondrán la
aplicación web.
Todos los sitios web públicamente accesibles constituyen una gigantesca "World Wide
Web" de información.
1 http://www.monografias.com/ 2 http://www.fotonostra.com/digital/paginasweb.htm
13
2.1 ANTECEDENTES
2.1.1 Históricos.2
En informática, la World Wide Web (WWW) o Red informática mundial comúnmente
conocida como la web, es un sistema de distribución de documentos de hipertexto o
hipermedios interconectados y accesibles vía Internet. Con un navegador web, un usuario
visualiza sitios web compuestos de páginas web que pueden
contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de
esas páginas usando hiperenlaces.
La World Wide Web o www nace a principios de los años 90 en Suiza. Su función es
ordenar y distribuir la información que existe en internet.
La World Wide Web se basa en hipertextos, es decir, páginas en las que se pueden
insertar hipervínculos. Estos conducen al usuario de una página web a otra o a otro punto
de esa web.
Existen sistemas de escritura para las páginas llamados "Lenguaje de marcado". El más
utilizado es el HTML o "Hyper Text Markup Lenguaje" (Lenguaje de marcas de
hipertexto). Con esta escritura se dan las órdenes para que la información se presente de
uno u otro modo en las páginas web. Las marcas ("tags" o etiquetas) permiten dar formato
al texto y combinarlo con otros elementos multimedia. Esta página es un hipertexto HTML.
El protocolo HTTP se creó para que los hipertextos, hipervínculos e hipermedias cumplan
su función. Son las siglas de Hypertext Transfer Protocol o Protocolo de Transferencia de
Hipertexto. Funciona siguiendo cuatro pasos básicos: la conexión, la solicitud, la respuesta
y la desconexión. Es considerado un protocolo sin estado porque no guarda información
sobre las transacciones que hace.
El direccionamiento URL sirve para nombrar la localización de la información a la que
queremos acceder en internet a través de un sistema estándar de caracteres. Cada uno
de los recursos de información en la red tiene una URL única. Con esta dirección el
navegador accede a la página y nos la muestra.
Navegadores y buscadores
Para navegar por internet se necesita un programa que pueda acceder a las páginas web.
Estos programas se llaman navegadores y los más conocidos son Internet Explorer,
Mozilla Firefox y Google Chrome.
2 http://www.fotonostra.com/digital/paginasweb.htm
14
Las páginas web pueden alojar información de todo tipo y pueden contener texto, vídeo,
imágenes, o diferentes aplicaciones. Para encontrar los datos deseados si no se conoce la
URL haremos uso de los servidores de búsqueda o buscadores. Los más conocidos
son Google y Yahoo.
2.1.2 Legales
El desarrollo de esta aplicación web será elaborado a partir de los datos proporcionados
por la ESE HOSPITAL SAN JUAN DE DIOS DE FLORIDABLANCA.
Los logotipos utilizados en esta aplicación web son de propiedad de la entidad, y los
software que se utilizaran para su desarrollo son gratuitos
Al finalizar el desarrollo de este proyecto, se estipula que la aplicación web será propiedad
del Hospital San Juan de Dios del Municipio de Floridablanca.
2.1.3 Investigativos .
Se realizara la aplicación web utilizando la herramienta HTML, Bolt, MySQL, estos
programas son gratuitos y con el cual se podrá trabajar de una forma segura. La
realización del aplicativo permitirá rápida dilución de los conocimientos y noticias, se
aplicaran correcciones a las posibles fallas que se presenten en la entidad, facilitando de
esta manera soluciones rápidas y efectivas.
2.2 BASES TEÓRICAS
3La creación y desarrollo de una página web se realiza bajo un lenguaje de programación
capaz de ser interpretados por los navegadores, lenguajes como el HTML, PHP, ASP,
JSP o RUBY son ejemplos entre otros. Sobre los años 90, era necesario el conocimiento
de algún lenguaje de programación para el desarrollo de una web, siendo una tarea
encomendada a personas con altos conocimientos informáticos, hoy en día contamos con
software especializado capaz de trabajar como un editor de texto ,estilo Word, que
transforman toda la información insertada en un lenguaje de programación capaz de ser
interpretado por los navegadores, de esta forma se liberalizó y se globalizó la creación de
3 http://www.quees.info/que-es-una-pagina-web.html
15
páginas webs con apenas unos escasos conocimientos informáticos, programas como
Dreamweaver, Amaya, Sharepoint Designer o Mozilla Composer son entre otros los
denominados WYSIWYG (acrónimo del inglés " lo que ves es lo que obtienes") capaces
de crear complejas páginas webs con el entorno de un simple editor de texto.
Una vez que hemos creado y desarrollado nuestras aplicaciones webs es necesario
alojarlas en un servidor el cuál lo podemos definir como un ordenador conectado
constantemente a la intranet privada o a internet cuyo objetivo es poder disponer de la
página web a cualquier hora del día. Para poder acceder al servidor es necesario el uso
de programas denominados clientes FTP, los cuales conectan el ordenador personal
donde se ha desarrollado la página con el servidor donde se alojará, Filezilla, FileFTP o
Cute FTP son entre otros ejemplos de clientes FTP.
Por último, una vez alojadas nuestras páginas webs estas son accesibles mediante el uso
de navegadores los cuales permiten visualizar correctamente la información alojada y
desarrollada, Chrome, Mozilla, Internet Explorer y Safari son entre otros ejemplos de
navegadores ampliamente utilizados.
Podemos agrupar o clasificar todas las páginas webs en 2 grandes grupos:
Webs estáticas.
Webs dinámicas.
Las webs estáticas son aquellas cuya información no varía en un tiempo a medio o a corto
plazo, también se las reconoce puesto que no interactúan con el usuario o navegante, su
lenguaje de programación está basado en HTML y están compuestas principalmente de
textos e imágenes.
Las webs estáticas fueron el primer tipo de páginas que aparecieron durante el desarrollo
y expansión de Internet, su creación y desarrollo es relativamente fácil al disponer de
programas estilos editores de texto que nos permiten programarlas sin tener conocimiento
ninguno sobre HTML, esto es una de las grandes ventajas que presentan este tipo de
páginas. Por otro lado cada vez que se necesite modificar alguna parte de la web es
necesario conectarse al servidor donde está alojado y subir los documentos modificados,
cosa que conlleva tiempo y esfuerzo.
Las webs dinámicas son aquellas que son capaces de interactuar con el usuario o
navegante dado a que están conectadas con bases de datos que permiten el desarrollo de
aplicaciones webs, su principal ventaja es la personalización de la web en función del
usuario así como la rapidez de modificación de los contenidos. Este tipo de webs están
16
desarrolladas bajo lenguajes de programación como PHP, ASP, JSP o RUBY, el manejo
de dichos lenguajes requiere de ciertos conocimientos informáticos.
2.4 TERMINOS BÁSICOS
lenguajes HTML, PHP, ASP, JSP o RUBY
Dreamweaver, Amaya, Sharepoint Designer o Mozilla Composer
Filezilla, FileFTP o Cute FTP
Chrome, Mozilla, Internet Explorer y Safari
3. DISEÑO METODOLÓGICO
3.1 TIPO DE INVESTIGACIÓN
La metodología que se utilizó para el desarrollo del proyecto es de tipo no experimental
descriptiva, en la que se basó la observación en tiempo real de las actividades
desarrollada por cada una de las personas, medios y situaciones cotidianas.
3.2 METODOLOGÍA DE INVESTIGACIÓN
La metodología que se utilizara en el desarrollo de este proyecto es la metodología
espiral, ya que esta metodología es una evolución del método clásico en cascada y
permite flexibilizar y compensar el tiempo de desarrollo total y alcanzar resultados
funcionales en etapas tempranas
El modelo en espiral se divide en un número de actividades de marco de trabajo, también
llamadas REGIONES DE TAREAS, Cada una de las regiones están compuestas por un
conjunto de tareas que se adaptan a las características del proyecto que va a
emprenderse.
17
ANALISIS DE REQUERIMIENTOS: En esta fase se analizara la información suministrada
por los departamentos (Jurídica, Ambiental, Control Interna, Estadística, Tesorería) de la
ESE HOSPITAL SAN JUAN DE DIOS DE FLORIDABLANCA.
DISEÑO DEL SISTEMA: En esta fase se establecerá el tipo de topografía, apariencia,
estética, interfaz procesos) Los cuales permitirán un buen funcionamiento en nuestra
aplicación web.
ETAPAS DE CONSTRUCCION: En esta Fase se establecerá el tipo de lenguaje de
programación, motor de base de datos, las herramientas de multimedia y políticas de
seguridad.
TEST Y EVALUACIÓN: En esta fase serializan las pruebas respectivas a la aplicación
web que verifiquen su funcionalidad.
Figura 1
18
3.5 FACTIBILIDAD
Las actividades de esta etapa se refieren a hacer los respectivos chequeos completos
respecto de las funcionalidades y aplicaciones que ofrece el sitio, ya que sean
aplicaciones simples, como formularios, hasta más complejas como consultas y
modificaciones de registros.
4. ASPECTOS DE INGENIERIA DE SOFTWARE
Para el desarrollo del aplicativo web Hospiflorida, desarrollado para la ESE Hospital San
Juan de Dios del Municipio Floridablanca Santander se tiene en cuenta el proceso de
análisis de requerimientos, Se programan las respectivas reuniones con el personal
involucrado en el desarrollo de este proyecto para identificar y establecer la
documentación, textos, imágenes, logos, fondos y colores establecidos por la institución,
para así tener como resultado la aplicación solicitada al estudiante de la Universidad
Cooperativa de Colombia.
4.1 ANALISIS
4.1.2 Análisis de Requerimientos.
En la realización del aplicativo web para el HOSPITAL SAN JUAN DE DIOS DEL
MUNICIPIO DE FLORIDABLANCA, se tiene en cuenta los requerimientos solicitados por
el personal de la institución y la secretaria de salud departamental donde se establece lo
siguiente.
TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN (TICS)
19
4.1.3 Diagrama de Casos de Uso.
Diagrama 1
Fuente: El Autor
4.1.4 Diagramas de Colaboración.
Diagrama 2
Fuente: El Autor
20
Figura 2
Fuente: Libro Rogers Pressman
4.3 DESARROLLO
En la realización del aplicativo web para el HOSPITAL SAN JUAN DE DIOS DEL
MUNICIPIO DE FLORIDABLANCA, encontramos un desarrollo de las actividades
propuestas en un cumplimiento del 100%. Se desarrolla la etapa de la Puesta en Marcha y
Evaluación, en esta fase se comprueba que el aplicativo web este ajustado a las
necesidades iniciales planteadas por la organización, que el contenido sea coherente y
veraz, o si se identifican ajustes realizarnos inmediatamente. Como resultado de esta fase
preliminar se tiene como sugerencia del personal administrativo de la organización, que se
establezca un comité de aprobación, en el cual se verifiquen los resultados obtenidos del
aplicativo, para así implementarlo.
La ESE Hospital San Juan de Dios de Floridablanca, en sus constante compromiso por el servicio a la comunidad del área Metropolitana y a toda el área de influenza, avanza en el Diseño, Desarrollo y Construcción de su nuevo sitioWEB, el cual dará cumplimiento a la Ley AntiTrámites Decreto 019 Enero 10 de 2012 donde los usuarios puedan acceder en tiempo real al portafolio de servicios. Cabe destacar que se dará cumplimiento a la Ley Estatutaria de Salud N° 1756 del 16 de Febrero de 2015, donde las nuevas tecnologías deben formar parte activa del proceso de salud integral del individuo.
21
Capturas de pantalla Página Actual
Figura 3
Fuente: El Autor
Página de inicio del sitio web www.hospiflorida.gov.co el cual cuenta con el menú
desplegable para recorrer el sitio web en su totalidad, noticias actuales, link para visitar la
galería de imágenes y un banner de presentación.
Figura 4
Fuente: El Autor
22
Continuación de la página de inicio donde se muestran noticias actuales, links de galerías,
datos de contacto, menú de accesos rápidos y acceso al correo institucional.
Figura 5
Fuente: El Autor
Galería de imágenes y acceso directo a todas las imágenes
Figura 6
Fuente: El Autor
Una vez se da acceso a cualquier galería se presenta una a una cada imagen para su
visualización
23
Figura 7
Fuente: El Autor
Mediante el menú Historia se tiene acceso a esta página que muestra una breve reseña
histórica de la Institución
Figura 8
Fuente: El Autor
Página que presenta la Misión de la ESE Hospital San Juan de Dios de Floridablanca
24
Figura 9
Fuente: El Autor
El menú desplegable permite el acceso a la página Visión de la Institución
Figura 10
Fuente: El Autor
Dando click en el menú Administración, se muestra esta página donde se muestra el
nombre y cargo del personal administrativo, así como todos los documentos de Ley
cargados a la página por parte de la oficina de Control Interno
25
Figura 11
Fuente: El Autor
El menú Servicios lleva a la página donde se encuentran links de acceso directo a los
diferentes servicios prestados en la Institución, Consulta Externa, Urgencias, Cirugía entre
otros. Y para dar cumplimiento al gobierno en línea se ofrece en el punto 12 la opción al
ciudadano de Peticiones, Quejas, Reclamos y Sugerencias.
Figura 12
Fuente: El Autor
Espacio donde la participación de la comunidad es muy importante y en donde sus
sugerencias serán atendidas oportunamente.
26
Figura 13
Fuente: El Autor
El menú Contratos me abre la página que se muestra en la gráfica, donde la oficina de
Jurídica y Calidad dan cumplimiento a la Ley subiendo a la página la documentación
requerida que esté en su momento vía WEB.
CAPTURAS DE PANTALLA PÁGINA EN CONSTRUCCIÓN
La anterior fue una breve descripción de la página WEB que en este momento se
encuentra en funcionamiento en la ESE Hospital San Juan de Dios de Floridablanca, a
continuación se muestran capturas de pantalla del nuevo Sitio WEB, el cual como se ha
dicho anteriormente se encuentra alojado en un servidor temporal y se encuentra en su
etapa de Desarrollo, de igual forma se puede consultar mediante la dirección
http://hospital.ageartech.com/
Figura 14
Fuente: El Autor
27
Figura 15
Fuente: El Autor
Continuando con la misma página de inicio se aprecian noticias de última hora, una
pequeña descripción de la noticia y acceso a la noticia completa dando click en el título de
esta misma, íconos de acceso a PQRS, Galería de imágenes, ubicación en Google Maps
del Hospital y los últimos eventos para información de la comunidad.
Figura 16
Fuente: El Autor
Más adelante se aprecian las siguientes noticias y un ícono de acceso a videos subidos
en Youtube.
28
Figura 17
Fuente: El Autor
Por último mediante un banner que corre de derecha a izquierda, están todos los íconos
para acceder a los sitios WEB de Gobierno en Línea, Presidencia de la República,
Gobernación, Prosperidad para todos, entre otros, e información de contacto, dirección y
teléfonos del Hospital.
Figura 18
Fuente: El Autor
El menú desplegable en su primera opción Portada me lleva la página de inicio, y en su
segunda opción Nuestro Hospital como se aprecia en la gráfica me da diferentes opciones
entre otras está Presentación, la cual me da una descripción breve de la ESE Hospital San
Juan de Dios de Floridablanca, de la misma forma puedo navegar por las siguientes
opciones que se presentan, Reseña Histórica, Misión, Visión, Recursos Humanos y
Organigrama
29
Figura 19
Fuente: El Autor
La tercera opción del menú desplegable Servicios me da acceso a Consulta Externa (el
cual se muestra en esta captura), Urgencias, Cirugía, Hospitalización, Imagenología,
Laboratorio Clínico, Saneamiento Ambiental, Farmacia y Programas Especiales.
Figura 20
Fuente: El Autor
La opción Contratación en el menú desplegable me presenta esta página de una manera
más amigable y fácil, donde puedo filtrar toda la documentación cargada en la página
WEB por años, así mismo se presenta su consecutivo, Descripción, Fecha de cargue y la
opción mediante un link de hacer su descarga.
30
Figura 21
Fuente: El Autor
La opción Contáctenos me muestra el mapa de la ubicación geográfica exacta de la ESE
Hospital San Juan de Dios de Floridablanca.
Figura 22
Fuente: El Autor
De una manera más amigable para el usuario, se muestra está página donde se brinda
la oportunidad de expresar su petición, queja, reclamo o sugerencia.
31
Figura 23
Fuente: El Autor
La opción del ícono galería me muestra en primera opción una imagen en miniatura de
acceso a todo el contenido fotográfico guardado.
Figura 24
Fuente: El Autor
Una a una se despliega las imágenes que hacen parte de la galería fotográfica.
32
Figura 25
Fuente: El Autor
En esta captura se puede apreciar al costado derecho superior un vídeo el cual se
puede visualizar desde la misma página en la que nos encontramos, o da opción
de verlo directamente desde la aplicación Youtube. Estos videos serán
permanentemente actualizados con los eventos que desarrolla la Institución
permanentemente como son jornadas de vacunación, jornadas de capacitaciones
en lactancia materna, entre otras.
De esta forma al finalizar la etapa de Desarrollo y luego de hacer el cambio de
direccionamiento al nuevo Sitio WEB se dará cumplimiento con todos los
parámetros de Ley descritos anteriormente. Reiteramos que la ESE Hospital San
Juan de Dios de Floridablanca se encuentra comprometida para dar cumplimiento
a lo descrito en el
Ministerio de las TICs y así mismo acatar e ir de la mano con el Gobierno en
Línea, todo en busca de integrar y dar respuesta oportuna y de inmediata a los
requerimientos de todos nuestros usuarios.
33
1. Simpleforms
1.1. Instalando Simpleforms
Simpleforms es una extensión de Bolt. Para instalar, se va a Extras → Ver/Instalar
Extensiones, en el panel de administración ( Figura).
Eso llevará a la página de Extender Bolt. En el cuadro de búsqueda, se escribe
Simpleforms y aparecerá listado, se le da clic al que aparece, y luego en Buscar
Versiones ( Figura).
Se abrirá una ventana modal que indica que Bolt está buscando versiones. Una
vez encontradas, las listará en la ventana modal ( Figura). Cada versión mostrará
un botón para instalarla al hacerle clic. Se recomienda instalar la versión más
reciente.
Bolt empezará a instalar la extensión, lo cual puede llevar varios minutos.
Depende de la conexión a internet del servidor web, y de los recursos que tenga
disponibles.
Para que no haya problemas al instalar extensiones, en el servidor debe estar
instalado Git y OpenSSL.
Una vez instalada la extensión, un archivo de configuración se creará en app →
config → extensions, con el nombre de simpleforms.bolt.yml, el cual se puede
F i g u r a
F i g u r a
34
modificar con las opciones explicadas en la página de Github de la extensión. Las
opciones que se desean cambiar son las del correo desde el cual se envía el
formulario, el correo a donde llega el formulario y la llave pública y privada de
reCaptcha, las cuales se obtienen inscribiéndose en
https://www.google.com/recaptcha/admin/create. Por favor referirse al archivo de
configuración de la página del hospital para ver cómo queda el archivo de
configuración.
4.4 PRUEBAS Y/O VALIDACION
Para finalizar esta etapa se realizan las respectivas pruebas donde se verifica la
funcionalidad del aplicativo y veracidad de la información registrada, entre otros.
Se identifican los colores, formas y logos establecidos por la institución. Se verifica
conexión on-line y funcionamiento a través de los diferentes navegadores y
dispositivos.
En la realización de este proyecto se cumple con el requisito de la secretaria
departamental la cual establece que las entidades de salud públicas deben ofrecer
a los usuarios un portafolio de servicios virtual, el cual les permita consultar los
eventos y consultas ofrecidas por la institución en tiempo real. De igual manera
actualizar su contenido en los tiempos establecidos para cumplir con el reglamento
F i g u r a
35
de las licitaciones. Al realizar las pruebas se puede deducir unas conclusiones
importantes para reflexionar y reforzar, con el fin de llevar a cabo una buena
implementación. Se establecieron los objetivos que se planearon desarrollar y
ejecutar en este aplicativo. Se identificaron las necesidades de la institución para
que así el personal de la organización sean los beneficiarios finales.
4.5 DOCUMENTACION
Manual de Instalación Configuración y edición Software Bold
Manual de Instalación simpleforms
SQL para importar la base de datos
Informe nuevo sitio web de la ESE Hospital San Juan de Dios de
Floridablanca
4.6 CONCLUSIONES
Durante la realización de las prácticas en el Hospital San Juan de Dios del
municipio Floridablanca Santander en conformidad a los requerimientos como
modalidad de grado de la Universidad Cooperativa de Colombia se cumple con los
objetivos de obtener y aplicar conocimientos, habilidades y destrezas, prestando
un servicio de Desarrollo de Aplicación Web y soporte al usuario, de esta manera
aportar al Hospital San Juan De Dios De Floridablanca, ideas innovadoras que
contribuyan al mejoramiento continuo de la entidad, adquiriendo un proceso de
aprendizaje eficiente sobre los procedimientos internos que maneja.
Al concluir esta práctica profesional se logró adquirir un nivel de experiencia
laboral en el ámbito personal y profesional, relacionado con el área de Sistemas,
al estar en contacto con personal capacitado el cual se encargó de guiar y dirigir el
grupo de trabajo.
Desde que ingrese a Hospital San Juan de Dios de Floridablanca comencé
aprendiendo desde lo básico, y al mismo tiempo estuve en contacto con
actividades más avanzadas del área, poco a poco adquirí conocimientos
necesarios para poder desempeñarme exitosamente en las prácticas
profesionales.
36
4.7 RECOMENDACIONES
Al Hospital San Juan de Dios se le recomienda trabajar en la innovación de
información logos diseños e imágenes, así como alimentar la aplicación web con
las últimas noticias, eventos próximos a realizar y videos institucionales para
actualizar el portal implementado en la institución, así como estudiar y analizar
cada factor encontrado en el proceso de implementación.
Igualmente es indispensable llevar un control de las acciones tomadas, así como
de su evolución e impacto.
37
BIBLIOGRAFÍA
WEBGRAFIA
Desarrollos Tecnológicos S.A (www.desarrollostecnológicos.com)
URL: http://poncharutpcat5.blogspot.com/
información sobre los sistemas de información disponible en internet: http://www.econlink.com.ar/sistemas-informacion/definicion
Evolución de los sistemas de información disponible en internet: http://www.dataprix.com/bi-usability-evolucion-tendencia
BIBLIOGRAFIA
OTERO GARCÍA, Alberto, Proyecto web, Editorial UOC, Edición 2007.p.92
SCOTT, Kelby, Manipula tus fotografías digitales con Photoshop CS6, Editorial Anaya Multimedia, Edición 2012, p.544.
MACIA, Fernando, Marketing Online 2.0, Editorial Anaya Multimedia, Edición 2013.
TORRES NAFARRATE, Javier, Introducción a la teoría de sistemas, Primera edición, México, 1996.
38
ANEXOS
39
40
41
42
43
44
1. Introducción
Bolt es un sistema gestor de contenidos con el cual se pueden crear sitios web de
diversos tipos. Es relativamente nuevo, comparado con otros sistemas de gestión
de contenidos existentes, lo cual trae ventajas y desventajas a la hora de usarlo.
Sin embargo, pese a ser nuevo, está construido sobre los frameworks Silex y
Symfony 2, lo que le da más estabilidad y buenas características.
Está licenciado bajo la permisiva licencia MIT, lo que implica que podemos
desarrollar temas, extensiones y realizar cambios al código sin preocuparnos por
publicar y hacer accesibles el código fuente de los temas, extensiones y cambios
realizados.
Se eligió Bolt para el desarrollo del sitio web porque:
Es más rápido de aprender, sin necesidad de pagar cursos adicionales o
durar un mes aprendiendo a modificarlo para que se ajuste a nuestras
necesidades.
Aplica principios de desarrollo más actuales, separando por completo la
presentación del sitio web de la lógica implementada en Bolt, es decir, hay
control total de cómo luce el sitio web.
Añades funcionalidad adicional al sitio web sin tocar una sola línea de
código, únicamente cambiando archivos de configuración.
Este documento explica cómo se creo el sitio web del Hospital de Floridablanca
usando Bolt.
45
2. Instalación
2.1. Requisitos del Servidor Web
Para usar Bolt, el servidor web debe contar con las siguientes características:
• PHP versión mínima 5.3, versión recomendada >= 5.5
• Base de datos MySQL o PostgreSQL.
• Un módulo de sobreescritura de URL (URL rewrite)
• Opcionalmente, pero altamente recomendado, un certificado SSL para
reducir ataques de hombre en el medio a la hora de entrar al panel
administrativo de Bolt.
2.2. Obteniendo Bolt
Como cualquier programa que no se consigue mediante una App Store, Bolt se
obtiene visitando la página oficial, http://bolt.cm, y dando clic al botón “Download
Bolt”, como se ve en la Figura.
F i g u r a
46
La página nos llevará a otra con las opciones para la descarga (ver Figura). Será
suficiente con descargar el archivo ZIP de la última versión estable (Latest Bolt as
Zip). Si se tiene más control sobre el hosting del servidor web, se pueden usar
métodos por línea de comandos y/o composer para instalar Bolt, pero la
explicación de dichos métodos está fuera del alcance de este documento.
Una vez descargado el archivo, lo extraemos en la carpeta deseada del servidor
web, la cual usualmente es un document root (Un directorio raíz) y tenemos
nuestra copia de Bolt lista para ser configurada.
2.3. Preparando la base de datos
Se ejemplificará la preparación de la base de datos usando phpMyAdmin, que es
el panel administrativo más usado de MySQL. Los pasos son idénticos para
PostgreSQL, pero cómo se realizan depende de la interfaz administrativa usada.
Bolt no crea automáticamente la base de datos que necesita para su operación, se
debe crear anteriormente a su inicialización. En phpMyAdmin se crea primero la
base de datos, la cual nombramos como deseemos (ver Figura) y seleccionando
utf8 como codificación (collation) de la base de datos, de lo contrario el texto con
tildes y la letra ñ no se guardará apropiadamente.
F i g u r a
47
Una vez creada la base de datos, se debe crear un usuario el cual tiene todos los
privilegios para crear, alterar y borrar tablas para esta base de datos. Damos clic
en “verificar privilegios” (check privileges, ver Figura) lo cual llevará a una página
donde se pueden editar los privelegios que tienen usuarios en la base de datos, y
para agregar un nuevo usuario. ( Figura)
Al crear un nuevo usuario, hay diversas opciones, pero sólo son importantes
asignarle un nombre al usuario, que se loguea desde el mismo host donde está
Bolt (usualmente, localhost), asignarle una contraseña fuerte (usando Generar del
formulario) y que le concedamos todos los privilegios para la base de datos que
hemos creado. Lo demás se puede dejar en blanco. ( Figura)
F i g u r a
F i g u r a
48
F i g u r a
F i g u r a
49
Para el siguiente paso, se copia el nombre de la base de datos, el nombre del
usuario de la base de datos y la contraseña.
2.4. Configuración Inicial
Una vez preparada la base de datos, se debe configurar Bolt para indicarle que la
use. Cabe destacar que se pueden realizar otras configuraciones adicionales,
previas al primer arranque, las cuales serán mencionadas más adelante en este
documento.
Los archivos de configuración se encuentran en la carpeta app→config. La
instalación en limpio de Bolt tiene configuraciones de ejemplo bajo la extensión
*.dist, el archivo que se modificará será config.yml.dist.
Se realiza una copia de este archivo y lo llamamos config.yml ( Figura). Este
archivo se puede editar con cualquier editor de texto, y viene en el formato YAML
por lo que se deben respetar los espacios encontrados en este, o Bolt indicará que
hubo un error.
Se abre config.yml en un editor de texto, preferiblemente con resaltado de sintaxis
(por ejemplo, notepad++), y se prosigue a editar los campos de base de datos,
nombre del sitio, subtítulo del sitio y locale del sitio. La edición es directa, a
excepción de los datos de la base de datos.
Por defecto, Bolt intetará usar SQLite como motor de base de datos, y este sólo
requiere especificar el driver (sqlite) y el nombre de la base de datos. Nótese que
los campos driver y databasename están precedidos por 4 espacios. Esto es parte
de la sintaxis de YAML y cada campo del bloque database debe estar precedido
F i g u r a
50
por estos 4 espacios o de lo contrario habrá un error al leer el archivo de
configuración.
Se modifica el bloque database, especificando en driver, MySQL (o PostgreSQL si
se configuró la base de datos en ese motor), en databasename, el nombre de la
base de datos, añadiendo los campos (precedidos de los 4 espacios) user, que es
el nombre del usuario que se añadió para la base de datos, y, password, que es la
contraseña del usuario de la base de datos.
El campo sitename es donde se especifica el nombre del sitio web, y payoff es
para especificar un subtítulo, eslogan, llamado de acción, etc., para el sitio web.
Finalmente, el campo locale es donde especificamos la configuración regional que
usará el sitio web, es decir, el idioma y cómo formatea datos como las fechas,
dinero, si se usa coma o punto como separador decimal, etc. Como estamos en
Colombia y el idioma oficial es el español, el locale lo configuramos como
“es_CO”. Este locale debe estar instalado en el servidor donde se hospeda el sitio
web, de lo contrario no funcionará adecuadamente y habrá que usar otro locale
que si esté presente en el servidor. En la Figura se observa un ejemplo de cómo
debe quedar el archivo.
Nótese que el archivo de configuración de ejemplo trae comentarios (estos
empiezan con #) que explican, en inglés, que hace cada campo. El campo theme,
de momento no se modificará, eso se hará cuando se esté personalizando como
luce del sitio web.
51
Hay un campo muy importante para la seguridad del sitio web, el cual está
comentado por defecto, enforce_ssl. Al ponerle un valor de true, hará que al
entrar con la cuenta al sitio web, es decir, al back-end, se hará bajo conexión
https, la cual encripta la información del usuario y ofrece protección contra ataques
hombre en el medio, ataques que pueden robarse las credenciales con las que se
entra a configurar el sitio web. Se recomienda que se compre un certificado SSL y
se active esta opción.
Después de guardar los cambios realizados en config.yml, ya se puede acceder al
sitio web para crear al usuario administrador. Bolt mostrará un formulario (ver
Figura), indicando que no hay usuarios presentes en el sistema. Pedirá un nombre
de usuario, la contraseña (recomendable que sea fuerte, es decir, con números,
mayúsculas, minúsculas, símbolos, de 12 o más caracteres y que no sean
palabras conocidas), confirmación de la contraseña, un correo electrónico para
recuperar la contraseña y un nombre para mostrar (el cual debe ser diferente al
F i g u r a
52
nombre de usuario, por cuestiones de seguridad). Si enforce_ssl está en true, este
formulario aparecerá bajo conexión https.
Una vez creado el primer usuario, Bolt redirigirá hacia la página de inicio de sesión
(ver Figura), donde se ponen las credenciales del primer usuario y así acceder al
back-end del sitio web, desde donde se podrá realizar la configuración y
personalización del sitio web, adicional a crear contenido para mostrar.
F i g u r a
53
F i g u r a
54
3. Configuración
3.1. Panel Administrativo
Una vez iniciada sesión en Bolt, se accederá al panel administrativo del gestor de
contenidos. Desde aquí se añade nuevo contenido a la página web, se modifica el
existente, se accede a la configuración de Bolt, se gestionan los archivos, se crean
o modifican traducciones de los mensajes que Bolt le muestra al usuario, y se
instalan y configuran extensiones.
En la Figura se ve cómo es el panel administrativo y está compuesto de las
siguientes partes:
1. Cuadro de búsqueda: Para buscar contenido del sitio.
2. Link para previsualizar el sitio web.
3. Menú del usuario: Se despliegan las opciones para ver el perfil del usuario
o cerrar sesión.
4. Contenido: Se ve una lista de los tipos de contenido que se pueden crear
en la página web. Al desplegar el menú se ven las últimas entradas
creadas, la opción para ver listar todo el contenido de ese tipo, o crear una
nueva entrada para ese tipo de contenido.
5. Configuración: Aquí están los diversos menús para configurar las distintas
partes de Bolt. Desde aquí se pueden editar prácticamente todos los
archivos que se necesitan, además de unas opciones gráficas. Se
explicarán algunas de sus funciones en secciones siguientes.
6. Mensajes de Sistema: En esta área Bolt nos informará de algunos eventos
del sistema.
7. Contenido reciente: Acceso rápido para crear nuevas entradas para los
diferentes tipos de contenidos, y cuando hay entradas creadas, debajo
muestra las más recientes.
8. Noticias: En esta parte veremos noticias relacionadas con Bolt (importante
para saber cuando una nueva versión está disponible y si debemos
actualizar de inmediato) y la última actividad en el sistema.
55
3.2. Configurando tipos de contenido
Desde el panel administrativo podemos acceder a la configuración de tipos de
contenido. Vamos a Configuración → Tipos de Contenido (ver Figura).
Esto mostrará el archivo contenttypes.yml para su edición, y agregará
automáticamente los espacios precedentes para cada campo en el archivo Yaml.
Al crear un nuevo tipo de contenido, los campos creados automáticamente para
todos son: identificación, slug, fecha de creación e identificación del autor (o dueño
F i g u r a
F i g u r a
56
de la entrada). Los demás campos quedan totalmente libres para ser definidos
según lo que se necesite para el sitio web.
3.2.1. Definición de tipos de contenido
Para definir un nuevo tipo de contenido, se escribe el nombre del nuevo tipo sin
espacios precedentes, seguido de dos puntos, y debajo de este los campos que
tendrá.
La estructura general de un tipo de contenido se ve en la Figura El nombre del
tipo de contenido debe ser en minísculas y sin espacios.
Campos que pueden definirse, son los siguientes:
name: Nombre plural del tipo de contenido que aparecerá en el panel
administrativo.
slug: Es el nombre plural de la ruta que se usará para acceder a una lista
de entradas del tipo de contenido desde el sitio web.
singular_name: Nombre singular que se mostrará en el panel administrativo
para las entradas singulares del tipo de contenido.
singular_slug: Nombre singular de la ruta que se usa para acceder a una
única entrada del tipo de contenido.
description: Descripción corta del tipo de contenido que se mostrará en el
panel administrativo.
fields: Campos que se definen para el tipo de contenido. Estos campos son
los que se llenan al crear una nueva entrada y los que se usarán para
mostrar el contenido en la página web. Más adelante se mostrarán algunos
de los campos que se pueden definir.
record_template: Plantilla que se usa para mostrar una única entrada del
tipo de contenido en el sitio web. Las plantillas definen cómo se mostrará el
contenido y son explicadas en otra sección más adelante.
F i g u r a
57
listing_template: Plantilla que se usa para mostrar una lista de entradas del
tipo de contenido en el sitio web. Las plantillas definen cómo se mostrará la
lista en el sitio web, y se explicarán en otra sección más adelante.
listing_records: Es la cantidad de entradas a mostrar cuando se listan en la
página web.
recordsperpage: Es la cantidad de entradas a mostrar en la vista del panel
administrativo.
taxonomy: Una o más taxonomías que se usan para clasificar las entradas.
Comúnmente son Etiquetas y Categorías.
relations: Uno o más tipos de contenidos con los cuales se relacionará el
actual tipo de contenido. Esto se usa para mostrar en el sitio web contenido
relacionado con el contenido que se visualiza.
default_status: Estado por defecto al crear una nueva entrada. Estos
pueden ser: published (publicado), held (retenido), draft (borrador) y, timed
(temporal).
show_on_dashboard: Cuando no se define, se asume como valor true. Al
ponerle de valor false, el tipo de contenido no será listado en la lista de
recientemente editados del panel de administración.
searchable: Cuando se le pone de valor false, indica que este tipo de
contenido no se mostrará en resultado de búsqueda.
viewless: Cuando se le pone de valor false, hace que rutas no se definan ni
para mostrar entradas ni singulares ni en lista. Es útil para definir recursos
que no se desea que tengan página propia y que sólo son usados por otros
tipos de contenido, o en rutas especiales como la página principal o
mensaje de no encontrado.
3.2.2. Definición de fields
El campo fields de un tipo de contenido tiene una estructura como se muestra en
la Figura. Se recomienda que el nombre sea en miníscula y sin espacios. El
nombre que se muestra en el panel de administración de Bolt se puede definir,
opcionalmente, en el campo label, y una explicación del contenido que debe llevar
el field se puede definir en el campo info.
58
Los siguientes tipos de field se pueden definir:
text: Linea de texto. Adicionalmente se le puede acompañar del campo
class: con los posibles valores de narrow (reducido), large (amplio) y, wide
(extenso) para definir el largo visible en el formulario de nueva entrada.
slug: El slug se genera automáticamente, sin embargo, al definirlo en fields
se puede personalizar a uno más conveniente. Por lo general se le
acompaña con el campo uses: title, para que se genere automáticamente
usando un field con el nombre title (título).
templateselect: permite especificar una plantilla del tema seleccionado, y
cuyo nombre no empiece con un _ (raya piso), la cual definirá cómo se
mostrará la entrada que se edita en la página web. Si se deja en blanco, se
usará la plantilla por defecto.
image: Permite subir una imagen, que puede ser usado por ejmplo como
banner o imagen de portada. Se opcionalmente se especifica attrib, cuyos
valores pueden ser tittle, alt, o [ title, alt ]. El atributo permite definir un título
para la imagen y/o texto alternativo para accesibilidad del sitio web. Se
recomienda que se especifique attrib con alt o [ title, alt ].
imagelist: Permite subir una lista de imágenes las cuales quedan con título
(o nombre) por defecto del nombre de archivo que se sube. Útil para crear
galerías.
file: Permite subir un único archivo. Los tipos de archivo válidos para subir
están definidos en el archivo config.yml, campo accept_filetypes. Se
recomienda que este campo tenga de valor [ gif, jpg, jpeg, png, txt, md, pdf,
epub, mp3, svg ]. Pueden agregarse más extensiones de archivos
permitidos.
filelist: Permite subir varios archivos. Los tipos de archivos válidos que se
pueden subir, son los mismos para file.
html: Permite agregar código html mediante un editor gráfico. Las etiquetas
y atributos html permitidos están definidos en el campo html_cleaner en
F i g u r a
59
config.yml.
textarea: Es como text, pero en lugar de permitir una sóla línea de texto, se
pueden introducir varias líneas de texto.
geolocation: Geolocalización. Inserta un mapa de Google Maps y permite
seleccionar coordenadas del mapa, o se pueden ingresar manualmente. Útil
para mostrar la ubicación de un evento, o de una oficina, usando Google
Maps.
date: Permite insertar una fecha que consiste sólo del día, mes y año.
datetime: permite insertar una fecha que consiste del día, mes, año, hora y
minuto.
integer: permite guardar un número entero entre -2147483648 (-231) y
+2147483647 (231-1).
float: permite guardar un número decimal, con máximo nueve dígitos antes
de la coma y máximo nueve dígitos después de la coma.
Para integer y float se pueden definir los campos min: y max: para especificar un
rango de valores válidos y los cuales deben ser menores o iguales al máximo valor
que pueden guardar. Adicionalmente se puede definir step: el cual especifica
cuanto se le suma o resta al número al usar el contador que se muestra a la hora
de guardar el número.
A los fields se le pueden especificar los siguientes campos que son comunes a
ellos:
label: define el nombre del field que se verá en el formulario de edición de la
entrada.
Info: es un texto de ayuda que se usa para dar una explicación del field (por
ejemplo, con qué datos se debe llenar) en el formulario de edición de la
entrada.
class: aplicable sólo a text, y con el valor wide es aplicable adicionalmente a
date y datetime.
required: al ponerle de valor true, indica que se debe llenar obligatoriamente
el field para poder guardar la entrada.
upload: para image, imagelist, file y filelist, especifica una carpeta donde se
guardarán las imágenes y archivos subidos. Esta carpeta debe ser creada
anteriormente dentro de la carpeta files de Bolt, o de lo contrario al crear
60
una nueva entrada, no se podrán usar los fields para subir los archivos.
group: Crea una pestaña en la pantalla de edición de entrada, para agrupar
fields. Al definir un grupo, se agrupan los fields bajo el último que se definió
hasta encontrar otra incidencia de group.
3.2.3. Definición de Taxonomías
Las taxonomías se definen en otro archivo de configuración, llamado
taxonomy.yml. Este archivo también se puede acceder para editar desde el panel
administrativo, yendo a Configuración → Taxonomías.
La estructura del archivo es similar a la de contenttypes.yml. Se define el nombre
de la taxonomía, junto con unos campos que pueden ser los siguientes:
name: nombre plural que se mostrará en el panel administrativo para la
taxonomía.
slug: nombre plural para la ruta que se usará para listar la taxonomía. Debe
ser el mismo que el nombre de la taxonomía.
singular_name: nombre singular para un único elemento que pertenece a la
taxonomía.
singular_slug: nombre singular para la ruta que se usará para listar
entradas que pertenezcan a un único elemento que pertenece a la
taxonomía.
behaves_like: define el tipo de taxonomía. Puede ser tags, categories y
grouping. Usualmente se usan únicamente categories y tags, ya que
grouping se comporta como un categories pero más estricto (sólo se puede
asignar un grupo, pero categorías se pueden asignar varias).
listing_template: plantilla para listar los elementos que pertenecen a la
taxonomía. Se usa principalmente con taxonomía tipo tags, que no son
predefinidas.
multiple: aplica para taxonomías tipo categories, y al ponerle valor true,
indica que una entrada puede asignársele más de una categoría.
options: aplica para taxonomías tipo categories y grouping. Define el
conjunto de categorías o grupos que se le pueden asignar a una entrada.
postfix: mensaje que se muestra después de la selección de taxonomías,
en el formulario de la pantalla de edición.
61
3.2.4. Definición de relaciones
La relaciones se definen en cada tipo de contenido. Después de escribir relation,
abajo se escribe el nombre del tipo de contenido (con el cual se definión en
contenttypes.yml, no el que se puso en name) y después le siguen los siguientes
campos:
multiple: Puede ser true o false. Indica si las entradas relacionadas a
seleccionar pueden ser únicamente una sola, o una o más.
label: mensaje que se muestra en la pantalla de edición. Ejemplo:
Seleccione un evento.
order: indica cuál field, del tipo de contenido relacionado, se usa para
ordenar en la lista de la pantalla de edición. Si se le antepone un -, se
invierte el orden.
3.2.5. Ejemplo de taxonomy.yml
En este ejemplo de difinición de taxonomías, se definen las típicas que se
encuentran en una página web, que contiene un blog o sección de noticias. Estas
son Etiquetas y Categorías.
Para ambas taxonomías, se definen name, slug, singular_name, singular_slug y
behaves_like. Para Etiquetas, definimos un postfix que indicará al usuario cómo
añadir etiquetas adicionales. Para las categorías, se le asigna el valor true a
multiple, indicando que una entrada puede tener una o más categorías, y se
definen las categorías que se pueden seleccionar en options.
62
3.2.6. Ejemplo de contenttype
Un contenttype por lo general tiene un field que actúa como título del contenido, y
un cuerpo del contenido. El ejemplo muestra un tipo de contenido básico que tiene
una relación con events.
3.2.7. Verificando la base de datos
Después de editar los archivos taxonomy.yml y contenttypes.yml (recomendable
en ese orden), al guardar los cambios en contenttypes.yml, aparecerá un mensaje
(ver Figura) que menciona que la base de datos necesita ser actualizada o
reparada. En este mensaje está un enlace a la sección Verificar base de datos.
tags:
name: Etiquetas
singular_name: Etiqueta
slug: tags
singular_slug: tag
behaves_like: tags
postfix: "Añade etiquetas libres. Una nueva etiqueta se añade escribiendo una coma o un espacio."
categories:
name: Categorías
slug: categories
singular_name: Categoría
singular_slug: category
behaves_like: categories
multiple: true
options: [ anuncios, eventos, información, logros, medicina ]
news:
name: Noticias
slug: noticias
singular_name: Noticia
singular_slug: noticia
fields:
title:
type: text
class: large
label: Título
slug:
type: slug
uses: title
body:
63
Al dar clic en el enlace, se verá la sección de Verificar / Actualizar base de datos,
la cual indicará cuáles son las inconsistencias en la base de datos (ver Figura). Al
hacer clic en Actualizar la base de datos, se añadirán las tablas, columnas y datos
que hacían falta, pero no se eliminarán las tablas o columnas de tipos de
contenidos que ya no se usarán. Al dar clic y después de actualizar la base de
datos, Bolt muestra un mensaje con las operaciones realizadas (ver Figura).
F i g u r a
64
Bolt trabajará normalmente aún si no se eliminan las columnas y tablas que ya no
se usarán, y es recomendable eliminarlas para ahorrar espacio (lo cuál es
importante en hosting con recursos compartidos). Para eliminarlas, se debe ir al
administrador correspondiente de la base de datos, hacer copia de seguridad de la
F i g u r a
F i g u r a
65
misma (no es necesario, pero recomendable) y se elimina lo que no se necesite.
Los pasos necesarios para la realización de estás operaciones, están fuera del
alcance de este manual. Consulte la documentación correspondiente al motor de
base de datos que decidió usar para Bolt.
Una vez actualizada la base de datos, se podrán agregar nuevas entradas para
cada tipo de contenido desde el panel administrativo (ver Figura), la cual reflejará
los cambios efectuados en contenttypes.yml y en la misma base de datos.
F i g u r a
66
4. Presentación de la página web
4.1. Plantillas
Para visualizar la información en la página web tal y como se desea, Bolt usa Twig
para las plantillas. Estas plantillas se dividen básicamente en tres tipos:
Plantillas auxiliares, que se incluyen en otras, cuyo nombre empieza con un
_ (raya piso).
Plantillas para entradas concretas, es decir, para una entrada única de un
tipo de contenido.
Plantillas para listar entradas, es decir, para hacer una lista de entradas de
un tipo de contenido o taxonomía.
El contenido de las plantillas, es decir, código html, css y javascript es totalmente
decido por el diseñador y/o desarrollador del sitio web a implementar, Bolt no
impone restricciones, ni clases CSS, ni elementos HTML que se deban usar
obligatoriamente.
4.1.1. Plantillas por defecto
Cuando no se especifica en contenttypes.yml las plantillas que se usarán para
cada uno de los tipos de contenido, o no se especificó plantillas generales en
config.yml, Bolt buscará primero por las plantillas por defecto. Estas son las
siguientes:
Para una sóla entrada, Bolt buscará una plantilla con el nombre
especificado en singular_name, por ejemplo noticia.twig. Si no encuentra
esta plantilla, Bolt usará record.twig para renderizar la entrada.
Para una lista de entradas, Bolt buscará una plantilla con el nombre
espeficado en name, por ejemplo noticia.twig. Si no encuentra esta plantilla,
Bolt usará listing.twig para renderizar la lista de entradas.
4.1.2. Plantillas Auxiliares
Para las plantillas que se usan para mostrar contenido en la página web, se
recomienda que estas incluyan plantillas auxiliares para los elementos
compartidos.
Elementos compartidos típicos son: el encabezado, el menú de navegación, barra
lateral, slider, paginación, y pie de página. Cada elemento compartido define una
plantilla auxiliar las cuales son _header.twig, _sub_menu.twig, _aside.twig,
_slider.twig, _sub_pager.twig y _footer.twig respectivamente para los elementos
67
anteriormente mencionados.
Para incluir una plantilla auxiliar dentro de otra plantilla (sea auxiliar o no) se usa la
función:
{% include 'nombre_plantilla_auxiliar' %}
Esta función insertará la plantilla como si se hubiera escrito en la misma plantilla
que se llama. Puede ir dentro de cualquier etiqueta de html.
Para el caso del menú de navegación, es necesario usar una función diferente, la
cuál creará enlaces válidos al incluir _sub_menu.twig. Esta función es la siguiente:
{% menu('nombre_del_menu', '_sub_menu.twig') %}
El nombre del menú está definido en el archivo menu.yml, donde también se
definen sus elementos. Observe el archivo de ejemplo que trae Bolt por defecto
para entender cómo crear menús propios.
4.1.3. Mostrando contenido en las plantillas
Dependiendo de si se accede una entrada o una lista de entradas, Bolt pondrá a
disposición las variables record y records respectivamente, para acceder al
contenido. El valor de estas variales depende de la ruta a la cual se accede. Esta
ruta viene definida por el slug del tipo de contenido o de la taxonomia. Los campos
que contienen estas variables, entonces depende de los campos definidos para el
tipo de contenido o taxonomía que se están pidiendo.
Para saber los contenidos de la variable se puede usar la función
{{ dump(variable) }}. Nótese que la función está encerrada entre doble corchetes.
Cuando una función o variable está encerrada entre doble corchetes, significa que
se está imprimiendo para visualizar en pantalla.
Generalmente, cuando se usa la plantilla designada para el tipo de contenido, o
para la taxonomía designada, se tiene conocimiento de que campos tienen las
variables record y records. Para iterar sobre records se usa el bucle for:
{% for record in records %}
… instrucciones…
{% endfor %}
Para acceder a los campos de las variables, se usa: variable.nombre_campo. El
algunos casos, para acceder a los contenidos de una taxonomía o tipo de
contenido, es necesario anteponer value entre la variable y el nombre del campo,
por ejemplo: noticias.value.body.
68
Para obtener resultados de otros tipos de contenido, se usa la función setcontent:
{% setcontent nombre_variable = 'tipo_de_contenido' %}
En tipo_de_contenido, puede ir: el nombre del tipo de contenido (el que se definió
en slug), el nombre de una entrada en particular (el singular_slug del tipo de
contenido, / (slash) y el slug de la entrada o el id de la entrada) o el nombre del
tipo de contenido y una consulta. Ejemplos:
{% setcontent news = 'noticias' %} → obtener listado de noticias.
{% setcontent new = 'noticia/nueva-sede-abierta' %} → obtener una noticia
en particular.
{% setcontent new = 'noticia/3' %} → obtener noticia con id 3.
{% setcontent news = 'noticia/latest/7' %} → obtener últimas 7 noticias.
{% setcontent news = 'noticia/first/7' %} → obtener primeras 7 noticias.
{% setcontent news = 'noticias' where { etiquetas: 'obra || clínica' } %} →
obtener noticas que tienen las etiquetas obra y/o clínica.
Para más información de cómo obtener datos en las plantillas, consulte la
documentación de Bolt.
4.2. Temas
Un tema es una carpeta localizada en themes, que consiste en un conjunto de
plantillas, carpetas adicionales para guardar archivos y un archivo config.yml para
definir parámetros de configuración, los cuales pueden sobreescribir o ser
adicionales a los definidos en el config.yml de Bolt (el localizado en app → config).
El mínimo de plantillas que deben estar en un tema son index.twig que define la
portada o primera página que se ve al acceder el sitio, record.twig que define
cómo se verá una entrada particular al accederla, y, listing.twig que define cómo
se verá una lista de entradas de un tipo de contenido.
Se pueden definir plantillas auxiliares que pueden ser incluidas en las principales.
Estas plantillas se usan para definir elementos comunes, que se repiten, como son
el encabezado, el pie de página, una barra lateral, una galería de imágenes, un
menú de navegación, etc.
4.3. Tema hospital
El tema creado para el sitio web del hospital está conformado por los siguientes
componentes:
69
css: es la carpeta donde se guardan las hojas de estilo que se usan para el
tema. Contiene main.css que define los estilos propios del sitio web, y
bootstrap.min.css que es la versión 3.3.4 minificada de bootstrap, la cual es
necesaria para que respond.js trabaje y haga que bootstrap funcione en
internet explorer 8. Para obtener la ruta a estas hojas de estilo en las
plantillas se debe usar {{ paths.theme ~ 'css/nombre-css.css' }}.
images: es la carpeta donde se guardan las imágenes usadas por el tema.
Está la imagen loading.gif, en la raíz de la carpeta, y se usa para mostrar
que se está ejecutando una consulta Ajax. Dentro de la carpeta, están las
subcarpetas footer para las imágenes de pie de página, header que guarda
el logo y la imagen de encabeza de la página web, sidebar que guarda las
imágenes de los links que van en la barra lateral, y slider que guarda las
imáges para un slider estático de imágenes. Para la ruta a las imágenes en
las plantillas se debe usar {{ paths.theme ~ 'images/ruta-imagen' }}.
js: es la carpeta donde se guardan scripts de javascript que se usarían en la
página web. Actualmente se encuentra vacía, sin embargo se podrían crear
los scripts para los sliders que se usan en la página web, pero como son
scripts cortos no se vio la necesidad de implementarlos por separado.
Plantillas principales: Hay varias plantillas que se usan en el sitio web y
estas están en la raíz de la carpeta. No siguen una norma consistente de
nombres, se intentó usar sólo nombres en inglés pero hay dos plantillas que
tienen el nombre en español. Esto se puede arreglar nombrando
explícitamente en contenttypes.yml las plantillas para el listado de galerías,
listado de contratos y el listado de eventos. Las siguientes plantillas están
definidas:
*page.twig: las plantillas que finalizan en page.twig son usadas por el
tipo de contenido de pages. La plantilla infopage.twig es la plantilla
estándar para mostrar contenido típico de las páginas, se usa para
mostrar la información del hospital y de los servicios que ofrece;
contactpage.twig se usa para mostrar la información de contacto;
contractpage.twig se usa para listar los archivos de contratos; y
pqrspage.twig se usa para mostrar el formulario de peticiones, quejas y
reclamos.
contratos.twig: se llama mediante una consulta Ajax que está en
contractpage.twig, para listar los contratos de determinado año.
eventos.twig: lista todos los eventos, ordenándolos de forma
70
descendente por la fecha en que se terminan.
eventsitem.twig: muestra el contenido de un evento en particular.
galerias.twig: lista las galerías que se han agregado a la página web.
gallery.twig: muestra el contenido de una galería de imágenes en
particular. Se muestra como un slider de imágenes.
listing.twig: plantilla por defecto para listar contenido. Es la que se usa
para listar las noticias o entradas del blog. También se puede usar para
listar tipos de contenido que no definieron su plantilla de listar propia.
newsitem.twig: muestra el contenido de una sola noticia.
simpleforms_form.twig: se usa para mostrar el formulario de peticiones,
quejas y reclamos.
simpleforms_mail.twig: se usa para formatear el mensaje que llega al
correo electrónico cuando se envía una petición, queja o reclamo.
Plantillas auxiliares:
_aside-noev.twig: barra lateral que no muestra eventos próximos.
_aside.twig: barra lateral que muestra los dos eventos más recientes o
próximos.
_featured.twig: slider con el contenido destacado de la página web.
_footer.twig: pie de página que incluye un slider de links a páginas
definidas en config.yml del tema.
_header.twig: encabezado de la página web que incluye las hojas de
estilo y las bibliotecas de javascript que se requieren para internet
explorer.
_logo-full.twig: muestra el la imagen del logo completo de la página web.
Incluye opción para mostrar el logo parcial con texto, para su correcta
visualización en smartphones.
_logo.twig: muestra la imagen del logo parcial con texto condicionado
por clases de bootstrap, para su correcta visualización en smartphones.
_sidevideo.twig: componente que se incluye en la barra lateral para
insertar un video.
71
_static-slider: slider estático que muestra imágenes con los valores del
hospital.
_sub_menu.twig: menú de navegación que se incluye en _header.twig.
La variable menu viene definida para acceder a los elementos definidos
en app/config/menu.yml.
_sub_pager.twig: elemento para paginar contenido. Se usa en los
listados de contenido y en la página principal para poner links del
número de página actual.
Las plantillas no mencionadas aquí, hacen parte de las que traía el tema base y
que se usan para la parte de desarrollo y mantenimiento, además del formateo de
formularios.
72
5. Contenido de la página web
5.1. Tipos de contenido definidos
Para la página web del hospital se definieron 6 tipos de contenido, con uno de
ellos usado como recurso.
1. pages: es el tipo de contenido usado para las páginas estáticas del sitio
web. Se usa para la información del hospital, servicios, el formulario de
peticiones, quejas y reclamos, y para el listado de contratos. Consta de un
título, un cuerpo para el contenido, selección de la plantilla a usar (la cual
termina en page.twig), una imagen y un campo para poner coordenadas de
mapa.
2. news: se usa para el blog del sitio web. Se le llamó noticias ya que son más
que todo acontecimientos relacionados con el hospital. Consta del título,
una imagen de portada, el cuerpo del contenido y una opción para indicar si
es una noticia destacada.
3. events: usado para añadir eventos que organiza el hospital o en los cuales
el hospital participa. Consta del título, la fecha en que inicia, la fecha en que
termina, una imagen opcional, una descripción, un mapa opcional para
indicar el lugar del evento y, una opción para indicar que es un evento
destacado.
4. sidevideo: es un tipo de contenido que se usa como recurso, es decir, no
tiene rutas propias para listarlo o para ver una entrada en particular. Se usa
para insertar un video en la barra lateral de la página web.
5. contract: es el tipo de contenido usado para subir los archivos de contrato.
Consta de un título, el campo para el número del contrato, la fecha de
publicación del contrato, y el campo para subir el archivo del contrato, el
cual es usualmente un pdf.
6. gallery: se usa para crear galerías de imágenes. Consta de un título, un
campo de lista de imágenes con el cual se subirán varias imágenes, y un
campo de una imagen que se usará como portada, la cual es opcional.
5.2. Edición de Contenido
No se explicará a detalle cómo se edita cada tipo de contenido definido para el
sitio web, ya que se puede apreciar que comparten elementos entre sí. Se
explicará es como funciona la edición de cada elemento.
73
5.2.1. Añadiendo contenido
El contenido nuevo se puede añadir de diversas formas. Si se encuentra en el
Escritorio del panel administrativo, se puede dar clic en el menú Agregar… (ver
Figura( Adicionalmente, se puede usar la barra lateral para ver el listado de tipos
de contenido y acceder a un menú (ver Figura) para añadir nuevo contenido, ver
el listado del contenido o editar los más recientes.
F i g u r a
74
Una vez se decide que contenido se desea añadir, se le da clic a la
correspondiente acción de +Agregar lo cual llevará a la página de edición. La
página de edición mostrará los distintos elementos del contenidos agrupados en
pestañas si se especificaron grupos para este.
5.2.2. Editando el título y slug
Como se configuró que el slug o enlace permanente, como aparece en la página
de edición, para que use el título, editar los dos van de la mano.
Editar el título es directo, sólo se escribe en el campo lo que se desea como título
del contenido. Al ir escribiendo, el enlace permanente se irá actualizando según lo
escrito en título, siempre y cuando el candado que aparece a la derecha esté
abierto, como se ve en la Figura. Al hacer clic en el icono de lapiz, se abre una
ventana modal ( Figura) que permite establecer el valor del enlace permanente al
valor que se quiera.
F i g u r a
75
Al usar la ventana modal para establecer el slug, hará que se bloquee este, es
decir, que no cambie al modificarse el título (ver Figura).
De este modo se puede establecer un slug diferente al título del contenido, pero se
recomienda que el título y el slug estén relacionados y no sean totalmente
distintos.
F i g u r a
F i g u r a
76
5.2.3. Editando el cuerpo del contenido
El cuerpo del contenido es un elemento html, y en la página de edición este se
modifica con un editor WYSIWYG (What You See Is What You Get, lo que ves es
lo que obtienes), o editor visual (ver Figura), el cual puede convertirse en un editor
de texto con el cual se puede modificar el código html.
Este editor, luce como Wordpad, o como Microsoft Word lucía antes. Permite
insertar estilos de texto (ver Figura), poner el texto en negrita, en itálica,
subrayado, tachado, insertar listas o un bloque de cita, enlaces a otras páginas
web, insertar imagen, video, tabla, carácter especial, borrar formato o cambiar
entre edición visual o edición del html.
F i g u r a
77
F i g u r a
78
Como se usa Bootstrap para mostrar el contenido en la página web, es importante
tener cierto conocimiento de este para hacer que el contenido luzca como se
desea. Por ejemplo, al insertar una imagen, si se desea que quede centrada, se
debe especificar que la clase sea center-block como se ve en la Figura.
F i g u r a
79
También se puede especificar las clases directamente en el código html.
5.2.4. Selección de plantilla
La selección de plantilla es una lista desplegable que muestra las plantillas
disponibles para seleccionar. Al darle clic se muestra las plantillas disponibles. Si
aparece el nombre del archivo de plantilla, como se ven en la Figura, quiere decir
que no están configurados los nombres de plantilla en config.yml en el tema.
Para definir nombres para las plantillas, se agrega el elemento templateselect,
cuyo nodo hijo es templates, la cual está completa por listas que especifican el
nombre que se verá de la plantilla y el archivo twig asociado. En la Figura se
observa como quedaría la sección de nombres de plantilla.
F i g u r a
80
Y en la selección de plantillas se vería reflejado el cambio, mostrando ahora los
nombres de las plantillas en lugar del nombre del archivo de cada plantilla (ver
Figura).
F i g u r a
F i g u r a
81
5.2.5. Agregando una imagen o archivo
Añadir una imagen ( Figura), que usualmente se usa de portada para el contenido,
o un archivo, se puede hacer de distintas formas. Si la imagen o archivo, está en
el equipo donde se está editando el contenido, se puede seleccionar haciendo clic
en Subir imagen, lo cuál abrirá una ventana modal del sistema para seleccionarle.
Si la imagen se encuentra ya subida, se puede escribir el nombre en el campo de
texto y Bolt intentará autocompletar el campo. También se puede seleccionar
haciendo clic en Seleccionar desde el servidor o en Seleccionar de la pila. La pila
son los archivos recientes que se han subido al servidor, y está disponible para
todos los tipos de contenido al final de la barra lateral derecha (ver Figura).
F i g u r a
F i g u r a
82
5.2.6. Añadiendo Mapa de Ubicación
Añadir un mapa en el contenido (ver Figura), no es tan sencillo en ciertas
ocasiones. Se puede añadir la ubicación mediante el cuadro de búsqueda de
direcciones o especificando las coordenadas de la ubicación. A la derecha se verá
una vista previa del mapa del resultado de la búsqueda.
La búsqueda de direcciones no siempre mostrará la dirección exacta que se está
buscando y podría mostrar una dirección aproximada o una ubicada en otro país o
departamento. Cuando eso sucede se puede ir a la página de Google Maps y
buscar la dirección allí, ya que ofrece muchas opciones. Una vez ubicada la
dirección que se desea, se da clic derecho al marcador y luego clic en ¿Qué hay
aquí?, lo cuál mostrará un cuadro de diálogo con información del marcador,
incluyendo la latitud y longitud, como se ve en la Figura.
F i g u r a
F i g u r a
83
Sabiendo la latitud y longitud de la dirección que se busca, se pueden ingresar
manualmente en el contenido. El resultado final podría verse como en la Figura.
5.2.7. Indicando contenido destacado
Para indicar que el contenido es destacado, simplemente se hace clic en el
recuadro de destacado, esto hará que aparezca un visto bueno (ver Figura).
5.2.8. Editando Fechas
Editar una fecha es sencillo, se puede escribir la fecha en formato día/mes/año,
escribiendo el número del día y del mes con dos dígitos (se antepone un cero si es
menor a diez), o se puede hacer clic en el ícono del calendario el cuál desplegará
uno para seleccionar la fecha que se desea (ver Figura). Las fechas pueden venir
con una hora, la cuál se especifica en formato de 24 horas, es decir, de 00:00 a
F i g u r a
84
23:59.
5.2.9. Agregando un Video
Agregar un video es sencillo, simplemente se copia y pega en el campo la
dirección web del video de youtube (ver Figura) y Bolt intentará detectar si es un
video válido, el cual se puede previsualizar. Sólo son válidas direcciones de videos
de youtube ya que el tema hospital incluye código de javascript que toma el ID del
video de youtube y lo inserta en el código correspondiente para hacerlo un video
responsivo (es decir, que se ajusta al tamaño de la vista).
5.2.10. Agregando varias imágenes
Agregar varias imágenes, se hace por medio de un campo (ver Figura) que es
idéntico al de subir imágenes o archivos (ver Figura).
F i g u r a
F i g u r a
85
La diferencia es que se puede seleccionar más de una imagen en lugar de una
sola, y que hay un botón adicional, para remover los seleccionados. Una vez
seleccionadas la imágenes y terminadas de subir, se verá una vista previa de las
mismas, seguidas con un campo de texto donde se puede poner un corto texto
descriptivo o nombre a la imagen (ver Figura). Por defecto, este campo tiene el
nombre del archivo de la imagen subida. A la derecha de cada recuadro en la lista
de imágenes, hay una X, la cual al hacerle clic, elimina la imagen de la lista pero
no del servidor.
F i g u r a
F i g u r a
86
Tecnologías adicionales
Tecnologías usadas para la creación del sitio web con Bolt adicionales fueron las
siguientes:
1. Slick: Es un Slider o carrusel que requiere de JQuery, el cual fue usado
para la tira de logos en el pie de página, los álbumes en las galerías de
imágenes, y en la presentación de imágenes con los valores del hospital,
así como también en la opcional presentación de contenido destacado. Es
fácil de usar y trae diversos ejemplos en su página oficial.
2. JQuery: Una popular biblioteca de javascript que permite manipular la
página web para crear animaciones, cargar contenido dinámicamente y
modificar la presentación y contenido de la página. Slick y Bootstrap
dependen de esta biblioteca para funcionar correctamente. La versión
usada es la 1.9.1 que es la última compatible con internet explorer 8. Se
usa Jquery en directamente en dos plantillas del tema del hospital. Se usa
en contractpage.twig para cargar dinámicamente la lista de contratos según
el año seleccionado, además de crear la animación de carga. Se usa
también en _footer.twig para tomar la URL del video de youtube insertado
en un div escondido (con la clase hidden de Bootstrap), extraer el ID del
video y armar la URL del video empotrado de youtube. Página oficial.
3. Bootstrap: Es un front-end framework muy conocido con el cual se crea la
interfaz de la página web. Agiliza el desarrollo ofreciendo herramientas
comúnmente implementadas y usadas en las páginas web, además de
hacer el sito web dinámico y que se ajuste según el tamaño de la pantalla,
ideal para hacer el sitio accesible en smartphones. Los elementos que más
se usaron de Bootstrap fue el sistema de grillas, el cual permite organizar el
contenido en columnas, las cuales cambian de tamaño según el tamaño de
la pantalla o ventana; La barra de navegación, la cual se usa para acceder
a distintas partes del sitio web; paginación, para numerar las páginas de
contenido; y, video e imágenes responsivas, que son clases para hacer que
estos elementos ajusten su tamaño según el tamaño de la pantalla o
ventana. Página Oficial.
4. CDN: Red de entrega de contenidos, o content delivery network por sus
siglas en inglés. Son sitios web que hospedan versiones de bibliotecas de
javascript, hojas de estilo y archivos usados por estos, cuyo propósito es
acelerar el acceso a estos, sin alentar el sitio web o consumir ancho de
banda de nuestro servidor web. Se usaron para cargar todas las bibliotecas
87
de javascript que se usaron en la página web, así como también algunos
temas usados por estas bibliotecas.
5. Font Awesome: es un conjunto de herramientas de hojas de estilo (CSS)
para fuentes e iconos, que se usó para mostrar principalmente los íconos
de la barra de navegación de la página web. Página oficial.
6. Google Fonts: Se usó el servicio de Google Fonts para cargar la fuente
Source Sans Pro, la cual se usó en todo el sitio web como la fuente
principal, siendo la familia sans-serif la de respaldo por si Source Sans Pro
no se cargaba. Página Oficial.
7. Compatibilidad con IE8: Para lograr la compatibilidad del sitio web con
IE8, se usaron cuatro bibliotecas de javascript, las cuales son: HTML5 Shiv,
la cual permite usar las etiquetas de seccionado de html5 que internet
explorer 8 no reconoce; NWMatcher para implementar selectors de CSS3;
selectivizr para emular las pseudo-clases de CSS3 y los selectores de
atributos; y Respond.js, un polyfill para las media queries min/max-width de
CSS3.