Embed Size (px)
Citation preview
UNIVERSIDAD TECNOLÓGICA DE LA SELVA
REPORTE DE ESTADÍA TITULADO “PÁGINA WEB DE NOTICIAS Y ARCHIVOS
DEL H. AYUNTAMIENTO MUNICIPAL”, REALIZADA EN LA CIUDAD DE YAJALÓN,
CHIAPAS,
QUE PRESENTA EL
C. ELVER VICENTE MENESES PEÑATE.
COMO REQUISITO PARA OBTENER EL TÍTULO DE:
TÉCNICO SUPERIOR UNIVERSITARIO EN TECNOLOGÍAS DE LA
INFORMACIÓN Y COMUNICACIÓN ÁREA SISTEMAS INFORMÁTICOS.
ASESOR EMPRESARIAL
ING. RODRIGO DARINEL VALDIVIEZO
LANG
ASESOR ACADÉMICO
ING. WILBER PEÑALOZA MENDOZA
REVISOR ACADÉMICO
MTRA. XOCHITL CLEMENTE PARRA
OCOSINGO, CHIAPAS, AGOSTO DE 2012
1
AGRADECIMIENTOS
Agradezco a la Universidad Tecnológica de la Selva, representada ante sus
autoridades superiores y profesores por este reconocimiento de los 2 años de
estudio y haberme permitido desarrollar y mejorar mis habilidades en un ambiente de
libertad espiritual. A nombre propio y de mis compañeros agradezco infinitamente a
esta institución.
Al mismo tiempo agradezco al H. Ayuntamiento Municipal de Yajalón, Chiapas, por
haberme dado la oportunidad de realizar mi Estancia-Estadía y poner en práctica las
habilidades y destrezas que poseo.
A mi asesor académico el Ing. Wilber Peñaloza Mendoza, y a mi asesor empresarial
el Ing. Rodrigo Darinel Valdiviezo Lang, expreso mis más sinceros agradecimientos
por la gentileza de haberme apoyado en las revisiones y correcciones de mis
reportes mensuales.
Agradezco a mis compañeros Nicolás Montejo Álvaro e Isidro Jiménez Ramírez, que
estuvieron conmigo durante mi Estancia-Estadía para resolver mis dudas y al mismo
tiempo en el desarrollo de este proyecto.
A sí como también agradezco infinitamente a Dios y a mi Familia que me han
apoyado en lo moral, material, y económicamente durante mis dos años de estudio.
A mi madre: por sus consejos que me ha dado y el apoyo incondicional.
A mi padre: por su confianza y sus consejos que me ha dado durante mis estudios.
A mi hermana: Graciela Meneses Peñate por ser una buena motivadora y por
haberme apoyado en los momentos difíciles.
Gracias.
II
ÍNDICE
I. INTRODUCCIÓN .................................................................................................. 1
I.1 Conceptualización de la Estadía .................................................................. 1
I.2 Contextualización......................................................................................... 2
I.2.1 Localización geográfica de la empresa .......................................... 3
I.2.1.1 Nivel Estatal ................................................................................ 3
I.2.1.2 Nivel Municipal ............................................................................ 4
I.2.2 Giro y tamaño de la empresa .................................................................... 5
I.2.2.1 Organigrama Municipal Yajalón 2010–2012................................ 6
I.2.3 Área de influencia ..................................................................................... 7
I.2.4 Objetivos de la empresa ........................................................................... 7
I.2.4.1 Visión .......................................................................................... 8
I.2.4.2 Misión .......................................................................................... 9
II. DESARROLLO ................................................................................................... 10
II.1 Marco referencial ...................................................................................... 10
II.1.1 Microeconomía de la empresa ................................................... 10
II.1.2 Área motivo de estudio ............................................................... 11
II.1.3 Desarrollo del Objetivo. .............................................................. 12
II.2. Estado del arte ......................................................................................... 13
II.2.1 Marco histórico ............................................................................ 13
II.2.2 Concepto de accesibilidad y usabilidad ....................................... 14
II.2.3 Principios del diseño Web ........................................................... 19
II.2.4 Pautas a seguir para un buen diseño según la W3C .................. 20
II.2.5 Patrones a utilizar ........................................................................ 23
II.2.6 Páginas web desarrolladas ......................................................... 25
II.2.7 Software de desarrollo ................................................................ 27
II.3 Materiales y métodos ............................................................................... 30
II.3.1 Metodología utilizada .................................................................. 31
II.4. Procesamiento de resultados, análisis y discusión .................................. 33
III
II.4.1 Inicio ............................................................................................ 34
II.4.1.1 Análisis de requisitos ................................................................ 34
II.4.1.2 Descripción del proyecto .......................................................... 34
II.4.1.3 Objetivo de la aplicación .......................................................... 35
II.4.2 Elaboración ............................................................................................ 36
II.4.2.1 Diseño de la aplicación ............................................................ 36
II.4.3 Construcción .......................................................................................... 45
II.4.4 Transición .............................................................................................. 47
III. CONCLUSIONES Y RECOMENDACIONES .................................................. 48
III.1 Conclusión ............................................................................................... 48
III.2 Recomendaciones ................................................................................... 49
III.3 Bibliografías ............................................................................................. 50
III.4 Anexos .................................................................................................... 51º
IV
ÍNDICE DE FIGURAS
Figura 1. Localización geográfica del H. Ayuntamiento Municipal a nivel estatal. ....... 3
Figura 2. Localización geográfica del H. Ayuntamiento Municipal............................... 4
Figura 3. Organigrama Municipal de Yajalón. ............................................................ 6
Figura 4. Relación de patrones a utilizar. .................................................................. 23
Figura 5. Diagrama modelo entidad-relacion............................................................. 36
Figura 6. Diagrama casos de uso del administrador. ................................................ 37
Figura 7. Diagrama caso de uso del usuario. ........................................................... 37
Figura 8. Diagrama de clase. .................................................................................... 38
Figura 9. Diagrama de estado. .................................................................................. 39
Figura 10. Diagrama colaboración. ........................................................................... 40
Figura 11. Diagrama secuencia. ................................................................................ 41
Figura 12. Modelo relacional. .................................................................................... 44
Figura 13. Página principal. ....................................................................................... 45
Figura 14. Menú principal del administrador.............................................................. 46
Figura 15. Formulario para la publicación de noticias. .............................................. 46
Figura 16. Sección de noticias publicadas. ............................................................... 47
V
ÍNDICE DE TABLAS
Tabla 1. Descripción de Hardware. ........................................................................... 30
Tabla 2. Software a utilizar y sus descripciones para desarrollar la pagina web. ..... 30
Tabla 3. Diccionario de datos de la tabla noticia. ...................................................... 42
Tabla 4. Diccionario de datos de la tabla documentos. ............................................. 42
Tabla 5. Diccionario de datos de la tabla usuarios. ................................................... 43
Tabla 6. Diccionario de datos de la tabla comentarios. ............................................. 43
Tabla 7. Diccionario de datos de la tabla categoría. .................................................. 44
1
I. INTRODUCCIÓN
I.1 Conceptualización de la Estadía
La estadía es el mecanismo mediante el cual “el alumno” permanece en una
empresa o institución afín a su formación profesional, desarrollando un proyecto
específico de mejora, innovación o solución a un problema determinado. Esta
práctica profesional se desarrolla durante el sexto cuatrimestre y tiene una duración
de trece semanas.
La importancia de esta práctica es permitir la transición del mundo escolar al ámbito
laboral, facilita experiencias de aprendizaje significativo a los estudiantes para
adquirir y aplicar las competencias profesionales que se traducen en los
conocimientos, habilidades, destrezas, actitudes y valores que habrán de operar en
su futura inserción al campo laboral. Es también el espacio propicio para fortalecer y
aplicar las competencias genéricas y disciplinas adquiridas en la universidad, a
través de la investigación que realizan los estudiantes para dar respuesta a las
problemáticas inherentes al ejercicio profesional, al desarrollar un Proyecto
Académico Laboral.
La estancia es un mecanismo mediante el cual “el alumno”, define su proyecto de
estadía conjuntamente con “la institución“, a fin de aportar a ésta una mejora, una
innovación o la solución a un problema determinado, que tiene una duración de
setenta horas distribuidas en las dos primeras semanas. La cual tiene como finalidad
de aplicar en el campo laboral los conocimientos, y actitudes adquiridos en clase y en
los laboratorios.
La estadía se realiza en el sexto cuatrimestre, de tiempo completo y forma parte del
plan de estudios, por lo tanto es una actividad académica y obligatoria para todos los
estudiantes y se realiza con la participación del área de vinculación de la universidad.
2
Cada alumno desarrolla un proyecto en la empresa ya sea de mejora, uno ya
existente o un nuevo proyecto para mejorar sus procesos. Cada estudiante cuenta
con el apoyo de un profesor que funge como su asesor académico y un asesor
empresarial que designe la empresa para revisar y evaluar al alumno mediante sus
reportes mensuales durante su estadía.
El principal motivo de la realización de la Estadía es para poner en práctica los
conocimientos y habilidades adquiridos en las aulas de la universidad; además es un
requisito para obtener el título de Técnico Superior Universitario, para promover la
posibilidad de empleo y contribuir a mejorar la capacidad dentro del campo laboral,
así como un buen desenvolvimiento en las áreas de trabajo y consecuentemente
facilitar la incorporación al trabajo profesional.
I.2 Contextualización
En 1562 fue fundado el pueblo de Yajalón por Fray Pedro Lorenzo de la Nada, y en
el año 1916 el H. Ayuntamiento municipal es fundado por el C. Clemente S. Trujillo
queda nombrado como el primer Presidente Municipal de Yajalón y al pasar los años
en 1823, Yajalón unió sus fuerzas al Plan Chiapa Libre; en 1943, se constituyó en
cabecera de distrito judicial y hacendario; el 28 de septiembre de 1910, fue elevado a
la categoría de villa por el gobernador Ramón Rabasa y el 3 de diciembre de 1963, al
rango de ciudad y cabecera del distrito de Yajalón, por el gobernador Samuel León
Brindis.
3
I.2.1 Localización geográfica de la empresa
I.2.1.1 Nivel Estatal
El municipio de Yajalón se encuentra al noreste del estado de Chiapas a 246 km de
la ciudad de Tuxtla Gutiérrez, capital del estado; es uno de los municipios más
pequeños del estado, Yajalón se encuentra delimitado al norte por los municipios de
Tila y Túmbala, al sur y oriente por el municipio de Chilón y al poniente por los de
Sabanilla, Tila y una pequeña porción de Simojovel de Allende. De modo que siendo
Yajalón un núcleo Tzeltal, se encuentra relacionado a nivel social y educativo con los
grupos étnicos Choles y Tzotziles. Su extensión territorial es de 162.3 km² con
relación a la estatal y nacional se encuentra a 246 KM de la ciudad de Tuxtla
Gutiérrez Chiapas.
Figura 1. Localización geográfica del H. Ayuntamiento Municipal a nivel estatal.
4
I.2.1.2 Nivel Municipal
El H. Ayuntamiento Municipal está ubicado en el municipio de Yajalón, Chiapas con
la siguiente dirección: central Poniente, Barrio centro, C.P. 29930, Teléfono:
9196860575.
Figura 2. Localización geográfica del H. Ayuntamiento Municipal.
.
5
I.2.2 Giro y tamaño de la empresa
En H. Ayuntamiento Municipal tiene la noble tarea de servir al pueblo de Yajalón,
tanto cabeceras como sus localidades, brindándoles todos los servicios y apoyos que
los requieran. El trabajo es compartir y ayudar a los habitantes para darles una mejor
calidad de vida, y gracias a todo el personal que laboran en esta institución.
El principal objetivo de esta institución es que el pueblo de Yajalón se siga mejorando
en el aspecto de la seguridad, empleo, y sobre todo en las cuestiones económicas y
que sea un pueblo reconocido a nivel estatal y nacional.
El Lic. Juan Sabines Guerrero, Gobernador del Estado y el MVZ. Cesar Belisario
Utrilla Castellanos, presidente municipal del H. Ayuntamiento Municipal de Yajalón
han puesto su confianza en esta institución. Para brindarles todo el servicio para el
pueblo de Yajalón.
6
I.2.2.1 Organigrama Municipal Yajalón 2010–2012
El H. Ayuntamiento Municipal cuenta con más de 100 empleados la cual están
distribuidos en las diferentes áreas que se mencionan a continuación mediante el
organigrama.
H. AYUNTAMIENTO
SINDICO MUNICIPAL PRESIDENTE MUNICIPAL
DIRECCION DE PLANEACION
COORDINACIÓN DE EDUCACION Y
CULTURA
BIBLIOTECARIO
ENLACE UNIVERSIDAD Y CAPACITACION
COORDINACION COMUNICACIÓN
SOCIAL Y VENTOS ESPECIALES
COORDINACION DE ATENCION CIUDADANA Y ENLACE SOCIAL
COORDINACIÓN DE PROTECCION
CIVIL
COORDINACION DE SALUD
COORDINACION DE ASUNTOS RELIGIOSOS
COORDINACION DE DEPORTES
SECRETARIO PARTICULAR
ASESOR JURIDICO
SECRETARIO MUNICIPAL
DIRECCION DE SEGURIDAD
PUBLICA Y VIALIDAD
RECURSOS HUMANOS
COORDINACIÓN DE ADQUISICION Y
SUMINISTRO TESORERO
DIRECCION DE OBRAS PUBLICAS
DIRECCION DE DESARROLLO ECONOMICO
COORDINACION DE FOMENTO
AGROPECUARIO
LICENCIAS Y PERMISOS REGLEMNTOS
SERVICIOS PUBLICOS Y CONTROL VEHICULAR
SAPAM
INMUJER
REGIDORES
Figura 3. Organigrama Municipal de Yajalón.
7
I.2.3 Área de influencia
El H. Ayuntamiento Municipal de Yajalón cubre las localidades que de: Amado Nervo,
Lázaro Cárdenas, Emiliano Zapata, Recreo, Tulaquil, Ventana, Chiviltic, Ocotal,
Rosario Saclumil y el resto de Yajalón.
Esta institución otorga servicios y apoyos a la ciudadanía de manera gratuita la cual
se enfoca principalmente en las áreas administrativas y operativas de la región
dividiéndose en direcciones, coordinaciones la cual cuenta con un responsable de
cara área. Así como el director de obras publicas, tesorera, director de educación y
cultura, cada uno de estos integrantes del Ayuntamiento tienen una función y
llegando todos en un mismo fin de servir a Yajalón.
I.2.4 Objetivos de la empresa
Brinda servicios públicos que mejoran la calidad de vida de los habitantes de Yajalón,
integra zonas urbanas y rurales en una dinámica de desarrollo organizado, en los
ejes de la salud, educación, deporte y cultura, producción, seguridad, medio
ambiente, equidad de género, económico e infraestructura básica, atendiendo las
políticas públicas que demanda la ciudadanía alineados a los objetivos del milenio,
Además realizar. Acciones administrativas de gestoría y de participación ciudadana,
así como ejecutar los acuerdos del ayuntamiento con el fin de promover el desarrollo
económico, político, social y cultural del municipio.
8
Alguno de los objetivos principales de esta institución son los siguientes:
Promover a través de la participación ciudadana los programas del H.
Ayuntamiento realizando reuniones de trabajo en las colonias del medio
urbano.
Realizar giras de trabajo a las comunidades rurales.
Promover y gestionar ante diversas dependencias federales y estatales los
proyectos viables para la comunidad.
Atender a los grupos políticos económicos, sociales y ciudadanía en general.
I.2.4.1 Visión
Al año 2012 Yajalón es un municipio con menos índices de marginación, productivo,
donde los productores intercambien experiencias y comercialicen sus productos, con
proyectos que creen empleo bien remunerado. Un municipio verde que recupere y
conserve los recursos naturales; con mejor calidad de vida y servicios de buena
calidad, con suficiente infraestructura para los sectores educativo, salud, deportes,
recreación, servicios municipales y caminos seguros. Un municipio democrático, con
un Ayuntamiento comunicado con una ciudadanía unida y organizada; un gobierno
sin discriminación, sin corrupción, que rinda cuentas, que permita la libre expresión,
sea seguro y desmilitarizado e imparta justicia; que apoye a las mujeres; que sea
respetuoso de las tradiciones, de las ideas de las comunidades rurales y de las
religiones.
9
I.2.4.2 Misión
El Gobierno Municipal brinda servicios públicos que mejoran la calidad de vida de los
habitantes de Yajalón, integra zonas urbanas y rurales en una dinámica de desarrollo
organizado, en los ejes de la salud, educación, deporte y cultura, producción,
seguridad, medio ambiente, equidad de género, económico e infraestructura básica,
atendiendo las políticas públicas que demanda la ciudadanía alineados a los
objetivos del milenio.
10
II. DESARROLLO
II.1 Marco referencial
En esta institución la principal meta es ayudar a todas las localidades que tiene el
municipio de Yajalón, gestionando proyectos productivos para la mejora de las
comunidades, la actual administración esta consiente de la problemática y
diversidad en los aspectos económicos, social, cultural, ideológico, religioso y étnico
de los habitantes de Yajalón, es necesario contemplar acciones contundentes que
den la pauta de como planear y solucionar las amenazas que tiene el municipio para
mejorar la calidad de vida de sus habitantes.
Porque lo que los principios en que se sustenta el Plan Municipal de Desarrollo
conjuga las acciones de gobierno que se han venido realizando por la administración
estatal en sus orientaciones programáticas del Plan Estatal de Desarrollo
Sustentable 2011-2012, en congruencia con las adoptadas por el Gobierno Federal
en el Plan Nacional de Desarrollo durante la política regional de los principios
consagrados en nuestras leyes mexicanas.
II.1.1 Microeconomía de la empresa
El H. Ayuntamiento Municipal de Yajalón es una dependencia del Gobierno Municipal
que apoya a las necesidades de todos sus localidades tanto económico como social
y cultural concediendo recursos para los apoyos necesarios, esta dependencia
consigue el 90% del presupuesto total para el apoyo de sus regiones y, también para
conseguir y gestionar nuevos proyectos.
11
La institución gestiona diferentes proyectos para el beneficio de sus localidades y
cabeceras Municipales, cada logro que obtiene la institución en el departamento de
Comunicación Social tiene un periodo para publicar los nuevos proyectos ante los
ciudadanos y las localidades del Municipio de Yajalón.
La organización administrativa del Ayuntamiento se deriva en cuatro grandes grupos
1.- el área de gobierno integrado por el presidente, el síndico y los regidores, 2.- el
área técnica administrativa; integrada por la tesorería que coordina a las direcciones
de obras públicas, fomento económico y agropecuario, todos los servicios públicos
municipales, 3.- la dirección de planeación, que coordina a los sectores social, de
educación, de salud, político, y del medio ambiente, deporte, atención ciudadana y
el 4º grupo coordinado por la secretaría municipal que funciona como enlace entre la
sociedad civil con el cabildo, que lo integran la dirección de seguridad, comunicación
social y protección civil, y el departamento jurídico.
II.1.2 Área motivo de estudio
El departamento de Comunicación Social del H. Ayuntamiento Municipal la principal
problemática que existe son las publicaciones de noticias de lo que sucede dentro de
la institución, se observa que no existe un manejo adecuado de las publicaciones de
nuevas noticias de la empresa referente a los nuevos proyectos así como la
distribución de los archivos referentes a estos, en este departamento es algo muy
preocupante ya que no tiene la facilidad de publicar inmediatamente las nuevas
noticias ante los ciudadanos y los encargados de cada localidad.
Para esta institución es una falta de comunicación por que no existe una
transparencia hacia los ciudadanos. Lo que se pretende ahora es mejorar la
comunicación mediante una página web.
12
Las principales necesidades que tiene el departamento de Comunicación Social del
H. Ayuntamiento Municipal de Yajalón son los siguientes:
La publicación inmediata de las nuevas noticias y archivos del H.
ayuntamiento municipal.
Automatizar las noticias mediante una página web.
Automatizar las publicaciones de archivos de nuevos proyectos.
Facilitar la entrega de archivos mediante una descarga en internet.
II.1.3 Desarrollo del Objetivo.
Mejora: En el departamento de Comunicación Social del H. Ayuntamiento Municipal
de Yajalón se realizara una mejora de comunicación para los ciudadanos mediante
una página web para facilitar la publicación de archivos de proyectos y noticias
recientes acerca del seguimiento de estos.
La página web se desarrollara mediante el IDE Macromedia Dreamweaver 8
utilizando el lenguaje PHP 5, java script, CSS 3 y HTML.
Durante el desarrollo de la página web será montada en un servidor local Apache
XAMPP en el cual se realizarán las pruebas de la aplicación; este servidor apache
tiene la funcionalidad de soportar php y MySQL que son las dos herramientas más
importantes para el desarrollo de la página web.
Innovación: En el departamento de publicación del H. Ayuntamiento Municipal se
desarrollara una página web para el beneficio y mejora de la comunicación para los
ciudadanos ya que no cuenta con una aplicación para publicar noticias relacionadas
con los nuevos proyectos propuestos por esta institución.
13
Solución: Desarrollar e implementa una página web para la publicación de noticias y
proyectos que destaca la institución, brindándoles mayor información los habitantes
del municipio de yajalón la cual esta empresa destacara ante las otras por la rápida
publicación y comentarios, además facilitara la ordenación de las noticias y proyectos
que se desee publicar.
II.2. Estado del arte
II.2.1 Marco histórico
Desde el comienzo de la World Wide Web en 1991, tanto el diseño de las páginas
como de la propia estructura de los híper documentos, ha variado de forma
considerable. Al inicio, los hipertextos en la Web únicamente se utilizaban para
insertar imágenes o texto con la posibilidad de colocar algún enlace, pero hoy en día
algunos incluso se consideran obras de arte donde se ha incorporado diseño grafico,
multimedia e ingeniería informática. Las nuevas páginas y sitios Web contienen
servicios online, buscadores, bases de datos, la posibilidad de recuperar la
información, dinamismo, usabilidad y accesibilidad. Se basa más en la funcionalidad
de la Web que en su diseño.
En 1997, David Siegel en “Técnicas avanzadas para el diseño de páginas Web”
distinguía tres generaciones en el desarrollo de las interfaces de la WWW:
Webs de primera generación
Estructura lineal
Eventual inserción de fotografías y líneas de separación
Baja definición (proyectados para terminales ASCII en blanco y negro)
Webs de segunda generación
Iconos en vez de palabras subrayadas con azul
14
Menú de opciones
Fondos coloreados o con imágenes
Bordes azules alrededor de las figuras interactivas
Webs de tercera generación
Hegemonía del diseño sobre la tecnología
Utilización de metáforas
Uso de un layout tipográfico y visual para la descripción de una página
bidimensional.
Estructura entrada -área central- salida
En la actualidad podemos hablar de una cuarta generación de webs donde se presta
especial atención al diseño grafico y a la tecnología. Los desarrolladores de Webs ya
no se les consideran sólo diseñadores gráficos, sino expertos informáticos que han
de conocer los nuevos lenguajes, dominar las nuevas herramientas de programación,
las conexiones a base de datos, aspectos de seguridad etc. Existen diversos factores
a tener en cuenta a la hora de desarrollar un sitio Web, pero hay dos factores que
son de vital importancia: el contenido y el diseño de la interfaz.
II.2.2 Concepto de accesibilidad y usabilidad
Usabilidad: La usabilidad según Xavier Ferré se define como “la cualidad que tiene
un sistema por la que permite a sus usuarios alcanzar objetivos específicos con
efectividad, eficiencia y satisfacción”. Es decir, que cuanto mejor permita hacer algo
un sistema mayor usabilidad tendrá. Si el sistema ayuda a que el usuario cometa los
menos errores o se recupera de ellos fácilmente, si permite hacer la tarea lo más
rápidamente posible y además el usuario queda satisfecho con la labor realizada, el
sistema tiene una buena usabilidad.
15
La usabilidad del sistema no es un atributo inherente al software, no puede
especificarse independientemente del entorno de uso y de los usuarios concretos
que vayan a utilizar el sistema. La usabilidad no puede definirse como un atributo
simple de un sistema, pues implicará aspectos distintos dependiendo del tipo de
sistema a construir. Estos distintos aspectos darán lugar a los atributos de la
usabilidad.
Atributos de la usabilidad: La usabilidad es una cualidad demasiado abstracta
como para ser medida directamente. Para poder estudiarla se descompone
habitualmente en los siguientes cinco atributos básicos:
Facilidad de aprendizaje: Cuánto de fácil es aprender la funcionalidad básica del
sistema, como para ser capaz de realizar correctamente la tarea que desea realizar
el usuario. Se mide normalmente como el tiempo empleado con el sistema hasta ser
capaz de realizar ciertas tareas en menos de un tiempo dado (el tiempo empleado
habitualmente por los usuarios expertos). Este atributo es muy importante para
usuarios noveles.
Eficiencia: El número de transacciones por unidad de tiempo que el usuario puede
realizar usando el sistema. Lo que se busca es la máxima velocidad de realización
de tareas del usuario. Cuanto mayor es la Usabilidad de un sistema, más rápido es el
usuario al utilizarlo, y el trabajo se realiza con mayor rapidez. Nótese que eficiencia
del software en cuanto a su velocidad de proceso no implica necesariamente
eficiencia del usuario en el sentido en el que aquí se ha descrito.
Recuerdo en el tiempo: Para usuarios intermitentes (que no utilizan el sistema
regularmente) es vital ser capaces de usar el sistema sin tener que aprender cómo
funciona partiendo de cero cada vez. Este atributo refleja el recuerdo acerca de cómo
funciona el sistema que mantiene el usuario, cuando vuelve a utilizarlo tras un
periodo de no utilización.
16
Tasa de errores: Este atributo contribuye de forma negativa a la usabilidad de un
sistema. Se refiere al número de errores cometidos por el usuario mientras realiza
una determinada tarea. Un buen nivel de usabilidad implica una tasa de errores baja.
Los errores reducen la eficiencia y satisfacción del usuario, y pueden verse como un
fracaso a la hora de realizar la petición deseada, debido al modo de hacer las cosas
con el sistema.
Satisfacción: Éste es el atributo más subjetivo. Muestra la impresión subjetiva que el
usuario obtiene del sistema. Algunos de estos atributos no contribuyen a la
usabilidad del sistema en la misma dirección, pudiendo ocurrir que el aumento de
uno de ellos tenga como efecto la disminución de otro.
Principios generales de la Usabilidad: Así mismo, existen principios generales que
se pueden aplicar a un sistema interactivo para mejorar la usabilidad:
Consistencia: Diremos que un sistema es consistente si todos los mecanismos que
se utilizan son siempre usados de la misma manera, siempre que se utilicen y sea
cual sea el momento en que se haga.
Flexibilidad: Se refiere a las diferentes posibilidades que el usuario tiene para
cambiar información con el sistema. Así mismo se contempla la similitud de tareas,
las diferentes vías que existen para realizar una tarea…
Robustez: La robustez de una interacción cubre las características para poder
cumplir sus objetivos y su asesoramiento.
Recuperabilidad: Grado de facilidad que una aplicación permite al usuario para
corregir una acción una vez está reconocido un error.
Tiempo de respuesta: Se define generalmente como el tiempo que necesita el
sistema para expresar los cambios de estado del usuario. Es importante que los
tiempos de respuesta sean soportables para el usuario.
17
Adecuación a las tareas: Grado en que los servicios del sistema soportan todas las
tareas que el usuario quiere hacer y la manera en que éstas las comprenden.
Disminución de la carga cognitiva: Esto quiere decir que los usuarios tienen que
confiar más en los reconocimientos que en los recuerdos y que no tienen que
recordar abreviaciones y códigos muy complicados.
Una vez comentado todo esto, se puede deducir que la atención a la usabilidad es
imprescindible para el diseño de páginas Web, haciendo que estas sean más
atractivas y sencillas para aquellos usuarios que navegan por ellas y queden
satisfechos para otra futura exploración.
Beneficios de la Usabilidad: El diseño de una página Web en términos de
usabilidad reporta los siguientes beneficios:
Reducción de los costes de aprendizaje.
Disminución de los costes de asistencia y ayuda al usuario.
Optimización de los costes de diseño, rediseño y mantenimiento de los sitios.
Aumento de la tasa de conversión de visitantes a clientes del sitio Web.
Mejora la imagen y el prestigio del sitio Web.
Mejora la calidad de vida de los usuarios del sitio, ya que reduce su estrés,
incrementa la satisfacción y la productividad.
Todos los beneficios citados implican una reducción y optimización en los costes de
producción, así como un aumento en la productividad de los sitios Web de comercio
electrónico, a su vez permite mayor rapidez en la realización de tareas y reduce las
perdidas de tiempo.
Accesibilidad: El concepto de accesibilidad por parte de W3C se define como:
“hablar de accesibilidad Web es hablar del acceso de todos a la Web,
independientemente de tipo de hardware, software, infraestructura de red, idioma,
18
cultura, localización geográfica, y capacidades de los usuarios” Al hablar de
accesibilidad Web, se hace referencia a un diseño Web que permita a personas con
algún tipo de discapacidad percibir, entender, navegar e interactuar con la Web
aportando a la vez contenidos. La accesibilidad Web engloba muchos tipos de
discapacidades, como pueden ser:
Visuales
Auditivos
Físicos
Cognitivos
Neurológicos
Basados en el habla
Para desarrollar este concepto, existe un organismo, el W3C (World Wide Web), y
más en concreto su grupo de trabajo WAI (Web Accesibility Initiative) que nos indica
cuales son las condiciones que debe cumplir una página Web para que ésta sea
accesible. Una de las funciones de la iniciativa de Accesibilidad Web (WAI) es
desarrollar pautas y técnicas que proporcionen soluciones accesibles para el
software Web y para los desarrolladores Web. Las pautas del WAI son consideradas
como estándares internacionales de accesibilidad Web.
La accesibilidad siempre se ha entendido como responsabilidad de los
desarrolladores Web pero el software Web también juega un papel muy importante,
ya que este ayuda a los desarrolladores a generar y evaluar sitios Web accesibles
para que las personas con discapacidad puedan utilizarlos.
19
II.2.3 Principios del diseño Web
Principios para realizar un buen diseño es muy importante que a la hora de construir
una aplicación, es que ésta debe tener una interfaz útil, en la que el usuario debe ser
capaz de realizar la tarea que desea de forma fácil, rápida de completar y
cometiendo una tasa baja de errores, así la tarea se realiza de forma eficiente. Esto
se consigue dividiendo la tarea, en pequeñas tareas que sean más fáciles de realizar
por el usuario. Además debe evitarse que durante el transcurso de la realización de
la tarea el usuario se distraiga o sea interrumpido por cualquier procedimiento, así
nos aseguraremos que el usuario finaliza la tarea de manera eficiente.
Jakob Nielsen en “Ten usability heuristics” enumera una serie de principios de
diseño, que ayudan a mejorar la interfaz de usuario, son los siguientes:
Visibilidad del estado del sistema: el sistema debe ser capaz de mantener
informado continuamente sobre lo que está pasando, dentro de un plazo razonable.
Adecuación entre el sistema y el mundo real: el sistema debe ser capaz de hablar
el lenguaje que habla el usuario, así como utilizar palabras y frases familiares para el
usuario, es decir, se debe evitar el uso de tecnicismos.
Libertad y control por parte del usuario: proporcionar al usuario una forma fácil de
salir de una función del sistema y marcada como “salida de emergencia“, es decir,
apoyo a deshacer y rehacer.
Consistencia y estándares: los usuarios no deberían tener que preguntarse si
diferentes palabras, situaciones o acciones significan lo mismo.
Prevención de errores: lo ideal es realizar un diseño cuidadoso que impida que se
produzcan errores. Una forma es utilizar mensajes de confirmación para evitarlos.
20
Reconocimiento antes que recuerdo: el usuario no debería tener que recordar la
información de una parte del diálogo a otro, así las instrucciones de uso del sistema
deben ser visibles o fácilmente recuperables cuando sea apropiado.
Flexibilidad y eficiencia en el uso: permitir que el sitio sea fácil de usar de manera
que usuarios inexpertos puedan utilizarlo.
Diseño estético y minimalista: evitar el uso de información irrelevante o que no sea
necesaria.
Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores:
los mensajes de error deber ser expresados en un lenguaje sencillo (sin códigos),
indicando con precisión el problema y sugerir una solución.
Ayuda y documentación: lo ideal sería que el sistema pudiese ser utilizado sin
documentación, pero puede que sea necesario proporcionar ayuda y documentación.
Esta documentación debe ser fácil su utilización, centrada en el usuario, y no ser
demasiado grande.
Un sitio Web no ha de tratar al usuario de manera hostil. Cuando el usuario comete
un error el sistema ha de solucionar el problema, o en su defecto sugerir varias
soluciones posibles, pero no permitir respuestas que meramente informen del error
culpando al usuario.
II.2.4 Pautas a seguir para un buen diseño según la W3C
Las pautas que se va a utilizar son las que marca la W3C respecto a la usabilidad y
accesibilidad con la guía WCAG 2.0. Esta guía se organiza en cuatro principios
fundamentales para la accesibilidad del contenido:
21
Perceptible
Operable
Comprensible
El contenido y los controles deben ser comprensibles.
Robusto
El contenido debe ser suficientemente robusto para funcionar con las tecnologías
actuales y futuras.
A su vez cada uno de estos grandes principios tiene asociado unas directrices, que
proporcionan las metas básicas para hacer el contenido accesible, y sirven para
conocer los criterios de éxito e implementarlos, las 12 directrices, son las siguientes:
Textos alternativos: proporcionar alternativas para cualquier texto que no sea de
tipo texto contenido, así puede ser cambiado a otras formas, por gente que lo
necesita, tales como: letra grande, braille, el discurso, los símbolos o lenguaje
sencillo.
Multimedia sincronizada: proporcionar alternativas sincronizadas para el contenido
multimedia.
Adaptable: crear contenido que pueda ser presentado de diferentes formas sin
perder información o estructura.
Funcionalidad accesible a través del teclado.
Tiempo suficiente: proporcionar a los usuarios con discapacidades el tiempo
suficiente para leer y usar el contenido de la Web.
Destellos: evitar que el contenido de la página provoque trastornos epilépticos, para
ello no se debe utilizar el parpadeo o destellos en la página.
22
Navegable: proporcionar diferentes formas a los usuarios con discapacidades, para
ayudarlos en la navegación, encontrar el contenido y determinar en que lugar se
encuentran.
Fácil de leer: hacer que el texto contenido sea fácil de leer y de entender.
Predecible: hacer que la apariencia de la página Web y la estructura sea predecible
en caminos diferentes.
Asistencia de entrada: ayuda a los usuarios a evitarles y corregir errores.
Compatibilidad: maximiza la compatibilidad actual y futura de los usuarios, incluidas
las tecnologías de asistencia.
Cada una de estas directrices tiene asociados criterios de éxito, que se han de
cumplir y que sí son verificables. Los criterios de éxito están ordenados según su
nivel de cumplimiento asociado (A, AA y AAA).
Nivel A: cuando se cumplen todos los criterios de éxito de nivel 1(A) de todas las
directrices, o se proporciona una versión alternativa conforme al nivel A.
Nivel AA: cuando se cumplen todos los criterios de éxito de nivel 1(A) y de nivel
2(AA) de todas las directrices, o se proporciona una versión alternativa conforme al
nivel AA.
Nivel AAA: cuando se cumplen todos los criterios de éxito de nivel 1(A), de nivel
2(AA) y de nivel 3(AAA) de todas las directrices, o se proporciona una versión
alternativa conforme al nivel AAA.
23
II.2.5 Patrones a utilizar
Los patrones que se van a emplear para evaluar la página Web, están sacados del
libro “The design of sites” del autor Douglas K. van Duyne.
Antes de describir los patrones que más se adecuan a la página Web que vamos a
analizar, se define el concepto de patrón. Un patrón comunica ideas sobre problemas
de diseño que encontramos, éste captura la esencia de los problemas y sus
soluciones en una forma compacta. Cada patrón describe el problema y justifica una
solución además de cómo aplicarla. A si mismo, todos los patrones tienen relaciones
con otros patrones de mayor o menor nivel de abstracción, dicha relación es usada
por el diseñador para realizar la estructura de su sitio Web escogiendo aquellos que
más caractericen al tipo de sitio Web a diseñar.
En este caso se van a utilizar como patrones genéricos los siguientes:
A6 (Grassroots Information Sites). La página nos da información sobre las distintas
instalaciones de los campus, y las actividades que pueden realizarse en dichas
instalaciones.
Figura 4. Relación de patrones a utilizar.
24
Una vez mostrada la relación de patrones se describen cada uno de ellos.
B2 (Browsable Content). Es preciso agrupar la información de una página Web, en
secciones comunes, apartados, o subsecciones si la información es abundante, de
esta manera ayudamos al usuario a realizar una mejor navegación por la página y a
encontrar aquella información que necesita de manera rápida.
B3 (Hierarchical Organization). Jerarquizar las categorías que se muestran en la
página Web, usando para hecho nombres descriptivos que transmitan al usuario la
información que puede encontrar en dicha categoría.
D6 (Writing for Search Engines). Los usuarios utilizan los buscadores para llegar al
sitio que más se adapta a sus posibilidades. Estos accederán a las páginas que se
encuentran en las primeras posiciones de la búsqueda que realiza el buscador, por
ello el objetivo es encontrarse en las primeras posiciones. Para ello se deben utilizar
distintivos en cada página, utilizar palabras claves que den información sobre el
contenido de la página y el uso de META tags.
D7 (Inverse-Pyramid Writing Style). Los consumidores quieren que la página sea
rápida de descargar, fácil de leer, y rápida de ojear. Por ello es recomendable utilizar
la técnica de Inverse-Pyramid Writing que consiste en empezar el artículo indicando
al lector la conclusión de éste, seguir con la información de apoyo más importante y
finalmente se explican los antecedentes.
H6 (Pop-up Windows). Usar ventanas emergentes para mostrar información extra
cuando el contexto del sitio Web debe mantenerse para que los clientes no pierdan
su lugar en un proceso.
K8 (External Links). El uso de enlaces externos ayuda a los usuarios a reforzar su
confianza hacia el sitio Web. Es necesario indicar la presencia de estos enlaces para
que los usuarios sepan que navegaran por un sitio externo.
25
II.2.6 Páginas web desarrolladas
A continuación se describen algunos proyectos semejantes al cual se va desarrollar,
haciendo hincapié sobre la metodología y la tecnología que fue empleada para el
desarrollo de estos.
Página web del CBTA 44.
Fue desarrollada con la finalidad de automatizar toda la información que genera
diariamente la institución en un ambiente agradable y de fácil manejo logrando que la
información sea guardada en una sola base de datos.
La principal función que realiza esta página web, que los alumnos puedan sacar sus
fichas o apartar un lugar en la institución de una forma segura sin la necesidad de
presentarse personalmente en la institución.
Dicho proyecto fue desarrollado siguiendo la metodología cascada del autor Winston
Royce del libro de ingeniería de software que establece 5 etapas para desarrollar
software de calidad que son:
Análisis.
Diseño.
Código.
Pruebas e implementación.
Mantenimiento.
La página web fue programada en un lenguaje de programación PHP conectado
mediante un sistema gestor de base de datos MySQL 5.0 para el almacenamiento de
información de los alumnos.
26
Aplicación web de colchas y edredones Vianey.
Fue desarrollado para tener mayor publicidad de sus productos además llevar un
control adecuado de toda la información que maneja la empresa, tales como
productos en existencia, ofertas, ventas, entrada y salida de los mismos, etc.
Esta aplicación se desarrollo siguiendo la metodología RUP porque es un proceso
para el desarrollo de un software que define claramente quien, cómo, cuándo y qué
debe hacerse en el proyecto, además porque contempla una relación causal de los
programas creados desde los requerimientos hasta la implementación y pruebas.
Dicho proyecto fue programado en lenguaje de programación PHP 5, CSS 3 y
JavaScript utilizando en ID Macromedia Dreamweaver 8 ya que es una herramienta
que facilita el diseño de páginas web más avanzada, la cual fue interconectado
mediante una sistema gestor de base de datos MySQL 5.0 para el almacenamiento
de información de la empresa.
De acuerdo a los proyectos ya desarrollados se realizó una comparación de las
herramientas y metodologías empleadas en dicho proyecto se tomó la decisión que
para la realización de la página web del H. Ayuntamiento Municipal de Yajalón se
utilizara la metodología RUP, sistema gestor de base de datos MySQL 5.0, PHP 5,
CSS 3, JavaScript.
27
II.2.7 Software de desarrollo
Los programas básicos que serán utilizados para la creación de la pagina web son
los siguientes incluyendo.
PHP: Es un lenguaje de programación usado frecuentemente para la creación de
contenidos para sitios Web con los cuales se pueden programar páginas HTML y
códigos de fuente. PHP es un acrónimo recursivo que significa “Hypertext
Preprocessor” (inicialmente PHP Tools, o, Personal Home Page Tools), y se trata de
un lenguaje interpretado usado para la creación de aplicaciones para servidores, o
creación de contenidos dinámicos para sitios Web. Últimamente también se ha
utilizado para la creación de diferentes tipos de programas incluyendo aplicaciones
con interfaz grafica utilizando las librerías Qt o GTK+.
Macromedia Dreamweaver: Es la herramienta de diseño de páginas web más
avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto
programador de HTML el usuario que lo maneje, siempre se encontrarán en este
programa razones para utilizarlo, sobre todo en lo que a productividad se refiere.
Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y
soporta gran cantidad de tecnologías, además muy fáciles de usar:
Hojas de estilo y capas
JavaScript para crear efectos e interactividades
Inserción de archivos multimedia
Es un programa que se puede actualizar con componentes, que fabrica tanto
Macromedia como otras compañías, para realizar otras acciones más avanzadas.
28
MySQL: Es un Gestor de bases de datos open source más popular y posiblemente el
mejor del mundo. Su continuo desarrollo, su creciente y popularidad están haciendo
de MySQL un competidor cada vez más directo de gigantes en la materia de las
bases de datos como Oracle.
MySQL es un sistema de administración de bases de datos (Database Management
System, DBMS) para bases de datos relacionales. Así, MySQL no es más que una
aplicación que permite gestionar archivos llamados de bases de datos.
Existen muchos tipos de bases de datos, desde un simple archivo hasta sistemas
relacionales orientados a objetos. MySQL es un sistema gestor de base de datos que
utiliza múltiples tablas para almacenar y organizar información.
MySQL fue escrito en C y C++, y destaca por su gran adaptación a diferentes
entornos de desarrollo, permitiendo su interactuación con los lenguajes de
programación más utilizados como PHP, Perl y Java y su integración en distintos
sistemas operativos.
También es muy destacable, la condición de open source de MySQL, que hace que
su utilización sea gratuita e incluso se pueda modificar con total libertad, pudiendo
descargar su código fuente. Esto ha favorecido muy positivamente en su desarrollo y
continuas actualizaciones, para hacer de MySQL una de las herramientas más
utilizadas por los programadores orientados a Internet.
XAMPP: es un paquete formado por un servidor web Apache, Gestor de base de
datos una base de datos MySQL y los intérpretes para los lenguajes PHP y Perl. Su
nombre viene de X (para cualquier sistema
operativo), A (Apache), M (MySQL), P (PHP) y P (Perl). XAMPP es independiente de
plataforma y tiene licencia GNU GPL. Existen versiones para Linux (testeado para
SuSE, RedHat, Mandrake y Debian), Windows (Windows 98, NT, 2000, XP y Vista),
MacOS X y Solaris (desarrollada y probada con Solaris 8, probada con Solaris 9).
29
Una de las ventajas de XAMPP es que de una forma muy sencilla y rápida (no más
de 5 minutos) te puedes montar en tu máquina un entorno de desarrollo de cualquier
aplicación web que use PHP y base de datos. La configuración por defecto de
XAMPP tiene algunas deficiencias de seguridad por lo que no es recomendable
usarla como una herramienta para producción, sin embargo con algunas
modificaciones es lo suficientemente seguro para ser usada como servidor de sitios
web en internet.
Enterprise Architect: es herramienta de análisis y diseño, rico en modelado de
negocios con una trazabilidad completa desde los requisitos hasta la implementación
del código de ingeniería es escalable, basado en un equipo repositorio de
estructuras empresariales, mapas mentales, BPMN, De alto valor, de extremo a
extremo de modelado Enterprise Architect provee modelado de ciclo de vida
completo para:
Negocios y los sistemas de TI
Software e Ingeniería de Sistemas
El desarrollo en tiempo real y embebidos
Con capacidades integradas de gestión de requisitos, ayuda a trazar
especificaciones de alto nivel a los modelos de análisis, diseño, implementación,
prueba y mantenimiento utilizando UML, SysML, BPMN y otros estándares abiertos.
Posee una herramienta gráfica diseñada para ayudar a desarrollar sistemas
robustos y de fácil mantenimiento. Una función de informes y documentación, que
puede ofrecer una visión verdaderamente compartida con facilidad y precisión,
velocidad, estabilidad y rendimiento rápido.
30
II.3 Materiales y métodos
En este apartado se describe todos los materiales y métodos que serán utilizados
durante el desarrollo del proyecto de página web, con el afán de que sea un trabajo
reforzado.
Para el desarrollo de la pagina web del departamento de Comunicación Social del H.
Ayuntamiento Municipal de Yajalón es necesario contar con las herramientas
adecuadas para poder llevar acabo dicho proyecto, a continuación se describen en
las tablas todas las herramientas a utilizar hardware como software.
Hardware
Mini laptop Samsung N150
Impresora: HP laser jet AP.
Memoria RAM de 1 GB (DDR2/1GB X 1 Disco Duro 250 GB(rpm S - ATA)
3 PUERTOS USB 2.0 (Incluye 1 x USB 2.0
puerto para recarga)
Procesador Intel® ATOMTM
N450 (1,66 GHz,
667 MHz, 512 KB)
Windows® 7 Starter Original Tarjeta Inalámbrica 802.11 b/g WLAM
Tabla 1. Descripción de Hardware.
Software Descripción
MySQL 5.1:
Es el manejador de base de datos donde se almacenara los datos
insertados en forma de comandos.
Microsoft office 2007
Se utilizara paquetería de office para realizar documentaciones
requeridas durante el desarrollo del proyecto.
Macromedia Dreamweaver 8
Uno de los mejores programas valorados dentro de la
programación web tanto por profesionales como por aficionados.
En este proyecto será utilizado este software porque facilita en la
tarea de realizar web complejos y bien estructurados.
Xampp Servidor independiente de plataforma que servirá para realizar
pruebas web sin necesidad de una conexión a un servidor internet.
Enterprise Architect 7.5 Full Software que será útil para realizar el diseño y diagramas UML de
la página web.
Tabla 2. Software a utilizar y sus descripciones para desarrollar la pagina web.
31
II.3.1 Metodología utilizada
La metodología es un marco de trabajo usado para estructurar, planificar y controlar
el proceso de desarrollo en sistemas de información, existen diferentes tipos pero
una de las más conocidas y utilizadas es la Metodología RUP (Rational
Unified Process), en este proyecto será utilizada dicha metodología.
El Proceso Unificado Racional, Rational Unified Process en inglés, es un proceso de
desarrollo de software y junto con el Lenguaje Unificado de Modelado UML,
constituye la metodología estándar más utilizada para el análisis, implementación y
documentación de sistemas orientados a objetos. El RUP no es un sistema con
pasos firmemente establecidos, sino que trata de un conjunto de metodologías
adaptables al contexto y necesidades de cada organización, donde el software es
organizado como una colección de unidades atómicas llamados objetos, constituidos
por datos y funciones, que interactúan entre sí.
RUP es un proceso para el desarrollo de un proyecto de un software que define
claramente quien, cómo, cuándo y qué debe hacerse en el proyecto.
Características Principales de RUP:
Dirigido por caso de uso
Centrado por arquitectura
Iterativo incremental
Elementos de RUP
Actividades: Procesos que se han de realizar en cada etapa/iteración.
Trabajadores: Personas involucradas en cada actividad del proyecto.
Artefactos: Herramientas empleadas para el desarrollo del proyecto. Puede
ser un documento, un modelo, un elemento del modelo, etc.
32
RUP es explícito en la definición de software y su trazabilidad, es decir, contempla en
relación causal de los programas creados desde los requerimientos hasta la
implementación y pruebas.
RUP identifica claramente a los profesionales (actores) involucrados en el desarrollo
del software y sus responsabilidades en cada una de las actividades.
Fases de desarrollo del software:
Inicio: Se hace un plan de fases, donde se identifican los principales casos de uso y
se identifican los riesgos. Se concreta la idea, la visión del producto, como se
enmarca en el negocio, el alcance del proyecto. El objetivo en esta etapa es
determinar la visión del proyecto.
Elaboración: Se realiza el plan de proyecto, donde se completan los casos de uso y
se mitigan los riesgos. Planificar las actividades necesarias y los recursos requeridos,
especificando las características y el diseño de la arquitectura como se muestra en el
anexo 3. En esta etapa el objetivo es determinar la arquitectura Óptima.
Construcción: Se basa en la elaboración de un producto totalmente operativo y en
la elaboración del manual de usuario. Construir el producto, la arquitectura y los
planes, hasta que el producto está listo para ser enviado a la comunidad de usuarios.
En esta etapa el objetivo es llevar a obtener la capacidad operacional inicial.
Transición: El objetivo es llegar a obtener el reléase del proyecto. Se realiza la
instalación del producto en el cliente y se procede al entrenamiento de los usuarios.
Realizar la transición del producto a los usuarios, lo cual incluye: manufactura, envío,
entrenamiento, soporte y mantenimiento del producto, hasta que el cliente quede
satisfecho, por tanto en esta fase suelen ocurrir cambios.
33
Principales ventajas
Coste del riesgo a un solo incremento.
Reduce el riesgo de no sacar el producto en el calendario previsto.
Acelera el ritmo de desarrollo.
Se adapta mejor a las necesidades del cliente.
En el desarrollo del proyecto se utilizara dicha metodología por que tiene un proceso
muy disciplinario además, determina las etapas a realizar durante la creación del
proyecto para tener un control adecuado y calidad de software.
II.4. Procesamiento de resultados, análisis y discusión
Para llevar a cabo el procesamiento de resultado, análisis y discusión será realizado
bajo las fases de desarrollo de software de la metodología RUP ya que identifica
claramente a los profesionales (actores) involucrados en el desarrollo del software y
sus responsabilidades en cada una de las actividades.
34
II.4.1 Inicio
II.4.1.1 Análisis de requisitos
El análisis de requisitos se realizó a través de una entrevista como se muestra en el
anexo 1 con el director de Comunicación social del H. Ayuntamiento Municipal para
determinar las necesidades del software, arrojando los siguientes resultados.
El software deberá ser visible por todo el mundo.
Deberá publicar las noticias más recientes del H. Ayuntamiento Municipal.
Deberá publicar archivos y mostrar en el modulo de archivos con la opción de
descargar.
Que la página pueda ser modificada y actualizada por el administrador.
La página deberá registrar el número de visitante.
II.4.1.2 Descripción del proyecto
En el modulo de archivos serán visualizados todos los documentos que se publican,
a demás todos aquellos visitantes que deseen descargar podrán hacerlo ya que
cuenta con una base de datos donde se encuentran almacenados todos los archivos,
mientras el administrador no lo elimina estará disponible para descargar.
35
II.4.1.3 Objetivo de la aplicación
Objetivos Específicos: La página web permitirá publicar noticias, cargar archivos,
registrar usuarios, guardar comentarios, descargar archivos además podrá eliminar,
modificar todas las publicaciones que se realizan.
Alcances de la página web: Se desarrollara una página web con catálogos
programados, funcionando con las operaciones básicas para administrar noticias,
archivos, usuarios, comentarios, además considerando como transacciones una
opción de descargar documentos publicados.
En los catálogos: se podrá agregar, eliminar y modificar la información de
cada uno de ellos.
Validación de código de inyección SQL, acceso de usuarios por medio de
Login y Password con categoría de administrador, moderador y lector.
36
II.4.2 Elaboración
II.4.2.1 Diseño de la aplicación
Diagrama o modelo entidad-relación es una herramienta para el modelado de
datos que permite representar las entidades relevantes de un sistema de
información así como sus interrelaciones y propiedades.
En la figura 5 se muestra la estructura del modelado de la base de datos de la página
web donde especifica los atributos a cada entidad, cardinalidades y sus relaciones
con otra entidad.
Figura 5. Diagrama modelo entidad-relación.
37
Un caso de uso representa una unidad funcional coherente de un sistema,
subsistema o clase y los actores interaccionan con el sistema que realiza algunas
acciones. En la figura 6 se muestra una descripción de los pasos o las actividades
que realizará el administrador para llevar a cabo algún proceso de cada catalogo
como describe en el anexo 4.
Figura 6. Diagrama casos de uso del administrador.
En la figura 7 se describe los pasos o las actividades que podra realizar un usuario
en la página web, el usuario puede ver archivos y noticias como se describe en el
anexo 5 .
Figura 7. Diagrama caso de uso del usuario.
uc Actors
Pagina web publicacion de noticias y archivos
Administrador
Autentificar usuario
Nuev o noticia
Ver noticias
Editar noticia
Eliminar noticia
Opciones
Opciones v isuales
Administrar usuario
Opciones generales
y categoria
Nuev o usuario
Eliminar usuario
Cambiar contaseñaCargar archiv os
Ver archiv os
Eliminar
archiv os
«extend»
«extend»
«extend»
«extend»
«extend»
«extend»
«extend»
«extend»
«extend»
38
En la figura 8 es un diagrama de clases que describe la estructura de la página
mostrando sus clases, atributos y las relaciones entre ellos la cual está siendo
utilizado para el proceso de análisis y diseño del sistema, para crear el diseño
conceptual de la información que se manejará, y los componentes que se encargaran
del funcionamiento y la relación entre uno y otro, mostrando las conexiones de base
de datos, menú principal y catálogos.
Figura 8. Diagrama de clase.
class System
MenuPrincipal
+ MenuNuevoNoticias: string
+ MenuCargarArchivo: string
+ MenuVerNoticias: string
+ ...
+ publicarNoticia()
+ cargarArchivo()
+ ...()
Noticias
- id: int
+ titulo: varchar = 160
+ texto: varchar = 2000
+ autor: varchar = 12
+ ...
+ Nuevo()
+ editar()
+ eliminar()
Archiv os
- id_documento: int = 10
+ titulo: varchar = 60
+ descripcion: mediumtext
+ ...
- nuevo()
+ eliminar()
Conexion
+ Connection: Conexion
+ ...
+ conectarBaseDeDatos()
Usuario
- id: int = 2
+ nombre: varchar = 100
+ pass: varchar = 100
+ email: varchar = 200
+ ...
+ nuevo()
+ cambiarContraseña()
+ eliminar()
39
Los diagramas de estado muestran el conjunto de estados por los cuales pasa un
objeto durante su vida en una aplicación en respuesta a eventos (por ejemplo,
mensajes recibidos, tiempo rebasado o errores), junto con sus respuestas y
acciones. También ilustran qué eventos pueden cambiar el estado de los objetos de
la clase. Normalmente contienen: estados y transiciones
En la figura 9 se muestran la publicación de una nueva noticia mostrando los
conjuntos de estados tales como inicialización, visualización, validación,
almacenamiento y confirmación por los cuales pasa un objeto durante su vida en la
página web.
Figura 9. Diagrama de estado.
40
Un diagrama de colaboración en las versiones de UML 1.x es esencialmente un
diagrama que muestra interacciones organizadas alrededor de los roles. A diferencia
de los diagramas de secuencia, los diagramas de colaboración, también llamados
diagramas de comunicación, muestran explícitamente las relaciones de los roles.
En la figura 10 se muestra la interacción que se realiza durante la publicación de una
nueva noticia mostrando explícitamente de como se inicializa los pasos para la nueva
publicación hasta almacenar en la base de datos.
Figura 10. Diagrama colaboración.
41
Diagrama de secuencia es un tipo de diagrama usado para modelar interacción
entre objetos en un sistema En la figura 11 se muestra la interacción entre objetos y
los pasos que se lleva a cabo para la publicación de nuevo noticia realizando
diferentes acciones como: seleccionar el menú noticia, clic nuevo, llenar formulario,
antes de publicar se validan los campos si los datos introducidos no correctos no se
guarda en la base de datos.
Figura 11. Diagrama secuencia.
Un diccionario de datos es un conjunto de metadatos que contiene las características
lógicas y puntuales de los datos que se van a utilizar en el sistema que se programa,
incluyendo nombre, descripción, alias, contenido y organización. Identifica los
procesos donde se emplean los datos y los sitios donde se necesita el acceso
inmediato a la información, se desarrolla durante el análisis de flujo de datos y auxilia
a los analistas que participan en la determinación de los requerimientos del sistema,
su contenido también se emplea durante el diseño.
42
Nombre de la base de datos: knews.
Nombre de la tabla: Noticias.
Descripción: Almacena las noticias publicadas.
CAMPO TIPO DE
DATO
TAMAÑO PK FK ESCTRUCTURA NULO DESCRIPCION
Id int 3 si --- {0-9} no Llave primaria de
la noticia
Titulo varchar 160 --- --- {a-z}-{0-9} no Titulo de la noticia
Texto varchar 20000 --- --- {a-z}-{0-9} no El texto de la
noticia
Autor varchar 12 --- --- {a-z}-{0-9} no El que publica
Fecha varchar 10 --- --- {0-9} no La fecha en que
se publica
Categoría int 5 --- --- {0-9} no Que categoría de
la noticia
Tabla 3. Diccionario de datos de la tabla noticia.
Nombre de la base de datos: knews.
Nombre de la tabla: Documentos.
Descripción: Almacena documentos.
CAMPO TIPO DE
DATO
TAMAÑO PK FK ESCTRUCTURA NULO DESCRIPCION
Id_documento int 10 si --- {0-9} no Llave primaria de
documento
Titulo mediumtext 50 --- --- {a-z}-{0-9} si Titulo de
documento
descripcion varchar 20000 --- --- {a-z}-{0-9} si Descripción del
documento
contenido longblob 12 --- --- binary si Contenido del
documento
Tamaño int 10 --- --- {0-9} si Tamaño de
documento
Tipo varchar 50 --- --- {a-z} si Tipo de
documento
nombre_archiv
o
varchar 55 {a-z}-{0-9} si nombre
Tamaño_unida
d
varchar 50 {a-z}-{0-9} si tamaño
Tabla 4. Diccionario de datos de la tabla documentos.
43
Nombre de la base de datos: knews.
Nombre de la tabla: Usuarios.
Descripción: Almacena los usuarios que registra el administrador.
CAMPO TIPO DE DATO TAMAÑO PK FK ESCTRUCTURA NULO DESCRIPCION
Id int 2 si --- {0-9} no Llave primaria de
usuario
Nombre varchar 100 --- --- {a-z}-{0-9} no Nombre de
usuario
Pass varchar 100 --- --- {a-z}-{0-9} no Contraseña del
usuario
Email varchar 200 --- --- {a-z}-{0-9} no Correo
electrónico
Rango Set (‘1’,’2’,’3’) --- --- {0-3} no Nivel de permiso
Tabla 5. Diccionario de datos de la tabla usuarios.
Nombre de la base de datos: knews;
Nombre de la tabla: Comentarios.
Descripción: Almacena los comentarios que realiza los visitantes.
CAMPO TIPO DE DATO TAMAÑO PK FK ESCTRUCTURA NULO DESCRIPCION
Id int 3 si --- {0-9} no Llave primaria de
comentario
Idnoticia varchar 3 --- si {0-9} no Llave foránea de
noticia
Nombre varchar 50 --- --- {a-z}-{0-9} no Nombre de quien
comenta
Comentari
o
varchar 350 --- --- {a-z}-{0-9} no comentario
Email Set 100 --- --- {a-z}-{0-9} no Correo
electronico
Fecha varchar 20 -- -- {0-9} no Fecha en que se
comenta
Tabla 6. Diccionario de datos de la tabla comentarios.
44
Nombre de la base de datos: knews.
Nombre de la tabla: Categoría.
Descripción: Almacena la categoría de la noticia.
CAMPO TIPO DE DATO TAMAÑO PK FK ESCTRUCTURA NULO DESCRIPCION
Id int 3 si --- {0-9} no Llave primaria de
categoria
Ncompleto varchar 100 --- {a-z}-{0-9} no categoria
Imagen varchar 100 --- --- {a-z}-{0-9} no categoria
Tabla 7. Diccionario de datos de la tabla categoría.
El modelo relacional para la gestión de una base de datos es un modelo de
datos basado en la lógica de predicados y en la teoría de conjuntos. Es el modelo
más utilizado en la actualidad para modelar problemas reales y administrar datos
dinámicamente.
En la figura 12 se muestra el modelo relacional de la base de datos para la página
web visualizando los atributos de cada tabla, llaves primarias y llaves foráneas.
Figura 12. Modelo relacional.
45
II.4.3 Construcción
En esta fase de describen mediante imágenes el diseño y la estructura de la página
la cual se encuentra en construcción en el H. Ayuntamiento Municipal para la
publicación de noticias y archivos.
En la figura 13 se muestra el diseño de la página principal mostrando en el lado
izquierdo los botones de menú para que los visitantes puedan navegar y consultar el
contenido en cada uno mediante un clic, y en el lado derecho un Login para que el
administrador pueda introducir el usuario y contraseña para acceder al menú
principal para realizar las publicaciones.
Figura 13. Página principal.
46
En la figura 14 se muestra el menú principal del administrador con las opciones de
nuevo, ver todo, opciones, salir y las estadísticas de la página, cada una de las
opciones el administrador puede realizar diferentes tareas.
En la figura 15 se muestra dos formularios para la publicación de nuevo noticias, y
un botón para guardar las noticias que contienen las cajas de texto.
Figura 15. Formulario para la publicación de noticias.
Figura 14. Menú principal del administrador.
47
En la figura 16 se muestra la seccion de noticias noticias publicadas por el
administrador mostrando el titulo, fecha en que fue publicada, el texto y opcion de
comentarios.
Figura 16. Sección de noticias publicadas.
II.4.4 Transición
Esta es la última fase de desarrollo de la aplicación la cual tiene un objetivo de llegar
a obtener el proyecto y realizar la instalación del producto en la empresa y se
procede el entretenimiento del usuario, a demás comprobar que el producto este en
su correcto funcionamiento para satisfacer las necesidades de la empresa.
48
III. CONCLUSIONES Y RECOMENDACIONES
III.1 Conclusión
Se concluye que la creación de la página web para el uso adecuado de publicación
de noticias y archivos es una herramienta efectiva para la aplicación del mismo a los
habitantes del Municipio de Yajalón, ya que dicha página fue evaluada y validada por
los miembros del H. Ayuntamiento Municipal en el uso de recursos tecnológicos para
la mejora de la comunicación, cualquier usuario que quiera visitar la página tiene los
permisos para descargar los archivos publicados en la página.
Gracias a los libros, revistas e internet que fueron de una gran ayuda para realizar
investigaciones relacionadas al proyecto ya mencionado, sin estas herramientas no
hubiera sido posible terminar la página web.
Este proyecto se realizó con la finalidad de hacer una mejora de la comunicación y
transparencia al H. Ayuntamiento Municipal de Yajalón ante sus habitantes que lo
representa dicha institución.
49
III.2 Recomendaciones
1. Para el funcionamiento de la página web se recomienda tener una
computadora.
2. Para la publicación de la página web en internet se recomienda contratar un
hosting y comprar un dominio.
3. Dar al Sitio Web mantenimiento y seguimiento adecuado para mejores
resultados.
4. Para para la actualización y mantenimiento del Sitio Web se recomienda
contar un personal con conocimiento en programación.
50
III.3 Bibliografías
Allan K., David P. & Rachel A. Desarrollo web con PHP y Dreamweaver MX 2004.
Editorial Anaya Multimedia, (2005), Madrid
¿Cómo evoluciona el web OS? (2007, febrero). Disponible en:
http://novaspivack.typepad.com/nova_spivacks_weblog/2007/02/steps_towards_a.ht
ml
Gustavo A. Z. T. (2007). Pagina web de CBTA 44. Reporte de estadía, Universidad
Tecnológica de la Selva, Ocosingo, Chiapas, México.
Juan A., L., T. (2008, febrero). Modelo para La comparación de datos Postugraficos
estructuralmente complejos. Tesis de Master, Facultad de Informática, Universidad
Politécnica, Madrid.
Nielsen J. (2012, junio). Ten usability heuristics. Disponible en:
http://www.useit.com/papers/heuristic/heuristic_list.html
Pérez C., MySQL para Windows y Linux (Segunda Edición), Alfa Omega Grupo
Editor, S.A. de C.V., (2008, Marzo), México.
Pavón J., Navegar en internet, Creación de un portal con PHP y MySQL. (3ª. Ed).
RA-MA, Editorial S.A., (01/2007), México.
Xavier F. (2012, junio). Principios básicos de usabilidad para ingenieros software.
[PDF electrónica], Disponible en:
http://is.ls.fi.upm.es/xavier/papers/usabilidad.pdf
51
III.4 Anexos
Anexo 1. Entrevista del encargado de comunicación social.
¿Para qué le serviría una página web la institución?
R= Para tener mayor publicidad
¿Cuál es la principal función le gustaría que realice la página web?
R= Deberá publicar las noticias más recientes del H. Ayuntamiento municipal y
Que sea capaz de publicar archivos con la opción de descargar.
¿Le gustaría que la página web registre el número de visitantes?
R= Si, para saber cuántas personas visitan la página.
¿Considera usted que con la creación del sitio Web en esta institución pueda mejorar
la comunicación?
R= Creo que porque no va ser necesario presentarse personalmente para enterarse
de las noticias.
¿Para la página web que le gustaría que contenga?
La imagen corporativa.
La información adecuada que describa a nuestra compañía y a nuestros
productos.
52
Anexo 2. Diagrama de actividades.
53
Anexo 3. Diagrama de Gantt para la realización de diagramas.
54
Anexo 4. Descripción de caso de uso del administrador.
Anexo 5. Descripción de caso de uso de usuarios.
NUMERO DE CASO Num.001
NOMBRE Autentificación
ACTOR Administrador
DESCRIPCION
Ingresar al sistema para publicar noticias y cargar archivos.
FLUJO DE EVENTOS
1.-Accedera al sistema. 2.-Introducir usuario. 3.-Introducir contraseña 4.- Clic en aceptar.
REQUERIMIENTOS ESPECIALES
Un login y una contraseña.
PRE-CONDICIONES Si no existe mostrara un mensaje de error.
NUMERO DE CASO Num.002
NOMBRE
Navegar en la pagina
ACTORES
Usuario
DESCRIPCION
Navegar en la página para ver noticias, comentar y descargar archivos.
FLUJO DE EVENTOS
1.-Clic menú noticias 2.-Clic leer comentarios 3.-Comentar 4.- Aceptar
REQUERIMIENTOS ESPECIALES
La dirección de la pagina
PRE-CONDICIONES Si se introduce un correo invalido muestra un mensaje de error.
