QUERÉTARO. Nombre de la empresa. Grupo Moreno. Memoria. el título de. Presenta. Janeth Adriana Ramón López

Transcripción

1 2012 Desarrollo de página web de la empresa Janeth Adriana Ramón López UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Desarrollo de página web de la empresa Nombre de la empresa Grupo Moreno Memoria Que como parte de los requisitos para obtener el título de Ingeniero en Tecnologías de la Información y Comunicación Presenta Janeth Adriana Ramón López M. en GTI. Jorge García Saldaña Rocio Moreno Tejada Asesor de la UTEQ Asesor de la Empresa Santiago de Querétaro, Qro., Mayo de

2 Querétaro, Qro., a de de.. C. Matrícula: Candidato al grado de en P r e s e n t e AUTORIZACIÓN DE PRESENTACIÓN DE MEMORIA El que suscribe, por medio del presente le informa a Usted, que se le autoriza la presentación de su memoria de la Estadía profesional, titulada:, realizado en la empresa:. Trabajo que fue revisado y aprobado por el Comité de Asesores, integrado por: Asesor de la Empresa Profesor Asesor Se hace constar el NO adeudo de materiales en las siguientes áreas. Biblioteca UTEQ Lab. Informática Lab. de Tecnología A t e n t a m e n t e C.c.p. Director de la División <<Nombre>>.- Subdirector de Servicios Escolares Archivo Nota: Incorporar imagen escaneada que incluya firmas 2

3 RESUMEN Hoy en día las páginas web son visitadas por millones de cibernautas ya sea para buscar información o realizar compras a través de ellas. Esto por esto que para las empresas se ha convertido en suma importancia contar con una página web donde puedan dar a conocer sus productos y servicios. En este proyecto se realizara el análisis y diseño de la página web para la empresa Velit Cosmética. Cuyos objetivos primordiales son la captación de nuevos clientes y aumentar sus ventas. Para esto, el proyecto fue dividido en cinco etapas. La primera etapa fue la definición de los requerimientos, en la cual conocimos la problemática y necesidades de la empresa. La segunda etapa fue realizar el análisis para proponer la solución. La tercera etapa fue realizar el diseño del prototipo de la imagen que tendría la página. La cuarta etapa fue la construcción en código PhP y HTML de la página, donde se utilizaron herramientas graficas como apoyo para la edición de imágenes. Y finalmente, la última etapa considera el cierre del proyecto teniendo como hito la entrega de la página web a la empresa. Es con esto que los objetivos y el alcance del proyecto fueron alcanzados. (Palabras clave: guía, referencia, tesis) 3

4 ABSTRACT Nowadays, WebPages are visited by millions of people around the world in order to obtain information or for shopping. This is why it has become important or imperative that companies own one to display or promote their products and services to all this vast of online visitors. In this project we are performing the analysis and design of a web page for Velit Cosmética Company which as a primary goal is to gather more clients and increase its sales. Also, the project was divided into 5 phases: first one was the Requirements Definition, where we able to know the company necessities to achieve its primary goals. Second, the solution proposal analysis, in our case, the webpage. The third one was the prototype designing regarding the display or layout for the webpage. Fourth one was the actual PHP and HTML code building for it, where graphical tools were applied as a support for image edition. And finally, the fifth phase considered handover of company s webpage as the project closure. Thanks to all these five phases project goals and delivery was achieved. 4

5 Í N D I C E RESUMEN... 3 ABSTRACT... 4 Í N D I C E... 5 I. INTRODUCCIÓN... 6 II. ANTECEDENTES... 8 III. JUSTIFICACIÓN... 9 IV. OBJETIVOS V. ALCANCES VI. JUSTIFICACIÓN TEÓRICA VII.PLAN DE ACTIVIDADES VIII. RECURSOS MATERIALES Y HUMANOS IX. DESARROLLO DEL PROYECTO X. RESULTADOS OBTENIDOS XI. ANÁLISIS DE RIESGO XII. CONCLUSIONES XIII. RECOMENDACIONES XIV. REFERENCIAS BIBLIOGRÁFICAS

6 I. INTRODUCCIÓN Debido a los efectos de la globalización, hoy en día es de suma importancia que las empresas cuente con una página web que los de a conocer en la red de redes Internet. Las páginas web son una estrategia de ventas que ayuda a las empresas a cumplir con sus objetivos estratégicos, siendo esta una herramienta indispensable para alcanzarlos ya sea a corto o mediano plazo. Esta a su vez debe contener información clara y concisa acerca de los servicios y productos que la empresa ofrece, además de proporcionar a las empresas una imagen profesional. Para el diseño de una página web se consideran algunos aspectos tales como: imágenes, texto, animaciones, y el contenido ya que con esto se capta la atención del usuario final, El Cliente. Para ello existe un estándar donde la idea primordial es el contenido de la misma, así como el uso de la información confidencial que las personas introducen a través de las páginas. Las razones por las cuales una empresa debe tener una página web son diversas entre las cuales podemos destacar: Costos de mantenimiento, los cuales son bajos, ya que hoy en día existen empresas dedicadas al diseño de las mismas ofreciendo paquetes accesibles acorde a las diferentes necesidades que tenga la empresa. La disponibilidad, ya que está se encuentra disponible las 24 horas del día los 365 días del año y es vista por millones de usuarios en todo el mundo. Apertura comercial ya que es la tarjeta de presentación de la empresa dedicada a la actividad comercial, cabe señalar lo mucho que el diseño de páginas web ha ido evolucionando, convirtiéndose en una estrategia de ventas 6

7 y promoción y no simplemente una tarjeta de presentación. Hoy en día se considera una herramienta que extiende los límites comerciales en todos los niveles y con el surgimiento del comercio electrónico y la gran demanda de usuarios realizando sus compras vía Internet cada vez de manera rápida y segura, es incluida en toda estrategia de crecimiento para las empresas. 7

8 II. ANTECEDENTES La empresa Velit Cosmética, dedicada a la elaboración, ventas y distribución de productos cosméticos no contaba con una página web que los posicionara y los introdujera a nuevas áreas de oportunidad propias de su ramo. Su estrategia de ventas estaba limitada a la impresión y repartición de volantes, así como a la recomendación entre amigos y familiares. Basándose en su estrategia de crecimiento, la empresa Velit Cosmética vio en la realización de este proyecto la oportunidad de mejorar sus procesos de ventas y cumplir sus objetivos estratégicos, los cuales se presentan a continuación: Misión: Ofrecer la mayor oportunidad de negocio en la venta de los mejores productos naturales de cuidado personal, respetando y apoyando el equilibrio ambiental, a través del uso responsable de los materiales, así como el desarrollo ético y sustentable. Visión: Ser una empresa que desarrolla e innova productos naturales de cuidado personal de una manera socialmente responsable, brindando calidad en el servicio y satisfaciendo las necesidades del cuidado personal de los consumidores. Valores: Vida Espíritu Emprendedor Libertad Financiera Innovación Común Trabajo en Equipo 8

9 III. JUSTIFICACIÓN Se llevará a cabo el análisis y diseño de la página web de la empresa Velit Cosmética de acuerdo a su filosofía de negocio y a las necesidades planteadas, ya que la empresa busca dar a conocer sus productos de una manera profesional; para así obtener una mayor captación de ventas, estar en constante comunicación con los clientes ya existentes, y posicionarse en el mercado cosmetológico fortaleciendo sus procesos y lograr en un futuro ser una empresa líder en su ramo. 9

10 IV. OBJETIVOS Analizar y diseñar la página web de la empresa. Generar una mayor captación de clientes a través de la página web. Diseñar una imagen profesional a la empresa en la web. Proporcionar a la empresa una herramienta que les permita tener una comunicación efectiva con los clientes. 10

11 V. ALCANCES Se realizará el análisis y diseño de la página web de la empresa Velit Cosmética. En el análisis se definirá cual es la mejor solución al requerimiento y comprende: diseño más optimo para la página, herramientas informáticas así como los insumos que se utilizaran para llevar a cabo el desarrollo de la misma. La página presentará la siguiente estructura: Inicio Quienes Somos Beneficios Productos Cuidado Capilar Cuidado Corporal Cuidado Facial Contacto Ubicación Oportunidad de Negocio Noticias 11

12 VI. JUSTIFICACIÓN TEÓRICA Existen diversas herramientas enfocadas a la creación de páginas web, estas herramientas ofrecen una amplia gama de utilerías que hacen que el desarrollo de una página web sea cada vez de manera estética y dinámica. Para la creación de la página web de Velit Cosmética se eligieron las siguientes en base a que la gran mayoría de las páginas web que hoy existen fueron creadas con estas herramientas. Html Es el lenguaje de marcas de texto utilizado normalmente en la World Wide Web. Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes; El concepto de Hipertexto el cual permite conectar dos elementos entre sí. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizará en la forma como éste lo entienda. PhP Pre-procesador Hipertexto es un lenguaje de programación implantado en HTML HTML-embebed scripting lenguaje. La mayoría de su sintaxis está prestada de los lenguajes de programación C, Java y Perl, con la inclusión de algunos rasgos únicos de PHP. La meta del lenguaje es permitir a los que desarrollan sitios Web escribir rápidamente páginas generadas dinámicamente. 12

13 IIS Es un servidor web y un conjunto de servicios para el sistema operativo Microsoft Windows. Originalmente era parte del Option Pack para Windows NT. Luego fue integrado en otros sistemas operativos de Microsoft destinados a ofrecer servicios, como Windows 2000 o Windows Server Windows XP Profesional incluye una versión limitada de IIS. MySQL Es un sistema administrativo relacional de bases de datos (RDBMS por sus siglas en ingles Relational Database Management System). Este tipo de bases de datos puede ejecutar desde acciones tan básicas, como insertar y borrar registros, actualizar información ó hacer consultas simples, hasta realizar tareas tan complejas como la aplicación lo requiera. Hojas de Estilo en Cascada (Cascading Style Sheets) Es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. Dreamweaver Adobe Dreamweaver es una aplicación enfocada a la construcción y edición de sitios y aplicaciones Web basadas en estándares. Creado inicialmente por Macromedia actualmente producido por Adobe Systems. 13

14 Fireworks Macromedia Fireworks MX es una aplicación para diseñar elementos gráficos que van a utilizarse en la web. Sus innovadoras soluciones resuelven los principales problemas a los que se enfrentan los diseñadores gráficos y los responsables de sitios web. Fireworks puede utilizarse para crear, editar y animar gráficos web, añadir interactividad avanzada y optimizar imágenes en entornos profesionales. Cuando un documento está terminado, se puede exportar en formato de archivo JPEG, GIF u otros junto con archivos HTML que contienen tablas HTML y código Java Script para utilizarlo en la web. 14

15 VII.PLAN DE ACTIVIDADES A continuación se detallan las actividades que se llevaran a cabo durante la realización del proyecto. El proyecto iniciara el 09 de Enero de 2012 y terminara el 30 de Abril de 2012, estará dividido en 5 etapas. La primera etapa del proyecto es la definición de los requisitos, en esta etapa se recopilara la información necesaria, así como se tendrán las entrevistas con los interesados de la empresa. Con esta etapa se dará inicio al proyecto teniendo como fecha de partida el día 09 de Enero de 2012 y concluirá el 13 de Enero de La segunda etapa del proyecto es el análisis, con esta etapa se evaluara cual es la mejor alternativa para el diseño de la pagina web en base a las necesidades de la empresa, así como las herramientas y el equipo necesario para cumplir con el alcance del proyecto. Esta etapa comprende del 16 de Enero de 2012 al 20 de Enero de La tercera etapa del proyecto el diseño, comprende la elaboración de los bosquejos o prototipos, para la elección de la mejor alternativa. Dicha etapa comprende las fechas de 23 de enero de 2012 al 10 febrero de La cuarta etapa del proyecto es el desarrollo, en esta etapa se desarrollara la página web de acuerdo al bosquejo elegido por la empresa, se creara el código, la base de datos, la interfaz grafica y se realizaran las pruebas de todos los elementos que integraran la página web, así como la contratación del hosting que alojara la página y el dominio. Esta etapa es la que mas periodo de tiempo abarcara ya que iniciara el 13 de febrero de 2012 y terminara el 20 de abril de

16 La última etapa será el cierre del proyecto y concluirá con la entrega de la página web a la empresa Velit Cosmética. Figura 1.1 Plan de actividades 16

17 VIII. RECURSOS MATERIALES Y HUMANOS RECUSOS MATERIALES Laptop Usb Conexión a Internet Imágenes Lápiz Libreta PROGRAMAS Dreamweaver Fireworks RECURSOS HUMANOS Asesor de la Universidad Asesor de la empresa Desarrollador Web 17

18 IX. DESARROLLO DEL PROYECTO Definición de los requerimientos El desarrollo de este proyecto se llevó a cabo en las instalaciones de la empresa Velit Cosmética, ubicada en la calle Mariano Escobedo Numero 74 de la ciudad de Querétaro. De acuerdo al plan de actividades se dio inicio con la definición de los requerimientos llevando a cabo la recopilación de la información y las entrevistas con los interesados de la empresa. Análisis del problema Posteriormente se realizo la etapa del análisis, donde se propuso a la empresa cual era la mejor alternativa y resolver su problemática. Diseño de la solución En la tercera etapa se realizaron los prototipos para que la empresa donde se eligió el que más se adaptó a las necesidades. Desarrollo de la página La etapa de desarrollo comprendió cuatro sub-etapas dando inicio el día 20 de febrero de 2012 y concluyendo el 20 de abril de A continuación se detallan las actividades realizadas durante el desarrollo del proyecto. 18

19 Construcción de la estructura Se inicio la construcción de la estructura de la página web, de acuerdo al diseño previamente aceptado por la empresa. Se crearon los marcos que sirvieron como referencia para el encabezado, cuerpo y desplegado de la pagina web. La parte del encabezado es la más utilizada para mostrar el logo de la empresa, ya que manera que visualiza que se trata de una empresa establecida. La Imagen 3.- muestra el código del encabezado, en el se coloco el logo de la empresa. Figura 1.2 Código del encabezado Se coloco el logo de la empresa en la parte del encabezado de la pagina, el cual fue proporcionado por la empresa. Quedando de la manera a como se muestra a continuación. 19

20 Figura 1.3 Logo Velit Cosmética Posteriormente se procedió a trabajar con el área del cuerpo de la página, en donde se insertó una imagen la cual es utilizada en sus campañas publicitarías. Figura 1.4 Visualización del cuerpo de la página. La parte del desplegado de la página es la más cambiante ya que en ella se colocaron imágenes, textos, animaciones, formularios y videos. 20

21 Figura 1.5 Animación. Las imágenes que se colocaron dentro de la página fueron modificadas en el programa Fireworks quedando de esta manera como se ilustra a continuación. Figura 1.6 Productos. 21

22 Se realizó la inserción al contenido de la página imagen y texto para que los productos de la empresa tengan una mejor presentación. Figura 1.7 Combinación de elementos. Se insertó un video con el objetivo de que los clientes conozcan cómo se realizan los productos que la empresa produce y distribuye. Figura 1.8 Video. 22

23 Figura 1.9 Código de la estructura ya integrada. La Figura 1.9 muestra el código del encabezado, cuerpo y desplegado, ya integrados. Se codificaron los estilos se utilizarían en los títulos y encabezados de las paginas. Figura 1.10 Código de los estilos CSS 23

24 En la figura 1.10 se muestra el código del estilo CSS que se utilizaron en los títulos y formato de la página web. Conexión de la base de datos Una vez finalizada la estructura de la página se procedió a realizar la conexión a la base de datos, mediante la inserción de código el manejador de base de datos MySql Server. La base de datos Productos La figura 1.11 muestra el código de la conexión a la base de datos. Figura 1.11 Conexión a la base de datos "Productos" Interfaz Gráfica Se realizó la barra de navegación que proporciona a los usuarios la movilidad de manera rápida por las diferentes páginas que contienen la información relevante de la empresa. Quedando de la siguiente manera. 24

25 Figura 1.12 Barra de navegación. En la figura 1.12 se muestra el código de la barra de navegación o menú de página. Se utilizaron imágenes para su elaboración. Figura 1.13 Código del menú o barra de navegación. Dentro de la página se anexo la utilería del Google Maps con el fin de que los usuarios tengan una referencia de cómo ubicar la empresa. 25

26 Figura 1.14 Google Maps. La página cuenta con un formulario donde los usuarios pueden solicitar información. Figura 1.15 Formulario. 26

27 Prueba de la página Se probó que la página web se mostrara de manera correcta en el navegador, que la base de datos hiciera la debida conexión y que la interfaz gráfica hiciera link a las páginas anexas. Figura 1.16 Pagina Principal. Cierre del proyecto La última etapa del proyecto fue el cierre con la entrega de la página web. 27

28 X. RESULTADOS OBTENIDOS La empresa Velit Cosmética ya cuenta con una página web que le permite la captación de nuevos clientes interesados en comprar sus productos, mantienen una comunicación más efectiva con los clientes existentes, atendiendo las solicitudes de pedidos de manera más rápida. Tienen una imagen profesional que les está permitiendo llegar a nuevos sectores. 28

29 XI. ANÁLISIS DE RIESGO Limitaciones La página web no cuenta con un carrito de compras en línea El dominio es gratuito por un año Las imágenes no son de excelente calidad Obstáculos Falta de interés por parte de los dueños de la empresa. No proporcionar las imágenes a tiempo. 29

30 XII. CONCLUSIONES Gracias a la realización de este proyecto se obtuvieron nuevos conocimientos que serán de gran utilidad en lo venidero, emplear una metodología que proporcione el marco de referencia que debe seguirse para que un proyecto se realice es de suma importancia, ya que así se evitan errores que pueden llevar a que los proyectos no se realicen de manera adecuada o de acuerdo a lo planeado. Se debe tener bien claros los objetivos y alcances que el proyecto tendrá para evitar futuras confusiones por parte de los interesados, cabe señalar que el involucramiento de las personas interesadas en la realización del proyecto son de suma importancia ya que ellos aportan conocimientos y proporcionan la información necesaria para que las fases del proyecto se desarrollen en base a lo planeado. Un proyecto requiere de un esfuerzo significativo que se verá reflejado en los resultados. 30

31 XIII. RECOMENDACIONES Se recomienda que la página web sea actualizada de manera regular. Estar monitoreando el funcionamiento correcto de la página. Mantener el mismo dominio. Agregar a la página el carrito de compra en línea. 31

32 XIV. REFERENCIAS BIBLIOGRÁFICAS ddb1e65a1ab1/347/1/contenido/contenido1/cont1.htm 32