Embed Size (px)
Citation preview
ESCUELA POLITÉCNICA NACIONAL
ESCUELA DE FORMACIÓN DE TECNÓLOGOS DESARROLLO E IMPLEMENTACIÓN DE LA PÁGINA WEB PARA
LA EMPRESA “EVITA”
PROYECTO PREVIO A LA OBTENCIÓN DEL TÍTULO DE TECNÓLOGO EN ANÁLISIS DE SISTEMAS INFORMÁTICOS.
CHRISTIAN CARLOS SAMBACHI PANELUISA [email protected]
DIRECTOR: Ing. Myriam Peñafiel Aguilar MSc. [email protected]
Quito, enero 2010
DECLARACIÓN
Yo CHRISTIAN CARLOS SAMBACHI PANELUISA, declaro bajo juramento que el
trabajo aquí descrito es de mi autoría; que no ha sido previamente presentada
para ningún grado o calificación profesional; y, que he consultado las referencias
bibliográficas que se incluyen en este documento.
A través de la presente declaración cedo mis derechos de propiedad intelectual
correspondientes a este trabajo, a la Escuela Politécnica Nacional, según lo
establecido por la Ley de Propiedad Intelectual, por su Reglamento y por la
normatividad institucional vigente.
CHRISTIAN CARLOS SAMBACHI PANELUISA
CERTIFICACIÓN
Certifico que el presente trabajo fue desarrollado por CHRISTIAN CARLOS
SAMBACHI PANELUISA, bajo mi supervisión.
Ing. Myriam Peñafiel
AGRADECIMIENTO
Deseo expresar mis más sinceros agradecimientos
A la Escuela Politécnica Nacional, por brindarme todas las facilidades para la
conclusión de mi carrera.
A mis maestros, en especial al Ing. Myriam Peñafiel, por sus consejos y por
compartir desinteresadamente sus amplios conocimientos y experiencia.
A mis compañeros de la carrera, por el apoyo y motivación que de ellos he
recibido.
DEDICATORIA A mi Dios, por guiarme en el correcto camino de la vida, quien siempre me da
fuerzas para seguir.
A mis Padres, por creer y confiar siempre en mí, apoyándome en todas las
decisiones que he tomado en la vida.
A mis Hermanos y Hermanas quienes siempre me dieron palabras de aliento en
los momentos difíciles.
Todas aquellas personas que de una u otra forma contribuyeron con su granito de
arena para lograr que mi objetivo.
CHRISTIAN CARLOS SAMBACHI PANELUISA
RESUMEN
El presente documento describe el desarrollo e implementación del sitio Web para
la empresa EVITA, el cual fue elaborada bajo software libre las herramientas
utilizadas fueron:
AppServ Open Project - 2.5.10 para Windows una herramienta que facilita la
instalación de servidor Apache, MySQL y PHP en una sola herramienta.
Apache servidor HTTP multiplataforma. PHP lenguaje de programación dinámico
que utilizan la mayoría de gestores de contenidos más populares. MySQL gestor
de bases de datos, rápido y seguro. Lenguajes adicionales utilizados en la
elaboración de las páginas fueron HTML y JavaScript.
La edición de páginas se la llevo a cabo en Macromedia Dreamweaver 8
herramienta líder en su campo.
Las imágenes fueron elaboradas en Macromedia Fireworks 8, software que
facilita la edición y creación de imágenes.
En la construcción del sitio Web se ha aplicado todos los conocimientos
adquiridos durante la carrera, dando como resultado un sitio confiable, agradable
y sobretodo útil para la empresa auspiciante del proyecto.
A continuación se explicara brevemente el contenido de los capítulos del
documento.
CAPITULO I. Se da a conocer la problemática de la empresa y las soluciones
encontradas.
CAPITULO II. Se describe las herramientas utilizadas para la construcción del
sitio Web.
CAPITULO III. Se da a conocer los aspectos metodológicos utilizados en la
construcción del sitio
CAPITULO IV. Se expresan conclusiones, recomendaciones y adicional contiene
los anexos que describen la construcción del proyecto.
CONTENIDO
CAPITULO I.
ASPECTOS GENERALES………………………………………………………………1
1.1 ÁMBITO…………………………………………………………………………….1
1.2 PLANTEAMIENTO DEL PROBLEMA……………………………………...........1
1.3 FORMULACIÓN Y SISTEMATIZACIÓN DEL PROBLEMA…………………...2
1.3.1 FORMULACIÓN………………………………………………………………..2
1.3.2 SISTEMATIZACIÓN……………………………………………………………2
1.4 OBJETIVOS………………………………………………………………………..3
1.4.1 OBJETIVO GENERAL………………………………………………………...3
1.4. 2 OBJETIVOS ESPECÍFICOS…………………………………………...........3
1.5 JUSTIFICACIÓN DEL PROYECTO……………………………………….........3
1.6 ALCANCE Y LIMITACIONES……………………………………………….........4
1.6.1 PRESUPUESTO…………………………………………………………….…4
CAPITULO II.
HERRAMIENTAS…………………………………………………………………….......5
2.1 INGENIERÍA WEB…………………………………………………………………5
2.1.1 EL PROCESO DE INGENIERÍA WEB………………………………………6
2.1.2 CONTROL Y GARANTÍA DE LA CALIDAD………………………………...7
2.1.3 CONTROL DE LA CONFIGURACIÓN………………………………………7
2.1.4 LA GESTIÓN DEL PROCESO………………………………………………..8
2.1.5 ¿QUÉ MARCA LA DIFERENCIA?.............................................................8
2.1.6 ¿POR QUÉ ES NECESARIA?...................................................................8
2.2 ARQUITECTURA WEB……………………………………………………………9
2.2.1 ASPECTOS GENERALES EN ARQUITECTURA WEB…………………...9
2.2.2 EVOLUCIÓN DE MODELOS ARQUITECTÓNICOS………………………9
2.2.3 ESTRUCTURA DE LAS APLICACIONES WEB…………………………..12
2.2.4 HERRAMIENTAS DE SOPORTE AL DESARROLLO....………………..13
2.2.4.1 HTML………………………………………………………………………13
2.2.4.2 XHTML…………………………………………………………………….14
2.2.4.3 JavaScript…………………………………………………………………14
2.2.4.4 Apache Web Server……………………………………………………...15
2.2.4.5 CSS………………………………………………………………………...15
2.2.4.6 PHP………………………………………………………………………...15
2.2.4.7 MySQL……………………………………………………………………..16
2.2.5 HERRAMIENTAS DE APOYO………………………………………………17
2.2.5.1 Macromedia Dreamweaver 8……………………………………….......17
2.2.5.2 Macromedia Fireworks 8………………………………………………...18
2.2.5.3 Power Designer…………………………………………………………..18
2.3 DISEÑO DE APLICACIONES WEB…………………………………………….18
2.3.1 DISEÑO WEB APLICADO…………………………………………………..19
2.3.1.1 Etapas……………………………………………………………………..19
2.3.1.2 Fundamentos……………………………………………………………..20
2.3.1.3 Accesibilidad………………………………………………………….......20
2.3.2 PRINCIPIOS DE DISEÑO WEB…………………………………………….21
2.3.2.1 La ley de Fitts……………………………………………………………..21
2.3.2.2 Dar feedback al usuario…………………………………………………21
2.3.2.3 Reutilización de la experiencia del usuario……………………………22
2.3.2.4 Uso del Scroll……………………………………………………………..22
2.3.2.5 Sentencias y párrafos……………………………………………………22
2.3.2.6 Imágenes………………………………………………………………….23
2.3.2.7 Ancho de Banda………………………………………………………….23
CAPITULO III.
ASPECTOS METODOLÓGICOS…………………………………………………..…24
3.1 MODELO ESPIRAL ORIENTADO A LA WEB…………………………….......24
3.1.1 ACTIVIDADES PRINCIPALES:……………………………………………..24
3.1.2 CARACTERÍSTICAS…………………………………………………….......24
3.1.3 DESVENTAJAS………………………………………………………………24
3.1.4 VENTAJAS……………………………………………………………………25
3.2 METODOLOGÍA OOHDM……………………………………………………….25
3.2.1 INTRODUCCIÓN……………………………………………………………..25
3.2.2 LOS PRINCIPIOS BÁSICOS DEL MÉTODO DE OOHDM………….......26
3.2.2.1 Modelo Conceptual……………………………………………………….26
3.2.2.2 Diseño Navegacional…………………………………………………….26
3.2.2.3 Diseño de Interfaz Abstracta…………………………………………….27
3.2.2.4 Implementación…………………………………………………………..27
3.3 MODELO UML (UNIFIED MODELING LANGUAGE)………………………..28
3.3.1 DIAGRAMA DE CASO DE USO…………………………………………....29
3.3.2 DIAGRAMA DE CLASES……………………………………………………30
3.3.3 DIAGRAMA DE OBJETOS………………………………………………….32
3.3.3.1 Diccionario de Clases……………………………………………………33
3.3.4 DIAGRAMA DE INTERACCIÓN……………………………………………33
3.3.4.1 Diagrama de secuencia…………………………………………………33
3.3.4.2 Diagrama de Colaboración…………………………………………......34
3.3.5 DIAGRAMA DE ESTADOS………………………………………………….35
3.3.6 DIAGRAMA DE COMPONENTES………………………………………….36
3.3.7 DIAGRAMA DE ACTIVIDAD………………………………………………...37
CAPITULO IV.
CONCLUSIONES Y RECOMENDACIONES………………………………………...38
4.1 CONCLUSIONES…………………………………………………………….......38
4.2 RECOMENDACIONES…………………………………………………………..39
4.3 BIBLIOGRAFIA……………………………………………………………….......40
LIBROS……………………………………………………………………………….40
DIRECCIONES WEB……………………………………………………………….40
ANEXOS……………………………………………………………………………….42
MANUAL TECNICO…………………………………………………………………..43
ANALISIS DE REQUISITOS…………………………………………………….......44
DIAGRAMA DE ACTORES…………………………………………………………..45
ANÁLISIS Y DISEÑO……………………………………………………………......46
MODELO ESTÁTICO……………………………………………………………......47
DIAGRAMA DE CASOS DE USO……………………………………………...48
DIAGRAMA DE CASOS DE USO POR ACTIVIDAD………………………48
DIAGRAMA DE CASOS DE USO PROCESOS……………………………52
DICCIONARIO DE CASOS DE USO………………………………………..57
DIAGRAMA DE CLASES……………………………………………………….62
DICCIONARIO DE CLASES…………………………………………………63
DIAGRAMA DE OBJETOS……………………………………………………..66
MODELO DINÁMICO……………………………………………………………...67
DIAGRAMA DE INTERACCIÓN………………………………………………..68
DIAGRAMA DE SECUENCIAS…………………………………………………68
DIAGRAMA DE COLABORACIÓN…………………………………………….73
MODELO FUNCIONAL……………………………………………………………77
DIAGRAMA DE ESTADOS…………………………………………………....78
MODELO ARQUITECTÓNICO……………………………………………….…80
DIAGRAMA ARQUITECTÓNICO……………………………………………..81
DIAGRAMA NAVEGACIONAL…………………………………………………82
CONSTRUCCIÓN…………………………………………………………………83
FROND END……………………………………………………………………..84
BACK END………………………………………………………………………..93
PRUEBAS……………………………………………………………………………94
MANUAL DEL USUARIO…………………………………………………………..99
CAPITULO I
ASPECTOS GENERALES
1.1 ÁMBITO
La empresa EVITA. Nace hace 6 años en la ciudad de Quito con la finalidad de
proveer y comercializar suministros de oficina para el público en general, tratando de
satisfacer todas las necesidades del la población.
Actualmente la empresa cuenta con un amplio repertorio de mercancías y
suministros para diferentes clientes que posee.
1.2 PLANTEAMIENTO DEL PROBLEMA
Al momento el proceso de facturación y de inventario de mercadería, en la empresa,
se lleva en forma manual, por lo que se presenta entre otros los siguientes
problemas:
• La empresa no emite facturas de forma eficiente.
• La empresa no posee un inventario de sus productos.
• La empresa no lleva un registro de sus clientes.
• El personal toma demasiado tiempo en la atención de un cliente.
• La búsqueda de información de un producto es lento y tedioso.
• Debido ingreso de nueva mercadería es casi imposible administrar eficientemente
los registros.
• Pérdida de tiempo en la entrega de facturas al cliente debido a que se la llena en
forma manual,
No se lleva un correcto informe de ganancia anual.
De continuar así, tanto los datos de productos, clientes como de la emisión de
facturas no serían totalmente consistentes, ocasionando demora en el manejo de la
información de modo que estos inconvenientes causen malestar en la atención a los
clientes y empleados.
Solución
Para ayudar a la solución de los problemas que se presentan en esta empresa
proponemos la creación de una página web que permita la facturación y control de
inventario de mercadería con la cual:
• Se agilita la entrega de facturas a los clientes con todos los detalles pertinentes.
• La información de productos que ésta ofrece esté siempre disponible.
• Se optimice el tiempo de atención a los clientes.
• Los empleados pueden consultar información necesaria de los diferentes
productos existentes.
• La información de los productos y clientes se almacenen de forma adecuada.
Se agilice el tiempo de ubicación de un producto.
1.3 FORMULACIÓN Y SISTEMATIZACIÓN DEL PROBLEMA
1.3.1 FORMULACIÓN
¿Cómo agilitar el proceso de facturación y optimizar la entrega de información de
productos a los clientes de la empresa “Evita”?
1.3.2 SISTEMATIZACIÓN
¿Cómo administrar la información de los productos que se ofrece, de manera que no
exista perdida de información?
¿Cómo administrar la información del cliente, de manera que no exista perdida de
información?
¿Cómo informarse de la disponibilidad de productos que se ofrece?
¿Cómo agilitar la atención a clientes, cuando estos requieren información?
¿Cómo se lleva un registro confiable de los productos mas requeridos?
¿Cómo realizar la búsqueda de información de forma rápida y oportuna?
¿Cómo los clientes pueden solicitar información más detallada y confidencial?
1.4 OBJETIVOS
1.4.1 OBJETIVO GENERAL
Desarrollar una Aplicación web que pueda automatizar las tareas administrativas y
financieras con el fin de mejorar el control de la información y brindar una eficiente
atención a sus clientes.
1.4. 2 OBJETIVOS ESPECÍFICOS
1. Emitir facturas con información correcta y concreta.
2. Consultar existencias de productos por medio de la web.
3. Poder llevar una registro de clientes.
4. Permitir al usuario registrar el ingreso, actualizar, borrar datos de los clientes.
5. Permitir al usuario registrar el ingreso, actualizar, borrar datos de productos.
6. Mantener un inventario actualizado de la oferta de productos en una base de
datos.
7. Permitir al administrador dar permisos a los diferentes usuarios que lo requieran.
8. Permitir utilizar software libre en beneficio de la empresa.
1.5 JUSTIFICACIÓN DEL PROYECTO
Justificación Teórica
Se propone desarrollar un sitio Web dinámico que permita la optimización de entrega
de información la gestión de información de los clientes, productos además
automatizar las actividades que se realizan en la empresa para que proporcione
información a los empleados en la toma de decisiones, aprovechando las ventajas de
las tecnologías que se tiene en la actualidad.
1.6 ALCANCE Y LIMITACIONES
1.6.1 PRESUPUESTO
Costo por hora ($) Horas Total ($)
Recursos Humanos
Diseñador 280 6 1680
Programador 320 5 1600
Software
Apache 0 0
PHP 0 0
MySQL 0 0
JavaScript 0 0
Xara Webstyle 0 0
Macromedia 120 120
Hardware
PC de Escritorio 500 500
Otros
Impresiones y copias 200 40
Internet 200 70
Total : 4010
CAPITULO II.
HERRAMIENTAS
2.1 INGENIERÍA WEB
La ingeniería web se debe al crecimiento desenfrenado que está teniendo la Web
está ocasionando un impacto en la sociedad y el nuevo manejo que se le está dando
a la información en las diferentes áreas en que se presenta ha hecho que las
personas tiendan a realizar todas sus actividades por esta vía.
Desde que esto empezó a suceder el Internet se volvió más que una diversión y
empezó a ser más serio, ya que el aumento de publicaciones y de informaciones hizo
que la Web se volviera como un desafío para los ingenieros del software, a raíz de
esto se crearon enfoques disciplinados, sistemáticos y metodologías donde tuvieron
en cuenta aspectos específicos de este nuevo medio.
La ingeniería Web es la aplicación de metodologías sistemáticas, disciplinadas y
cuantificables al desarrollo eficiente, operación y evolución de aplicaciones de alta
calidad en la World Wide Web. En este sentido, la ingeniería de la Web hace
referencia a las metodologías, técnicas y herramientas que se utilizan en el desarrollo
de aplicaciones Web complejas y de gran dimensión en las que se apoya la
evaluación, diseño, desarrollo, implementación y evolución de dichas aplicaciones.
Aplicaciones Web
En la ingeniería de software se denomina aplicación web a aquellas aplicaciones
que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o
de una intranet mediante un navegador. En otras palabras, es una aplicación de
software que se codifica en un lenguaje soportado por los navegadores web (HTML,
Java Script, Java, php, asp, etc.) en la que se confía la ejecución al navegador.
Las aplicaciones web son populares debido a lo práctico del navegador web como
cliente ligero, así como a la facilidad para actualizar y mantener aplicaciones web sin
distribuir e instalar software a miles de usuarios potenciales. Existen aplicaciones
como los webmails, wikis, weblogs, tiendas en línea que son ejemplos bien
conocidos de aplicaciones web.
Es importante mencionar que una página Web puede contener elementos que
permiten una comunicación activa entre el usuario y la información. Esto permite que
el usuario acceda a los datos de modo interactivo, gracias a que la página
responderá a cada una de sus acciones, como por ejemplo rellenar y enviar
formularios, participar en juegos diversos y acceder a gestores de base de datos de
todo tipo.
Uso empresarial. Una estrategia que está emergiendo para las empresas
proveedoras de software consiste en proveer acceso vía web al software. Para
aplicaciones previamente distribuidas, como las aplicaciones de escritorio, se puede
optar por desarrollar una aplicación totalmente nueva o simplemente por adaptar la
aplicación para ser usada con una interfaz web.
2.1.1 EL PROCESO DE INGENIERÍA WEB
Características como inmediatez y evolución y crecimiento continuos, nos llevan a un
proceso incremental y evolutivo, que permite que el usuario se
involucre activamente, facilitando el desarrollo de productos que se ajustan
mucho lo que éste busca y necesita.
Según Pressman [PRE00], las actividades que formarían parte del marco de trabajo
incluiría las tareas abajo enumeradas. Dichas tareas serían aplicables a cualquier
aplicación Web, independientemente del tamaño y complejidad de la misma. Las
actividades que forman parte del proceso son: formulación, planificación análisis,
modelización, generación de páginas, test y evaluación del cliente.
• La Formulación identifica objetivos y establece el alcance de la primera
entrega.
• La Planificación genera la estimación del coste general del proyecto, la
evaluación de riesgos y el calendario del desarrollo y fechas de entrega.
• El Análisis especifica los requerimientos e identifica el contenido.
• La Modelización se compone de dos secuencias paralelas de tareas.
Una consiste en el diseño y producción del contenido que forma parte de la
aplicación.
La otra, en el diseño de la arquitectura, navegación e interfaz de usuario. Es
importante destacar la importancia del diseño de la interfaz.
Independientemente del valor del contenido y servicios prestados, una buena interfaz
mejora la percepción que el usuario tiene de éstos.
En la Generación de páginas se integra contenido, arquitectura, navegación e
interfaz para crear estática o dinámicamente el aspecto más visible de la aplicación,
las páginas.
El Test busca errores a todos los niveles: contenido, funcional, navegacional,
rendimiento, etc. El hecho de que las aplicaciones residan en la red, y que ínter
operen en plataformas muy distintas, hace que el proceso de test sea especialmente
difícil. Finalmente, el resultado es sometido a la evaluación del cliente.
2.1.2 CONTROL Y GARANTÍA DE LA CALIDAD
Una de las tareas colaterales que forman parte del proceso es el Control y Garantía
de la Calidad (CGC). Todas las actividades CGC de la ingeniería software tradicional
como son: establecimiento y supervisión de estándares, revisiones técnicas formales,
análisis, seguimiento y registro de informes, etc., son igualmente aplicables a la
Ingeniería Web. Sin embargo, en la Web toman especial relevancia para valorar la
calidad aspectos como:
Usabilidad, Funcionabilidad, Fiabilidad, Seguridad, Eficiencia y Mantenibilidad.
2.1.3 CONTROL DE LA CONFIGURACIÓN
Establecer mecanismos adecuados de control de la configuración para la
Ingeniería Web es uno de los mayores desafíos a los que esta nueva disciplina se
enfrenta. La Web tiene características únicas que demandan estrategias y
herramientas nuevas. Hay cuatro aspectos importantes a tener en cuenta en el
desarrollo de tácticas de control de la configuración para la Web [DAR99]:
• Contenido: Considerando la dinamicidad con la que el contenido se genera, es
tarea compleja organizar racionalmente los objetos que forman la
configuración y establecer mecanismos de control.
• Personal: Cualquiera realiza cambios. Hay mucho personal no especializado
que no reconoce la importancia que tiene el control del cambio.
• Escalabilidad: Es común encontrar aplicaciones que de un día para otro
crecen considerablemente. Sin embargo, las técnicas de control no escalan de
forma adecuada.
• Política: ¿Quién posee la información? ¿Quién asume la responsabilidad y
coste de mantenerla?
2.1.4 LA GESTIÓN DEL PROCESO
En un proceso tan rápido como es el proceso de Ingeniería Web, donde los tiempos
de desarrollo y los ciclos de vida de los productos son tan cortos, ¿merece la pena el
esfuerzo requerido por la gestión? La respuesta es que dada su complejidad es
imprescindible. Entre los aspectos que añaden dificultad a la gestión destacamos:
Alto porcentaje de contratación a terceros.
El desarrollo incluye una gran variedad de personal técnico y no técnico trabajando
en paralelo.
El equipo de desarrollo debe dominar aspectos tan variopintos como, software
basado en componentes, redes, diseño de arquitectura y navegación, diseño gráfico
y de interfaces, lenguajes y estándares en Internet, test de aplicaciones Web, etc., lo
que hace que el proceso de búsqueda y contratación de personal sea arduo.
2.1.5 ¿QUÉ MARCA LA DIFERENCIA?
A modo de breve resumen enumeramos las siguientes diferencias:
Confluencia de disciplinas: Sistemas de Información, Ingeniería Software y
Diseño Gráfico que requiere equipos multidisciplinares y polivalentes.
Ciclos de vida y tiempo de desarrollo muy cortos.
Cambio continuo: Necesidad de soluciones que permitan flexibilidad y adaptación
conforme el proyecto cambia.
Requisitos fuertes de Seguridad, Rendimiento y Usabilidad.
2.1.6 ¿POR QUÉ ES NECESARIA?
La Web evoluciona y crece sin diseño alguno. Prácticas tan pobres de calidad
pueden introducir defectos que dejen al efecto 2000 como un juego de niños. Es
deber de todos proporcionar cimientos firmes a una tecnología que “mágicamente”
nos permite acceder a cualquier hora a cualquier punto del planeta para obtener
bienes tan valiosos como son los Servicios y la Información.
2.2 ARQUITECTURA WEB
De la misma forma en que los arquitectos tradicionales diseñan y coordinan la
construcción de edificios, los arquitectos web diseñan y coordinan el desarrollo de
sitios web. Los sitios web son una conjunción muy compleja de distintos sistemas
integrados entre sí (Bases de datos, servidores, redes, componentes de backup y
seguridad, etc.). El resultado final será un sitio que pueda resolver las necesidades
de negocios: Vender productos y servicios online y servir mejor a las necesidades de
los clientes, en el siguiente grafico podemos observar una arquitectura Web básica.
2.2.1 ASPECTOS GENERALES EN ARQUITECTURA WEB
• Escalabilidad
• Separación de responsabilidades
• Portabilidad
• Gestión de la sesión del usuario
• Aplicación de patrones de diseño
Portabilidad
• Una aplicación web debe poder adaptarse a las distintas arquitecturas físicas
posibles en el despliegue.
• Las tareas de adaptación a un nuevo entorno deben limitarse al ámbito de la
configuración, no del desarrollo.
2.2.2 EVOLUCIÓN DE MODELOS ARQUITECTÓNICOS
• Modelo de Arquitectura 1 (Aplicaciones CGI)
• Modelo de Arquitectura 1.5 (JSP y Servlets)
• Modelo de Arquitectura 2 (MVC)
• Modelo de Arquitectura 2 (MVC con Struts)
• Modelo de Arquitectura 2X
World Wide Web o Red Global Mundial
Es un sistema de documentos de hipertexto enlazados y accesibles a través de
Internet.
El Navegador Web, Browser
El navegador puede considerarse como una interfaz de usuario universal. Dentro de
sus funciones están la petición de las páginas Web, la representación adecuada de
sus contenidos y la gestión de los posibles errores que se puedan producir.
Sitio web
Un sitio web (en inglés: website) es un conjunto de páginas web, típicamente
comunes a un dominio de Internet o subdominio en la World Wide Web en Internet.
Un sitio web puede ser el trabajo de una persona, una empresa u otra organización y
está típicamente dedicada a algún tema particular o propósito.
No debemos confundir sitio web con página web, esta última es sólo un archivo
HTML, y forma parte de un sitio web.
Páginas Web
Una página web u hoja electrónica es una fuente de información adaptada para la
World Wide Web (WWW) y accesible mediante un navegador de Internet que
normalmente forma parte de un Sitio web. Esta información se presenta
generalmente en formato HTML.
Servidor Web
Un servidor web es un programa que implementa el protocolo HTTP (hypertext
transfer protocol). Este protocolo pertenece a la capa de aplicación del modelo OSI y
está diseñado para transferir lo que llamamos hipertextos, páginas web o páginas
HTML (hypertext markup language): textos complejos con enlaces, figuras,
formularios, botones y objetos incrustados como animaciones o reproductores de
música.
Es un programa que se ejecuta continuamente en un ordenador (también se emplea
el término para referirse al ordenador que lo ejecuta), manteniéndose a la espera de
peticiones por parte de un cliente (un navegador web) y que responde a estas
peticiones adecuadamente, mediante una página web que se exhibirá en el
navegador o mostrando el respectivo mensaje si se detectó algún error.
Cliente
El cliente es una aplicación informática que se utiliza para acceder a los servicios que
ofrece un servidor, normalmente a través de una red de telecomunicaciones.
2.2.3 ESTRUCTURA DE LAS APLICACIONES WEB
Aunque existen muchas variaciones posibles, una aplicación web está normalmente
estructurada como una aplicación de tres-capas. En su forma más común, el
navegador web ofrece la primera capa y un motor capaz de usar alguna tecnología
web dinámica (ejemplo: PHP, Java Servlets o ASP, ASP.NET, CGI, ColdFusion,
embPerl, Python (programming language) o Ruby on Rails) constituye la capa de en
medio. Por último, una base de datos constituye la tercera y última capa.
El navegador web manda peticiones a la capa de en medio que ofrece servicios
valiéndose de consultas y actualizaciones a la base de datos y a su vez proporciona
una interfaz de usuario.
Aplicaciones Web y la importancia del desarrollo en capas
Las aplicaciones hipermedia han evolucionado en los últimos años y se han
concentrado mayormente en la
Web. Las antiguas aplicaciones distribuidas en CDS dieron lugar a aplicaciones
dinámicas, de constante actualización e incluso personalizables, capaces de
adaptarse a los tipos de usuarios y en casos avanzados, a cada usuario en particular.
Estas características encuentran el medio ideal en la Web, ya que de otra forma sería
costoso su mantenimiento y evolución.
La complejidad del desarrollo ocurre a diferentes niveles: dominios de aplicación
sofisticados (financieros, médicos, geográficos, etc.); la necesidad de proveer acceso
de navegación simple a grandes cantidades de datos multimedia les, y por último la
aparición de nuevos dispositivos para los cuales se deben construir interfaces Web
fáciles de usar. Esta complejidad en los desarrollos de software sólo puede ser
alcanzada mediante la separación de los asuntos de modelización en forma clara y
modular.
2.2.4 HERRAMIENTAS DE SOPORTE AL DESARROLLO EN TRES NIVELES.
2.2.4.1 HTML
El HTML es una aplicación del SGML ( Standard Generalized Markup Language),
que es un sistema para generar documentos estructurados y lenguajes de marcas.
HTML ( Hyper Text Markup Language), es decir, lenguaje de definición por marcas
para hipertexto, es un lenguaje muy sencillo que permite definir documentos
hipertexto a base de ciertas etiquetas que marcan partes del documento dándoles
una estructura o jerarquía, y que permite presentar el texto de una manera
estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos
o fuentes de información relacionadas, y con inserciones multimedia (gráficos,
sonido, video... ). El lugar donde se encuentra esta información puede ser el mismo
documento o cualquier otro lugar de Internet. Es esta una de las cualidades que le ha
dado tanta difusión a Internet, ya que permite a cualquier usuario sin conocimientos
de informática la navegación por la Red.
Para crear un documento hipertexto para la WWW sólo debemos añadir las
etiquetas adecuadas al texto para especificar la estructura lógica ( títulos, párrafos de
texto normal, definiciones, citas...) del contenido y los diferentes efectos (especificar
los lugares del documento dónde se debe de poner cursiva, negrita o un gráfico
determinado) que se quieren dar. La presentación final se realiza por un programa
especializado llamado genéricamente Navegador o Browser, como Netscape
Navigator o Microsoft Internet Explorer. Esta presentación no será igual en todos los
visualizadores, por lo que al confeccionarlo debemos prestar más atención a la
estructura y organización que a la apariencia del documento.
2.2.4.2 XHTML
XHTML, acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje
extensible de marcado de hipertexto), es el lenguaje de marcado pensado para
sustituir a HTML como estándar para las páginas web. En su versión 1.0, XHTML es
solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas
funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su
objetivo es avanzar en el proyecto del World Wide Web Consorcio de lograr una web
semántica, donde la información, y la forma de presentación estén claramente
separadas.
El lenguaje XHTML surgió ante los problemas de compatibilidad que surgían cuando
se usaba un documento HTML en distintas plataformas.
2.2.4.3 JavaScript
Los autores inicialmente lo llamaron Mocha y más tarde LiveScript pero fue
rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems y
Netscape, el 4 de diciembre de 1995.
En 1997 los autores propusieron JavaScript para que fuera adoptado como estándar
de la European Computer Manufacturers' Association ECMA, que a pesar de su
nombre no es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue
adoptado como un estándar ECMA, con el nombre de ECMAScript. Poco después
fue implementado como estándar ISO.
JavaScript, al igual que Java o VRML, es una de las múltiples maneras que han
surgido para extender las capacidades del lenguaje HTML. Al ser la más sencilla, es
por el momento la más extendida. Antes que nada conviene aclarar lo siguiente:
JavaScript no es un lenguaje de programación propiamente dicho. Es un lenguaje
script orientado a documento, como pueden ser los lenguajes de macros que tienen
muchos procesadores de texto, JavaScript sirve principalmente para mejorar la
gestión de la interfaz cliente/servidor. Un script JavaScript insertado en un
documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los
eventos generados por el usuario. Estos eventos pueden ser el recorrido del propio
documento HTML o la gestión de un formulario.
2.2.4.4 Apache Web Server
El servidor HTTP Apache es un software (libre) servidor HTTP de código abierto para
plataformas Unix (BSD, GNU/Linux, etc.), Windows, Macintosh y otras, que
implementa el protocolo HTTP/1.1 y la noción de sitio virtual. Cuando comenzó su
desarrollo en 1995 se basó inicialmente en código del popular NCSA HTTPd 1.3,
pero más tarde fue reescrito por completo.
Apache presenta entre otras características mensajes de error altamente
configurables, bases de datos de autenticación y negociado de contenido.
Apache tiene amplia aceptación en la red: desde 1996, Apache, es el servidor HTTP
más usado. Alcanzó su máxima cuota de mercado en 2005 siendo el servidor
empleado en el 70% de los sitios web en el mundo.
2.2.4.5 CSS
Es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de
los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma
de separar los contenidos y su presentación y es imprescindible para crear páginas
web complejas.
Separar la definición de los contenidos y la definición de su aspecto presenta
numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos
y con significado completo (también llamados "documentos semánticos"). Además,
mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y
permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para
marcar los contenidos, es decir, para designar la función de cada elemento dentro de
la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de
cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical
entre elementos, posición de cada elemento dentro de la página, etc.
2.2.4.6 PHP
PHP es un lenguaje de programación de estilo clásico, con esto quiero decir que es
un lenguaje de programación con variables, sentencias condicionales, bucles,
funciones. No es un lenguaje de marcas como podría ser HTML, XML o WML. Está
más cercano a JavaScript o a C, para aquellos que conocen estos lenguajes.
Pero a diferencia de Java o JavaScript que se ejecutan en el navegador, PHP se
ejecuta en el servidor, por eso nos permite acceder a los recursos que tenga el
servidor como por ejemplo podría ser una base de datos. El programa PHP es
ejecutado en el servidor y el resultado enviado al navegador. El resultado es
normalmente una página HTML pero igualmente podría ser una página WML.
Al ser PHP un lenguaje que se ejecuta en el servidor no es necesario que su
navegador lo soporte, es independiente del navegador, pero sin embargo para que
sus páginas PHP funcionen, el servidor donde están alojadas debe soportar PHP.
2.2.4.7 MySQL
MySQL es un sistema de administración relacional de bases de datos. Una base de
datos relacional archiva datos en tablas separadas en vez de colocar todos los datos
en un gran archivo. Esto permite velocidad y flexibilidad. Las tablas están conectadas
por relaciones definidas que hacen posible combinar datos de diferentes tablas sobre
pedido.
Desde enero de 2008 una subsidiaria de Sun Microsystems - desarrolla MySQL
como software libre en un esquema de licenciamiento dual.
MySQL es muy utilizado en aplicaciones web como, Drupal o phpBB, en plataformas
(Linux/Windows-Apache-MySQL-PHP/Perl/Python), y por herramientas de
seguimiento de errores como Bugzilla. Su popularidad como aplicación web está muy
ligada a PHP, que a menudo aparece en combinación con MySQL.
2.2.5 HERRAMIENTAS DE APOYO
2.2.5.1 Macromedia Dreamweaver 8
Macromedia Dreamweaver 8 es un editor HTML profesional para diseñar, codificar y
desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente
el código HTML como si prefiere trabajar en un entorno de edición visual,
Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de
creación Web.
Dreamweaver le permite crear aplicaciones Web dinámicas basadas en bases
de datos empleando tecnologías de servidor como CFML, ASP.NET, ASP,
JSP y PHP. Si prefiere trabajar con datos en XML, Dreamweaver incorpora
herramientas que le permiten crear fácilmente páginas XSLT, adjuntar
archivos XML y mostrar datos XML en sus páginas.
Características
Es herramienta líder en la industria del desarrollo web se enfoca en esta nueva
versión en eficiencia, innovación e integración.
Dreamweaver 8 incluye herramientas para trabajar aplicaciones que manejan XML,
así como mejoras a su manejo de hojas de estilo (CSS).
Del lado del XML, incluye interesantes herramientas visuales para incluir contenidos
de este formato como son los feeds RSS, integrándolos fácilmente en sitios web y
aplicaciones.
Para el trabajo con CSS han simplificado la creación y manejo de diferentes estilos,
promoviendo los estándares para nuevos usuarios y facilitando su aplicación para
usuarios avanzados.
También han buscado facilitar la difusión de Flash Video, con herramientas que
permiten incluir este formato muy fácilmente en páginas web.
Además incluye nuevas herramientas de zoom y guía para revisar los diseños. Y una
barra de código para acceder a funciones frecuentes.
Destaca también que las funciones para cargar y descargar archivos ahora funcionan
en el background sin interrumpir la productividad en el programa.
2.2.5.2 Macromedia Fireworks 8
Macromedia Fireworks 8 le permite crear y optimizar de forma precisa imágenes para
la Web en un entorno intuitivo y personalizable. Las herramientas de optimización
líderes de la industria que ofrece Fireworks le ayudan a encontrar el equilibrio entre
una calidad de imagen máxima y un tamaño de compresión mínimo.
2.2.5.3 Power Designer
Es la herramienta de modelamiento número uno de la industria, permite a las
empresas, de manera más fácil, visualizar, analizar y manipular metadatos, logrando
un efectiva arquitectura empresarial de información.
PowerDesigner para Arquitectura Empresarial también brinda un enfoque basado en
modelos, el cual permite alinear al negocio con la tecnología de información,
facilitando la implementación de arquitecturas efectivas de información empresarial.
Brinda potentes técnicas de análisis, diseño y gestión de metadatos a la empresa.
PowerDesigner combina varias técnicas estándar de modelamiento con herramientas
líder de desarrollo, como .NET, Sybase WorkSpace, Sybase Powerbuilder, Java y
Eclipse, para darle a las empresas soluciones de análisis de negocio y de diseño
formal de base de datos. Además trabaja con más de 60 bases de datos
relacionales.
2.3 DISEÑO DE APLICACIONES WEB
El diseño web es una actividad que consiste en la planificación, diseño e
implementación de sitios web y páginas web. No es simplemente una aplicación del
diseño convencional, ya que requiere tener en cuenta cuestiones tales como
navegabilidad, interactividad, usabilidad, arquitectura de la información y la
interacción de medios como el audio, texto, imagen y vídeo. Se lo considera dentro
del Diseño Multimedia.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta
la eficiencia de la web como canal de comunicación e intercambio de datos, que
brinda posibilidades como el contacto directo entre el productor y el consumidor de
contenidos, característica destacable del medio.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet
especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como
medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en
Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más
de difusión de su obra.
2.3.1 DISEÑO WEB APLICADO
El diseño de páginas web trata básicamente de realizar un documento con
información hiperenlazado con otros documentos y asignarle una presentación para
diferentes dispositivos de salida (en una pantalla de computador, impreso en papel,
en un teléfono móvil, etc.).
Estos documentos o páginas web pueden ser creados:
• creando archivos de texto en HTML.
• utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.
• utilizando lenguajes de programación del lado servidor para generar la página
web.
2.3.1.1 Etapas
Para el diseño de páginas web debemos tener en cuenta tres etapas:
• La primera es el diseño visual de la información que se desea editar. En esta
etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros
documentos y otros objetos multimedia que se consideren pertinentes. Es
importante que antes de trabajar sobre el computador se realice un bosquejo o
prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
• La segunda, una vez que se tiene este boceto se pasa a 'escribir' la página web.
Para esto, y fundamentalmente para manejar los vínculos entre documentos, se
creó el lenguaje de marcación de hipertexto o HTML.
• La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta
consiste en optimizar la estructura del contenido para mejorar la posición en que
aparece la página en determinada búsqueda. Etapa no gustosa por los
diseñadores gráficos, por que a diferencia del texto, aún para el año 2009 no se
pueden tener nuevos resultados en los buscadores con sitios muy gráficos.
2.3.1.2 Fundamentos
Un correcto diseño web implica conocer cómo se deben utilizar cada una de los
elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje
dentro de los estándares establecidos por la W3C y en lo referente a la web
semántica. Debido a la permisibilidad de algunos navegadores web como Internet
Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite
que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc.
Esto impide que ese documento web sea universal e independiente del medio que se
utilice para ser mostrado.
La web semántica, por otra parte, aboga por un uso lógico de los elementos según el
significado para el que fueron concebidas. Por ejemplo se utilizará el elemento <P>
para marcar párrafos, y <TABLE> para tabular datos (nunca para disponer de manera
visual los diferentes elementos del documento). En su última instancia, esto ha
supuesto una auténtica revolución en el diseño web puesto que apuesta por separar
totalmente el contenido del documento de la visualización.
De esta forma se utiliza el documento HTML únicamente para contener, organizar y
estructurar la información y las hojas de estilo CSS para indicar como se mostrará
dicha información en los diferentes medios (como por ejemplo, una pantalla de
computadora, un teléfono móvil, impreso en papel, leída por un sintetizador de voz,
etc.). Por lógica, esta metodología beneficia enormemente la accesibilidad del
documento.
También existen páginas dinámicas, las cuales permiten interacción entre la web y el
visitante, proporcionándole herramientas tales como buscadores, chat, foros,
sistemas de encuestas, etc. y poseen de un Panel de Control de administración de
contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de
contenido en la misma.
2.3.1.3 Accesibilidad
El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que
haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de
personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas
como las del W3C: Pautas de accesibilidad al contenido Web.
2.3.2 PRINCIPIOS DE DISEÑO WEB.
Internet es un medio riquísimo tanto en posibilidades como en contenidos. La
competitividad existente en la red de redes es enorme debido entre muchas razones
a la relativa pequeña inversión que requiere el crear un website. Una navegación
engorrosa, puede por tanto hacernos perder de forma inmediata a casi todos
nuestros posibles clientes-usuarios. Si a esto añadimos que la construcción de un
website se realiza con lenguajes que posibilitan una enorme flexibilidad, podemos ver
la gran importancia que tiene el especificar algunos principios de diseño para el
desarrollo de nuestros webs.
2.3.2.1 La ley de Fitts.
Esta es prácticamente la única regla no subjetiva que está establecida dentro del
campo del diseño de interfaces y hace referencia a las características que tienen que
tener los objetos para que sea más fácil o difícil pulsarlos (o mejor dicho interaccionar
con ellos): posición en la que se encuentren, tamaño del mismo, y una característica
adicional, la ‘expresividad’ de dichos elementos. Con este último concepto quiero dar
a entender que un objeto será más ‘visible’ (en cuanto a la interacción con el usuario)
si éste da a entender o expresa su existencia como objeto de interfaz y no como
simple información (ya sea dato o imagen). Un ejemplo es el cambio que sufren
ciertos enlaces web al pasar por encima de ellos con el puntero del ratón (por
ejemplo cambiando de color). Cualquiera puede pensar que todo lo dicho por la ley
de Fitts es absolutamente evidente, y de hecho generalmente lo es, pero más
sorprendente es aún la gran cantidad de veces que se no se aplican estos principios
logrando por tanto que la usabilidad de nuestra interfaz se vea claramente
comprometida.
2.3.2.2 Dar feedback al usuario.
Existen muchísimos casos en los que una acción por parte del usuario implica
modificaciones en la aplicación (sea esta web o no) que no tienen una
correspondencia visual que mostrarse al usuario, y si ésta existe no se da ninguna
información sobre la acción ejecutada. Imaginemos que conectamos con una página
de sugerencias de un website, y al completar toda la información que se nos pide y
enviarla, esta vuelve a aparecer vacía o nos devuelve a la página principal de dicho
website. El usuario no sabría si la sugerencia ha sido enviada, o si lo que ha ocurrido
es que la página está mal programada y al darle al botón de envío vuelve a cargarse
el mismo formulario u otro. Dar información de retorno al usuario sobre las acciones
que realiza es un punto fundamental y en demasiadas ocasiones olvidado.
Afortunadamente en el mundo web, la principal acción que realizan los internautas es
pulsar enlaces y descargar archivos, acciones ambas que tienen inmediatas
consecuencias. Para las que no tienen, dar feedback al usuario es el camino a seguir
para conseguir aplicaciones consistentes y de alta usabilidad.
2.3.2.3 Reutilización de la experiencia del usuario.
Consiste en exponer al usuario ante lo conocido. Actualmente está proliferando en
demasía el uso de ciertos elementos que dan a la web mucha flexibilidad y riqueza
como es el uso de Flash. En estos nuevos interfaces parece primar el efecto visual, y
la realización de todo tipo de piruetas estilísticas sobre la facilidad de uso
consiguiendo confundir al usuario. En el entorno web es particularmente poco
razonable crear interfaces que requieran excesivo aprendizaje ya que cualquier
dificultad presentada al usuario suele significar una pérdida considerable de visitas a
favor de nuestra competencia (no olvidemos la enorme proliferación que ha vivido y
sigue viviendo la creación de websites de todo tipo). El uso de estructuras de
navegación no estándar es posiblemente el error más grave que podamos cometer.
También debemos saber que existen ciertas excepciones plenamente justificadas
como son la creación de websites en los que prima la forma al contenido o en los que
casi no existe competencia.
2.3.2.4 Uso del Scroll.
Es una buena idea hacer que todos los elementos de navegación y la información
importante se le muestre al usuario nada más se cargan las páginas sin necesidad
de hacer scroll. De esta forma nos aseguramos la información importante es
expuestas a todos nuestro clientes-usuarios.
2.3.2.5 Sentencias y párrafos.
La gran mayoría de los usuarios lee lo mínimo e imprescindible para obtener aquello
que buscan de nuestro web. Incluir sentencias largas y párrafos grandes dificulta
generalmente esta actividad con lo que se pierde algo de usabilidad (y por lo tanto de
visitas!!). Evidentemente no podemos aplicar lo anteriormente dicho a lo que son
propiamente documentos en formato web (html), ya sean artículos, o incluso libros.
De todas formas pienso que ya existe una tendencia que se va a ir consolidando, y
es la de diferenciar lo que es la propia aplicación web (es decir aquellos objetos que
nos permiten comunicarnos con el servidor) de todo aquellos elementos que
obtenemos como resultado de la interacción con dicha aplicación. Esta postura
introduce una clara riqueza conceptual al diferenciar entre aplicación e información,
teniendo numerosas ventajas y a su vez un grave inconveniente (que puede resultar
argumento más que suficiente para desecharla) y es que necesitamos un programa
adicional para la lectura de los documentos obtenidos (por ejemplo el Adobe Acrobat
Reader) que aunque puede ser gratuito implica mayores requisitos al usuario (y esto
casi siempre suele ir en decremento del número de visitas). Conocer a nuestros
posibles clientes es un punto fundamental a la hora de tomar estas decisiones de
diseño.
2.3.2.6 Imágenes.
Debido a las limitaciones del ancho de banda resulta poco recomendable cargar
excesivamente nuestras páginas de imágenes, y si debemos de hacerlo una técnica
muy interesante consiste en crear thumbnails (imágenes de muy reducido tamaño
que al pulsarse abren otra ventana en la que se carga la imagen original). Por lo
general en los thumbnails se muestra la suficiente información para que un usuario
decida si le es útil obtener la imagen original o no.
2.3.2.7 Ancho de Banda.
El universo web ofrece muchísimas posibilidades interactivas y multimedia pero hay
que ser plenamente conscientes de que aún existen muchos usuarios que disponen
de un ancho de banda reducido y que por lo tanto pueden necesitar bastante
segundos (o incluso minutos) en cargar nuestras páginas. Conforme se vayan
extendiendo las redes de alta velocidad, este panorama irá cambiando, aunque el
tiempo que va a requerir se mide en años y no en meses. La economía, y la
simplicidad siguen siendo normas de capital importancia en el diseño de interfaces
web.
CAPITULO III.
ASPECTOS METODOLÓGICOS
3.1 MODELO ESPIRAL ORIENTADO A LA WEB
El MODELO en espiral, propuesto originalmente por BOEHM en 1976, es un modelo
de proceso de software evolutivo donde se conjuga la naturaleza de construcción de
prototipos con los aspectos controlados y sistemáticos del MODELO LINEAL y
SECUENCIAL. Proporciona el potencial para el desarrollo rápido de versiones
incrementales del software que no se basa en fases claramente definidas y
separadas para crear un sistema. Se divide en un número de actividades de marco
de trabajo, también llamadas REGIONES DE TAREAS , Cada una de las regiones
están compuestas por un conjunto de tareas del trabajo llamado CONJUNTO DE
TAREAS que se adaptan a las características del proyecto que va a emprenderse en
todos los casos se aplican actividades de protección.
3.1.1 ACTIVIDADES PRINCIPALES:
1. Planificación: determinación de objetivos, alternativas y restricciones.
2. Análisis de riesgo: análisis de alternativas e identificación/resolución de riesgos.
3. Ingeniería: desarrollo del producto del "siguiente nivel",
4. Evaluación del cliente: Valorización de los resultados de la ingeniería.
3.1.2 CARACTERÍSTICAS
• En cada giro se construye un nuevo modelo del sistema completo.
• Este modelo puede combinarse con otros modelos de proceso de desarrollo
(cascada, evolutivo)
• Mejor modelo para el desarrollo de grandes sistemas.
• El análisis de riesgo requiere la participación de personal con alta cualificación.
3.1.3 DESVENTAJAS
• Resulta difícil convencer a grandes clientes de que el enfoque evolutivo es
controlable.
• Es nuevo (1988) y no se ha utilizado tanto como otros modelos de ciclo de vida.
• Debido a su elevada complejidad no se aconseja utilizarlo en pequeños sistemas.
3.1.4 VENTAJAS
• El modelo en espiral puede adaptarse y aplicarse a lo largo de la vida del software
de computadora.
• Como el software evoluciona a medida que progresa el proceso, el desarrollador y
el cliente comprenden y reaccionan mejor ante riesgos en cada uno de los nivele
evolutivos.
• El modelo en espiral permite a quien lo desarrolla aplicar el enfoque de
construcción de prototipos en cualquier etapa de evolución del producto.
• El modelo en espiral demanda una consideración directa de los riesgos técnicos
en todas las etapas del proyecto y si se aplica adecuadamente debe reducir los
riesgos antes de que se conviertan en problemas.
En la utilización de grandes sistemas a doblado la productividad
3.2 METODOLOGÍA OOHDM
3.2.1 INTRODUCCIÓN
La metodología de Diseño Hipermedia orientada a objetos, propuesta por D.
Schwabe y G. Rossi, OOHDM es una mezcla de estilos de desarrollo basado en
prototipos, en desarrollo interactivo y de desarrollo incremental. En cada fase se
elabora un modelo orientado a objetos conceptual que recoge las características a
resaltar en la misma incrementando los resaltados de la fase o fases siguientes.
Según OOHDM, el desarrollo de aplicaciones de hyper media ocurre cuando
cuatro actividades se procesan:
• El Modelo Conceptual
• Diseño de la Navegación
• Diseño Interfaz Abstracta
• Implementación
Que se realiza en una mezcla de estilos de desarrollo iterativo e incremental; en cada
paso un modelo será construido o mejorado.
3.2.2 LOS PRINCIPIOS BÁSICOS DEL MÉTODO DE OOHDM
Contempla los objetos que representan la navegación como vistas de los objetos
detallados en el modelo conceptual.
El uso de abstracciones apropiadas para organizar el espacio de la navegación, con
la introducción de contextos de navegación.
La separación de las características de interfaz de las características de la
navegación.
Una identificación explícita que hay en las decisiones de diseño que sólo necesitan
ser hechos en el momento de la implementación.
3.2.2.1 Modelo Conceptual
Durante esta actividad, se construye un esquema conceptual que representa objetos,
sus relaciones y colaboraciones que existen en el dominio designado. En
aplicaciones de hypermedia convencionales, es decir, aquellos en los que los
componentes de la hypermedia no serán modificados durante su ejecución, se podría
usar un modelo semántico estructural [Banerjee87], sin embargo, cuando la base de
información puede cambiar dinámicamente o si se piensa realizar cómputos
complejos o consultas en los objetos o el esquema, se necesita una abundante
conducta del modelo orientado a objetos.
En OOHDM, el esquema conceptual es construido en las clases, relaciones y sub-
sistemas. Las clases son descritas como de costumbre en el modelo orientado a
objetos, sin embargo, pueden multi-digitar atributos representando perspectivas
diferentes de la misma entidad del mundo. Se usa una notación que es similar a UML
[OMG 00], la Clase y Tarjetas de las relaciones, similar a las tarjetas de CRC [Wirfs-
Brock 90] son usadas como una ayuda de la documentación, ayudando remontar
decisiones de diseño enviados y al revés.
3.2.2.2 Diseño Navegacional
En OOHDM, la navegación es considerada un paso crítico en el diseño de una
aplicación de hypermedia. Un Modelo de navegación se construye como una vista
más de un modelo conceptual y permite la construcción de modelos diferentes según
los perfiles diferentes de los usuarios. Cada modelo de navegación proporciona una
vista "Subjetiva" del modelo conceptual.
El diseño de navegación se expresa en dos esquemas, el esquema de la Clase De
navegación, y el Esquema del Contexto De navegación. Los objetos navegables de
una hypermedia en la aplicación es definida por un esquema de la clase
navegacional cuyas clases reflejan la vista escogida sobre del dominio de la
aplicación.
3.2.2.3 Diseño de Interfaz Abstracta
En OOHDM, se usa un acercamiento del Diseño de Datos de Vista Abstractos
(ADVs), para describir la interfaz del usuario de una aplicación de hypermedia. ADVs
son objetos en los que tienen un estado y una interfaz, donde la interfaz puede ser
ejercido a través de mensajes (en particular, eventos externos generados por el
usuario). Las ADVs son abstractas en el sentido de que ellos sólo representan la
interfaz y el estado, y no la aplicación. Las ADVs han sido usados para representar
interfaces entre dos medios de comunicación diferentes como un usuario, una red o
un dispositivo (un cronómetro, por ejemplo) o como una interfaz entre dos u mas
Objetos de Datos Abstractos (ADOs). Los ADOs son objetos que no soportan
externamente eventos generados por el usuario. Desde un punto de vista
arquitectónico, las ADVs son observadores para ADOss, para que el protocolo de
comunicación entre la interfaz y los objetos de aplicación siga las reglas descritas en
el Modelo de Diseño de Observador.
3.2.2.4 Implementación
En esta fase, el diseñador realmente implementará el diseño. Hasta ahora, todos los
modelos fueron deliberadamente construidos de semejante manera en lo que se
refiere a ser independiente de la plataforma de implementación; en esta fase el
ambiente particular de (tiempo de ejecución) runtime se toma el derecho de acceso a
un servidor o a la red internet. A continuación se fijará cómo los diseños de OOHDM
pueden ser implementados en el WWW. Cuando la fase de implementación se
alcanza, el diseñador ya tiene definido los artículos de información que son parte del
dominio del problema. También tiene identificado cómo estos artículos deben ser
organizados según el perfil del Usuario y asignaciones; ya que se ha decidido lo la
interfaz, y cómo se comportará. En orden para implementar todos esto en el
ambiente de WWW y aplicaciones de multimedia, el diseñador tiene que decidir cómo
los artículos de información (ambos conceptual y objeto de navegación) será
almacenada. También debe decidir cómo se comprenderán la apariencia de la
interfaz y el comportamiento serán realizados usando HTML y posiblemente use
algunas extensiones. Aunque OOHDM es un método en términos de modelos de OO
orientados a objetos, no requiere un ambiente de aplicación OO.
3.3 MODELO UML (UNIFIED MODELING LANGUAGE)
Es un lenguaje que permite modelar, construir y documentar los elementos que
forman un sistema software orientado a objetos. Se ha convertido en el estándar de
facto de la industria, debido a que ha sido impulsado por los autores de los tres
métodos más usados de orientación a objetos: Grady Booch, Ivar Jacobson y Jim
Rumbaugh. Estos autores fueron contratados por la empresa Rational Software Co.
para crear una notación unificada en la que basar la construcción de sus
herramientas CASE. En el proceso de creación de UML han participado, no obstante,
otras empresas de gran peso en la industria como Microsoft, Hewlett-Packard, Oracle
o IBM, así como grupos de analistas y desarrolladores.
Uno de los objetivos principales de la creación de UML era posibilitar el intercambio
de modelos entre las distintas herramientas CASE orientadas a objetos del mercado.
Para ello era necesario definir una notación y semántica común. Hay que tener en
cuenta que el estándar UML no define un proceso de desarrollo específico, tan solo
se trata de una notación.
UML se puede usar para modelar distintos tipos de sistemas: sistemas de software,
sistemas de hardware, y organizaciones del mundo real. UML ofrece nueve
diagramas en los cuales modelar sistemas.
• Diagramas de Casos de Uso para modelar los procesos ’business’.
• Diagramas de Secuencia para modelar el paso de mensajes entre objetos.
• Diagramas de Colaboración para modelar interacciones entre objetos.
• Diagramas de Estado para modelar el comportamiento de los objetos en el sistema.
• Diagramas de Actividad para modelar el comportamiento de los Casos de Uso,
objetos u operaciones.
• Diagramas de Clases para modelar la estructura estática de las clases en el
sistema.
• Diagramas de Objetos para modelar la estructura estática de los objetos en el
sistema.
• Diagramas de Componentes para modelar componentes.
• Diagramas de Implementación para modelar la distribución del sistema.
3.3.1 DIAGRAMA DE CASO DE USO
Los casos de uso documentan el comportamiento del sistema desde el punto de vista
del usuario. En este caso por <<usuario>> se entiende cualquier cosa que ajena al
sistema se desarrolla y que interactúa con el mismo. Un usuario podría ser una
persona, otro sistema de información, un dispositivo hardware, etc. El modelado de
los casos de uso ayuda con tres de los aspectos más difíciles del desarrollo:
• La captura de requisitos.
• La planificación de las iteraciones del desarrollo.
• La validación de los sistemas.
Los casos de uso los presentó por primera vez Ivar Jacobson a principios de los
90, como un desarrollo a partir de la idea de escenarios.
Un diagrama de casos de uso es relativamente fácil de comprender de forma
intuitiva, incluso sin conocer la notación. Esto es una ventaja importante , ya que el
modelado de casos de uso se puede tratar de forma coherente con un cliente que no
necesita estar familiarizado con UML.
Componentes:
• Casos de uso
• Actores
• Relaciones
Casos de uso
Un caso de uso es una operación o tarea específica que se realiza tras una orden de
algún agente, sea desde una petición de un actor o bien desde la invocación desde
otro caso de uso. Se representa mediante elipses con el nombre del caso de uso en
su interior.
Actores
Un actor es un conjunto de uniforme de personas, sistemas ó máquinas, externos al
sistema, que cumplen con un rol determinado que interactúan con él. Es importante
aclarar que un actor representa un rol, es decir no necesariamente representa a una
persona en particular sino más bien la labor que realiza frente al sistema.
Relaciones
Muestra la relaciones entre los actores y los casos de uso. Existen las relaciones:
• De asociación entre actores y casos de uso (relación de comunicación
<<comunicates>>).
• De generalización entre actores.
• De generalización entre casos de usos.
• Relaciones “incluye” entre casos de uso (<<include>>).
• Relaciones “extiende” entre casos de uso (<<extend>>).
3.3.2 DIAGRAMA DE CLASES.
Muestra la vista estática del sistema. Indica las clases que intervienen y cómo se
relacionan para cumplir los objetivos del sistema (no muestra cómo interactúan uno
con otro ni que mensajes se envían).
Elementos:
• Clase: atributos y operaciones.
• Relaciones: dependencias, generalización y asociación.
Representación grafica:
• Clase: representada por un rectángulo con tres dimensiones internas. Los tres
compartimientos estándares alojan el nombre de la clase, sus atributos y sus
mensajes, respectivamente.
Definiciones:
• Propiedades también llamados atributos o características, son valores que
corresponden a un objeto, como color, material, cantidad, ubicación.
Generalmente se conoce como la información detallada del objeto. Suponiendo
que el objeto es una puerta, sus propiedades serían: la marca, tamaño, color y
peso.
• Operaciones son aquellas actividades o verbos que se pueden realizar con/para
este objeto, como por ejemplo abrir, cerrar, buscar, cancelar, acreditar, cargar. De
la misma manera que el nombre de un atributo, el nombre de una operación se
escribe con minúsculas si consta de una sola palabra. Si el nombre contiene más
de una palabra, cada palabra será unida a la anterior y comenzará con una letra
mayúscula, a excepción de la primera palabra que comenzará en minúscula. Por
ejemplo: abrirPuerta, cerrarPuerta, buscarPuerta, etc.
• Interfaz es un conjunto de operaciones y/o propiedades que permiten a un objeto
comportarse de cierta manera, por lo que define los requerimientos mínimos del
objeto.
• Herencia se define como la reutilización de un objeto padre ya definido para poder
extender la funcionalidad en un objeto hijo. Los objetos hijos heredan todas las
operaciones y/o propiedades de un objeto padre. Por ejemplo: Una persona
puede subdividirse en Proveedores, Acreedores, Clientes, Accionistas,
Empleados; todos comparten datos básicos como una persona, pero además
tendrá información adicional que depende del tipo de persona, como saldo del
cliente, total de inversión del accionista, salario del empleado, etc.
http://es.wikipedia.org/wiki/Diagrama_de_clases
3.3.3 DIAGRAMA DE OBJETOS.
Los diagramas de objetos son utilizados durante el proceso de Análisis y Diseño de
los sistemas informáticos en la metodología UML.
Se puede considerar un caso especial de un diagrama de clases en el que se
muestran instancias específicas de clases (objetos) en un momento particular del
sistema. Los diagramas de objetos utilizan un subconjunto de los elementos de un
diagrama de clase. Los diagramas de objetos no muestran la multiplicidad ni los
roles, aunque su notación es similar a los diagramas de clase.
Una diferencia con los diagramas de clase es que el compartimiento de arriba va en
la forma, Nombre de objeto: Nombre de clase.
http://es.wikipedia.org/wiki/Diagrama_de_objetos
3.3.3.1 Diccionario de Clases.
El diccionario de clases es un documento que muestra una descripción de los
elementos que componen cada clase.
La descripción de cada clase está formada por los elementos siguientes:
• Nombre de la clase.
• Tipo
• Descripción
Para cada atributo se especifica: Visibilidad, nombre, tipo de dato y valor inicial.
http://www.scribd.com/doc/2568127/UML
3.3.4 DIAGRAMA DE INTERACCIÓN
3.3.4.1 Diagrama de secuencia.
El diagrama de secuencia es uno de los diagramas más efectivos para modelar
interacción entre objetos en un sistema. Un diagrama de secuencia muestra la
interacción de un conjunto de objetos en una aplicación a través del tiempo y se
modela para cada método de la clase. Mientras que el diagrama de casos de uso
permite el modelado de una vista business del escenario, el diagrama de secuencia
contiene detalles de implementación del escenario, incluyendo los objetos y clases
que se usan para implementar el escenario, y mensajes pasados entre los objetos.
Típicamente uno examina la descripción de un caso de uso para determinar qué
objetos son necesarios para la implementación del escenario. Si tienes modelada la
descripción de cada caso de uso como una secuencia de varios pasos, entonces
puedes "caminar sobre" esos pasos para descubrir qué objetos son necesarios para
que se puedan seguir los pasos. Un diagrama de secuencia muestra los objetos que
intervienen en el escenario con líneas discontinuas verticales, y los mensajes
pasados entre los objetos como vectores horizontales. Los mensajes se dibujan
cronológicamente desde la parte superior del diagrama a la parte inferior; la
distribución horizontal de los objetos es arbitraria. Durante el análisis inicial, el
modelador típicamente coloca el nombre 'business' de un mensaje en la línea del
mensaje. Más tarde, durante el diseño, el nombre 'business' es reemplazado con el
nombre del método que está siendo llamado por un objeto en el otro. El método
llamado, o invocado, pertenece a la definición de la clase instanciada por el objeto en
la recepción final del mensaje.
http://es.wikipedia.org/wiki/Diagrama_de_secuencia
3.3.4.2 Diagrama de Colaboración.
Esencialmente es un diagrama que muestra interacciones organizadas alrededor de
los roles. A diferencia de los diagramas de secuencia, los diagramas de colaboración
muestran explícitamente las relaciones de los roles. Por otra parte, un diagrama de
colaboración no muestra el tiempo como una dimensión aparte, por lo que resulta
necesario etiquetar con números de secuencia tanto la secuencia de mensajes como
los hilos concurrentes.
• Muestra cómo las instancias específicas de las clases trabajan juntas para
conseguir un objetivo común.
• Implementa las asociaciones del diagrama de clases mediante el paso de
mensajes de un objeto a otro. Dicha implementación es llamada "enlace".
Un diagrama de colaboración es también un diagrama de clases que contiene roles
de clasificador y roles de asociación en lugar de sólo clasificadores y asociaciones.
Los roles de clasificador y los de asociación describen la configuración de los objetos
y de los enlaces que pueden ocurrir cuando se ejecuta una instancia de la
comunicación. Cuando se instancia una comunicación, los objetos están ligados a los
roles de clasificador y los enlaces a los roles de asociación. El rol de asociación
puede ser desempeñado por varios tipos de enlaces temporales, tales como
argumentos de procedimiento o variables locales del procedimiento. Los símbolos de
enlace pueden llevar estereotipos para indicar enlaces temporales.
http://es.wikipedia.org/wiki/Diagrama_de_colaboracion
3.3.5 DIAGRAMA DE ESTADOS.
Un Diagrama de Estados muestra la secuencia de estados por los que pasa bien un
caso de uso, bien un objeto a lo largo de su vida, o bien todo el sistema. En él se
indican qué eventos hacen que se pase de un estado a otro y cuáles son las
respuestas y acciones que genera.
En cuanto a la representación, un diagrama de estados es un grafo cuyos nodos son
estados y cuyos arcos dirigidos son transiciones etiquetadas con los nombres de los
eventos.
Un estado se representa como una caja redondeada con el nombre del estado en su
interior. Una transición se representa como una flecha desde el estado origen al
estado destino.
http://www.clikear.com/manuales/uml/diagramasiestados.aspx
3.3.6 DIAGRAMA DE COMPONENTES
Un diagrama de componentes muestra las organizaciones y dependencias lógicas
entre componentes software, sean éstos componentes de código fuente, binarios o
ejecutables. Desde el punto de vista del diagrama de componentes se tienen en
consideración los requisitos relacionados con la facilidad de desarrollo, la gestión del
software, la reutilización, y las restricciones impuestas por los lenguajes de
programación y las herramientas utilizadas en el desarrollo. Los elementos de
modelado dentro de un diagrama de componentes serán componentes y paquetes.
Dado que los diagramas de componentes muestran los componentes software que
constituyen una parte reusable, sus interfaces, y sus interrelaciones, en muchos
aspectos se puede considerar que un diagrama de componentes es un diagrama de
clases a gran escala. Cada componente en el diagrama debe ser documentado con
un diagrama de componentes más detallado, un diagrama de clases, o un diagrama
de casos de uso.
Un paquete en un diagrama de componentes representa una división física del
sistema. Los paquetes se organizan en una jerarquía de capas donde cada capa
tiene una interfaz bien definida. Un ejemplo típico de una jerarquía en capas de este
tipo es: Interfaz de usuario; Paquetes específicos de la aplicación; Paquetes
reusables; Mecanismos claves; y Paquetes hardware y del sistema operativo.
Un diagrama de componentes se representa como un grafo de componentes
software unidos por medio de relaciones de dependencia (generalmente de
compilación). Puede mostrar también que un componente software contiene una
interfaz, es decir, la soporta.
http://tvdi.det.uvigo.es/%7Eavilas/UML/node49.html
3.3.7 DIAGRAMA DE ACTIVIDAD.
En el Lenguaje de Modelado Unificado, un diagrama de actividades representa los
flujos de trabajo paso a paso de negocio y operacionales de los componentes en un
sistema. Un Diagrama de Actividades muestra el flujo de control general.
Un diagrama de Actividades es una variación del diagrama de estados donde los
"estados" representan operaciones, y las transiciones representan las actividades
que ocurren cuando la operación es completa.
El propósito del diagrama de actividad es modelar un proceso de flujo de trabajo
(workflow) y/o modelar operaciones. Una Operación es un servicio proporcionado por
un objeto, que está disponible a través de una interfaz. Una Interfaz es un grupo de
operaciones relacionadas con la semántica.
http://es.wikipedia.org/wiki/Diagrama_de_actividades
CAPITULO IV.
CONCLUSIONES Y RECOMENDACIONES.
4.1 CONCLUSIONES.
• Este sitio fue desarrollado con el propósito de manejar eficientemente la
información de la empresa.
• El sitio nos permite trabajar en una intranet o promedio de Internet con una
fácil configuración.
• El sitio Web fue desarrollado en lenguaje de código libre lo que nos permitió
un ahorro considerable en recursos.
• El diseño se lo llevo a cabo en herramientas líderes en desarrollo Web lo
cual lo convierte en un sitio con una interfaz amigable para el usuario.
• El sitio esta protegido con clave de ingreso para brindar mayor seguridad y
confianza a la empresa, con el objetivo de evitar el acceso a personas no
autorizadas.
• Al desarrollar este sitio se ha aplicado todo lo aprendido en la carrera.
4.2 RECOMENDACIONES
• Las personas encargadas del manejar el sitio Web deberán tener
conocimientos de computación para facilitar la capacitación en el manejo
del sitio.
• En caso de un mal funcionamiento se recomienda llamar a la persona
encargada de su mantenimiento.
• Se recomienda sacar un respaldo de la base de datos cada 3 meses, esto
permitirá una recuperación de información en caso de daño en el
computador.
4.3 BIBLIOGRAFIA
LIBROS
Utilización de UML - Perdita Stevens Rob Pooley
DIRECCIONES WEB
Ingeniería web
http://es.wikipedia.org/wiki/Ingenier%C3%ADa_web
http://www.informandote.com/jornadasIngWEB/articulos/jiw01.pdf
Arquitectura Web
http://www.infor.uva.es/~jvegas/cursos/buendia/pordocente/node18.html
OOHDM
http://es.wikipedia.org/wiki/OOHDM
http://petra.euitio.uniovi.es/~i1650092/documentacion/documentacion.pdf
http://www.unab.edu.co/editorialunab/revistas/rcc/pdfs/r22_art5_c.pdf
World Wide Web
http://es.wikipedia.org/wiki/World_Wide_Web
Servidor HTTP Apache
http://es.wikipedia.org/w/index.php?title=Servidor_HTTP_Apache
Extensible Markup Language
http://es.wikipedia.org/wiki/XML
Desarrollo de Aplicaciones Web
http://www.infor.uva.es/~jvegas/cursos/buendia/pordocente/node17.html
Aplicación web
http://es.wikipedia.org/wiki/Aplicacion_web
Servidor
http://es.wikipedia.org/wiki/Servidor
Cliente
http://es.wikipedia.org/wiki/Cliente
Javascript
http://es.wikipedia.org/wiki/JavaScript
Dreamweaver 8
http://www.maestrosdelweb.com/actualidad/2334/
Diseño web
http:/es.wikipedia.org/wiki/Dise%C3%83%C2%B1o_web#Dise.C3.B1o_web_aplicado
UML
http://www.scribd.com/doc/2568127/UML
http://tvdi.det.uvigo.es/%7Eavilas/UML/node49.html
http://www.popkin.com
http://www.vico.org/trad_obert/trad_wae_abierto.pdf
Diagrama de clases
http://es.wikipedia.org/wiki/Diagrama_de_clases
Diccionario de clases
http://www.scribd.com/doc/2568127/UML
Diagrama de objetos
http://es.wikipedia.org/wiki/Diagrama_de_objetos
Diagrama de secuencia
http://es.wikipedia.org/wiki/Diagrama_de_secuencia
Diagrama de colaboración
http://es.wikipedia.org/wiki/Diagrama_de_colaboracion
Diagrama de estados
http://www.clikear.com/manuales/uml/diagramasiestados.aspx
Diagrama de componentes
http://es.wikipedia.org/wiki/Diagrama_de_actividades
ANEXOS
MANUAL TECNICO
ANÁLISIS DE REQUISITOS
DIAGRAMA DE ACTORES
ACTORES
FUNCIÓN
Administrador Sistema
Cliente
• Utiliza con asiduidad los servicios de un
profesional o empresa.
Administrador Sistema
Vendedor
• Encargada de interactuar con el cliente y
sistema.
Administrador Sistema
Gerente
• Lleva la gestión administrativa de la empresa o
institución.
• Selecciona proveedor, productos.
Administrador Sistema
Administrador
• Ingresa usuarios (vendedor, gerente).
• Configura y asigna permisos a los diferentes
grupos de trabajo.
• Genera reportes.
ANÁLISIS Y DISEÑO
MODELO ESTÁTICO
DIAGRAMA DE CASOS DE USO
DIAGRAMA DE CASOS DE USO POR ACTIVIDAD
ACTIVIDAD: CLIENTE
Cliente
Solicitar producto
Entregar datos cl iente
Cancelar factura
Cancelar cuota inicial (credito)
Pagar cuotas (credito)
ACTIVIDAD: VENDEDOR
Vendedor
Entrega datos vendedor
Verifica existencia
Actualizar existencia
Registrar cuota inicial
Generar venta (contado)
Entregar producto
Registrar crédito
Genera factura venta
Registra cuotas
ACTIVIDAD: GERENTE
Gerente
Pedido mercaderia
Reportes general
Datos estadisticos
Inventario
Escoger Proveedor
Genera nota compra
ACTIVIDAD: ADMINISTRADOR
Administrador
Cuentas por pagar
Permisos usuarios
Cuentas por cobrar
Generar reporte
Datos empleado
Datos proveedor
Datos producto
Mantenimiento sistema
DIAGRAMA DE CASOS DE USO PROCESOS
VENTA CONTADO
Cliente Vendedor
Solicitar producto
Verificar existencia
Generar factura
Generar detalle factura
Cancelar factura
Actualizar existencias
VENTA CREDITO
Cliente Vendedor
Entregar datos cl iente (cl iente nuevo)
solicitar existencia
verificar existencia
Generar factura
Generar detalle factura
Generar cuentas por cobrar
Registrar cuota inicial
Actualizar existencia
<< include >>
<< include >><< include >>
PEDIDO DE COMPRA
Gerente
Escoger producto
Escoger proveedor
Generar nota compra
COMPRAS
Gerente
Seleccionar factura
Registrar factura
Generar cuentas por pagar
Registrar cuotas inicial
Actualizar existencia
GENERAR FACTURA
Vendedor
Registrar datos cliente
Registrar datos producto
Registrar datos empleado
<< extend >>
<< extend >>
<< extend >>
INGRESAR DATOS
Administrador
Datos producto
Datos empleado
Datos proveedor
ADMINISTRACIÓN DEL SISTEMA
Administrador
Permisos usuario
Generar Reporte
Mantenimiento
DICCIONARIO DE CASOS DE USO
VENTA CONTADO
NOMBRE
ACCIÓN
REACCIÓN
Solicitar producto
Verificar existencias
Generar factura
Generar detalle de
factura
Cancelar factura
Actualizar
existencias
Seleccionar el producto.
Consultar producto.
Digita datos del
producto.
Consultar cliente.
Digita datos del cliente.
Consultar productos.
Digita datos del detalle
de factura.
Impresión de factura.
Entrega de factura.
Cancelación de la
factura.
Entrega factura.
Seleccionar procedencia
de existencias.
Solicitar producto
seleccionado.
Consulta producto.
Buscar registro en la tabla
de productos.
Desplegar resultado.
Consultar cliente.
Desplegar datos de cliente
antiguo.
Registra datos requeridos
de cliente nuevo.
Consultar productos.
Desplegar datos
generales.
Registra datos requeridos.
Imprimir factura.
Entregar factura.
Cancelar factura.
Entregar factura.
Registrar datos de la
factura.
VENTA CREDITO
Entregar datos
cliente
Solicitar producto
Verificar existencias
Generar factura
Generar detalle de
factura
Generar cuentas por
cobrar
Consulta cliente.
Digita datos del cliente.
Seleccionar el producto.
Consulta producto.
Digitar datos del
producto.
Consultar cliente
Digita datos del cliente.
Consulta producto.
Digita datos del detalle
de factura.
Seleccionar
procedimiento para la
ejecución del proceso.
Impresión de factura.
Entrega de factura.
Consulta datos de
crédito.
Consultar cliente.
Desplegar datos del cliente
antiguo.
Registrar datos generales
de cliente nuevo.
Solicitar producto
seleccionado.
Consultar producto.
Buscar los datos en la
tabla de productos
Desplegar resultados de la
consulta.
Consultar cliente.
Desplegar datos cliente
antiguo.
Registrar datos generales
de cliente nuevo.
Consultar producto.
Desplegar datos generales
del producto.
Registra datos generales.
Registra procedimientos.
Imprimir factura.
Entregar factura.
Consultar datos del
crédito.
Desplegar datos del
Registrar cuota
inicial
Actualizar
existencias
Cancelación cuota
inicial.
Seleccionar
procedimiento para la
actualización del crédito.
Seleccionar
procedimiento para la
actualización de
existencias.
crédito.
Cancelar cuota inicial.
Registra cobro inicial.
Registrar datos del crédito.
Registra procedimiento.
PEDIDO DE COMPRA
Escoger producto
Escoger proveedor
Generar nota de
compra
Digita datos de
producto.
Seleccionar lista de
productos a comprar.
Digita datos de
producto.
Selecciona proveedores.
Digita datos de la
compra.
Genera nota compra.
Desplegar lista de
productos.
Seleccionar lista de
productos.
Desplegar lista de
productos.
Seleccionar proveedor.
Validar datos de la
compra.
Generar nota compra.
COMPRAS
Seleccionar factura
Registrar factura
Generar cuentas por
pagar
Selecciona factura
Digita datos de factura.
Digita datos del crédito.
Seleccionar factura.
Registrar factura.
Generar cuentas por
pagar.
Registrar cuota
inicial
Actualizar
existencias
Cancelación cuota
inicial.
Seleccionar
procedimiento para la
actualización del crédito.
Seccionar procedimiento
para la actualización de
las existencias.
Cancelar cuota inicial.
Registrar pago inicial.
Registrar datos del crédito.
GENERAR FACTURA
Registrar datos
cliente
Registrar datos
producto
Registrar datos
empleado
Consulta cliente.
Digita datos del cliente.
Consulta datos del
producto.
Digita datos productos.
Consulta empleado.
Digita datos de
empleado.
Consultar cliente.
Desplegar datos de cliente
antiguo.
Registrar datos generales
de cliente nuevo.
Consultar productos.
Registrar datos generales
de productos.
Consultar empleado.
Desplegar datos
empleados.
Registrar datos generales
de empleados.
INGRESAR DATOS
Registrar datos
producto
Digita datos de
productos.
Registrar datos generales
de productos.
Digita datos de
empleado.
Digita datos de
proveedor.
Registrar datos
empleados.
Registrar datos del
proveedor.
ADMINISTRACIÓN DEL SISTEMA
Permisos usuarios
Generar reportes
Mantenimiento
Asigna opciones por
usuario.
Digita datos de reportes
requeridos.
Selecciona la opción de
imprimir.
Asignar opciones de
mantenimiento.
Guarda permisos.
Desplegar resultados del
reporte.
Imprimir reporte.
Realizar mantenimiento.
DIAGRAMA DE CLASES
0..
1
*
0..
1
0..
1
*
0..
1
1..
*0
..1
0..
1
0..
1
*0
..1
0..
1
*
*0
..1
0..
1
0..
1*
0..
1
0..
10
..1
clie
nte
s
- - - - -
ced
ula
cli_
ap
ell
ido
cli_
no
mb
recl
i_d
ire
ccio
ncl
i_te
lefo
no
: ch
ar(
10
):
varc
ha
r(3
0)
: va
rch
ar(
30
):
varc
ha
r(5
0)
: ch
ar(
10
)
+ + + + +
Inse
rta
r ()
Act
ua
liza
r ()
Bu
sca
r ()
Bo
rra
r ()
Gu
ard
ar
()
fact
ura
- - - - - - - -
fact
_co
dig
oce
du
lafa
ct_
fech
afa
ct_
valo
rfa
ct_
iva
fact
_to
tal
fact
_ti
po
pa
go
fact
_e
sta
do
: in
t:
cha
r(1
0)
: d
ate
: d
ou
ble
: d
ou
ble
: d
ou
ble
: ch
ar(
1)
: ch
ar(
1)
+ + + + +
Inse
rta
r ()
Gu
ard
ar
()Im
pri
mir
()
Bu
sca
r ()
Eli
min
ar
()
de
ta_
fact
ura
- - - - - - -
dfa
ct_
cod
igo
fact
_co
dig
op
rod
_se
cue
nci
al
dfa
ct_
can
tid
ad
dfa
ct_
pu
nit
ari
od
fact
_p
ven
tad
fact
_iv
asn
: in
t:
int
: in
t:
do
ub
le:
do
ub
le:
do
ub
le:
cha
r()1
+ + + + +
Bu
sca
r ()
Ca
lcu
lar
()im
pri
mir
()
Inse
rta
r ()
Gu
ard
ar
()
pro
du
cto
s
- - - - - -
pro
d_
secu
en
cia
lp
rod
_co
dig
op
rod
_n
om
bre
pro
d_
can
tid
ad
pro
d_
pre
cio
pro
d_
iva
sn
: in
t:
cha
r(5
):
varc
ha
r(3
0)
: d
ou
ble
: d
ou
ble
: ch
ar(
1)
+ + + + +
Inse
rta
r ()
Bu
sca
r ()
Bo
rra
r ()
Act
ua
liza
r ()
Gu
ard
ar
()
cta
s_co
bra
r
- - - - - - -
cta
c_co
dig
ofa
ct_
cod
igo
cta
c_fe
cha
cta
c_p
lazo
cta
c_va
lor
cta
c_sa
ldo
cta
c_e
sta
do
: in
t:
int
: d
ate
: in
t:
do
ub
le:
do
ub
le:
cha
r(1
)
+ + + +
Inse
rta
r ()
Bu
sca
r ()
Gu
ard
ar
()Im
pri
mir
()
pro
vee
do
r
- - - -
pro
v_co
dig
op
rov_
no
mb
rep
rov_
dir
ecc
ion
pro
v_te
lefo
no
: in
t:
varc
ha
r(3
0)
: va
rch
ar(
50
):
cha
r(1
0)
+ + + + +
Inse
rta
r ()
Bu
sca
r ()
Act
ua
liza
r ()
Gu
ard
ar
()B
orr
ar
()
com
pra
s
- - - - - -
com
p_
cod
igo
pro
v_co
dig
ou
sua
rio
com
p_
fech
aco
mp
_va
lor
com
p_
tip
pa
go
: in
t:
int
: ch
ar(
10
):
da
te:
do
ub
le:
cha
r(1
)
+ + + +
Inse
rta
r ()
Gu
ard
ar
()Im
pri
mir
()
Bu
sca
r ()
de
ta_
com
pra
s
- - - - - -
dco
m_
cod
igo
pro
d_
secu
en
cia
lco
mp
_co
dig
od
com
_ca
nti
da
dd
com
_p
reco
mp
dco
m_
pre
tota
l
: in
t:
int
: in
t:
do
ub
le:
do
ub
le:
do
ub
le
+ + + + +
Bu
sca
r ()
Ca
lcu
lar
()Im
pri
mir
()
Inse
rta
r ()
Gu
ard
ar
()
usu
ari
os
- - - - - -
usu
ari
ou
su_
no
mb
reu
su_
cla
veu
su_
gru
po
usu
_d
ire
ccio
nu
su_
tele
fon
o
: ch
ar(
10
):
varc
ha
r(3
0)
: ch
ar(
10
):
varc
ha
r(1
5)
: va
rch
ar(
50
):
cha
r(1
0)
+ + + + +
Inse
rta
r ()
Bu
sca
r ()
Act
ua
liza
r ()
Bo
rra
r ()
Gu
ard
ar
()
cob
ros
- - - -
cob
s_co
dig
oct
ac_
cod
igo
cob
s_fe
cha
cob
s_co
bro
: in
t:
int
: d
ate
: d
ou
ble
+ + + +
Inse
rta
r ()
Gu
ard
ar
()Im
pri
mir
()
Bu
sca
r ()
cta
s_p
ag
ar
- - - - - - - -
cta
p_
cod
igo
com
p_
cod
igo
cta
p_
fech
act
ap
_p
lazo
cta
p_
valo
rct
ap
_sa
ldo
cta
p_
ob
serv
aci
on
cta
p_
est
ad
o
: in
t:
int
: d
ate
: in
t:
do
ub
le:
do
ub
le:
varc
ha
r(6
0)
: ch
ar(
1)
+ + + + +
Act
ua
liza
r ()
Inse
rta
r ()
Bo
rra
r ()
Bu
sca
r ()
Gu
ard
ar
()
pa
go
s
- - - -
pa
gs_
cod
igo
cta
p_
cod
igo
pa
gs_
fech
ap
ag
s_m
on
to
: in
t:
int
: d
ate
: d
ou
ble
+ + + + +
Inse
rta
r ()
Gu
ard
ar
()Im
pri
mir
()
Bu
sca
r ()
Act
ua
liza
r ()
DICCIONARIO DE CLASES ATRIBUTO TIPO DE DATO DESCRIPCIÓN
CLIENTE
cedula char(10) Código del cliente
cli_apellido varchar(30) Apellido del cliente
cli_nombre varchar(30) Nombre del cliente
cli_direccion varchar(50) Dirección del cliente
cli_telefono char(10) Teléfono del cliente
COBROS
cobs_codigo int(11) Código de cobros
cobs_fecha date Fecha de cobro
cobs_cobro double Valor del cobro
COMPRAS
comp_codigo int(11) Código de compras
comp_fecha date Fecha de compra
comp_valor double Valor de la compra
comp_tippago char(1) Tipo de pago
CTAS_COBRAR
ctac_codigo int(11) Código de cuentas por cobrar
ctac_fecha date Fecha de la venta
ctac_plazo int(11) Plazo del crédito a cobrar
ctac_valor double Valor del crédito a cobrar
ctac_saldo double Saldo del crédito a cobrar
ctac_estado char(1) Estado del crédito
CTAS_PAGAR
ctap_codigo int(11) Código del cuentas por pagar
ctap_fecha date Fecha de la compra
ctap_plazo int(11) Plazo del crédito a pagar
ctap_valor double Valor del crédito a pagar
ctap_saldo double Saldo de crédito a pagar
ctap_observacion varchar(60) Observación
ctap_estado char(1) Estado del crédito a pagar
DETA_COMPRAS
dcom_codigo int(11) Código detalle compra
dcom_cantidad double Cantidad de producto
dcom_precomp double Precio compra
dcom_pretotal double Compra total
DETA_FACTURA
dfact_codigo int(11) Código detalle factura
dfact_cantidad double Cantidad de producto
dfact_punitario double Precio unitario
dfact_pventa double Precio de venta
dfact_ivasn char(1) Aplica IVA si o no
FACTURA
fact_codigo int(11) Código de factura
fact_fecha date Fecha de emisión
fact_valor double Valor de venta
fact_iva double IVA
fact_total double Valor total
fact_tipopago char(1) Tipo pago
fact_estado char(1) Estado de factura
PAGOS
pags_codigo int(11) Código pagos
pags_fecha date Fecha pagos efectuados
pags_monto double Monto a cancelar
PRODUCTOS
prod_secuencial int(11) Secuencial producto
prod_codigo char(5) Código producto
prod_nombre varchar(30) Nombre producto
prod_cantidad double Cantidad producto
prod_unidad char(3) Unidad
prod_precio double Precio producto
prod_ivasn char(1) Aplica IVA
PROVEEDOR
prov_codigo int(11) Código proveedor
prov_nombre varchar(30) Nombre proveedor
prov_direccion varchar(50) Dirección proveedor
prov_telefono char(10) Teléfono proveedor
USUARIOS
usuario char(10) Nick del usuario
usu_nombre varchar(30) Nombre usuario
usu_clave char(10) Clave usuario
usu_grupo varchar(15) Grupo
usu_direccion varchar(50) Dirección usuario
usu_telefono char(10) Teléfono usuario
DIAGRAMA DE OBJETOS
Cli
en
tes
Fa
ctu
raD
eta
_fa
ctu
raP
rod
uct
os
Cta
s_co
bra
rP
rove
ed
or
Co
mp
ras
De
ta_
com
pra
s
Co
bro
sU
sua
rio
sC
tas_
pa
ga
rP
ag
os
MODELO DINÁMICO
DIAGRAMA DE INTERACCIÓN
DIAGRAMA DE SECUENCIAS
VENTA AL CONTADO
1:Solicitar producto
2:Verificar existencia
3:Generar factura
4:Generar detalle factura
5:Cancelar factura
6:Actual izar existencias
Cliente Producto Factura Detalle factura
VENTA A CRÉDITO
1:S
oli
cita
r p
rod
uct
o
2:V
eri
fica
r e
xist
en
cia
s
3:G
en
era
r fa
ctu
ra
4:G
en
era
r d
eta
lle
fa
ctu
ra
5:G
en
era
r cu
en
tas
po
r co
bra
r
6:R
eg
istr
ar
cuo
ta i
nic
ial
7:A
ctu
ali
za e
xist
en
cia
Cli
en
teP
rod
uct
oF
act
ura
De
tall
e f
act
ura
Cta
s p
or
cob
rar
Co
bro
s
PEDIDO COMPRA
1:Escoger producto
2:Escoger proveedor
3:Generar nota compra
4:Generar detalle compra
Gerente Producto Proveedor Compra Detalle compra
COMPRAS
1:Ingresar factura
2:Generar cuentas por pagar
3:Registrar cuota inicial
4:Actual izar nueva mercaderia
Gerente Producto Compra Cuentas por pagar Pagos
GENERAR FACTURA
1:Registra datos cl iente
2:Registrar datos empleado
3:Registra datos producto
4:Registra detalle producto
Cliente Empleado Producto Factura Detalle factura
INGRESAR DATOS
1:Registra datos empleado
2:Registra datos proveedor
3:Registra datos producto
Administrador Empleado Proveedor Producto
ADMINISTRACIÓN DEL SISTEMA
1:M
an
ten
imie
nto
em
ple
ad
os
2:M
an
ten
imie
nto
cli
en
tes
3:M
an
ten
imie
nto
Pro
vee
do
res
4:M
an
ten
imie
nto
Pro
du
cto
s
5:R
ep
ort
es
est
ad
isti
cos
6:R
ep
ort
e c
ue
nta
s
7:R
ep
ort
e e
xist
en
cia
s
8:R
ep
ort
e l
ista
do
pro
vee
do
res
9:R
ep
ort
e l
ista
do
cli
en
tes
10
:Pe
rmis
os
Usu
ari
os
Ad
min
istr
ad
or
Em
ple
ad
oC
lie
nte
Pro
vee
do
rP
rod
uct
oE
sta
dis
tica
sC
ue
nta
s
DIAGRAMA DE COLABORACIÓN
VENTA AL CONTADO
1: Solicitar producto
2: Verificar existencia
3: Generar factura
6: Actualizar existencias
4: Generar detalle factura
5: Cancelar factura
ClienteProducto
Factura
Detalle factura
VENTA A CRÉDITO
1: Solici tar producto
2: Verificar existencias
3: Generar factura
4: Generar detalle factura
5: Generar cuentas por cobrar
6: Registrar cuota inicial
7: Actualiza existencia
Cliente
Producto
Factura
Detal le factura
Ctas por cobrar
Cobros
PEDIDO COMPRA
1: Escoger producto
2: Escoger proveedor
3: Generar nota compra
4: Generar detalle compra
GerenteProducto
Proveedor
CompraDetalle compra
COMPRAS
1: Ingresar factura
2: Generar cuentas por pagar
3: Registrar cuota inicial
4: Actualizar nueva mercaderia
Gerente
Compra
Cuentas por pagar
Pagos
Producto
GENERAR FACTURA
1: Registra datos cliente
2: Registrar datos empleado
3: Registra datos producto
4: Registra detalle producto
Cliente
Factura
Empleado
Producto
Detalle factura
INGRESAR DATOS
1: Registra datos empleado
2: Registra datos proveedor
3: Registra datos producto
Administrador Empleado
Proveedor
Producto
ADMINISTRACIÓN DEL SISTEMA
10: Permisos Usuarios1: Mantenimiento empleados
9: Reporte l istado cl ientes
2: 2:Mantenimiento clientes
8: Reporte l istado proveedores
3: Mantenimiento Proveedores
7: Reporte existencias4: Mantenimiento Productos
5: Reportes estadisticos
6: Reporte cuentas
Administrador Empleado
ClienteProveedor
Producto
Estadisticas Cuentas
MODELO FUNCIONAL
DIAGRAMA DE ESTADOS
VENTA AL CONTADO
petición (producto) selección
requerimiento cliente
encontrado vendido
descripción producto
no encontrado
en stock
no en stock
VENTA A CRÉDITO
petición (producto)
selección
requerimiento cliente
encontrado vendido
descripción producto
no encontrado
en stockno en stock
producto a crédito
COMPRAS
selección producto pedido producto almacenado
bodega proveedor
producto en stockentregadoproducto ingresado
en la empresa a proveedor
al inventario
producto a credito
GENERAR FACTURA
producto pedido busqueda producto almacenado
producto en stockentregadoproducto actualizado
cliente
en inventario
producto a credito
MODELO ARQUITECTÓNICO
DIAGRAMA ARQUITECTÓNICO
Administrador
Index.php
Clientes.php
Proveedores.php
Cambio de
precios.php
Productos.php
Menú Archivo Menú Procesos Menú Reportes Menú Administración
Compras.php
Facturas.php
Cuentas por
pagar.php
Cuentas por
cobrar.php
Ventas
Acumuladas.php
Compras
Acumuladas.php
Existencias.php
Submenú
Listados
Clientes.php Proveedores.php Cuentas por
pagar.php
Cuentas por
cobrar.php
Usuarios.php
Permisos.php
DIAGRAMA NAVEGACIONAL
Administrador
Index.php
Clientes.php
Proveedores.php
Cambio de
precios.php
Productos.php
Compras.php
Facturas.php
Cuentas por
pagar.php
Cuentas por
cobrar.php
Ventas
Acumuladas.php
Compras
Acumuladas.php
Usuarios.php
Permisos.php
Listado
Clientes.php
Listado
Proveedores.php
Listado
Cuentas por
pagar.php
Listado
Cuentas por
cobrar.php
Existencias.php
CONSTRUCCIÓN
FRONT END
SCRIPT PHP
PÁGINA REGISTRO DE CLIENTES
<?php
require("seguridad.php");
require_once('mis_funciones_php.php');
$titulo="CLIENTES";
$sub_titulo="REGISTRO DE CLIENTES";
$vic = trim($_GET['edvic']);
if($vic!=''){
$ed_consulta = "select * from clientes where cedula = '$vic'";
$ed_resul = mysql_query($ed_consulta)or die ("NO".mysql_error());
$ed_filas = mysql_num_rows($ed_resul);
for($ed=0; $ed<$ed_filas; $ed++){
$TODO[$ed] = ysql_fetch_object($ed_resul);
$la_ced = $TODO[$ed]->cedula;
$el_ape = $TODO[$ed]->cli_apellido;
$el_nom = $TODO[$ed]->cli_nombre;
$la_dir = $TODO[$ed]->cli_direccion;
$el_tel = $TODO[$ed]->cli_telefono;
}
}
$acc = trim($_GET['accion']);
switch($acc){
case 'n':
$men_control = "Nuevo registro";
break;
case 'g_ac':
$men_control = "Registro actualizado";
break;
case 'g_no':
$men_control = "ERROR REGISTRO REPETIDO<br> Desea actualizar
??<br> oprima nuevamente Grabar";
break;
case 'g_in':
$men_control = "Registro ingresado";
break;
case 'i_no':
$men_control = "Registro no imprimible";
break;
case 'e_no':
$men_control = "Registro no eliminable";
break;
case 'e_nod':
$men_control = "Registro no eliminable dependiente";
break;
case 'e_si':
$men_control = "Registro eliminado";
break;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $titulo; ?></title>
<link href="clases/estilo_papeleria.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./menu2/menu.css">
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
//-->
</script>
</head>
<script LANGUAGE="JavaScript">
<!--
// CHECKEA LOS CAMPOS REQUERIDOS
//ESTOS DEBEN INTRODUCIRSE EN
// LA LISTA DE CAMPOS "camposRequeridos" ARRAY
function chequeaCamposRequeridos(input)
{
var camposRequeridos = new
Array("la_ced","el_ape","el_nom","la_dir","el_tel");
var camposNombres = new
Array("Cédula","Apellidos","Nombre","Dirección","Télefono");
var camposCheck = true;
var camposFaltantes = "\nDebe completar el siguiente campo(s)
obligatorio(s):\n\n\t";
for(var camposNum=0; camposNum < camposRequeridos.length;
camposNum++) {
if ((input.elements[camposRequeridos[camposNum]].value == "") ||
(input.elements[camposRequeridos[camposNum]].value == " ")) {
camposFaltantes += camposNombres[camposNum] + "\n\t";
camposCheck = false;
}
}
if (camposCheck == true)
{
return true;
}
else
{
alert(camposFaltantes);
return false;
}
}
//-->
</script>
<script LANGUAGE="JavaScript">
<!--
// CHEQUEA LOS DIGITOS Y LOS CARACTERES ESPECIALES
function chequeaNumeros(checkString)
{
newString = "";
count = 0;
for (i = 0; i < checkString.length; i++) {
ch = checkString.substring(i, i+1);
if ((ch >= "0" && ch <= "9") || (ch == ".") || (ch == ",")) {
newString += ch;
}
}
if (checkString != newString) {
if (alert("\n¡ Este campo tiene caracteres invalidos !\n"))
{
return newString;
} else {
return newString;//return checkString; dato original
}
}
return newString;//return checkString;
}
//-->
</script>
<script language="javascript">
<!--
//función que pregunta si quiere eliminar datos
function fun_eliminar(dato)
{
var decision;
decision = confirm("¿ Desea elimiar el registro ?");
if (decision == true)
{
return true;
}
else
{
return false;
}
}
//-->
</script>
<body
onload="MM_preloadImages('imagenes/iconos/nuevo2.gif','imagenes/iconos/impri
mir2.gif','imagenes/iconos/guardar2.gif','imagenes/iconos/borrar2.gif','imagenes/ico
nos/grabar_b.gif','imagenes/iconos/imprimir_b.gif','imagenes/iconos/eliminar_b.gif',
'imagenes/iconos/salir_b.gif','imagenes/iconos/nuevo_b.gif','imagenes/iconos/busc
ar_b.gif')">
<div id='principal'>
<!--Début contenu_global-->
<div id="contenu">
<div id="logo"></div></div>
<div id="texto">
<div id="sub_principal"></div>
<div class="menu">
<form action="./control_cli001.php" method="get" onsubmit="return
chequeaCamposRequeridos(this)">
<table width="100%" border="0">
<tr>
<td><div class="titulo"><?php echo $sub_titulo;?>
</div> </td>
</tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<table border="0">
<tr>
<td><div class="tabla_sola">
<table border="0" cellspacing="10">
<tr>
<td colspan="3" align="center"><input name="el_cod" type="hidden"
value="<? echo $la_ced; ?>"/> </td>
</tr>
<tr>
<td align="left"> Cédula:</td>
<td align="left"><input name="la_ced" type="text" class="casilla_clave"
value="<?php echo $la_ced;?>" size="10" maxlength="10"/></td>
</tr>
<tr>
<td align="left"> Apellidos:</td>
<td align="left"><input name="el_ape" type="text"
class="casilla_nombre" value="<?php echo $el_ape;?>" size="30" maxlength="30"
/></td>
<td><a href="./control_cli001.php<?php echo
$_GET['PHP_SELF']."?accion=buscar"; ?>"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('bus','','imagenes/iconos/buscar_b.gif',1)"><img
src="imagenes/iconos/buscar_a.gif" alt="bus" name="bus" width="26" height="26"
border="0" id="bus" title="Buscar"/></a></td>
</tr>
<tr>
<td align="left"> Nombre:</td>
<td align="left"><input name="el_nom" type="text"
class="casilla_nombre" value="<?php echo $el_nom;?>" size="30"
maxlength="30" /></td>
</tr>
<tr>
<td align="left"> Dirección:</td>
<td align="left"><input name="la_dir" type="text"
class="casilla_direccion" value="<?php echo $la_dir;?>" size="40"
maxlength="50" /> </td>
</tr>
<tr>
<td align="left"> Teléfono:</td>
<td align="left"><input name="el_tel" type="text" class="casilla_clave"
onchange="this.value=chequeaNumeros(this.value)" value="<?php echo
$el_tel;?>" size="10" maxlength="10" /></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div></td>
</tr>
</table>
<table width="200" border="0" cellspacing="5" cellpadding="0">
<tr>
<td><a href="./control_cli001.php<?php echo
$_GET['PHP_SELF']."?accion=nuevo"; ?>" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('N','','imagenes/iconos/nuevo_b.gif',1)"><img
src="imagenes/iconos/nuevo_a.gif" alt="N" name="N" width="26" height="26"
border="0" id="N" title="Nuevo" /></a></td>
<td><INPUT name="accion" type="submit" value="_" class="grabar"
title="Grabar" ></td>
<td><a href="./control_cli001.php<?php echo
$_GET['PHP_SELF']."?accion=imprimir&victima=$vic"; ?>"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('I','','imagenes/iconos/imprimir_b.gif',1)"><img
src="imagenes/iconos/imprimir_a.gif" alt="I" name="I" width="26" height="26"
border="0" id="I" title="Imprimir" /></a></td>
<td><a href="./control_cli001.php<?php echo
$_GET['PHP_SELF']."?accion=eliminar&victima=$vic"; ?>"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('E','','imagenes/iconos/eliminar_b.gif',1)"
onclick="return fun_eliminar(this)"><img src="imagenes/iconos/eliminar_a.gif"
alt="E" name="E" width="26" height="26" border="0" id="E" title="Eliminar"
/></a></td>
<td><a href="./bienvenida.php"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('S','','imagenes/iconos/salir_b.gif',1)"><img
src="imagenes/iconos/salir_a.gif" alt="S" name="S" width="26" height="26"
border="0" id="S" title="Salir"/></a></td>
</tr>
</table><br />
<div class="resultados">
<? echo $men_control;?></div></td>
</tr>
</table>
</form>
</div>
<div id="sub_pie">
<?php //menu desplegable
include('menu_all.php');
?>
</div>
<?
echo '</tr></tr></table>';
include("menu_pie.php");
?>
</div>
</div>
</body>
</html>
BACK END
SCRIP MYSQL
BASE EVITA TABLA CLIENTES
-- phpMyAdmin SQL Dump
-- version 2.10.3
-- http://www.phpmyadmin.net
-- Servidor: localhost
-- Tiempo de generación: 12-11-2009 a las 18:51:42
-- Versión del servidor: 5.0.51
-- Versión de PHP: 5.2.6
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
-- Base de datos: `bdevita`
-- --------------------------------------------------------
-- Estructura de tabla para la tabla `clientes`
CREATE TABLE `clientes` (
`cedula` char(10) NOT NULL COMMENT 'codigo',
`cli_apellido` varchar(30) NOT NULL COMMENT 'apellido del cliente',
`cli_nombre` varchar(30) NOT NULL COMMENT 'nombre del cliente',
`cli_direccion` varchar(50) NOT NULL COMMENT 'direccion del cliente',
`cli_telefono` char(10) NOT NULL COMMENT 'telefono del cliente',
PRIMARY KEY (`cedula`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
-- Volcar la base de datos para la tabla `clientes`
INSERT INTO `clientes` VALUES ('1715215875', 'Sambachi Paneluisa ', 'Christina
de las Mercedes ', 'Guamani coop Padre Inocencio Jacome', '096490919');
INSERT INTO `clientes` VALUES ('1715215891', 'Sambachi Paneluisa ', 'Christian
Carlos ', 'Guamani coop Padre Inocencio Jacome', '093593027');
PRUEBAS
GENERAR FACTURA
Primero el usuario debe encontrarse dentro del sistema, seleccionar del menú
procesos la opción facturas como se puede observar a continuación.
Ya seleccionada esta opción, el usuario ingresara a la pagina que contiene el
formulario de creación de factura como se puede apreciar en la imagen anterior.
Siguiente paso ingresar datos del cliente, por medio del botón
Buscar cliente que accedemos a una nueva página para buscar el registro
requerido.
En caso que el cliente no sea encontrado, el sistema nos enlaza con la página
que contiene la ficha de cliente para poder crear un nuevo cliente.
Agregar cliente nuevo
Si el cliente ha sido en encontrado se procederá a agregarlo a factura por medio
del botón.
Añadir cliente a factura
En la siguiente imagen se puede observar la página que se utiliza para realizar la
búsqueda del cliente.
Siguiente paso luego de añadir el cliente en el formulario factura se puede
observar dos botones de selección, estos permiten que la factura sea al contado o
a crédito.
Si se selecciona factura a crédito aparecerá el campo
Se creara una cuenta por cobrar automáticamente si la factura es guardada.
Siguiente paso agregar productos en la canasta.
Por medio del botón.
Buscar producto esta opción permite acceder a una nueva página donde
podremos seleccionar los productos requeridos por el cliente.
Si desea agregar algún producto tendrá que seleccionarlo, esto es posible
presionando la casilla ubicada a la derecha de la página como se observa.
En la siguiente imagen se puede observar la página que se utiliza para realizar la
búsqueda de productos.
Siguiente paso luego de añadir el producto requerido por el cliente al formulario
factura.
Si es el cliente requiere más de una unidad del producto se debe modificar el
campo cantidad.
Realizados estos sencillos pasos tendremos como resultado la factura lista para
su emisión como se observa a continuación.
Adicionalmente aparecen los botones que manejan la información de la factura los
cuales son:
Nuevo Esta opción permite crear un nuevo registro.
Grabar Esta opción permite grabar un nuevo registro.
Buscar factura Esta opción permite buscar registros antiguos.
Imprimir Esta opción permite imprimir los datos que se encuentren en la
ficha.
MANUAL DEL USUARIO
INTRODUCCIÓN
El sistema PapelArt, de fabricación ecuatoriana es un poderoso y versátil
herramienta que ayudará a la empresa, a emitir facturas de una manera confiable
y eficiente teniendo al día su información de inventarios, clientes, proveedores,
cuentas por cobrar y pagar, etc. Garantizando de este modo un correcto manejo
del negocio.
La empresa podrá realizar pedidos de mercaderías en el momento justo, podrá
saber que artículos tienen una mayor o menor demanda, saber que clientes tienen
cuentas pendientes, fijar límites de crédito en tiempo.
REQUERIMIENTOS MÍNIMOS
Los requerimientos mínimos para el correcto funcionamiento del Sistema
PapelArt son:
• Computador Pentium IV de 3 Ghz.
• 50MB de Espacio Libre en el Disco Duro, 512MB de RAM
• Windows Professional XP.
• Monitor Color Resolución de 800x600 y 256 Colores.
• Mouse de dos botones, teclado.
• Paquete AppServ Open Project - 2.5.10 para Windows
• Adobe Reader v.8 o superior.
• Internet Explorer v. 6 o Mozilla Firefox v.3.0 o superiores
PÁGINA DE VERIFICACIÓN DE USUARIOS
Esta página nos permite ingresar al sistema PapelArt (si el usuario se encuentra
registrado). Caso contrario nos deniega el acceso a este.
MENÚ PRINCIPAL
Esta página es desplegada si el usuario cuenta con el respectivo permiso. Si tuvo
acceso al sistema, podrá utilizar las opciones del menú dependiendo del grupo al
que pertenezca.
ARCHIVO
Al seleccionar la opción Archivo de la barra de menús UD. visualizará las
siguientes opciones Clientes, Proveedores, Cambio de precios, Productos.
Registro Clientes
Al dar clic sobre clientes aparece la siguiente página en donde se registran los
clientes de la empresa. Esta página permite modificar, crear o eliminar un cliente.
Se deben ingresar los datos descritos a continuación cédula, apellidos, nombre,
dirección, y teléfono.
Adicionalmente aparecen los botones que manejan la información de clientes los
cuales son:
Esta opción permite acceder a una nueva página, en la cual podremos
buscar el registro requerido para su edición.
Las opciones de búsqueda son variadas, tal como se muestra arriba.
Esta opción permite crear un nuevo cliente.
Esta opción permite grabar un nuevo registro.
Esta opción permite imprimir los datos que se encuentren en la ficha.
Esta opción permite eliminar registros que no contengan dependencias,
como se muestra a continuación.
Registro Proveedores
Al dar clic sobre proveedores aparece la siguiente página en donde se registran
proveedores. Esta página permite modificar, crear o eliminar un proveedor. Se
deben ingresar los datos descritos a continuación nombre de la empresa a la que
pertenece el proveedor, dirección, y teléfono.
Adicionalmente aparecen los botones que manejan la información de proveedores
los cuales son:
Esta opción permite acceder a una nueva página, en la cual podremos
buscar el registro requerido para su edición.
Las opciones de búsqueda son variadas, tal como se muestra arriba.
Esta opción permite crear un nuevo proveedor.
Esta opción permite grabar un nuevo registro.
Esta opción permite imprimir los datos que se encuentren en la ficha.
Esta opción permite eliminar registros que no contengan dependencias,
como se muestra a continuación.
Cambio de Precios
Al dar clic sobre cambio de precios aparece la siguiente página en donde se
modifican los precios de los productos, el cambio se lo puede realizar ingresando
un porcentaje el cual va a ser incrementado en cada producto resultando un
nuevo precio o se puede modificar el precio de venta en cada producto.
Para modificar el precio de venta en cada producto, se debe seguir unos censillo
pasos.
• Ingresar el nuevo precio en la casilla P. Venta.
• Luego dar un clip en el icono Actualizar, lo cual permite realizar el cambio
de precio.
Este proceso se lo realizará solo por la persona autorizada, esto se llevara a cabo
en la siguiente página.
Registró Productos
Al dar clic sobre productos aparece la siguiente página en donde se registran
productos. Esta página permite modificar, crear o eliminar un producto. Se deben
ingresar los datos descritos a continuación código, nombre, unidad, aplica IVA, si
hay existencias del producto aparecerán las casillas de cantidad y precio de
venta.
Adicionalmente aparecen los botones que manejan la información de productos
los cuales son:
Esta opción permite acceder a una nueva página, en la cual podremos
buscar el registro requerido para su edición.
Las opciones de búsqueda son variadas, tal como se muestra arriba.
Esta opción permite crear un nuevo producto.
Esta opción permite grabar un nuevo registro.
Esta opción permite imprimir los datos que se encuentren en la ficha.
Esta opción permite eliminar registros que no contengan dependencias,
como se muestra a continuación.
PROCESOS
En este menú aparecen las opciones relacionadas con la facturación de una
empresa, desde compras y ventas, pasando por cuentas por cobrar y pagar.
Compras
Al dar clic sobre compras aparece la siguiente página en donde se ingresan las
facturas de compra de la empresa, con las cuales se generar un pago o una
cuenta por pagar y un movimiento de inventarios; esta interface consta de las
siguientes características:
El encabezado consta de código compra, proveedor, tipo de transacción.
Para poder ingresar proveedor se debe dar clip sobre el siguiente botón.
Esta opción permite acceder a una nueva página, en la cual podremos
buscar el registro requerido para añadir a la compra.
Al seleccionar transacción a crédito, aparecerán dos nuevos campos requeridos
para poder llevar a cavo el crédito, como se muestra a continuación.
El cuerpo de la transacción consta de código, producto, cantidad, precio de
compra, precio total. Para ingresar un producto, se debe presionar el siguiente
botón:
Esta opción permite acceder a una nueva página donde podremos buscar y
seleccionar los productos adquiridos por la empresa, en caso de que el producto
no se encuentre en la base de datos, este deberá ser ingresado en la página
productos, esta puede ser accedida presionando el botón
Agregar.
Si desea agregar algún producto tendrá que seleccionarlo, esto es posible
presionando la casilla ubicada a la derecha de la página como se observa.
La página de búsqueda de productos se muestra a continuación.
La siguiente página muestra el documento listo para su impresión
Venta y Facturación
Al dar clic sobre facturas aparece la siguiente página en donde se ingresan las
facturas de venta de la empresa, con las cuales se generar un cobro o una cuenta
por cobrar y un movimiento de inventarios; esta interface consta de las siguientes
características:
El encabezado consta de número de factura, fecha de emisión, Cliente y tipo de
transacción.
Para poder ingresar cliente se debe dar clip sobre el siguiente botón.
Esta opción permite acceder a una nueva página, en la cual podremos
buscar el registro requerido para añadir a la venta.
Al seleccionar transacción a crédito, aparecerá un nuevo campo requerido para
poder llevar a cavo el crédito, como se muestra a continuación.
El cuerpo de la transacción consta de código, producto, cantidad, precio unitario,
precio total e IVA. Para ingresar un producto, se debe presionar siguiente botón:
Esta opción permite acceder a una nueva página donde podremos buscar y
seleccionar los productos requeridos por el cliente, esto se puede apreciar en la
siguiente página.
La siguiente página muestra el documento listo para su impresión
Cuentas por Cobrar
Al dar clic sobre cuentas por cobrar aparece la siguiente página en donde se
registran los pagos de las cuentas pendientes. Esta página permite ingresar
nuevos pagos, imprimir y buscar cuentas pendientes o canceladas.
Se debe escoger la cuenta a cancelar a través del siguiente botón:
Esta opción permite acceder a la página que contiene las cuentas pendientes
y canceladas como se muestra a continuación.
Para selecciona la cuenta se debe presionar el botón que se muestra a
continuación. Editar.
Cuentas por Pagar
Al dar clic sobre cuentas por pagar aparece la siguiente página en donde se
registran los pagos de las cuentas pendientes. Esta página permite ingresar
nuevos pagos, imprimir y buscar cuentas pendientes o canceladas.
Se debe escoger la cuenta a cancelar a través del siguiente botón:
Esta opción permite acceder a la página que contiene las cuentas pendientes
y canceladas como se muestra a continuación.
Para selecciona la cuenta se debe presionar el botón que se muestra a
continuación. Editar.
REPORTES
En este menú contiene los reportes de venta acumuladas, compras acumulas,
existencias y listados un submenú.
Ventas Acumuladas
Al dar clic sobre ventas acumuladas aparece la siguiente página en donde se
verifica la venta realizada en un determinado periodo de tiempo, para poder
observar la venta acumulada se selecciona la fecha de inicio y la fecha de final del
informe como se observa a continuación.
En la siguiente página se observa el informe desplegado con la opción de
impresión, retorno y salir a menú principal.
La siguiente página muestra el documento listo para la impresión la cual consta
del logo de la empresa, fecha de emisión, fecha de inicio y final, detalle de los
productos vendidos y el total de la venta.
Compra Acumuladas
Al dar clic sobre compras acumuladas aparece la siguiente página en donde se
verifica la compra realizada en un determinado periodo de tiempo, para poder
observar la compra acumulada se selecciona la fecha de inicio y la fecha de final
del informe como se observa a continuación.
En la siguiente página se puede observar el informe desplegado con la opción de
impresión, retorno y salir a menú principal.
La siguiente página muestra el documento listo para la impresión la cual consta
del logo de la empresa, fecha de emisión, fecha de inicio y final, detalle de los
productos adquiridos y un total de la compra.
Existencias
Al dar clic sobre existencias aparece la siguiente página en donde se muestra un
informe con la siguiente información código, nombre, unidad, existencia de cada
uno de los productos.
En la siguiente página se puede observar el documento listo para su impresión.
Submenú Listados
Este submenú contiene los listados de clientes, proveedores, cuentas por cobrar y
cuentas por pagar.
Reporte Clientes
Al dar clic sobre clientes aparece la siguiente página en donde se muestra la
información detallada de los clientes de la empresa.
En la siguiente página se puede observar el reporte listo para su impresión.
Reporte Proveedores
Al dar clic sobre proveedores aparece la siguiente página en donde se muestra la
información detallada de los proveedores de la empresa.
En la siguiente página se puede observar el reporte listo para su impresión.
Reporte Cuentas por Cobrar
Al dar clic sobre cuentas por cobrar aparece la siguiente página en donde se
muestra la información detallada de las cuentas por cobrar de la empresa.
En la siguiente página se puede observar el reporte listo para su impresión.
Reporte Cuentas por Pagar
Al dar clic sobre cuentas por pagar aparece la siguiente página en donde se
muestra la información detallada de las cuentas por pagar de la empresa.
En la siguiente página se puede observar el reporte listo para su impresión.
ADMINISTRACIÓN
Esta pestaña estará activa solo para los usuarios que tienen privilegios de
administrador ya que los datos que se encuentran en estas opciones son
relevantes para el buen desempeño del sistema.
Usuarios
Al dar clic sobre usuarios aparece la siguiente página en donde se registran los
usuarios del sistema. Esta página permite modificar, crear o eliminar usuarios. Se
deben ingresar los datos descritos a continuación: nombre del usuario, nick, clave,
grupo, dirección, teléfono.
Adicionalmente aparecen los botones que manejan la información de usuarios los
cuales son:
Esta opción permite acceder a los usuarios y modificarlos.
Esta opción permite crear un nuevo usuario.
Esta opción permite grabar un nuevo registro.
Esta opción permite imprimir los datos que se encuentren en la ficha.
Esta opción permite eliminar registros que no contengan dependencias.
Permisos
La siguiente página nos permite dar permisos a cada grupo de usuarios, esto se
lo realiza activando o desactivando casillas.
Salir del Sistema
Permite salir del sistema PapelArt.
