UNIVERSIDAD TECNOLÓGICA DE LA SELVA
REPORTE DE ESTADÍA TITULADO “PÁGINA “ 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
ASESOR ACADÉMICO
ING. RODRIGO DARINEL VALDIVIEZO LANG
ING. WILBER PEÑALOZA MENDOZA
REVISOR ACADÉMICO
MTRA. XOCHITL CLEMENTE PARRA
OCOSINGO, CHIAPAS, CHIAPAS, AGOSTO DE 2012
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 ac adé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.
1
ÍNDICE
I.
INTRODUCCIÓN ............................................... ........................................................................ ................................................... .......................... 1 I.1 Conceptualización de la Estadía ................................................. .................................................................. ................. 1 I.2 Contextualización..................... Contextualización............................................... ................................................... .......................................... ................. 2 I.2.1 Localización geográfica geo grá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 – 2010 –2012....................... 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 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 desarro llo ......................................................... ................................................................ ....... 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 II
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º
III
Í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
IV
Í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
V
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.
1
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.
2
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.
3
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.
.
4
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.
5
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
DIRECCION DE PLANEACION
SECRETARIO PARTICULAR
COORDINACIÓN DE EDUCACION Y CULTURA
ASESOR JURIDICO
BIBLIOTECARIO
PRESIDENTE MUNICIPAL
REGIDORES
COORDINACIÓN DE ADQUISICION Y SUMINISTRO
SECRETARIO MUNICIPAL
TESORERO
DIRECCION DE SEGURIDAD PUBLICA Y VIALIDAD
DIRECCION DE OBRAS PUBLICAS
RECURSOS HUMANOS
DIRECCION DE DESARROLLO ECONOMICO
ENLACE UNIVERSIDAD Y CAPACITACION
COORDINACION DE FOMENTO AGROPECUARIO
COORDINACION COMUNICACIÓN SOCIAL Y VENTOS ESPECIALES
LICENCIAS Y PERMISOS REGLEMNTOS
COORDINACION DE ATENCION CIUDADANA Y ENLACE SOCIAL
SERVICIOS PUBLICOS Y CONTROL VEHICULAR
COORDINACIÓN DE PROTECCION CIVIL
SAPAM
COORDINACION DE SALUD
INMUJER
COORDINACION DE ASUNTOS RELIGIOSOS
COORDINACION DE DEPORTES
Figura 3. Organigrama Municipal de Yajalón.
6
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.
7
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.
8
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.
9
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.
10
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, 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 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.
11
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 mediante el IDE IDE
Macromedia Dreamweaver 8
utilizando el lenguaje PHP 5, java script, CSS 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 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.
12
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 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 ASCII en blanco y negro)
Webs de segunda generación
Iconos en vez de palabras subrayadas con azul 13
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.
14
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.
15
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.
16
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, 17
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.
18
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. 19
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: 20
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.
21
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.
22
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.
23
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. 24
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.
25
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 e s 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.
26
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.
27
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 cualquier sistema X (para 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). 28
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.
29
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 3 PUERTOS USB 2.0 (Incluye 1 x USB 2.0 puerto para recarga) Windows® 7 Starter Original Tabla 1. Descripción de Hardware.
Disco Duro 250 GB(rpm S - ATA) Procesador Intel® ATOM N450 (1,66 GHz, 667 MHz, 512 KB) Tarjeta Inalámbrica 802.11 b/g WLAM
Software
Descripción Es el manejador de base de datos donde se almacenara los datos MySQL 5.1: insertados en forma de comandos. Se utilizara paquetería de office para realizar documentaciones Microsoft office 2007 requeridas durante el desarrollo del proyecto. Uno de los mejores programas valorados dentro de la Macromedia Dreamweaver 8 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.
30
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. 31
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.
32
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.
33
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.
34
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.
35
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.
36
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. Pagina web publi cacion de noticias y archivos
Autentificar usuario
Editar noticia Nuevo noticia «extend»
Eliminar noticia
Administrador «extend»
Ver noticias
Nuevo usuario Opciones v isuales Opciones
«extend» «extend»
Eliminar usuario
«extend»
Administrar usuario
«extend»
«extend»
«extend»
Cargar archivos
Opciones generales y categoria
Cambiar contaseña
Eliminar archivos «extend»
Ver archivos
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.
37
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.
+ +
Conexion Connection: Conexion ...
+
conectarBaseDeDatos()
Noticias MenuPrincipal + + + +
MenuNuevoNotici as: string MenuCargarArchivo: string MenuV erNotici as: string ...
+ + +
publicarNoticia() cargarArchivo() ...()
+ + + +
id: int titul o: varchar = 160 texto: varchar = 2000 autor: varchar = 12 ...
+ + +
Nuevo() editar() eliminar()
Archiv os
Usuario + + + +
id: int = 2 nomb re: varchar = 100 pass: varcha r = 100 emai l: varchar = 200 ...
+ + +
nuevo() cambiarContraseña() eliminar()
Figura 8. Diagrama de clase.
38
+ + +
id_documento: int = 10 titul o: varchar = 60 descripcion : medi umtext ...
+
nuevo() eliminar()
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.
39
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.
40
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.
41
Nombre de la base de datos: knews. Nombre de la tabla: Noticias. Descripción: Almacena las noticias publicadas. CAMPO
TAMAÑO
PK
FK
ESCTRUCTURA
NULO
DESCRIPCION
Id
TIPO DE DATO int
3
si
---
{0-9}
no
Titulo Texto
varchar varchar
160 20000
-----
-----
{a-z}-{0-9} {a-z}-{0-9}
no no
Autor Fecha
varchar varchar
12 10
-----
-----
{a-z}-{0-9} {0-9}
no no
Categoría
int
5
---
---
{0-9}
no
Llave primaria de la noticia Titulo de la noticia El texto de la noticia El que publica La fecha en que se publica 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
TAMAÑO
PK
FK
ESCTRUCTURA
NULO
DESCRIPCION
Id_documento
TIPO DE DATO int
10
si
---
{0-9}
no
Titulo
mediumtext
50
---
---
{a-z}-{0-9}
si
descripcion
varchar
20000
---
---
{a-z}-{0-9}
si
contenido
longblob
12
---
---
binary
si
Tamaño
int
10
---
---
{0-9}
si
Tipo
varchar
50
---
---
{a-z}
si
nombre_archiv o Tamaño_unida d
varchar
55
{a-z}-{0-9}
si
Llave primaria de documento Titulo de documento Descripción del documento Contenido del documento Tamaño de documento Tipo de documento nombre
varchar
50
{a-z}-{0-9}
si
tamaño
Tabla 4. Diccionario de datos de la tabla documentos.
42
Nombre de la base de datos: knews. Nombre de la tabla: Usuarios. Descripción: Almacena los usuarios que registra el administrador. CAMPO Id
TIPO DE DATO int
TAMAÑO 2
PK si
FK ---
ESCTRUCTURA {0-9}
NULO no
Nombre
varchar
100
---
---
{a-z}-{0-9}
no
Pass
varchar
100
---
---
{a-z}-{0-9}
no
Email
varchar
200
---
---
{a-z}-{0-9}
no
Rango
Set
(‘1’,’2’,’3’)
---
---
{0-3}
no
DESCRIPCION Llave primaria de usuario Nombre de usuario Contraseña del usuario Correo electrónico 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 Id
TIPO DE DATO int
TAMAÑO 3
PK si
FK ---
ESCTRUCTURA {0-9}
NULO no
Idnoticia
varchar
3
---
si
{0-9}
no
Nombre
varchar
50
---
---
{a-z}-{0-9}
no
Comentari o Email
varchar
350
---
---
{a-z}-{0-9}
no
Set
100
---
---
{a-z}-{0-9}
no
Fecha
varchar
20
--
--
{0-9}
no
Tabla 6. Diccionario de datos de la tabla comentarios.
43
DESCRIPCION Llave primaria de comentario Llave foránea de noticia Nombre de quien comenta comentario Correo electronico Fecha en que se comenta
Nombre de la base de datos: knews. Nombre de la tabla: Categoría. Descripción: Almacena la categoría de la noticia. CAMPO Id
TIPO DE DATO int
TAMAÑO 3
PK si
Ncompleto Imagen
varchar varchar
100 100
-----
FK ---
ESCTRUCTURA {0-9}
NULO no
---
{a-z}-{0-9} {a-z}-{0-9}
no no
DESCRIPCION Llave primaria de categoria categoria 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.
44
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.
45
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.
Figura 14. Menú principal del administrador.
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.
46
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.
47
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.
48
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.
49
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
50
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.
51
Anexo 2. Diagrama de actividades.
52
Anexo 3. Diagrama de Gantt para la realización de diagramas.
53