DEPARTAMENTO DE CIENCIAS DE LA COMPUTACION

Transcripción

1 i DEPARTAMENTO DE CIENCIAS DE LA COMPUTACION CARRERA DE TECNOLOGIA EN COMPUTACION TESIS PREVIO A LA OBTENCIÓN DEL TÍTULO DE TECNOLOGO EN COMPUTACION AUTOR: CPTN. ROBERT GRANDA GARCIA TEMA: ANALISIS, DISEÑO Y DESARROLLO DE UN SITIO WEB PARA LA EMPRESA CREACIONES SORTIJERITO DIECTOR: ING. JOSE SANCHO CODIRECTOR: ING. WASHIGTON PEREZ SANGOLQUÍ, MARZO 2014

2 i CERTIFICADO En nuestra condición de Director y Co-Director CERTIFICAMOS que hemos revisado y evaluado el desarrollo de la Monografía Técnica ANALISIS, DISEÑO Y DESARROLLO DE UN SITIO WEB PARA LA EMPRESA CREACIONES SORTIJERITO presentado por el señor GRANDA GARCIA ROBERT NAPOLEON en el cual se han observado las disposiciones de la Institución, metodología y técnicas que regulan esta actividad académica. Por ello autorizamos al mencionado alumno a reproducir el documento definitivo, presentarlo a las autoridades del Departamento de Ciencias de la Computación - Tecnología en Computación y proceder a la exposición del contenido. Sangolquí, marzo Ing. José Sancho Arias DIRECTOR Ing. Washington Pérez Argudo CO- DIRECTOR

3 ii AUTORIA DE RESPONSABILIDAD En calidad de alumno de la Tecnología en Computación de la Universidad de las Fuerzas Armadas ESPE, CERTIFICO que la presente Monografía Técnica, previa a la obtención del título de TECNÓLOGO COMPUTACION, es un trabajo inédito el cual no puede ser copiado, ni reproducido parcial ni totalmente sin la autorización escrita del autor. Es todo cuanto puedo CERTIFICAR en honor a la verdad. Sangolquí, marzo 2014 Robert Napoleón Granda García

4 iii AUTORIZACION Autorizo a la Biblioteca Virtual de la Universidad de las Fuerzas Armadas ESPE, a realizar la publicación del presente trabajo. Robert Napoleón Granda García

5 iv DEDICATORIA Dedico el presente trabajo a mis padres: Vicente y Teresita, a mis hermanos: Carlos, Maritza y Alejandro, a mis hijos: Caleb y Abraham, en especial a mi esposa Cynthia, quien me inspiró a dar lo mejor de mí y compartir conmigo las alegrías y experiencias de mi vida. Robert Napoleón Granda García

6 v AGRADECIMIENTOS Agradezco a Dios por darme salud, vida y prosperidad, a mi esposa, por el apoyo incondicional en los proyectos que me he planteado en la vida, a mis hijos por darme fuerzas para seguir adelante, a mi Director y Co- Director de tesis por ser guía y amigos en el transcurso de este proyecto, a la Empresa Creaciones Sortijerito por su apoyo irrestricto y de manera especial, a la Universidad de las Fuerzas Armadas ESPE, por abrirme las puertas al campo profesional, a sus docentes y personal administrativo por brindarme su sabiduría y confianza. Robert Napoleón Granda García

7 vi INDICE DE CONTENIDOS 1. INTRODUCCION ANTECEDENTES OBJETIVOS OBJETIVO GENERAL OBJETIVOS ESPECIFICOS JUSTIFICACION E IMPORTANCIA ALCANCE METODOLOGÍA METODOLOGÍA OOHDM PARA EL DESARROLLO DE APLICACIONES DIGITALES E HIPERMEDIA HERRAMIENTAS DE DISEÑO WEB - DREAMWEAVER UML Introducción Modelamiento de clases Clase..., Atributos Métodos Relación entre clases Herencia Agregación TIPOS DE CLIENTES EN INTERNET APLICACIONES WEB Introducción Diseño Web Técnicas y estándares de diseño web Estrategias de diseño web Plantillas y/o templates web... 28

8 Web Página Web Estructura Web Sitio Web Hospedaje Web Hosting DESARROLLO WEB HTML PHP WAMPSERVER APACHE PRINCIPALES CONFIGURACIONES DE APACHE DIRECTIVAS DE CONFIGURACIÓN httpd.conf MYSQL PHP phpmyadmin FRAMEWORK PARA PHP ANALISIS Y DISEÑO Especificación de los requerimientos del sitio web Propósito Ámbito del portal Fin del website Interfaz del sistema Interfaz de usuario Interfaz de hardware Interfaz de software DICCIONARIO DE DATOS Documentos de requisitos del sistema Diseño conceptual Diagramas de clases vii

9 3.2.2 Diseño Navegacional Análisis de Navegación Documento de diseño de navegación Diseño de interfaz Interfaz de usuario Configuración de dominio Portal Web Aplicación Web Administración de usuarios IMPLEMENTACION Instalaciones Instalación del software Configuraciones del website Configuracion localhost y web Configuración del php Admin Desarrollo y pruebas Fase Desarrollo Desarrollo del sitio web Pruebas de la aplicación Pruebas de conectividad Pruebas funcionales Pruebas de concurrencia Pruebas de compatibilidad Pruebas de caja negra Pruebas de caja blanca Pruebas de funcionamiento Pruebas Unitarias del Dominio Pruebas de Configuración y compatibilidad Conclusiones y Recomendaciones viii

10 4.4 BIBLIOGRAFIA ix

11 x INDICE DE ILUSTRACIONES Ilustración 1 ETAPAS DEL OOHDM... 8 Ilustración 2 Representación de una clase Ilustración 3 Arquitectura web Ilustración 4 Rayos de Sol/ rayos de Luz Ilustración 5 Siluetas negras o de colores Ilustración 6 Manchas de Tinta Ilustración 7 Remolinos/Flores/ ornamentos Ilustración 8 Lineas de flujo Ilustración 9 Círculos Ilustración 10 Humo con textura Ilustración 11 Arquitectura de la Plataforma web Ilustración 12 Arquitectura web Ilustración 13 Wampserver para Windows Ilustración 14 Proceso de PHP para HTML Ilustración 15 Web Application Frameworks Ilustración 16 Arbol de Problemas Ilustración 17 MODELO DE NEGOCIO Ilustración 18 Diagrama de Casos de Uso Ilustración 19 Diagrama de Secuencia Ilustración 20 Diagrama de Estados Ilustración 21 Diagrama de Comunicación Ilustración 22 Diagrama de Clases Ilustración 23 Diseño navegacional inicial Ilustración 24 Diseño navegacional inicial Ilustración 25 Diseño navegacional inicial Ilustración 26 Diseño navegacional inicial Ilustración 27 Interfaz Abstracta

12 Ilustración 28 Interfaz de usuario Ilustración 29 Interfaz Abstracta Ilustración 30 Interfaz de usuario Ilustración 31 Interfaz Abstracta Ilustración 32 Interfaz de usuario Ilustración 33 Interfaz Abstracta Ilustración 34 Interfaz de envío de solicitud de usuario registrado Ilustración 35 Interfaz Abstracta Tienda Virtual Ilustración 36 Interfaz de usuario Tienda Virtual Ilustración 37 Acceso tienda virtual Ilustración 38 Listado de clientes Ilustración 39 Pantalla de inicio de instalación de WAMPSERVER Ilustración 40 Vista del Explorar de Windows y ubicación www/wamp Ilustración 41 Configuración de Connections para localhost Ilustración 42 Configuración de Connections para el hosting Ilustración 43 Solicitud phpadmin para archivo plano *.sql Ilustración 44 Ubicación del Archivo sortijerito.sql Ilustración 45 clase colores Ilustración 46 clase pedidos Ilustración 47 clase clientes Ilustración 48 clase categoría Ilustración 49 clase productos Ilustración 50 clase factura Ilustración 51 Ping localhost xi Tabla 1 Cuadro resumen básico de etiquetas html Tabla 2 Tabla de pruebas de compatibilidad

13 xii RESUMEN El presente proyecto de tesis, tiene como objetivo principal, proveer a la Empresa Creaciones Sortijerito, de un website que facilite promover sus productos a través del World Wide Web con el apoyo de herramientas multimedia, logrando de esta manera la comercialización y venta de sus productos, aplicando técnicas básicas de marketing por internet; los constantes cambios en las técnicas de comercialización han obligado a centrar su atención en el uso de entornos web, para introducir en el mercado mundial, sus productos a través de plataformas multimedia sobre servidores web, que faciliten al cliente el acceso a la información que requiere, de una manera fácil, segura y dinámica, logrando fomentar una cultura de cambios, donde el cliente es parte activa de la empresa que a través de la internet, puede hacerlo desde cualquier parte del mundo, afianzando los lazos comerciales, para suplir las necesidades y requerimiento de productos terminados, que agreguen valor a un sinnúmero de posibilidades que avizora el cliente objetivo, es por ello, que este trabajo, está direccionada al cumplimiento de los objetivos planteados por la Empresa, los mismos que han sido transformados dinámicamente, en recursos multimedia en todas sus clases y es como la empresa Creaciones Sortijerito va a ingresar al mercado mundial, con productos Hechos en Ecuador. PALABRAS CLAVES: Creaciones Sortijerito, Lazos, Estrellas, Pompones

14 xiii ABSTRACT This thesis project has as its main purpose, to provide the Company Sortijerito Creations, a website that facilitates promote their products through the World Wide Web with the support of multimedia tools, thus achieving the marketing and sale of their products applying basic internet marketing techniques; the constant changes in marketing techniques have forced focus on the use of web environments, to enter the world market, its products through multimedia platforms on web servers, to facilitate customer access to information that requires in an easy, safe and dynamic, obtaining foster a culture of change, where the customer is an active part of the company through the internet, you can do it from anywhere in the world, strengthening trade ties, to meet the needs and requirement of finished products that add value to countless possibilities that envisions the target customer is for this reason that this paper is directed to meeting the objectives set by the Company, the same that have been dynamically transformed resource media in all classes and as the company Sortijerito Creations will enter the global market with products Made in Ecuador. KEY WORDS: Creations Sortijerito, Bow, Stars, Pompons

15 P á g i n a 1 CAPITULO I 1. ANTECEDENTES La Empresa Creaciones Sortijerito es una organización de tipo artesanal, que tiene como misión. Diseñar, fabricar y comercializar, lazos, estrellas y pompones en cinta sintética, en una gran variedad de tamaños, diseños y colores para ser utilizado como producto final adornando regalos y presentes o como valor agregado de otros productos. Los productos de la Empresa Creaciones Sortijerito al ser hechos enteramente a mano, se adaptan fácilmente como complemento a varios enseres incrementando el valor agregado de estos, lo que produce un incremento en ventas, por ello, el repunte de ventas, está completamente limitada por el desconocimiento de los productos de Creaciones Sortijerito en el mercado, siendo una alternativa de promoción, entre otras opciones realizar marketing de sus productos en el Internet. Por la gran variedad de lazos, se requiere crear un brochure o catálogo de los productos, a fin de proporcionar a los usuarios y potenciales clientes, disponer a través de multimedia, de información e imágenes de los bows de la empresa..

16 P á g i n a OBJETIVOS OBJETIVO GENERAL Desarrollar un sitio web para proporcionar a la Empresa Creaciones Sortijerito, de una herramienta que permita apoyar la comercialización y venta de sus productos, aplicando técnicas básicas de marketing por internet OBJETIVOS ESPECIFICOS. Analizar los requerimientos necesarios para desarrollar la aplicación, de forma que cubra las diferentes consideraciones metodológicas y técnicas. Diseñar el sitio web de tal manera que se pueda cargar fácilmente el contenido de cada uno de los productos de venta. Desarrollar el sitio web fundamentado en la metodología (OOHDM). Conseguir que este espacio se convierta en un lugar básico de información de productos y artículos de la empresa promocionando la participación interactiva de los usuarios y clientes.

17 P á g i n a JUSTIFICACION E IMPORTANCIA. Actualmente, el mercadeo del producto, se lo está manejando a través de fotos, CD s, además de muestras físicas del producto, por ello, la variedad de lazos, estrellas y pompones que proporciona la Empresa Creaciones Sortijerito, es muy amplia, las presentaciones vienen en diferentes tamaños, colores y diseños, la falta de un sitio web que permita mostrar al mundo estos productos, afecta directamente tanto con el posicionamiento de la marca, así como ha permitido consolidar mercados limitados. Es por ese motivo, que un sitio web multimedia, con el respectivo dominio.com, permitirá mostrar a través del internet, toda la gama de productos, a su vez de interactuar con futuros compradores, aplicando las reglas del marketing por internet. Indirectamente, los productos de Sortijerito, al ser el valor agregado de otros, indirectamente han cruzado fronteras, los productos de la Empresa han cautivado a otros de igual calidad en ferias internacionales, donde ha sido muy valorado el trabajo, considerando que no existe empresa en el mundo que realice lazos hechos a mano, lo que atrae mucho más la atención de empresarios que buscan en los lazos, estrellas y pompones, nuevas alternativas e ideas para implementar en sus propios productos.

18 P á g i n a 4 Muchas de las Empresas internacionales, inmediatamente de conocer un producto, buscan en la internet, la empresa que los fabrica o comercializa, y es ahí donde el sitio web, en dos idiomas, presenta a la empresa, sus productos y demás información útil para iniciar con los procesos de intercambio de información. En la actualidad todo comercio serio y profesional, corre a través de la Internet, redes sociales y demás, por ello, el diseño y desarrollo del sitio en mención para la Empresa Creaciones Sortijerito, por todos los ámbitos, es de mucha importancia, considerarlo y ejecutarlo. Mediante el sitio web sería un aporte para la gestión de ventas, cuyo objetivo es promocionar la marca, consolidar mercados cautivos, donde el lazo hecho a mano es una utopía, y es ahí donde otras empresas ven en los productos de Sortijerito, una alternativa viable y económica de promocionar sus propios productos, con el apoyo de otros de igual calidad. 1.4 ALCANCE El sitio web se ha convertido, con el tiempo, en un medio de apoyo para las ventas, promoción de los productos y proyección para este

19 P á g i n a 5 tipo de negocio. Un diseño web ahora se puede valer de todas estas herramientas visuales que, utilizadas de manera funcional, hacen que el sitio sea considerado y valorado por quienes lo visitan. La manera en que creativamente se conjuguen todos los elementos de identidad corporativa, el arte, los colores, la forma en que se presente por primera vez ante los ojos de todos, dependerá en gran medida si sus clientes deciden quedarse un poco más a navegar entre las diversas páginas de su sitio, para evaluar y valorar el contenido de todo lo que su negocio puede ofrecer. La aplicación de nuevos sistemas tecnológicos multimedia, dentro del sitio web de Sortijerito, constituirá un proyecto a ser efectuado en la Empresa Creaciones Sortijerito, mismo que cubrirá los siguientes aspectos: Navegación de los usuarios al entorno estático en dos idiomas. Ingreso de clientes registrados a la tienda virtual en dos idiomas. Catálogo virtual básico de los productos de la Empresa por categorías y colores, en dos idiomas Creación del pedido del cliente, en dos idiomas

20 P á g i n a 6 Envío de mensajería por parte de cualquier cliente al de la empresa, a través del formulario desarrollado en dos idiomas.

21 P á g i n a 7 CAPITULO II MARCO TEORICO 2. METODOLOGÍA 2.1. METODOLOGÍA OOHDM PARA EL DESARROLLO DE APLICACIONES DIGITALES E HIPERMEDIA OOHDM (Object Oriented Hypermedia Design Method), es una metodología orientada a objetos, cuyo proceso de desarrollo tiene 5 fases donde se combinan notaciones UML (Unified Modeling Language) y otras propias de la metodología. El gran desarrollo de Internet obligó a que se adaptara para desarrollo de aplicaciones Hipermedia para Comercio Electrónico, motores de búsqueda, sitios educacionales y de entretenimiento. El uso de metodologías para el desarrollo garantiza que el software sea fiable, reutilizable, rentable y fácil de mantener. Se han creado muchas metodologías para el desarrollo de aplicaciones hipermediales, pero muchas de ellas obligaban a los desarrolladores a mezclar los aspectos conceptuales y los de presentación, para solucionar este problema, se creó la metodología OOHDM (Object Oriented Hypermedia Design Method) que se fundamenta en la orientación a objetos, por ese motivo, hay autores que proponen separar el proceso de desarrollo de las aplicaciones hipermediales en cinco

22 P á g i n a 8 etapas: obtención de requerimientos, diseño conceptual, diseño navegacional, diseño de interfaces abstractas e implementación. Ilustración 1 ETAPAS DEL OOHDM Fuente: ( 1. Obtención de Requerimientos La herramienta en la cual se fundamenta esta fase son los diagramas de Casos de Usos, los cuales son diseñados por escenarios con la finalidad de obtener de manera clara los requerimientos y acciones del sistema. 2. Modelo Conceptual Se construye un modelo orientado a objetos que represente el dominio de la aplicación usando las técnicas propias de la OO (Orientación a Objetos). La finalidad principal durante esta fase es capturar el dominio semántico de la aplicación teniendo en cuenta el papel de los usuarios y las tareas que desarrollan.

23 P á g i n a 9 El resultado de esta fase es un modelo de clases relacionadas que se divide en subsistemas. Productos: Diagrama de Clases, División en subsistemas y relaciones Herramientas: Técnicas de modelado O.O ( Orientado a Objetos), patrones de diseño Mecanismos: Clasificación, agregación, generalización y especialización Objetivo de diseño: Modelo semántico de la aplicación 3. Diseño Navegacional La estructura de navegación de una aplicación hipermedia está definida por un esquema de clases de navegación específica, que refleja una posible vista elegida. En OOHDM hay una serie de clases especiales predefinidas, que se conocen como clases navegacionales: Nodos Enlaces Estructuras de acceso Los menús Los índices Las guías de ruta

24 P á g i n a Diseño de Interfaz Abstracta Esto consiste en definir: Qué objetos de interfaz va a percibir el usuario El camino en el cuál aparecerán los diferentes objetos de navegación Qué objeto de interfaz actuarán en la navegación La forma de sincronización de los objetos multimedia y el interfaz de transformaciones. 5. Implementación Una vez cumplidas las 4 fases anteriores solo queda llevar los objetos a un lenguaje concreto de programación. Productos: Aplicación ejecutable Herramientas: El entorno del lenguaje de programación Mecanismos: Los ofrecidos por el lenguaje Objetivo de diseño: Obtener la aplicación ejecutable

25 P á g i n a UML Introducción El Lenguaje de Modelamiento Unificado (UML - Unified Modeling Language) es un lenguaje gráfico para visualizar, especificar y documentar cada una de las partes que comprende el desarrollo de software. UML entrega una forma de modelar cosas conceptuales como lo son procesos de negocio y funciones de sistema, además de cosas concretas como lo son escribir clases en un lenguaje determinado, esquemas de base de datos y componentes de software reusables Modelamiento de clases Un diagrama de clases sirve para visualizar las relaciones entre las clases que involucran el sistema, las cuales pueden ser asociativas, de herencia y de uso. Un diagrama de clases está compuesto por los siguientes elementos: Clase: atributos, métodos y visibilidad. Relaciones: herencia, composición, agregación, asociación y uso

26 P á g i n a Clase Es la unidad básica que encapsula toda la información de un Objeto (un objeto es una instancia de una clase). A través de ella podemos modelar el entorno en estudio. En UML, una clase es representada por un rectángulo que posee tres divisiones. Ilustración 2 Representación de una clase Fuente: ( En donde: Superior: contiene el nombre de la clase Intermedio: contiene los atributos (o variables de instancia) que caracterizan a la clase (pueden ser private, protected o public). Inferior: contiene los métodos u operaciones, los cuales son la forma como interactúa el objeto con su entorno (dependiendo de la visibilidad: private, protected o public).

27 P á g i n a Atributos Los atributos o características de una Clase pueden ser de tres tipos, los que definen el grado de comunicación y visibilidad de ellos con el entorno, estos son: public (+, ): Indica que el atributo será visible tanto dentro como fuera de la clase, es decir, es accsesible desde todos lados. private (-, ): Indica que el atributo sólo será accesible desde dentro de la clase (sólo sus métodos lo pueden accesar). protected (#, ): Indica que el atributo no será accesible desde fuera de la clase, pero si podrá ser accesado por métodos de la clase además de las subclases que se deriven (ver herencia) Métodos Los métodos u operaciones de una clase son la forma en como ésta interactúa con su entorno, éstos pueden tener las características:

28 P á g i n a 14 public (+, ): Indica que el método será visible tanto dentro como fuera de la clase, es decir, es accsesible desde todos lados. (Erazo, 2003) private (-, ): Indica que el método sólo será accesible desde dentro de la clase (sólo otros métodos de la clase lo pueden accesar). protected (#, ): Indica que el método no será accesible desde fuera de la clase, pero si podrá ser accesado por métodos de la clase además de métodos de las subclases que se deriven (ver herencia) Relaciones entre clases Es necesario explicar como se pueden interrelacionar dos o más clases (cada uno con características y objetivos diferentes) y es necesario el concepto de cardinalidad de relaciones. En UML, la cardinalidad de las relaciones indica el grado y nivel de dependencia, se anotan en cada extremo de la relación. uno o muchos: 1..* (1..n) 0 o muchos: 0..* (0..n) número fijo: m (m denota el número).

29 P á g i n a Herencia Indica que una subclase hereda los métodos y atributos especificados por una súper clase, por ende la subclase además de poseer sus propios métodos y atributos, poseerá las características y atributos visibles de la súper clase (public y protected) Agregación Sirve para modelar objetos complejos definidos por el desarrollador de la aplicación, y es utilizado cuando no bastan los tipos de datos básicos que proveen los lenguajes: como enteros, reales y secuencias de caracteres. Por valor Es un tipo de relación estática, en donde el tiempo de vida del objeto incluido está condicionado por el tiempo de vida del que lo incluye. Por referencia Es un tipo de relación dinámica, en donde el tiempo de vida del objeto incluido es independiente del que lo incluye.

30 P á g i n a TIPOS DE CLIENTES EN INTERNET. La clasificación general y específica de los tipos de clientes en internet, una empresa u organización tiene dos tipos de clientes: (Marlene) CLIENTES ACTUALES.- Son aquellos (personas, empresas u organizaciones) que le hacen compras a la empresa de forma periódica o que lo hicieron en una fecha reciente. Este tipo de clientes es el que genera el volumen de ventas actual, por lo tanto, es la fuente de los ingresos que percibe la empresa en la actualidad y es la que le permite tener una determinada participación en el mercado dividiéndose en cuatro tipos de clientes, según su vigencia, frecuencia, volumen de compra, nivel de satisfacción y grado de influencia. a. Clientes Activos e Inactivos: Los clientes activos son aquellos que en la actualidad están realizando compras o que lo hicieron dentro de un periodo corto de tiempo. En cambio, los clientes inactivos son aquellos que realizaron su última compra hace mucho tiempo, podrían ser meses o incluso años, por lo tanto, se puede deducir que se pasaron a la competencia, que están insatisfechos con el producto o servicio que recibieron o que ya no necesitan el producto.

31 P á g i n a 17 Esta clasificación es muy útil por dos razones: 1) Porque permite identificar a los clientes que en la actualidad están realizando compras y que requieren una atención especial para retenerlos, ya que son los que en la actualidad le generan ingresos económicos a la empresa, y 2) para identificar aquellos clientes que por alguna razón ya no le compran a la empresa, y que por lo tanto, requieren de actividades especiales que permitan identificar las causas de su alejamiento para luego intentar recuperarlos. b. Clientes de compra frecuente, promedio y ocasional: Una vez que se han identificado a los clientes activos, se los puede clasificar según su frecuencia de compra, en: Clientes de Compra Frecuente: Son aquellos que realizan compras repetidas a menudo o cuyo intervalo de tiempo entre una compra y otra es más corta que el realizado por el grueso de clientes, cuya diferencia de tiempo lo establece cada empresa. Este tipo de clientes, por lo general, están complacidos con la empresa, sus productos y servicios. Por lo tanto, es fundamental no descuidar las relaciones con ellos y darles continuamente un

32 P á g i n a 18 servicio personalizado que los haga sentir "importantes" y "valiosos" para la empresa. Clientes de Compra Habitual: Son aquellos que realizan compras con cierta regularidad porque están satisfechos con la empresa, el producto y el servicio. Por lo tanto, es aconsejable brindarles una atención esmerada para incrementar su nivel de satisfacción, y de esa manera, tratar de incrementar su frecuencia de compra. Clientes de Compra Ocasional: Son aquellos que realizan compras de vez en cuando o por única vez. Para determinar el porqué de esa situación es aconsejable que cada vez que un nuevo cliente realice su primera compra se le solicite algunos datos que permitan contactarlo en el futuro, de esa manera, se podrá investigar el porqué de su alejamiento y el cómo se puede remediar o cambiar ésa situación. c. Clientes de alto, promedio y bajo volumen de compras: Luego de identificar a los clientes activos y su frecuencia de compra, se puede realizar la siguiente clasificación según el volumen de compras:

33 P á g i n a 19 Clientes con Alto Volumen de Compras: Son aquellos (por lo general, "unos cuantos clientes") que realizan compras en mayor cantidad que el grueso de clientes, a tal punto, que su participación en las ventas totales puede alcanzar entre el 50% y el 80%. Por lo general, estos clientes están complacidos con la empresa, el producto y el servicio; por lo tanto, es fundamental retenerlos planificando e implementando un conjunto de actividades que tengan un alto grado de personalización, de tal manera, que se haga sentir a cada cliente como muy importante y valioso para la empresa. Clientes con Promedio Volumen de Compras: Son aquellos que realizan compras en un volumen que está dentro del promedio general. Por lo general, son clientes que están satisfechos con la empresa, el producto y el servicio; por ello, realizan compras habituales. Para determinar si vale la pena o no, el cultivarlos para que se conviertan en Clientes con Alto Volumen de Compras, se debe investigar su capacidad de compra y de pago. Clientes con Bajo Volumen de Compras: Son aquellos cuyo volumen de compras está por debajo del promedio establecido por el empresa, que por lo general, este tipo de clientes pertenecen son los de compra ocasional.

34 P á g i n a 20 d. Clientes Complacidos, Satisfechos e Insatisfechos: Después de identificar a los clientes activos e inactivos, y de realizar una investigación de mercado que haya permitido determinar sus niveles de satisfacción, se los puede clasificar en: Clientes Complacidos: Son aquellos que percibieron que el desempeño de la empresa, el producto y el servicio han excedido sus expectativas. Por lo tanto, para mantener a éstos clientes en ese nivel de satisfacción, se debe superar la oferta que se les hace mediante un servicio personalizado que los sorprenda cada vez que hacen una adquisición. Clientes Satisfechos: Son aquellos que percibieron el desempeño de la empresa, el producto y el servicio como coincidente con sus expectativas. Este tipo de clientes se muestra poco dispuesto a cambiar de marca, pero puede hacerlo si encuentra otro proveedor que le ofrezca una oferta mejor. Si se quiere elevar el nivel de satisfacción de estos clientes se debe planificar e implementar servicios especiales que puedan ser percibidos por ellos como un plus que no esperaban recibir. Clientes Insatisfechos: Son aquellos que percibieron el desempeño de la empresa, el producto y/o el servicio por debajo de sus expectativas; por lo tanto, no quieren repetir esa

35 P á g i n a 21 experiencia desagradable y optan por otro proveedor. Si se quiere recuperar la confianza de éstos clientes, se necesita hacer una investigación profunda de las causas que generaron su insatisfacción para luego realizar las correcciones que sean necesarias. Por lo general, este tipo de acciones son muy costosas porque tienen que cambiar una percepción que ya se encuentra arraigada en el consciente y subconsciente de este tipo de clientes. e. Clientes Influyentes Un detalle que se debe considerar al momento de clasificar a los clientes activos, independientemente de su volumen y frecuencia de compras, es su grado de influencia en la sociedad o en su entorno social, debido a que este aspecto es muy importante por la cantidad de clientes que ellos pueden derivar en el caso de que sugieran el producto y/o servicio que la empresa ofrece. Este tipo de clientes se dividen en: Clientes Altamente Influyentes: Este tipo de clientes se caracteriza por producir una percepción positiva o negativa en un grupo grande de personas hacia un producto o servicio. Por ejemplo, estrellas de cine, deportistas famosos, empresarios de renombre y personalidades que han logrado algún tipo de reconocimiento especial. Lograr que estas personas sean clientes de la empresa es muy conveniente por la cantidad de

36 P á g i n a 22 clientes que pueden derivar como consecuencia de su recomendación o por usar el producto en público. Sin embargo, para lograr ese "favor" se debe conseguir un alto nivel de satisfacción (complacencia) en ellos o pagarles por usar el producto y hacer recomendaciones (lo cual, suele tener un costo muy elevado). Clientes de Regular Influencia: Son aquellos que ejercen una determinada influencia en grupos más reducidos, por ejemplo, médicos que son considerados líderes de opinión en su sociedad científica o de especialistas. Por lo general, lograr que éstos clientes recomienden el producto o servicio es menos complicado y costoso que los Clientes Altamente Influyentes. Por ello, basta con preocuparse por generar un nivel de complacencia en ellos aunque esto no sea rentable, porque lo que se pretende con este tipo de clientes es influir en su entorno social. Clientes de Influencia a Nivel Familiar: Son aquellos que tienen un grado de influencia en su entorno de familiares y amigos, por ejemplo, la ama de casa que es considerada como una excelente cocinera por sus familiares y amistades, por lo que sus recomendaciones sobre ese tema son escuchadas con

37 P á g i n a 23 atención. Para lograr su recomendación, basta con tenerlos satisfechos con el producto o servicio que se les brinda. CLIENTES POTENCIALES: Son aquellos (personas, empresas u organizaciones) que no le realizan compras a la empresa en la actualidad pero que son visualizados como posibles clientes en el futuro porque tienen la disposición necesaria, el poder de compra y la autoridad para comprar. Este tipo de clientes es el que podría dar lugar a un determinado volumen de ventas en el futuro (a corto, mediano o largo plazo) y por lo tanto, se los puede considerar como la fuente de ingresos futuros.

38 P á g i n a APLICACIONES WEB Introducción El modo de crear los documentos HTML (HyperText Markup Language ( lenguaje de marcado hipertextual ) ha variado a lo largo de la corta vida de las tecnologías Web pasando desde las primeras páginas escritas en HTML almacenadas en un fichero en el servidor web, hasta aquellas que se generan rápidamente como respuesta a una acción del cliente y cuyo contenido varía según las circunstancias. Además, el modo de generar páginas dinámicas ha evolucionado, desde la utilización del CGI (Common Gateway Interface), hasta los servlets pasando por tecnologías tipo JSP (JavaServer Pages). Todas estas tecnologías se encuadran dentro de aquellas conocidas como SS (Server Side), ya que se ejecutan en el servidor web. Otro aspecto que completa el panorama son las inclusiones del lado del cliente, SS (Client Side), que se refieren a las posibilidades de que las páginas lleven incrustado un código que se ejecuta en el cliente.

39 P á g i n a 25 Ilustración 3 Arquitectura web Fuente :( Los componentes que proponemos para este proyecto conforman las tecnologías web utilizadas para construir la infraestructura de Internet, que pueden soportar la carga de trabajo y requerimientos de los clientes, dependiendo de la arquitectura tecnológica determinada Diseño Web El Internet ha cambiado radicalmente la manera en que concebimos la edición de publicaciones así como toda la comunicación audiovisual y escrita. Los aspectos básicos de la preparación, creación, mantenimiento y ampliación de páginas Web que incorporen toda la riqueza de gráficos, componentes y servicios que hoy se esperan de una Web atractiva y bien diseñada Técnicas y estándares de diseño web

40 P á g i n a 26 En la actualidad, con los avances tecnológicos, han facilitado la interacción de los requerimientos publicitarios y de marketing, con la realidad técnica del diseño, facilitando así alcanzar y cumplir la fusión, con lo que busca el cliente, es por ello que la mayoría de las técnicas, los efectos, iconos, formas, conceptos, fuentes, imágenes y clichés utilizados en el diseño de hoy, son el fruto de un cúmulo de experiencias traducidas a un lenguaje visual, atractivo, necesario y llamativo, que busca en primera instancia, alcanzar la atención del cliente y posterior convertirlo en un cliente para siempre, que a continuación se detallan las técnicas más usadas de diseño web: ( Blog del año 2010) Ilustración 4 Rayos de Sol/ rayos de Luz Fuente: (web.blogspot.com/2008/10.html) Con mucho, la mayoría abusa de la técnica utilizada en el diseño de hoy es el infame rayos de luz por lo general se

41 P á g i n a 27 encuentra escondido en el fondo de un diseño o en la propia vanguardia del diseño, como en la Ilustración 6. Ilustración 5 Siluetas negras o de colores Fuente:( Las siluetas de personas y otros objetos esta segundo en la lista, se hizo famoso por la campaña ipod, esta técnica puede ahora ser visto en todo el mundo. Ilustración 6 Manchas de Tinta 9 Fuente: (

42 P á g i n a 28 Esta técnica añade un fresco entorno visual hacia un diseño estilo monocromático, sin embargo debe utilizarse con moderación Ilustración 7 Remolinos/Flores/ ornamentos Fuente: ( Remolinos parecen estar de moda en el momento en que son muy atractivos y, en general, sólo agradable de ver; las flores y arbusto van bien juntos para crear perspectivas orgánicos, con frescos diseños, que es bastante común en estos tiempos de Green life.

43 P á g i n a 29 Ilustración 8 Lineas de flujo 9 Fuente: ( Líneas fluidas en general, permiten añadir movimiento y fluidez a un diseño que le da una cierta emoción cuando se combina con otros elementos que, generalmente, es la razón por la que aparece tan a menudo. Ilustración 9 Círculos 9 Fuente: (

44 P á g i n a 30 Círculos de colores son evidente en numerosos diseños a través de la web y como el nombre sugiere que da un diseño un aspecto muy "funky" que sin embargo están siendo utilizados en todo el mundo! Ilustración 10 Humo con textura Fuente: ( Estos efectos de humo no son tan evidentes como los demás, ya que siempre están en el fondo de un diseño sin embargo, si se busca un poco más de energía, estos efectos de humo en todas partes, podría cansar la vista del cliente.

45 P á g i n a Estrategias de diseño web. Existen varias estrategias de todo tipo para una infinidad de objetivos a alcanzar, entre las estrategias más comunes que se podrían sintetizar en las siguientes: a) Priorización de objetivos a alcanzar b) Determinación del estilo de comunicación, idiomas y accesibilidad de la web c) Definición de mensajes a transmitir y forma de comunicarlos d) Estrategia de optimización en buscadores, palabras clave, etc. e) Diseño de la estructura de la información interna de la web f) Estrategia de creación y gestión de contenidos g) Elección de dominio y alojamiento adecuados h) Coste, estudio de rentabilidad y retorno para la empresa Plantillas y/o templates web Una plantilla es un interfase, que suele proporcionar una separación entre la forma o estructura y el contenido. Es un

46 P á g i n a 32 medio o sistema, que permite guiar, portar, o construir, un diseño o esquema predefinido. Una plantilla agiliza el trabajo de reproducción o de muchas copias idénticas o casi idénticas (que no tiene que ser tan elaborado, sofisticado o personal). Si se quiere un trabajo más refinado, más creativo, la plantilla no es sino un punto de partida, un ejemplo, una idea aproximada de lo que se quiere hacer. Las plantillas, como norma general, pueden ser utilizadas por personas o por sistemas automatizados. Se utilizan plantillas en todos los terrenos de la industria y la tecnología. Una plantilla puede servir como muestra base de una diversidad sobre la que comparten elementos comunes (patrón) y que en sí es lo que constituye la plantilla. En relación con la edición o composición de textos o imágenes, se compone de cajas y líneas, con unos tamaños y márgenes, para facilitar la escritura de artículos o cartas, con títulos, fotos y diagramas.

47 P á g i n a 33 En relación con la mecánica, puede ser una forma específica de ángulos y medidas, tal que colocando las partes constituyentes en su sitio permite un ensamblaje calibrado y uniforme e identificar la carencia de algún elemento. ( Web World Wide Web, o simplemente web, es el universo de información accesible a través de Internet, es una fuente inagotable del conocimiento humano. El componente más usado en el Internet es definitivamente el Web. Su característica sobresaliente es el texto remarcado, un método para referencias cruzadas instantáneas. En la mayoría de los Sitios Web, ciertas palabras aparecen en texto de otro color diferente al resto del documento. Por lo general, este texto es subrayado. Al seleccionar una palabra o frase, uno es transferido al sitio o página relacionado a esa frase. En algunas ocasiones hay botones, imágenes, o porciones de imágenes que pueden activarse mediante un clic. Si el usuario mueve el apuntador sobre el contenido del documento y el apuntador cambia a un símbolo con una mano, eso indica que el usuario puede realizar un clic para ser transferido a otro sitio.

48 P á g i n a Página Web Una página de Internet o página web es un documento electrónico que contiene información específica de un tema en particular y que es almacenado en algún sistema de cómputo que se encuentre conectado a la red mundial de información denominada Internet, de tal forma que este documento pueda ser consultado por cualquier persona que se conecte a esta red mundial de comunicaciones y que cuente con los permisos apropiados para hacerlo. Una página Web tiene la característica particular de que el texto se combina con imágenes para hacer que el documento sea dinámico y permita que se puedan ejecutar diferentes acciones, una tras otra, a través de la selección de texto remarcado o de las imágenes, acción que nos puede conducir a otra sección dentro del documento, abrir otra página Web, iniciar un mensaje de correo electrónico o transportarnos a otro sitio Web totalmente distinto a través de sus hipervínculos Sitio Web

49 P á g i n a 35 Es un conjunto de archivos y páginas electrónicas referentes a un tema en particular, que incluye una página inicial de bienvenida, generalmente denominada home page, con un nombre de dominio y dirección en Internet específica. Un sitio Web no necesariamente debe localizarse en el sistema de cómputo de la organización. Los documentos que integran el sitio Web pueden ubicarse en un equipo en otra localidad, inclusive en otro país. El único requisito es que el equipo en el que residan los documentos esté conectado a la red mundial de Internet. El servidor Web, puede contener más de un sitio Web y atender concurrentemente a los visitantes de cada uno de los diferentes sitios. Los sitios Web pueden ser de diversos géneros, destacando los sitios de negocios, servicio, comercio electrónico en línea, imagen corporativa, entretenimiento y sitios informativos Hospedaje Web Hosting Es el servicio de almacenamiento, acceso y mantenimiento de los archivos que integran un sitio Web. Más importante que el espacio en disco provisto para estos archivos, es el acceso rápido al Internet lo que adquiere mayor

50 P á g i n a 36 relevancia. Una empresa que pretenda hospedar su sitio Web en sus propias instalaciones, requiere invertir una importante cantidad en recursos de equipos, sistemas y medios de comunicación generalmente caros. Los servicios de hospedaje Web permiten a las compañías compartir el costo de una conexión rápida a Internet. Paneles de administración de hosting.- Existen en el mercado soluciones que permiten la administración del hosting a través de la internet, entre los más comunes están los siguientes: BuyCPanel.com - licencia cpanel interna / externa. Activación inmediata de la licencia de cpanel. Cube Panel - Panel de control para Windows y Linux, gestiona web, mail, DNS y FTP. El sitio ofrece la descarga de la versión de prueba, la compra de la versión completa, y la documentación. DirectAdmin Panel de Control Web - Panel de control para empresas de alojamiento web que ejecutan Red Hat 7.x, 8.x, 9.x, Red Hat Enterprise y FreeBSD.

51 P á g i n a 37 Dnsupdate - Un programa de actualización de la dirección IP escrita en Perl para las actualizaciones de DNS dinámicas según se define en RFC2136. Sostiene dirección dinámica IP solicitudes de actualización a un servidor de nombres de forma automática. Domain Technologie Control - Panel de control de código fuente abierto para alojamiento virtual, que administra Apache, servidor de correo, BIND, spam y anti-virus, y FTP. El software está disponible para su descarga, y se aporta documentación. Panel de control Enginecube - El Enginecube panel de control administra los sistemas de alojamiento, incluyendo anti-spam y anti-virus. Ensim - aprovisionamiento y control centralizados para la empresa de servicios de TI. Soporta Microsoft Exchange, Active Directory y aplicaciones de movilidad. GNUPanel - panel de control de alojamiento web escrito en PHP y publicado bajo la Licencia Pública General GNU. El sitio ofrece descargas, documentación, foros, listas de correo, y la demostración en línea del producto.

52 P á g i n a 38 Plugins H-Sphere - Ventas addons y plugins para el control HSphere panel de hosting, incluyendo el procesamiento de Postini electrónico, herramientas de instalación de las aplicaciones web y plugins desarrollados personalizadas. ISPConfig - de código abierto, con licencia BSD panel de control de hospedaje para Linux, diseñado para administrar Apache, BIND, FTP, bases de datos, soportando muchas distribuciones de Linux. Proporciona documentación, descargas, y las opciones de soporte comercial. InterWorx Hosting Panel de Control - InterWorx es un sistema de panel de control de hosting para las empresas de alojamiento web y los administradores de servidores dedicados. Es fácil de instalar y fácil de usar. SysCP - Panel de control del sistema - SysCP, el panel de control del sistema es una herramienta de administración del servidor de código abierto que permite a un proveedor de servicios de Internet para dar a sus clientes una aplicación basada en web para administrar sus direcciones de correo electrónico, subdominios y otras herramientas esenciales para la configuración del sitio web.

53 P á g i n a 39 Virtualmin, Inc. - Flexible de código abierto y el panel de control de servidor web comercial construido en la cima de Webmin por los desarrolladores de Webmin, destinado a facilitar la configuración de Apache, BIND, Postfix, SpamAssassin, ClamAV y bases de datos para su uso en hosting virtual. Proporciona descargas de software para varias distribuciones de Linux, foros de soporte, rastreador de errores y documentación wiki Virtualmin y el software relacionado. Webmin - Una interfaz basada en web para la administración del sistema de Unix. Configurar cuentas de usuario, DNS, compartir archivos y el programa es freeware. ( Configuration/) Estructura Web La mayoría de sitios Web se caracterizan por tener la siguiente estructura de diseño para su creación: Cabecera Es una "página incluida", común a cada colección, que contiene el vínculo al inicio de la Web, los vínculos a las entidades de rango superior y a las herramientas de navegación comunes.

54 P á g i n a 40 Aquí se suelen poner el logo de la empresa, menú de opciones de navegación y publicidad. Cuerpo Contiene la documentación o información propiamente dicha y que se desea como parte principal de la página. También suele estar dividida en dos o tres columnas que sirven para un menú de navegación y otra para un índice de temas o artículos relacionados Pié Se sitúan al final de la página donde se suele incluir información de autor de la empresa, fechas de navegación, direcciones, datos de interés, etc.

55 P á g i n a DESARROLLO WEB HTML HTML (Hyper Text Markup Language), es un lenguaje que permite describir hipertexto para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags y atributos (parámetros que dan valor al tag), que definen en el browser o navegador cómo se debe presentar el texto. Tres son las tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML. <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje. <HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags

56 P á g i n a 42 dentro de él. En head no hay que colocar nada del texto del documento. <BODY>: Encierra el resto del documento, el contenido. Ejemplo: <HTML> <HEAD> <TITLE> Ejemplo uno </TITLE> </HEAD> <BODY> ESCUELA POLITECNICA DEL EJERCITO DEPARTAMENTO DE CIENCIAS DE LA COMPUTACION. TECNOLOGIA EN COMPUTACION </BODY> </HTML>

57 Tabla 1 Cuadro resumen básico de etiquetas html P á g i n a 43 Etiqueta Sub Argumentos Accion etiquetas Font Face Face= Arial Color Color=blue Size Bold Italic Underline Alight A href Img src <table> <HTML> <BODY> <H1>,<H2> <TABLE> <IMG> <B> Y <STRONG> <U> <I> Fuente : Robert Granda

58 P á g i n a 44 EJEMPLOS DE CODIGO HTML PARA VARIOS USOS. HTML PARA ETIQUETAS DE TEXTO. <pre> </ pre> Crea texto preformateado <h1> </ h1> Crea un título grande <h6> </ h6> Crea un título pequeño <b> </ b> Crea texto en negrita <i> </ i> Crea texto en cursiva <tt> </ tt> Crea, o máquina de escribir estilo de texto-teletipo <cite> </ cite> Crea una cita, por lo general en cursiva <em> </ em> Hace hincapié en la palabra (con cursiva o negrita) <strong> </ strong> Hace hincapié en la palabra (con cursiva o negrita) size=?> <font </ font> Ajusta tamaño del fuente, de 1 a 7)

59 P á g i n a 45 color=?> <font </ font> Juegos de color de la fuente, usando nombres o valores hex HTML PARA ENLACES <a href="url"> </ a> Crea un hipervínculo <a href="mailto: "> </ a> Crea un enlace de correo <a name="name"> </ a> Crea una ubicación de destino dentro de un documento <a href="#name"> </ a> Enlaces a ese lugar de destino en otra parte del documento HTML PARA GRAFICOS <img src="name"> Agrega una imagen <img src="name" align=?> Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo <img src="name" border=?> Ajusta tamaño del borde alrededor de una imagen <hr>

60 P á g i n a 46 Inserta una regla horizontal size=?> <hr Establece el tamaño (altura) de la regla width=?> <hr Establece la anchura de la regla, en porcentaje o valor absoluto noshade> <hr Crea una regla sin una sombra. HTML PARA TABLAS. <table> </ table> Crea una tabla <tr> </ tr> marcha cada fila en una tabla <td> </ td> Pone en marcha cada celda de una fila <th> </ th> Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado) border=#> <table Establece el ancho de borde alrededor de celdas de la tabla cellspacing=#> <table Ajusta la cantidad de espacio entre las celdas de la tabla cellpadding=#> <table

61 P á g i n a 47 Ajusta la cantidad de espacio entre el borde de una celda y su contenido width=# <table o %> Establece la anchura de la mesa - en píxeles o como porcentaje del ancho del documento align=?> <tr o align=?> <td Establece la alineación de la celda (s) (a la izquierda, centro o derecha) valign=?> <tr o valign=?> <td Establece la alineación vertical de la celda (s) (, superior, media o inferior) <td colspan=#> Establece el número de columnas de una celda debe abarcar <td rowspan=#> Establece el número de filas de una célula debe abarcar (por defecto = 1) <td nowrap> Evita las líneas dentro de una célula se rompa para adaptarse a HTML PARA FORMULARIOS <form> </ form> Crea todas las formas </select> <select name="nombre" múltiples size=?> </ select>

62 P á g i n a 48 Crea un menú desplegable. Tamaño establece el número de elementos de menú visible antes de yo u necesidad de desplazarse. <option> Pone en marcha cada elemento de menú <select name="name"> </ select> Crea un menú desplegable <option> Pone en marcha cada elemento de menú <textarea name="nombre" cols=40 rows=8> </ textarea> Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura. <input type="checkbox" name="name"> Crea una casilla de verificación. Texto siguiente etiqueta. <input type="radio" name="nombre" value="x"> Crea un botón de radio. Texto sigue etiquetas <input type=text name="foo" size=20>. Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres. <input type="submit" value="name"> Crea un botón Enviar <input type="image" border=0 name="name" src="name.gif"> type="image" Crea un botón Enviar con una imagen

63 P á g i n a 49 type="reset"> <input Crea botón de reinicio.

64 P á g i n a PHP El lenguaje PHP es un lenguaje de programación de estilo clásico, es decir un lenguaje de programación con variables, sentencias condicionales, bucles, funciones, etc. No es un lenguaje de marcas como podría ser HTML, XML o WML. Está más cercano a JavaScript o a C, que son lenguajes de programación. 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 una base de datos. El programa PHP es ejecutado en el servidor y su resultado enviado al navegador, este normalmente es una página HTML pero igualmente podría ser una página WML. POTENCIALIDADES DE PHP. a) Es un lenguaje multiplataforma. b) Tiene capacidad de conexión con la mayoría de los manejadores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL. c) Capacidad de expandir su potencial utilizando la enorme cantidad de módulos (llamados extensiones).

65 P á g i n a 51 d) Es libre, por lo que se presenta como una alternativa de fácil acceso para todos. e) Permite las técnicas de Programación Orientada a Objetos. f) Biblioteca nativa de funciones sumamente amplia e incluida. g) No requiere definición de tipos de variables, esta característica también podría considerarse una desventaja del lenguaje. h) Tiene manejo de excepciones. COMPONENTES WEB SERVER - Apache - PHP - MySql - PHPMyAdmin - Gnu GPL

66 P á g i n a 52 ESQUEMA DE ARQUITECTURA DE LA PLATAFORMA WEB JOOMLA CMS WEB APLICATION PHP My SQL PHPMy Admin Servidor Web Apache WAMPSERVER WINDOWS, LINUX,OS Sistema Operativo Ilustración 11 Arquitectura de la Plataforma web Fuente: (Robert Granda)

67 P á g i n a 53 Ilustración 12 Arquitectura web Fuente :( La ventaja que tiene PHP sobre otros lenguajes de programación que se ejecutan en el servidor, es que nos permite intercalar las sentencias PHP en las páginas HTML, 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. Ejemplo: El código PHP a ejecutar tiene dos partes: la primera imprime "Parte de PHP" y la segunda es un bucle que se ejecuta 10 veces

68 P á g i n a 54 de 0 a 9, por cada vez que se ejecuta se escribe una línea, la variable $i contiene el número de línea que se está escribiendo. <HTML> <HEAD> <TITLE> Ejemplo DOS </TITLE> </HEAD> <BODY> EL LENGUAJE PHP, ES MUY UTIL PARA PROGRAMACION WEB. <BR><BR> <?php echo "Parte de PHP<br>"; for($i=0;$i<10;$i++) { echo "Linea ".$i."<br>"; }?> </BODY> </HTML>

69 P á g i n a WAMPSERVER 2.2 WampServer es un entorno de desarrollo web para Windows con el que podrás crear aplicaciones web con Apache, PHP y bases de datos MySQL database. También incluye PHP MyAdmin y SQLiteManager para manejar tus bases de datos de una manera rápida. ( WampServer, provee a los desarrolladores con los cuatro elementos necesarios para un servidor web: un Sistema Operativo (Windows), un manejador de base de datos (MySQL), un software para servidor web (Apache) y un software de programación script Web(PHP, Python o PERL), debiendo su nombre a dichas herramientas. Lo mejor de todo es que WAMP5 es completamente gratuito. WAMP incluye, además de las últimas versiones de Apache, PHP y MySQL, versiones anteriores de las mismas, para el caso de que se quiera testear en un entorno de desarrollo particular. El uso de WAMP permite servir páginas HTML a Internet, además de poder gestionar datos en ellas, al mismo tiempo WAMP, proporciona lenguajes de programación para desarrollar aplicaciones Web. Los requerimientos de WampServer con PHP están íntimamente ligados a un Servidor web con soporte a PHP y base de datos (MySQL o PostgreSQL) GNULinux: LAMPserver: Apache + PHP 5 + MySQL. Windows:

70 P á g i n a 56 WAMPserver:XAMPP o WOS1. Del lado del servidor : Apache (servidor de aplicaciones) PHP (lenguaje de programación web) WAMP SERVER MySql (Base de datos). Del lado del Cliente Navegador de Internet. I lustración 13 Wampserver para Windows Fuente: ( monografico-servidores-wamp) Existen otras plataformas para webserver bajo GNU, pero para otros sistemas operativos que no sean para Windows como por ejemplo: - Appserv - XAMP - LAMP - MAMP 2.7 APACHE APACHE es el Acrónimo de "a patch y server", es un servidor web de distribución libre y de código abierto, siendo el más popular del mundo, con una penetración actual del 50% del total de servidores web del mundo, la

71 P á g i n a 57 principal competencia de Apache es el IIS (Microsoft Internet Information Services) de Microsoft. Apache fue la primera alternativa viable para el servidor web de Netscape Communications, actualmente conocido como Sun Java System Web Server. Apache es desarrollado y mantenido por una comunidad abierta de desarrolladores bajo el auspicio de la Apache Software Foundation. La aplicación permite ejecutarse en múltiples sistemas operativos como Windows, Novell NetWare, Mac OS X y los sistemas basados en Unix. Apache 2.x incluyó multitarea en UNIX, mejor soporte para plataformas no Unix (como Windows), una nueva API Apache y soporte para IPv6. Las características de Apache son varias según siguiente detalle: - Soporte para los lenguajes PERL, PYTHON, TCL y PHP. - Módulos de autenticación: mod_access, mod_auth y mod_digest. - Soporte para SSL y TLS.

72 P á g i n a 58 - Permite la configuración de mensajes de errores personalizados y negociación de contenido. - Permite autenticación de base de datos basada en SGBD (Sistema de Gestión de Base de Datos). Apache es principalmente usado para servir páginas web estáticas y dinámicas en la WWW. Apache es el servidor web del popular sistema XAMP, junto con MySQL y los lenguajes de programación PHP/Perl/Python. La "X" puede ser la inicial de cualquier sistema operativo, si es Windows: WAMP, si es el Linux: LAMP, etc. ( SERVICIOS Y ESTADOS DE APACHE - Start - Stop - Restart - reload PRINCIPALES CONFIGURACIONES DE APACHE Existen en varias formas estándar de gestionar los datos configuración de los componentes y aplicaciones en Apache:

73 P á g i n a 59 Mediante la clase java.util.properties A través de las clases del paquete java.util.prefs. (API muy potente que permite gestionar datos de configuración de modo jerárquico al estilo del "Registro de Windows" que recomiendo leerse si el lector la desconoce) Apache Jakarta Commons Configuration es un subproyecto de la serie de proyectos Apache Jakarta Commons. Commons Configuration es un conjunto de proyectos que intentan estandarizar las tareas comunes que casi todas las aplicaciones y componentes realizan normalmente. Una tarea muy común en cualquier aplicación es la gestión de datos de configuración. Es aquí en donde entra en juego Apache Jakarta Commons Configuration. Básicamente Apache Commons Configuration nos permite: Gestión de los datos de configuración independientemente del lugar en el que esten almacenados. (Ficheros de propiedades, documentos XML, JNDI, Base de datos, etc.). Un potente motor de consultas para realizar búsquedas del valor que tienen determinadas propiedades de configuración.

74 P á g i n a 60 Recarga automática de los datos de configuración en caso de que sean modificados en su lugar físico de origen (Fichero de texto plano, fichero xml, etc) Posibilidad de almacenar los datos de configuración automáticamente en su lugar físico (fichero de texto plano, fichero xml, etc). Algunos ejemplos Ejemplo de un fichero de propiedades, en el que se definen datos de configuración relacionada con el interfaz gráfico de la aplicación: app.windows.properties: mainmdi.title=título de mi aplicación de prueba mainmdi.width=800 mainmdi.height=600 mainmdi.state=maximized userform.title=gestión de usuarios userform.width=320 userform.height=200 userform.state=normal

75 P á g i n a 61 # También sería válido: language=castellano,english,french language=castellano language=english language=french Pues a través de Commons Configuration, podríamos acceder a las propiedades de la siguiente forma: try { // Leemos los datos de configuración. El fichero debe estar en el mismo directorio que la aplicación. PropertiesConfiguration config = new PropertiesConfiguration("app.windows.properties"); // La siguiente sentencia imprimirá: 800 System.out.println(config.getInt("main.mdi.width")); // La siguiente sentencia imprimirá: Mi aplicación de prueba System.out.println(config.getString("main.mdi.title")); // La siguiente sentencia imprimirá: Castellano System.out.println(config.getStringArray("language")[0]);

76 P á g i n a 62 // La siguiente sentencia configura el objeto para que salve las propiedades // automáticamente en su origen (En este caso un fichero) cuando se actualicen // o cuando se agreguen nuevas propiedades config.setautosave(true); // Añadimos un par de propiedades config.addproperty("version", "1.0"); config.addproperty("author", "Carlos García Pérez"); } } catch (ConfigurationException ex){ System.out.println(ex); Las posibilidades de este API para tratar con propiedades Jerárquicas en formato xml, se puede observar en el siguiente ejemplo: app.windows.properties.xml <?xml version="1.0" encoding="iso "?> <gui> <mainmdi>

77 P á g i n a 63 <title>mi aplicación de prueba</title> <dimension> <width>800</width> <height>600</height> </dimension> <state>maximized</state> </mainmdi> <userform> <title>gestión de Usuarios</title> <dimension> <width>800</width> <height>600</height> </dimension> <state>normal</state> </userform> <printer.form> <dimension> <width>320</width> <height>200</height> </dimension> </printer.form>

78 P á g i n a 64 <languages default="castellano"> <language>castellano</language> <language>english</language> <language>french</language> </languages> </gui> Ahora podemos acceder a los datos de la siguiente forma. try { // Leemos los datos de configuración. El fichero debe estar en el mismo directorio que la aplicación. XMLConfiguration config = new XMLConfiguration("app.windows.properties.xml"); // La siguiente sentencia imprimirá: 800 System.out.println(config.getInt("mainmdi.dimension.width")); // La siguiente sentencia imprimirá: Mi aplicación de prueba System.out.println(config.getString("mainmdi.title")); // La siguiente sentencia imprimirá: Castellano System.out.println(config.getString("languages[@default]"));

79 P á g i n a 65 // La siguiente sentencia imprimirá: 3 System.out.println(((java.util.List) config.getproperty("languages.language")).size()); // La siguiente sentencia imprimirá: French System.out.println(config.getString("languages.language(2)")); // La siguiente sentencia imprimirá: 320 // Observe que debido a que el elemento contiene un punto en su nombre // debemos acceder a el escapando el punto mediante.. System.out.println(config.getInt("printer..form.dimension.width")); // La siguiente sentencia configura el objeto para que salve las propiedades // automáticamente en su origen (En este caso un fichero) cuando se actualicen // o cuando se agregen nuevas propiedades config.setautosave(true); // Cambiamos el juego de caracteres, pues usaremos propiedades // que precisan de tildes.

80 P á g i n a 66 config.setencoding("iso "); // Añadimos un par de propiedades // Añadimos la propiedad 1.0 que desciende de la raiz config.addproperty("version", "1.0"); de la raiz // Añadimos la propiedad Carlos García Pérez que desciende config.addproperty("author", "Carlos García Pérez"); // No hace falta gracias a que está establecida la propiedad autosave establecida // config.save(); } catch (ConfigurationException ex){ System.out.println(ex); } Otras Características interesantes Este API también nos da la posibilidad de que se recargen automáticamente los datos de configuración sobre el objeto Configuration en caso de que estos hayan sido modificados.

81 P á g i n a 67 Para habilitar esta característica deberá indicarlo mediante la siguiente línea de código: config.setreloadingstrategy(new FileChangedReloadingStrategy()); ( DIRECTIVAS DE CONFIGURACIÓN httpd.conf A continuación se detalla, las principales directivas de configuración httpd.conf: ServerAdmin: especifica la dirección de correo electrónico del administrador, esta dirección aparece en los mensajes de error, para permitir al usuario notificar un error al administrador. No puede estar dentro de ninguna sección. Se encuentra disponible a través del módulo Core. ServerName: especifica el nombre y el puerto que el servidor utiliza para identificarse, normalmente se determina automáticamente, pero es recomendable especificarlo explícitamente para que no haya problemas al iniciar el servidor. Si el servidor no tiene un nombre registrado en las DNS, se recomienda poner su número IP. No puede estar dentro de ninguna sección.

82 P á g i n a 68 La sintaxis es: ServerName direccionip:puerto p.e. ServerName localhost:80 Se encuentra disponible a través del módulo Core. DocumentRoot: la carpeta raíz que se ubica en el servidor, desde la que se servirán los documentos. Por defecto, todas las peticiones, tendrán como raíz esta carpeta, a no ser que se utilicen alias (directorios virutales en IIS) Por defecto, la carpeta raíz es la carpeta Htdocs, que se encuentra en la carpeta de instalación del Apache. No puede estar dentro de ninguna sección. Si se cambia este directorio por otro, es muy importante que se ponga el nuevo valor, no solo en esta línea, sino también en la sección <Directory> en la que se establecen los parámetros de configuración de este directorio. Esta línea empieza por " <Directory " seguido de la carpeta raíz que originalmente hay en DocumentRoot. Se encuentra disponible a través del módulo Core.

83 P á g i n a 69 DirectoryIndex: especifica el fichero por defecto que buscará en cada directorio, en caso de que no se especifique ninguno. Por defecto es index.html. Es decir, que si por ejemplo se pone en el navegador: el servidor por defecto servirá En esta directiva se pueden especificar más de un fichero, la sintaxis es la siguiente: DirectoryIndex fichero1 fichero2 fichero3 El orden con el que se especifica el nombre de fichero determinará la prioridad a la hora de decidir que fichero es el que se muestra. La directiva se puede encontrar fuera de cualquier sección, dentro de una sección o dentro de un fichero.htaccess. Se encuentra disponible a través del módulo mod_dir. AccessFileName: es el nombre del fichero de configuración que se buscará en cada una de los directorios del servidor para conocer la configuración del mismo. Este fichero permite configurar el comportamiento de cada uno de los directorios individualmente. Para que esta configuración

84 P á g i n a 70 funcione, la directiva AllowOverride tiene que tener un valor que lo permita. No puede estar dentro de ninguna sección. El nombre de fichero que se especifica por defecto es el del fichero ".htaccess". Como medida de seguridad, la configuración del Apache establece que no se muestre la existencia de este fichero a ningún usuario, aunque este establecida la opción de listado de directorios. Si se decide cambiar al nombre, habrá que redefinir la seguridad para que no se muestre el contenido del nuevo fichero. Esto se hace en el fichero httpd.conf en una sección File como la que se presenta a continuación en la que se establece que todos los ficheros que comiencen por.ht no se mostrarán. <Files ~ "^\.ht"> Order allow,deny Deny from all </Files> Se encuentra disponible a través del módulo Core. TypesConfig: especifica el nombre del fichero que contiene la lista de tipos mime que conoce el servidor, y que determinará dependiendo de las

85 P á g i n a 71 extensiones para generar las cabeceras http. No puede estar dentro de ninguna sección. Se encuentra disponible a través del módulo mod_mime. DefaultType tipo mime que se servirá por defecto en caso de no conocer la extensión del fichero que se está sirviendo. Por defecto, se indicará que se sirve texto plano, con el valor text/plain. La directiva se puede encontrar fuera de cualquier sección, dentro de una sección o dentro de un fichero.htaccess. Sintaxis: DefaultType tipomime Se encuentra disponible a través del módulo Core. HostnameLookups: se utiliza en los ficheros de registro. Por defecto cuando se produce un acceso, se guarda simplemente su número IP, si esta directiva se encuentra en On, el servidor buscará la correspondencia de ese número IP con su nombre, y almacenará el nombre. Establecer esta configuración en ON provocará que por lo menos se tenga que hacer una petición al servidor de nombres por cada una de las peticiones de usuario, por lo que el rendimiento de la máquina se puede ver decrementado. Esta directiva se puede encontrar dentro de una sección o fuera de cualquier otra.

86 P á g i n a 72 Se encuentra disponible a través del módulo Core. ErrorLog: especifica la ubiación del fichero que contiene el registro de errores, por defecto en la carpeta logs. Esta directiva sólo se puede encontrar fuera de cualquier sección. Se encuentra disponible a través del módulo Core. LogLevel: especifica el tipo de mensajes que se guardaran en el fichero de registro de errores, dependiendo de los valores especificados, se guardarán más o menos. Esta directiva sólo se puede encontrar fuera de cualquier sección. Valor de más a menos son: debug, info, notice, warn, error, crit, alert, emerg Se encuentra disponible a través del módulo Core. LogFormat: la directiva permite definir el formato que se utilizará para almacenar los registros. A cada formato se le puede asignar un nombre, utilizándolo luego para crear distintos tipos de ficheros de registro. Pueden existir varios logformat distintos.

87 P á g i n a 73 Sintaxis: LogFormat "configuraciónerror" nombre Esta directiva se encuentra fuera de cualquier sección. Se encuentra disponible a través del módulo mod_log_config. CustomLog: la directiva se utiliza para especificar la ubicación y el tipo de formato que se utilizará en un fichero de registro. Pueden existir varios ficheros de registro distintos con configuraciones distintas. Para hacer esto, simplemente hay que poner varias líneas customlog Sintaxis: CustomLog fichero formato Esta directiva se encuentra fuera de cualquier sección. Se encuentra disponible a través del módulo mod_log_config. ServerTokens: Esta directiva establece la información que se devuelve dentro de la cabecera http que envía el servidor. Posibles valores de menor a mayor información son:

88 P á g i n a 74 -Pord -Min -Os -Full Esta directiva se encuentra fuera de cualquier sección. Se encuentra disponible a través del módulo Core. IndexOptions: Esta directiva controla la apariencia de la página que se mostrará a un usuario cuando se pide la lista de ficheros de un directorio. Sintaxis: IndexOptions [+ -]opcion [[+ -]opcion]... (Apache en adelante) Entre las opciones que se pueden poner, destaca: FancyIndexing que muestra los nombres de los ficheros, con iconos etc.. Se encuentra disponible a través del módulo mod_autoindex.

89 P á g i n a 75 FoldersFirst: Hace que primero se muestren los directorios. Esta opción sólo se puede establecer en el caso de que FancyIndexing este activa. Esta directiva se puede encontrar dentro del fichero.htaccess, dentro de una sección <Directory> y fuera de cualquier otra. Se encuentra disponible a través del módulo mod_autoindex. AddIconByEncoding: Esta directiva permite asociar un icono a un tipo mime, de forma que cuando la directiva fancyindexing este activada, se mostrará al lado del fichero el icono correspondiente. Sintaxis: AddIconByEncoding icon MIME-encoding Ejemplo: AddIconByEncoding/icons/compressed.gif x-compress Esta directiva se puede encontrar dentro del fichero.htaccess, dentro de una sección <Directory> y fuera de cualquier otra.

90 Se encuentra disponible a través del módulo mod_autoindex. P á g i n a 76 AddIconByType Esta directiva asocia un icono a un fichero dependiendo del un tipo mime, de forma que cuando la directiva fancyindexing este activada, se mostrará al lado del fichero el icono correspondiente. Sintaxis: AddIconByType icon MIME-encoding Ejemplo: AddIconByType /icons/text.gif text/* La diferencia entre AddIconByType y AddIconByEncoding reside en que mientras que en la primera se determina el tipo mime mediante basándose en la codificación del fichero, mientras que AddIconByType determina el tipo mime basándose en el nombre del fichero. Ambas directivas se pueden encontrar dentro de el fichero.htaccess, dentro de una sección <Directory> o fuera de cualquier otra. Se encuentra disponible a través del módulo mod_autoindex.

91 P á g i n a 77 AddDescription Esta directiva permite asociar una descripción a un tipo de fichero, que se mostrará al listar un directorio. Esta directiva se puede encontrar dentro de el fichero.htaccess, dentro de una sección <Directory> o fuera de cualquier otra. Sintaxis: AddDescripcion cadena, fichero Se encuentra disponible a través del módulo mod_autoindex. AddDefaultCharset Esta directiva define la codificación de caracteres que se utilizará de forma predeterminada para los documentos. Por defecto viene establecido el valor ISO Esta directiva se puede encontrar dentro de cualquier sección y en los ficheros.htaccess. Se encuentra disponible a través del módulo Core. ErrorDocument Esta directiva establece la configuración del servidor para cuando se produce un error. Se pueden establecer cuatro configuraciones distintas: Sacar un texto de error

92 P á g i n a 78 Redirigir a un fichero en el mismo directorio Redirigir a un fichero en nuestro servidor Redirigir a un fichero fuera de nuestro servidor Hay que tener en cuenta que si el texto de error se envia a Internet Explorer, este tendrá que tener al menos 512 Bytes, porque sino Internet Explorer mostrará su propia página de error. Sintaxis: ErrorDocument NúmeroError Acción Esta directiva se puede encontrar tanto dentro del fichero.htaccess, dentro de la sección <Directory> o fuera de cualquier otra sección. Ejemplo: ErrorDocument 404 /error404.html.

93 En caso de no encontrarse un fichero, se mostrará el fichero error404.html P á g i n a 79 Se encuentra disponible a través del módulo Core. CacheRoot establece el directorio donde se encontrarán los ficheros de la cache del Apache. Se encuentra disponible a través del módulo mod_disk_cache CacheSize Tamaño de la cache en Kilobytes. Se encuentra disponible a través del módulo mod_disk_cache CacheGcInterval Establece cada cuantas horas se verificará el tamaño de los ficheros de la cache para comprobar si se corresponden con el tamaño establecido dentro de CacheSize. El valor acepta números flotantes, por lo que se pueden establecer los intervalos en minutos. Cuanto mayor sea el valor de esta directiva, más posibilidades existirán de que se sobrepase el valor establecido en CacheSize. Se encuentra disponible a través del módulo mod_disk_cache

94 P á g i n a 80 CacheMaxExpire máximo número de horas que los ficheros permanecerán dentro de la cache. Se encuentra disponible a través del módulo mod_cache CacheLastModifiedFactor: Sirve para calcular la caducidad de un fichero en la cache, que será el de la hora de la última modificación, multiplicado por este valor. Se encuentra disponible a través del módulo mod_cache CacheDefaultExpire: Número de horas por defecto a partir de las cuales un fichero caduca. Se aplica en aquellos casos en los que no se puede determinar la hora de creación del fichero. Todas las directivas de la caché, deben encontrarse fuera de cualquier sección. Esta directiva no se puede encontrar dentro de ninguna sección. Se encuentra disponible a través del módulo mod_cache. (

95 P á g i n a MYSQL MySQL es la base de datos open source (software libre) dentro de WAMPSERVER. Su continuo desarrollo y su creciente popularidad está haciendo de MySQL un competidor cada vez más directo de gigantes en la materia de las bases de datos como Oracle. MySQL es un sistema de administración de bases de datos (Database Management System, DBMS) para bases de datos relacionales. Así, MySQL no es más que una aplicación que permite gestionar archivos llamados de bases de datos. Existen muchos tipos de bases de datos, desde un simple archivo hasta sistemas relacionales orientados a objetos. MySQL, como base de datos relacional, utiliza múltiples tablas para almacenar y organizar la información. MySQL fue escrito en C y C++ y destaca por su gran adaptación a diferentes entornos de desarrollo, permitiendo su interactuación con los lenguajes de programación más utilizados como PHP, Perl y Java y su integración en distintos sistemas operativos. También es muy destacable, la condición de open source de MySQL dentro de WAMPSERVER, que hace que su utilización sea gratuita e incluso

96 P á g i n a 82 se pueda modificar con total libertad, pudiendo descargar su código fuente. Esto ha favorecido muy positivamente en su desarrollo y continuas actualizaciones, para hacer de MySQL una de las herramientas más utilizadas por los programadores orientados a Internet. El servidor de bases de datos MySQL es muy rápido, seguro, y fácil de usar. Se pueden encontrar comparaciones de desempeño con algunos otros manejadores de bases de datos en la página de MySQL. (Informática para Desarrolladores web con PHP con Dreamweaver, 2009) El servidor MySQL fue desarrollado originalmente para manejar grandes bases de datos mucho más rápido que las soluciones existentes y ha estado siendo usado exitosamente en ambientes de producción sumamente exigentes por varios años. Aunque se encuentra en desarrollo constante, el servidor MySQL ofrece hoy un conjunto rico y útil de funciones. Su conectividad, velocidad, y seguridad hacen de MySQL un servidor bastante apropiado para accesar a bases de datos en Internet. El software de bases de datos MySQL consiste de un sistema cliente/servidor que se compone de un servidor SQL multihilo, varios programas clientes y bibliotecas, herramientas administrativas, y una gran variedad de interfaces de programación (APIs). Se puede obtener también como una biblioteca multihilo que se puede enlazar dentro de otras

97 P á g i n a 83 aplicaciones para obtener un producto más pequeño, más rápido, y más fácil de manejar. 2.9 PHP PHP es el acrónimo de Hipertext Preprocesor. Es un lenguaje de programación del lado del servidor gratuito e independiente de plataforma, rápido, con una gran librería de funciones y mucha documentación. Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web, justo antes de que se envíe la página a través de Internet al cliente. Las páginas que se ejecutan en el servidor pueden realizar accesos a bases de datos, conexiones en red, y otras tareas para crear la página final que verá el cliente. El cliente solamente recibe una página con el código HTML resultante de la ejecución de la PHP. Como la página resultante contiene únicamente código HTML, es compatible con todos los navegadores. (Desarrollo WEB con WAMPSERVER.)

98 P á g i n a 84 Ilustración 14 Proceso de PHP para HTML Fuente: ( PHP se escribe dentro del código HTML, lo que lo hace realmente fácil de utilizar, al igual que ocurre con el popular ASP de Microsoft, pero con algunas ventajas como su gratuidad, independencia de plataforma, rapidez y seguridad. Cualquiera puede descargar a través de la página principal de PHP y de manera gratuita, un módulo que hace que nuestro servidor web comprenda los scripts realizados en este lenguaje. Es independiente de plataforma, puesto que existe un módulo de PHP para casi cualquier servidor web. Esto hace que cualquier sistema pueda ser compatible con el lenguaje y significa una ventaja importante, ya que permite portar el sitio desarrollado en PHP de un sistema a otro sin prácticamente ningún trabajo.

99 P á g i n a 85 Este lenguaje de programación está preparado para realizar muchos tipos de aplicaciones web gracias a la extensa librería de funciones con la que está dotado. La librería de funciones cubre desde cálculos matemáticos complejos hasta tratamiento de conexiones de red. Algunas de las más importantes capacidades de PHP son: compatibilidad con las bases de datos más comunes, como MySQL, msql, Oracle, Informix. Incluye funciones para el envío de correo electrónico, upload de archivos, crear dinámicamente en el servidor imágenes en formato GIF, incluso animadas y una lista interminable de utilidades adicionales phpmyadmin phpmyadmin es una herramienta de software libre escrito en PHP, la intención de manejar la administración de MySQL a través de la Web. phpmyadmin es compatible con una amplia gama de operaciones de MySQL, MariaDB y llovizna, operaciones de uso frecuente (gestión de bases de datos, tablas, columnas, relaciones, índices, usuarios, permisos, etc) se puede realizar mediante la interfaz de usuario, mientras que usted todavía tiene la capacidad de ejecutar directamente cualquier sentencia SQL (structured query language).

100 P á g i n a 86 PhpMyAdmin es también muy profundamente documentado en un libro escrito por uno de los desarrolladores - Mastering phpmyadmin para una eficaz gestión de MySQL, que está disponible en Inglés y Español. Desde la versión 3.0.0, phpmyadmin se unió a la iniciativa GoPHP5 y dejó caer código de compatibilidad para PHP mayor y versiones de MySQL, versión 3 y posteriores requiere al menos PHP 5.2 y MySQL 5. phpmyadmin es un proyecto de catorce años de edad, con una base de código estable y flexible, para averiguar más sobre el proyecto y su historia. Características a) Interfaz web intuitiva b) Apoyo para la mayoría de las características de MySQL: c) Buscar y eliminar bases de datos, tablas, vistas, campos e índices d) Crear, copiar, borrar, renombrar y modificar bases de datos, tablas, campos e índices e) Mantenimiento del servidor, bases de datos y tablas, con propuestas sobre la configuración del servidor f) Ejecutar, editar y marcar cualquier sentencia-sql, incluso lotes-consultas g) Administrar usuarios y privilegios de MySQL

101 P á g i n a 87 h) Gestión de procedimientos almacenados y disparadores i) Importar datos desde CSV y SQL j) La administración de varios servidores k) Creación de gráficos en PDF de su diseño de base de datos l) Creación de consultas complejas m) La transformación de los datos almacenados en cualquier formato con un conjunto de funciones predefinidas, como mostrar-datos BLOB como imagen o el link de descarga ( FRAMEWORKS PARA PHP Hay muchos Frameworks de PHP; cada uno orientado a un tipo de proyecto, por lo que elegir el adecuado nos puede ahorrar una gran cantidad de trabajo; por ello, se lista a continuación los frameworks PHP más destacados. Zend Framework: Zend Framework es un framework PHP orientado a objetos 100%, con una fuerte implementación del patrón MVC, una abstracción de datos muy simple de usar y un rendimiento muy estable, siendo uno de los frameworks más robustos de la actualidad. Además, al ser un framework de código

102 P á g i n a 88 abierto, se podría evitar posibles problemas con licencias como se nos podría ocurrir con algún framework restrictivo o de pago. CakePHP: Uno de los frameworks más ligeros que existen, su paquete base es realmente muy ligero. Tiene la buena (o mala, según se mire) característica de soportar PHP 4, por lo tanto no será un problema para usarlo en servidores que no se hayan actualizado a PHP 5. Symfony: Un framework PHP construido enteramente para PHP 5, por lo que no es compatible, pero al mismo tiempo ofrece un rendimiento excelente en la última versión de PHP. Con Symfony el programador se podrá centrar solo realmente en lo que es la programación, obviando tareas comunes y centrándose en el proyecto entre manos. CodeIgniter: Framework increíblemente ligero que usa el diseño MVC y contiene una muy buena estructuración de sus librerías. Usarlo es tan fácil como descomprimir su contenido en una carpeta en el servidor, sólo con eso ya

103 P á g i n a 89 funcionará. Es uno de los frameworks más indicados para las personas que quieran iniciarse en el uso de los mismos. Seagull: Seagull es un Framework compatible con PHP 4 y PHP 5 con el que podremos realizar aplicaciones y páginas web de una forma muy sencilla y visual, ya que al mismo tiempo cuenta con interfaz gráfica, lo cual acelerará bastante el trabajo en algunas ocasiones. ( 22-los-5-frameworks-php-mas-destacados-noticia_ html) Además de estos frameworks, existen muchos más bajo open source que permiten el desarrollo de sitios web dinámicos, web services (servicios web) y aplicaciones web. El propósito de este tipo de framework es permitir a los desarrolladores construir aplicaciones web y centrarse en los aspectos interesantes, aliviando la típica tarea repetitiva asociada con patrones comunes de desarrollo web. La mayoría de los frameworks de aplicaciones web proporcionan los tipos de funcionalidad básica común, tales como sistemas de templates (plantillas), manejo de sesiones de usuario, interfaces comunes con el disco o el almacenamiento en base de datos de contenido cacheado, y persistencia de datos. Normalmente, los frameworks de aplicación web además promueven la reutilización y conectividad de los componentes, así como la reutilización de código, y la implementación de bibliotecas para el acceso a base de datos.

104 P á g i n a 90 Ilustración 15 Web Application Frameworks Fuente: ( HERRAMIENTAS DE DISEÑO WEB - DREAMWEAVER Macromedia Dreamweaver CS4 es una de las mejores opciones que podemos elegir para crear sitios y aplicaciones web. Esta aplicación de Adobe, gracias a su integración y diseño basado en CSS, permite que los diseñadores y desarrolladores web creen sitios web sin demasiadas complicaciones. (ABEL, 2007) Entre sus principales características destacan el amplio soporte de CSS, la edición de gráficos, el FTP seguro o la perfecta integración con código y archivos externo. Recuerda que estamos hablando de una aplicación de evaluación.

105 P á g i n a 91 CAPITULO III ANALISIS Y DISEÑO 3.1 Especificación de los requerimientos del sitio web Propósito del website. El propósito de este website es utilizar herramientas multimedia y Open Source, para facilitar a la Empresa Creaciones Sortijerito la comercialización de sus productos a través de la Internet, proveer al área comercial, un medio de administración de los clientes con respecto a sus pedidos y los mensajes que estos pueden enviar a la Empresa Fin del website. El fin de este proyecto es mejorar la administración de la organización, y lograr que la empresa Creaciones Sortijerito, pueda atender de manera más rápida y precisa, los requerimientos de los clientes, a través del website corporativo, facilitar su interacción con la Empresa y promulgar una imagen corporativa y posicionar a la marca.

106 P á g i n a Ámbito del website. El ámbito de este proyecto tiene el propósito de crear un website dinámico, donde los clientes puedan acceder a través de Internet, a obtener información detallada de los productos que Creaciones Sortijerito oferta, poder realizar pedidos y conocer promociones si las hubiere, a fin disponer de resultados requeridos por los clientes sobre los productos de la empresas en tiempo real Interfaz del sistema La información que se encontrará en el website de Creaciones Sortijerito, se la pondrá disponible únicamente, a los clientes registrados, una vez que este, se confirme como cliente registrado, podrá acceder a los beneficios que el website ofrece, dentro del alcance de este Proyecto Interfaz de usuario El website define un propósito en la interfaz del usuario cuando accede por Internet, y es el poseer información precisa del cliente interactuando con el portal.

107 P á g i n a Interfaz de hardware El hardware a utilizar en el proyecto, será un servidor en el que se puedan acceder al website tanto por vía externa (Internet) cuando se posicione el website, o de manera local (localhost) mientras se instala en un hosting Interfaz de software La aplicación del Website de Creaciones Sortijerito una vez que se decida en un hosting externo, será instalada sobre la plataforma WAMPSERVER 2.2, con APACHE , MySql como base de datos, el frontend será PHP , Modelador de la DB Navicat for My SQL y Dreamweaver CS4 como Framework.

108 P á g i n a Arbol de Problemas PEDIDOS MAL REQUERIDOS DETERIORO DE PRODUCTOS PERDIDA DE TIEMPO USO INAPROPIADO RECURSOS DE LA EMPRESA CLIENTE MAL ATENDIDO DIFICULTAD EN EL CONTROL DE LOS PEDIDOS ADMINISTRACION MANUAL LOS PEDIDOS MAL MANEJO DE LOS PEDIDOS ORGANIZACIÓN DEFICIENTE Ilustración 16 Arbol de Problemas Fuente: (Robert Granda)

109 P á g i n a Obtención de Requerimientos Requisitos funcionales del sistema NAVEGACION 1. Los usuarios podrán navegar tanto en inglés como en Español. 2. Los usuarios podrán navegar dentro del website, para acceder a los productos y colores disponibles. 3. Los usuarios podrán enviar un a la Empresa Creaciones Sortijerito, para solicitar ser dado de alta como cliente registrado. INGRESO DE DATOS 1. El administrador podrá ingresar los datos del cliente, para ser considerado como cliente registrado. 2. Los clientes registrados por el Administrador, podrán ingresar al website utilizando su registrado y su clave. 3. Los usuarios podrán hacer pedidos y obtener una proforma de su pedido. 4. El administrador podrá ingresar los productos, categorías y colores disponibles, así como los precios respectivos para que el cliente pueda realizar el pedido.

110 P á g i n a El administrador cargará el número del pedido manualmente. 6. Solo el administrador podrá realizar cambios a cualquier dato dentro del website, para ello, el cliente en caso de actualización de su información, solicitará vía al administrador, la actualización respectiva Requisitos de rendimiento. El sistema debe dar un servicio simultáneo a varios clientes registrados en forma concurrente con un tiempo de respuesta inferior a los 10 segundos; si la cantidad de tiempo sobrepasa de los 10 segundos, el sistema sufrirá una degradación y alterará la buena imagen que el cliente tenga de la Empresa Creaciones Sortijerito Requisitos Tecnológicos. Hardware: En el requerimiento del hardware que se utiliza Pentium D, con memoria de 1 GB o superior y un disco duro de almacenamiento de 200 Gigabytes o superior. Software: En el requerimiento de software para la implementación del sistema, se utilizará como plataforma el Windows 7 y como lenguaje de programación Php 5, donde la arquitectura será web y como motor de Base de Datos MySQL, el servidor web será Apache.

111 P á g i n a DISEÑO CONCEPTUAL Modelo del Negocio En el modelo de negocio se capturan los requisitos mediante los flujos de trabajo que se realiza en la Empresa Creaciones Sortijerito donde están los actores que son el administrador y el cliente registrado.

112 P á g i n a Actores del Negocio Tabla 2 Actores del negocio. ACTOR Cliente registrado DESCRIPCION Es quien hace el pedido de los productos al sistema. Navega en inglés o español y visualiza los productos, categorías y colores disponibles Es capaz de enviar a la Empresa para interactuar con esta sobre diferentes requerimientos. Administrador Es quien tiene el control del sistema. Fuente (Creaciones Sortijerito). Es capaz de realizar actualizar la información que el cliente registrado pide se cambie de su información personal. Es quien controla los pedidos realizados por el cliente registrado. Tiene la tarea realizar reportes tanto de clientes, productos y pedidos realizados.

113 P á g i n a 99 Tabla 3 TABLA DE ACTORES Administrador Sistema Cliente Registrado El Administrador realiza las siguientes tareas 1. Recepciona la El sistema realiza las siguientes acciones El usuario realiza las siguientes tareas 1. Solicita ser cliente registrado via solicitud de cliente 1. Genera matriz de 2. Hace el pedido registrado envío Revisa los 2. Envia datos al cliente 2. Genera reportes productos, categorías 3. Registra productos, categorías y colores disponibles Imprime reportes de clientes, productos y pedidos. Resuelve sus inquietudes via . de clientes, productos y pedidos. y colores disponibles 3. Emite inquietudes vía . Fuente: (Creaciones Sortijerito)

114 P á g i n a 100 MODELO DE NEGOCIO DE CREACIONES SORTIJERITO USUARIO ADMINISTRADOR CLIENTE REGISTRADO INICIO INGLES O ESPAÑOL SOLICITA AL ADMINISTRADOR VIA INGRESA AL SISTEMA REVISA PRODUCTOS, CATEGORIAS Y COLORES DISPONIBLES ES CLIENTE REGISTRADO NO ENVIA AL CLIENTE SU USER Y CONTRASEÑA VIA INGRESA DATOS DEL CLIENTE HACE PEDIDOS SI INGRESA PRODUCTOS, COLORES Y CATEGORIAS DISPONIBLES REPORTES CLIENTES PRODUCTOS SEGUIMIENTO PEDIDOS PEDIDOS NO PEDIDO RECIBIDO SI FIN ENVIA PEDIDO AL CLIENTE Fase Ilustración 17 MODELO DE NEGOCIO Fuente: (Creaciones Sortijerito)

115 P á g i n a Casos de uso En el diagrama de casos de uso, se puede establecer claramente las competencias que tiene el cliente y el administrador dentro del manejo del website de Creaciones Sortijerito, en función de las acciones realizadas por el sistema y los resultados requeridos que el website le proporcionará tanto al cliente como al administrador según el alcance de esta tesis.

116 P á g i n a 102 WEBSITE CREACIONES SORTIJERITO SELECCIONA EL IDIOMA REVISA LOS PRODUCTOS CLIENTE REVISA LOS COLORES ENVIA INGRESA PEDIDO ADMINISTRADOR INGRESA PRODUCTOS INGRESA CLIENTES COLORES CATEGORIA AL CLIENTE PRODUCTOS GENERA REPORTES REPORTES CLIENTES PEDIDOS Ilustración 18 Diagrama de Casos de Uso Fuente: (Creaciones Sortijerito)

117 P á g i n a Identificación de Actores y Casos de Uso Tabla 4 Actores y Casos de Uso ACTOR Administrador CASOS DE USO Gestiona ingreso de clientes, productos, categorías y colores. Gestiona envío/reclamo de los productos Gestiona los pedidos. Cliente Solicita productos registrado Fuente: Creaciones Sortijerito Detalle de caso de uso expandido Un caso de uso expandido describe un proceso más a fondo que el de alto nivel. La diferencia básica con el caso de uso de alto nivel consiste en que tiene una sección destinada al curso normal de los eventos que los describe paso a paso.

118 P á g i n a 104 Tabla 5 Caso de uso Expandido Ingreso nuevo cliente registrado Caso de Uso: Actores: Ingresa datos Personales del nuevo cliente registrado Administrador Propósito: Obtener información exacta del nuevo cliente registrado Resumen: El Usuario envía un al Administrador para que le dé de alta como cliente registrado una vez registrado el cliente, este podrá ingresar a la Tienda Virtual de Creaciones Sortijerito ( y password) Tipo: Principal Nº REFERENCIA CRUZADA Condición Categoría Ref. 1. Usuario accede al sistema de Tienda Virtual EVIDENTE 1.2 Se le muestra un menú, que le permite EVIDENTE ingresar el pedido y enviar un al administrador. 1.3 Cliente registrado escoge los productos y EVIDENTE colores disponibles. 1.4 Cliente registrado graba el pedido. EVIDENTE CURSO DE LOS EVENTOS Acción del actor Respuesta del Sistema 1.- El administrador 2.- Búsqueda del cliente

119 P á g i n a 105 introduce los datos personales del nuevo cliente registrado 3.- Si el usuario no está registrado (Clientes que entregaron toda la información para su registro.) registrado, no podrá ingresar a la tienda virtual Curso Alternativo 4.- Actualiza la ventana de inicio para siguiente usuario Fuente: (Creaciones Sortijerito )

120 P á g i n a Diseño Navegacional Diagrama de secuencia. Usuario Administrador Logeo cliente registrado Revisa productos Y colores PEDIDO HACE EL PEDIDO Solicita ser cliente registrado Registra al cliente Ingresa productos, categorías y colores Confirma el pedido Entrega el pedido Emite el pedido Recibe devolución del pedido Ilustración 19 Diagrama de Secuencia Fuente: (Creaciones Sortijerito. ).

121 P á g i n a Diagrama de Estados ESCOGE EL IDIOMA SOLICITA AL ADMINISTRADOR SER CLIENTE REGISTRADO VERIFICA PRODUCTOS, CATEGORIAS Y COLORES DISPONIBLES REALIZA EL PEDIDO RECIBE Y/O DEVULEVE EL PEDIDO PAGA EL PEDIDO Ilustración 20 Diagrama de Estados Fuente: (Creaciones Sortijerito )

122 P á g i n a Diagrama de Comunicación. Usuario Administrador 6. Recibe y/o devuelve El pedido 7. Paga el pedido CLIENTE REGISTRADO 3. Revisa productos disponibles 1. Solicitar ser cliente registrado 2Ingresar como cliente registrado 5. Remite el pedido REGISTRAR CLIENTES REVISA PRODUCTOS DISPONIBLES 4. Crea el pedido PEDIDO Ilustración 21 Diagrama de Comunicación. Fuente: (Creaciones Sortijerito. )

123 P á g i n a Diagrama de Clases Ilustración 22 Diagrama de Clases Fuente: (Creaciones Sortijerito. )

124 P á g i n a Documento de diseño de navegación Esquema de navegación del website de Creaciones Sortijerito, permite diseñar adecuadamente una aplicación hypermedia, teniendo en cuenta los caminos que el usuario puede seguir, evitando la información redundante, o que el usuario se pierda en la navegación. Este diseño navegacional dinámico de la aplicación, muestra los cambios espaciales de navegación cuando el usuario navega ayudándole de esta manera a complementar la definición de una clase de navegación, estableciendo y definiendo, qué información está accesible desde un enlace a otro.

125 P á g i n a 111 Usuario/Visitador Inicio Presentación Páguina Inicial Ingreso Ingreso clientes Inicio Inicio Perfil Usuario Ingreso productos Español Inicio Ingreso Reportes English Tienda virtual Reportes Pedidos Tienda Productos Apilables Salir Clientes Estrellas Tienda Ingreso pedido Pompones Ilustración 23 Diseño navegacional inicial Fuente: (Robert Granda) En el diseño navegacional del vínculo Inicio nos podrá dirigir a las páginas que permitirán al usuario, elegir entre los idiomas Español o English, que se presentarán en esta gráfica.

126 P á g i n a 112 Ilustración 24 Diseño navegacional inicial Fuente: (Granda Robert.) En el diseño navegacional del vínculo de Usuarios se podrá acceder a información general de los productos que dispone la Empresa Creaciones Sortijerito, enviár un para solicitar su registro formal como usuario registrado y poder acceder a los bene de la Tienda Virtual, pedidos,etc. ficios Ilustración 25 Diseño navegacional inicial Fuente: (Robert Granda G.)

127 P á g i n a 113 En el diseño navegacional del vínculo Tienda virtual permitirá acceder a los servicios en línea, solo cuando el usuario está debidamente registrado como usuario con su respectiva contraseña, todo esto realizado previa y únicamente por el administrador del website. Ilustración 26 Diseño navegacional inicial Fuente: (Robert Granda ). 3.5 Diseño de interfaz Interfaz de usuario La interfaz gráfica de usuario, no solo es lo que ve el cliente, este esquema encierra enormes posibilidades para que el cliente se interese o desista de visitar un sitio web, es por ello, que para la interfaz gráfica del website de Creaciones Sortijerito, se utilizó herramientas que permitan viabilizar el cumplimiento del objetivo del análisis, diseño, desarrollo e

128 P á g i n a 114 implementación de una tienda virtual, facilitando la comprensión, con una representación fija y permanente de un determinado fondo, con fácil identificación de la misma, sobre un diseño ergonómico mediante el establecimiento de menús y barras de acciones. Las interacciones se basan en acciones físicas sobre elementos de código visual de los iconos, menús, imágenes, barras de desplazamiento y navegación, en selecciones de tipo menú con sintaxis y órdenes, cuyas operaciones son rápidas, con efectos inmediatos.

129 P á g i n a 115 Área de animación Área de botones Ilustración 27 Interfaz Abstracta.Fuente: Robert Granda G. Ilustración 28 Interfaz de usuario Fuente: (Robert Granda)

130 P á g i n a 116 Área de Logo Área de Menús Área de Texto Ilustración 29 Interfaz Abstracta Fuente: (Robert Granda) Ilustración 30 Interfaz de usuario Fuente: (Robert Granda ).

131 P á g i n a 117 Área de Logo Área de Texto Área de botón Área de Imagen Área de Datos Área de Imagen Área de Texto Ilustración 31 Interfaz Abstracta Fuente: (Robert Granda ). Ilustración 32 Interfaz de usuario Fuente: (Robert Granda)

132 P á g i n a 118. Área de Logo Área de Texto Área de Datos Área de Datos Área de Botones Ilustración 33 Interfaz Abstracta Fuente: (Robert Granda ). Ilustración 34 Interfaz de envío de solicitud de usuario registrado Fuente: (Robert Granda G).

133 P á g i n a 119 Área de Logo Área de Texto Área de Menú Área de Datos Ilustración 35 Interfaz Abstracta Tienda Virtual Fuente: (Robert Granda) Ilustración 36 Interfaz de usuario Tienda Virtual.Fuente: (Robert Granda ).

134 P á g i n a Configuración de dominio Al momento la página se hospedará en un hosting, posiblemente el dominio se adquiera como si está disponible; adicional, los DNS serán provistos por el hosting donde se hospede el website. 3.7 Portal Web En la página inicial se presentará el Index del Creaciones Sortijerito, en la página principal del Portal Web en la parte inferior se encuentra dos links que direccionan a Español o English, una vez escogido el idioma, el usuario tendrá acceso al menú principal que le direccionará a una serie de servicios, como Contáctenos, Tienda Virtual, y una guía breve de los productos con los colores disponibles. Una vez ingresado a la Tienda Virtual, el usuario podrá realizar pedidos, listar productos, etc, todo a través del website.

135 P á g i n a Aplicación Web Administración de usuarios Al ingresar a la aplicación Web con el usuario y contraseña se desplegará en la pantalla el menú principal de la tienda virtual, que permite acceder a los servicios previstos. Ilustración 37 Acceso tienda virtual Fuente: (Creaciones Sortijerito)

136 Ilustración 38 Listado de clientes Fuente: (Creaciones Sortijerito ) P á g i n a 122

137 P á g i n a IMPLEMENTACION En esta fase se explicará la instalación en el servidor del portal, así como cada una de las pantallas principales que se involucran dentro del Portal Web Instalaciones Instalación del software La instalación de software de base para el desarrollo será WAMPSERVER 2.2, para lo cual se instalará el software y se requiere que cualquier aplicación que utilice puerto:80, se debe desinstalar o detener su servicio porque WAMPSERVER, utiliza dicho puerto para la comunicación; para ello se debe ubicar el URL e iniciamos la descarga de nuestro WAMPSERVER.

138 P á g i n a 124 Ilustración 39 Pantalla de inicio de instalación de WAMPSERVER Fuente: (Instalaciòn WAMPSERVER Robert Granda) Cuando se instala WAMPSERVER 2.2, tenemos incluidos, un servidor Apache,2.2.22, PHP 5,3,13 y My SQL WAMPSERVER, nos permite instalar el website, ya sea en una PC, para trabajar como localhost o dejar lista las aplicaciones para subirlas al Internet Configuraciones del website. Una vez instalado, el directorio de WAMPSERVER, quedará listo para utilizarse de la siguiente manera en el explorador de Windows:

139 P á g i n a 125 Ilustración 40 Vista del Explorar de Windows y ubicación de carpeta www/wamp. Fuente: (Website Creaciones Sortijerito) Configuracion localhost y web. Cuando WAMPSERVER va a trabajar como localhost, se debe configurar en el explorador la siguiente dirección C:wamp/www/sort2/Connections un archivo de texto de la siguiente manera:

140 P á g i n a 126 Ilustración 41 Configuración de Connections para localhost Fuente: (Website Creaciones Sortijerito) El momento que se quiere instalar en el hosting el website de Creaciones Sortijerito, se debe realizar el cambio del archivo de texto, con la información proporcionada por el hosting en la siguiente dirección: C:wamp/www/sort2/Connections lo siguiente:

141 P á g i n a 127 Ilustración 42 Configuración de Connections para el hosting Fuente: (Website Creaciones Sortijerito) Configuración del php Admin Para sacar el archivo plano de la Base de Datos, se hace una petición a través del WAMPSERVER y se solicita crear una exportación de la DB de Creaciones Sortijerito, una vez hecho eso, se guarda dentro de la carpeta C:wamp/www/sort2, el archivo plano de la DB para que todo pueda subirse en conjunto al hosting.

142 P á g i n a 128 Ilustración 43 Solicitud phpadmin para archivo plano *.sql Fuente: (Creaiones Sortijerito) Ilustración 44 Ubicación del Archivo sortijerito.sql Fuente: (Robert Granda)

143 P á g i n a DICCIONARIO DE DATOS El website de Creaciones Sortijerito, está formado por varias clases de acuerdo al siguiente detalle: Clase colores. Esta Clase almacenará los códigos, nombre de los colores de las cintas sintéticas que se utilizan, nombres de los colores en español e inglés además, de la codificación propia de la fábrica de cintas que no se pueden cambiar y no son incrementables, son códigos fijos. Ilustración 45 clase colores Fuente: (Website Creaciones Sortijerito) Esta tabla tiene relación con la tabla pedidos Clase pedidos

144 P á g i n a 130 En esta clase se almacenará, los pedidos que realicen los clientes, en esta tabla se incluye el id del pedido, el código del color que permite traer el color del producto que el cliente pidió, el código del cliente, el código de la categoría, la fecha del pedido, el código del producto, elementos indispensables para configurar los reportes que el cliente necesita, además, se incluye la cantidad de productos que el cliente requiere, el total y el número de factura. Ilustración 46 clase pedidos Fuente: (Website Creaciones Sortijerito) Esta tabla tiene relación con la tabla colores, clientes, productos y categoría. Clase clientes Esta clase nos permite, ingresar y registrar la información de los clientes como es nombre, dirección, cédula o dni, , clave, fecha de nacimiento,

145 P á g i n a 131 etc, además, para efectos, de asociación tanto del pedido como del producto, además en esta clase, se registran únicamente los clientes que con una clave, podrán ingresar a la tienda virtual. Ilustración 47 clase clientes Fuente: (Website Creaciones Sortijerito) Esta tabla tiene relación con la tabla pedidos. Clase Categoría Esta clase, permite a la Empresa Creaciones Sortijerito, registrar las categorías o los tipos generales de productos, por ejemplo, Estrellas, Pompones y Apilables, considerando que cada uno tiene, variedades específicas que pueden ser de dos o más productos, adicional, el campo estado, nos permite, mostrar al cliente si el producto escogido está disponible o no.

146 P á g i n a 132 Ilustración 48 clase categoría Fuente: (Website Creaciones Sortijerito) Esta tabla tiene relación con la tabla pedidos y productos. Clase Productos La clase productos, proporciona información vital tanto para la Empresa Creaciones Sortijerito como para sus clientes, aquí se almacenan los productos que salieron de producción y están disponibles para la venta, los campos incluidos, proporcionan información del código del producto, código de categoría, nombre del producto, descripción, el precio normal y precio de oferta además de la imagen del producto. Ilustración 49 clase productos Fuente: (Website Creaciones Sortijerito)

147 P á g i n a 133 Esta tabla tiene relación con la tabla pedidos y categoria. Clase Factura Esta clase está diseñada para registrar los números de las facturas que los clientes generen cuando realizan un pedido. Ilustración 50 clase factura Fuente: (Website Creaciones Sortijerito) Esta tabla tiene relación con la tabla clientes.

148 P á g i n a 134 CAPÍTULO IV 4.1 Desarrollo y pruebas DESARROLLO Y PRUEBAS. 4.1 Fase Desarrollo El desarrollo del website de Creaciones Sortijerito, fue realizado en CCS 4, Dreamweaver, utlizando PHP como front end, la DB es MySQL y el servidor WEB Apache Desarrollo del sitio web Para el desarrollo del website de Creaciones Sortijerito se consideró varias premisas con las respectivas pruebas para determinar su funcionalidad de acuerdo al siguiente detalle: Creatividad.- Se buscó la manera de llegar al cliente con animaciones que atrajeran su interés visual, el manejo de colores, animaciones y formas adecuadas, fomentan ese desafio que el website de Creaciones Sortijerito, busca alcanzar de acuerdo a los lineamientos comerciales impuestos traducidos en procedimientos multimedia. Diseño de homepage.- El diseño del homepage, estuvo a cargo del Desarrollador de la website, con el apoyo de herramientas multimedia CCS

149 P á g i n a 135 4, todo esto con el fin de contribuir con los objetivos propuestos al inicio del proyecto de Análisis, Diseño, Desarrollo e Implementación del website de Creaciones Sortijerito. Diseño de pantallas y menús.- Las interfaz gráficas y los menús fueron diseñados con CCS 4, al igual que el diseño del homepage, ligados directamente a contribuir con el propósito de mostrar a través del internet, toda la gama de productos, a su vez de interactuar con futuros compradores, aplicando las reglas del marketing por internet. Selección y preparación de imágenes.- La selección de imágenes, las sesiones fotográficas, la edición fotográfica y las animaciones multimedia, se convirtieron en elementos claves para fortalecer el vínculo, marketing informática, la idea de llegar al cliente con una aceptación visual inicial de este, es un proceso muy importante que absorbe muchos recursos tanto de fotógrafos, diseñador y desarrollador, porque la idea del negocio para la Empresa Creaciones Sortijerito a través del e-marketing, es en primer término, alcanzar del cliente, una buena primera impresión, con interfaces amigables, atractivas y funcionales, para luego proporcionarle a este, información en línea de los productos y servicios disponibles a través de la Tienda Virtual de Creaciones Sortijerito. Análisis y programación.- Mientras el diseño se transformaba en un producto multimedia agradable y aceptado por el cliente en términos de

150 P á g i n a 136 imagen, el análisis y programación realizado por el Desarrollador con herramientas open source como PHP y MySQL, permitió consolidar los requerimientos comerciales de la Empresa Creaciones Sortijerito y transformarlos en una solución dinámica con acceso web a la información que el cliente necesita y la empresa le provee, con el fin de cubrir con las expectativas del cliente y alcanzar la satisfacción del mismo. Análisis y programación de la base de datos.- El diseño funcional de los requerimientos de la Empresa Creaciones Sortijerito se puedo canalizar con la ayuda de una herramienta de administración de MySQL, Navicat for My SQL también bajo open source, ayudó a la creación de las tablas y las relaciones entre cada una de ellas, además con el apoyo de SQLyog Entrerprise otra herramienta bajo software libre, facilitó la creación de reportes y afianzó el desarrollo de sentencias SQL todo esto para viabilizar los requerimientos de la Empresa y lograr entregar una solución robusta que en cumplimiento a los lineamientos comerciales, provea al cliente información confiable, actual y segura sobre todo lo que la Empresa Creaciones Sortijerito provee a sus clientes a nivel mundial a través de su website. Diseño de muestras de pantallas y accesos a DB.- Los procesos dinámicos que facilitan al cliente alcanzar y obtener la información de la Empresa Creaciones Sortijerito se los pudo viabilizar a través del WAMPSERVER con el apoyo del servidor interno de APACHE, esta

151 P á g i n a 137 solución, facilita la transaccionabilidad en el entorno web ya sea como localhost para uso dentro de la red LAN, así como dentro del hosting para extranet, al ser WAMPSERVER open source, no incrementa los costos en la puesta en producción de soluciones web para Pymes, entregando una plataforma robusta, confiable, con costos reducidos Pruebas de la aplicación Al levantar los servicios del servidor Web se podrán realizar diferentes tipos de pruebas de funcionamiento, pruebas de carga y pruebas de concurrencia de acceso al portal Web desde el localhost y desde internet Pruebas de conectividad Para la comprobación del estado de carga y la respuesta del servidor a la petición a la página Web se utilizará el comando ping, este enviará una serie de paquetes de datos y espera la respuesta de la máquina a ser realizada la prueba, generalmente el comando ping se utiliza para testear aspectos de la red, como comprobar que el sistema está encendido y conectado. El tiempo de respuesta a un ping indica la congestión que en ese momento existe en la línea, esta prueba de carga se realiza al portal Web tanto de la red interna como desde la externa, teniendo un buen tiempo de respuesta por parte del servidor Web.

152 P á g i n a 138 Ilustración 51 Ping localhost Fuente: (Robert Granda) Pruebas funcionales En estas pruebas se verificó que el sitio desarrollado cuente con la funcionalidad deseada por parte del personal de ventas y Gerencia Administrativa de la Empresa. Creaciones Sortijerito, también se comprobó que al oprimir un link este nos lleve a la página correspondiente y se ejecute las acciones adecuadas a los botones y mapa del sitio Web, así también se realizó las pruebas a los servicios Web y su correcto funcionamiento con todas sus funcionalidades independientes funcionando correctamente y validado todo Pruebas de concurrencia