DISEÑO E IMPLEMENTACION DE LA PAGINA WEB ARTECO TIENDA VIRTUAL ANDRÉS MORALES MOSQUERA

Transcripción

1 DISEÑO E IMPLEMENTACION DE LA PAGINA WEB ARTECO TIENDA VIRTUAL ANDRÉS MORALES MOSQUERA UNIVERSIDAD CATÓLICA DE PEREIRA FACULTAD DE CIENCIAS BASICAS E INGENIERIA PROGRAMA DE INGENIERIA DE SISTEMAS Y TELECOMUNICACIONES PRACTICAS ACADÉMICAS PEREIRA 2011

2 DISEÑO E IMPLEMENTACION DE LA PAGINA WEB ARTECO TIENDA VIRTUAL ANDRÉS MORALES MOSQUERA INFORME DE PRÁCTICA ACADÉMICA TUTOR JULIO CESAR CANO RAMÍREZ Ingeniero en Sistemas UNIVERSIDAD CATÓLICA DE PEREIRA FACULTAD DE CIENCIAS BASICAS E INGENIERIA PROGRAMA DE INGENIERIA DE SISTEMAS Y TELECOMUNICACIONES PRACTICAS ACADÉMICAS PEREIRA

3 TABLA DE CONTENIDO Pág. INTRODUCCION PRESENTACIÓN DEL SITIO DE PRÁCTICA RESEÑA HISTÓRICA MISIÓN VISIÓN POLÍTICA DE CALIDAD SERVICIOS QUE PRESTA NÚMERO DE EMPLEADOS ESTRUCTURA ORGANIZACIONAL DEFINICIÓN DE LAS LÍNEAS DE INTERVENCIÓN DIAGNÓSTICO DEL ÁREA DE INTERVENCIÓN O IDENTIFICACIÓN DE LAS NECESIDADES EJE DE INTERVENCIÓN

4 4.1. DISEÑO WEB IMPLEMENTACIÓN JUSTIFICACION OBJETIVOS OBJETIVO GENERAL OBJETIVOS ESPECÍFICOS MARCO TEÓRICO DEFINICION OPERACIONAL DE TERMINOS PAGINA WEB: MARKETING EN INTERNET ALOJAMIENTO WEB DREAMWEAVER HTML FLASH CRONOGRAMA DE ACTIVIDADES

5 10. PRESENTACIÓN Y ANÁLISIS DE LOS RESULTADOS CONCLUSIONES RECOMENDACIONES REFERENCIAS BIBLIOGRAFIACAS

6 LISTA DE ILUSTRACIONES Pág. ILUSTRACIÓN 1. ORGANIGRAMA ARTECO TABLA 1. CRONOGRAMA DE ACTIVIDADES ILUSTRACIÓN 2. CATALOGO VIRTUAL ILUSTRACIÓN 3. FILEZILA ARTECO ILUSTRACIÓN 4. PÁGINA PRINCIPAL "TIENDA VIRTUAL" ARTECO ILUSTRACIÓN 5. PÁGINA PRINCIPAL GESTIÓN COMERCIAL ILUSTRACIÓN 6. DISEÑO NUEVA PÁGINA

7 SINTESIS SINTESIS Lo que se pretende con este trabajo, es dar a conocer los productos y la variada gama de tendencias de diseño y decoración de espacios, por medio de la implementación de un portal web, donde el cliente interactuara. Detallando las herramientas manejadas para llevar a cabo la etapas definiendo los objetivos y el diseño que se efectuara para su solución. Obteniendo como logro final un portal web Tienda Virtual donde los usuarios podrán acceder a sus productos de manera más interactiva y teniendo la oportunidad de compra en línea. ABSTRACT The aim with this paper is to present products and variety of design trends and decorating spaces, through the implementation of a web portal where customers interact. Detailing handled tools to carry out the steps defining the objectives and design shall be effected for settlement. Obtaining as a final achievement website "Virtual Store" where users can access their products more interactive and have the opportunity to buy online. Keywords: Store, Web, decor, design. Palabras Claves: Tienda Virtual, web, decoración, diseño. 7

8 INTRODUCCION En la actualidad el diseño de espacios e interiores han ido conquistando con gran avance a los mercados muy selectos es por esto que Muebles Arteco, busca llegar a este gran público no solo por medio de las ventas presenciales, si no llegar a ellos por medio de las nuevas alternativas tecnológicas que nos ofrece día a día nuestro agitado mundo. Por eso, durante el inicio del primer semestre del 2011 Muebles Arteco quiso incursionar en la idea de llevar sus productos al público también a través de la web, desarrollando una plataforma web o pagina web a lo cual ellos denominaron TIENDA VIRTUAL en donde ellos desean ver toda su amplia gama de productos y anexo a eso dar la posibilidad a los clientes de poder llevar a cabo sus compra en línea. Es importante aclarar que la parte principal del proceso es la realización de la pagina web Tienda Virtual Muebles Arteco, pero también se hicieron algunos ítem diferentes al primer punto, como fueron actualización de la Pagina web, Diseño y desarrollo de la pagina web LUCERO OCAMPO GESTIÓN COMERCIAL, verificación constante de la red local de Arteco, y estudios preliminares sobre certificación SSL, para dejar las bases para la continuidad al proceso de compra en línea de la TIENDA VIRTUAL.

9 1. PRESENTACIÓN DEL SITIO DE PRÁCTICA 1.1. RESEÑA HISTÓRICA Muebles Arteco es una empresa ubicada en la ciudad de Pereira fundada en el año de 2004 por Lucero Ocampo Arboleda y Carlos Alberto Echeverry Ángel, ambos con 25 años de experiencia en el sector de los muebles en la ciudad inicialmente nació como una empresa ubicada en el municipio de Dosquebradas dedicada a la fabricación de cocinas, closets y otros muebles de línea carpintería para el hogar, con el correr del tiempo se fueron incluyendo mas referencias de muebles tanto nacionales como importados. Esta empresa es creada con el fin de satisfacer las necesidades de las personas que quieren en el hogar las nuevas tendencias y estilos de diseño interior, que quieren adecuar los espacios de acuerdo a su estilo propio y personalidad. Su política Principal es entregar un mueble de calidad al precio más competitivo del mercado y adaptado tanto a los espacios como al gusto particular de cada cliente. Arteco tiene como misión ser una empresa diseño de interiores y mobiliarios para hogar y oficina de alta calidad siempre a la vanguardia a través de diseños innovadores y funcionales, que permita a sus clientes divertirse, soñar, descansar y trabajar MISIÓN Es una empresa de Diseño Interior dedicada a satisfacer las necesidades por medio de diseños innovadores, funcionales y vanguardistas. Ayudando a nuestros clientes en el ahorro de tiempo y dinero VISIÓN Ser una empresa líder en diseño interior posicionando un nombre que sea sinónimo de buen gusto con resultados reconocidos por su calidad y duración en el mercado nacional e internacional, buscando la apertura de nuevos mercados, introduciendo líneas de importación garantizado la calidad bajo las normas técnicas aplicables y abriendo nuevas sedes de negocio. 9

10 1.4. POLÍTICA DE CALIDAD Diseña y fabrica muebles para interiores de alta calidad los cuales son garantizados; se mantiene una exigente selección de proveedores quienes ofrecen materias primas de óptima calidad; se cuenta con personal capacitado. La mejora continua es nuestra constante con el fin de lograr la satisfacción de nuestros clientes a quienes se les ofrece precios justos y cumplimiento en tiempos de entrega SERVICIOS QUE PRESTA Arteco Diseño, Muebles y Decoración es una empresa dedicada al diseño, fabricación y venta de Muebles para el hogar ofreciendo un servicio integral de Diseño de espacios interiores NÚMERO DE EMPLEADOS La empresa cuenta con 6 empleados en nómina, 3 practicantes y 20 empleados indirectos. 10

11 1.7. ESTRUCTURA ORGANIZACIONAL Ilustración 1. Organigrama Arteco Fuente: Elaboracion propia 11

12 2. DEFINICIÓN DE LAS LÍNEAS DE INTERVENCIÓN De acuerdo a las necesidades encontradas por la organización, la práctica profesional se ubica en el Diseño y Soporte de la Pagina Web de la empresa. Lo cual hace parte de la línea de Sistemas de información. 12

13 3. DIAGNÓSTICO DEL ÁREA DE INTERVENCIÓN O IDENTIFICACIÓN DE LAS NECESIDADES Para saber el estado actual del área de intervención de la práctica se utilizaran unas técnicas e instrumentos, los cuales permitirán obtener con éxito los requerimientos que la empresa quiere para su TIENDA VIRTUAL. Las técnicas aplicadas son la observación directa, opiniones de expertos y una revisión documental, en donde se ven plasmadas la interactividad que ARTECO quiere para sus ventas. Una vez definida la problemática, se ve la necesidad de basarse en la proyección de Arteco, la cual se basa en ser en la Empresa pionera en diseño y decoración de espacios, todo esto con la ayuda que la pagina web, dará para que dicha proyección se lleve a cabo. 13

14 4. EJE DE INTERVENCIÓN Partiendo de las necesidades de la empresa Arteco Muebles, diseño y decoración, se determino que los ejes de intervención definidos para el periodo de práctica teniendo en cuenta los requerimientos y prioridades para el mejoramiento de su proyección son: 4.1. DISEÑO WEB Se hará un diseño web agradable, interactivo y amable con el usuario, de tal forma que este sienta que está en nuestra vitrina de productos, pero sin moverse de su sitio (Hogar, Trabajo etc.) IMPLEMENTACIÓN Una vez creado, el sitio web, en este caso la TIENDA VIRTUAL, debe ser publicado en algún Servidor Web que se encuentre conectado a la red mundial de Internet. Arteco cuanta con este servicio ya, por tal motivo la empresa quiere darle el uso adecuado a este, logrando así un beneficio para sus ventas por medio de la red. 14

15 5. JUSTIFICACION Arteco Muebles, Diseño y decoración es una empresa la cual se dedica al diseño y decoración de espacios, en donde el cliente podrá encontrar la mejor asesoría para el diseño de sus entornos, es por tal motivo que Arteco quiere llegar a mas clientes, por medio de la red, ya que Arteco sabe, que en la red hay un gran mercado por explorar. Arteco Muebles, Diseño y decoración, cuenta ya con un dominio ( con el cual quiere darle uso, para sus ventas. 15

16 6. OBJETIVOS 6.1. OBJETIVO GENERAL Diseño e implementación de la Pagina Web TIENDA VIRTUAL de Arteco Muebles diseño y decoración OBJETIVOS ESPECÍFICOS Desarrollar el diseño adecuado para la interactividad que la empresa exige para la página web. Implementar el servicio web requerido para la página. Indagar sobre el sistema de información de Arteco. 16

17 7. MARCO TEÓRICO Durante el proceso de diseño e implementación de la pagina web Tienda Virtual en la duración de la práctica profesional, se utilizaran diversos programas y aplicaciones para el buen desarrollo de este. También se baso en las ultimas normas para el diseño e implementación web, de las cuales nos apoyamos en el portal W3C. La pagina web se diseño con lenguajes HTML y CSS. HTML es el lenguaje para describir la estructura de las páginas Web. HTML da a los autores de los medios para: Publicar documentos en línea con los títulos, textos, tablas, listas, fotos, etc. Recuperar la información en línea a través de enlaces de hipertexto, en el tecleo de un botón. Diseño de formularios para realizar transacciones con servicios remotos, para su uso en la búsqueda de información, hacer reservas, pedir productos, etc. Propagación de inclusión / hojas, videoclips, clips de sonido y otras aplicaciones directamente en sus documentos. CSS es el lenguaje para describir la presentación de páginas Web, incluyendo los colores, el diseño, y las fuentes. Permite adaptar la presentación a los diferentes tipos de dispositivos, tales como pantallas grandes, pequeñas pantallas o impresoras. CSS es independiente de HTML y se puede utilizar con cualquier lenguaje de marcado basado en XML. La separación de HTML de CSS hace que sea más fácil de mantener los sitios, las hojas de estilo a través de compartir páginas y páginas a medida para diferentes entornos. Esto se conoce como la separación de la estructura (o: el contenido) de la presentación. Se trabajaron gráficos de tipo PNG, JPG y CSS: PNG: Portable Network Graphics ( PNG ) es un formato estático para la pérdida, y bien comprimido portátiles de almacenamiento y el intercambio 17

18 de imágenes raster (mapas de bits). Cuenta con control de color rico, con color indexado, el apoyo a escala de grises, color verdadero y la transparencia y el alfa-canal. PNG está diseñado para la Web, con Streaming y progresiva las capacidades de procesamiento. Cuenta con el apoyo doquier en los navegadores web, herramientas de creación gráfica, juegos de herramientas de imagen, y en otras partes de la cadena de herramientas creativas. Los archivos PNG tienen la extensión ". PNG" o ". png" y deben ser implementados mediante los medios de comunicación de tipo "image / JPEG". PNG se pueden utilizar con HTML, CSS, SVG, la API de lona, y WebCGM. 18

19 8. DEFINICION OPERACIONAL DE TERMINOS 8.1. PAGINA WEB: Una página de Internet o página Web es un documento electrónico adaptado particularmente para el Web, 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 cualesquier persona que se conecte a esta red mundial de comunicaciones y que cuente con los permisos apropiados para hacerlo. Una página Web es la unidad básica del World Wide Web. Una página Web tiene la característica peculiar 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. Estos documentos pueden ser elaborados por los gobiernos, instituciones educativas, instituciones públicas o privadas, empresas o cualquier otro tipo de asociación, y por las propias personas en lo individual MARKETING EN INTERNET Una variedad de la mercadotecnia que combina principios convencionales de marketing con las facilidades interactivas propias del Internet. El propósito es comercializar productos y servicios que satisfagan las necesidades de los clientes. Los especialistas en mercadotecnia en Internet diseñan programas y campañas para atraer a clientes potenciales hacia el Sitio Web y convencerlos de registrar sus nombres o adquirir productos. Se trata de un conjunto de operaciones coordinadas que contribuyen al desarrollo de las ventas de un producto o servicio a través de Internet. Se basa en conceptos tanto de tecnologías de información como de mercadotecnia. 19

20 8.3. ALOJAMIENTO WEB Hosting (alojamiento o también conocido como hospedaje web, alojamiento web, web site hosting, web hosting o webhosting) es un negocio que consiste en alojar, servir, y mantener archivos para uno o más sitios web. Más importante que el espacio del ordenador que se proporciona para los archivos del sitio web es la conexión rápida a Internet DREAMWEAVER Es una aplicación en forma de estudio destinado a la construcción y edición de sitios y aplicaciones web basados en estándares. Es el más utilizado en el sector del diseño y la programación web gracias a su funcionalidad y a su integración con otras herramientas y programas, como Adobe Flash; actualmente, también por el soporte de los estándares del World Wide Web Consortium. La principal base de este editor es su gran poder de ampliación y personalización del mismo ya que con este programa, las tareas de insertar un hipervínculo o una imagen se realizan con Java script-c, que ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa sean rutinas de Java script que le permite ser un programa muy fluido y que programadores y editores web hagan las extensiones que deseen. Esto es una ventaja de este programa ya que permite que cualquiera las pueda descargar e instalar, ofreciendo funciones añadidas a la aplicación. Adobe Dreamweaver permite pre visualizar las páginas web con la mayoría de los navegadores Web. Además, dispone de herramientas de administración de sitios dirigidas a principiantes, como reemplazar líneas de código y texto HTML HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla de HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto. EL HTML permite describir la estructura y el contenido en forma de texto, además de complementar el texto con objetos tales como imágenes. Este lenguaje se escribe mediante etiquetas, que aparecen especificadas por corchetes angulares (< y >). 20

21 Por otra parte, el HTML permite incluir scripts (por ejemplo, de Java script), códigos que pueden modificar el comportamiento de los navegadores web y de otros procesadores de HTML. Los archivos de formato HTML utilizan la extensión.htm o.html FLASH Es una aplicación en forma de estudio de animación que trabaja sobre fotogramas y está destinado a la producción y entrega de contenido interactivo. El lenguaje que utiliza es el ActionScript, que está orientado a objetos que permiten ampliar las funciones que el programa ofrece en sus paneles de diseño, además de la creación de animaciones o películas con gran contenido interactivo. La extensión de los archivos flash.swf puede aparecer en una página web para ser vista en un navegador. No obstante, este tipo de archivos suele aparecer como animaciones en páginas web, integrándose en otros programas como el Adobe Dreamweaver y en sitios web multimedia. 21

22 9. CRONOGRAMA DE ACTIVIDADES Tabla 1. Cronograma de Actividades Actividades Adaptación Reconocimiento de los requerimientos de la empresa Elaboración de plan de diseño web Diseño preliminar de la pagina web Diseño de la pagina web Diseño de Catálogos Virtuales Investigación sobre certificados SSL ( Compra en línea) Red Arteco Diseño Web Pagina Gestión Comercial Soporte Tienda Virtual Arteco Rediseño Nueva imagen Tienda Virtual Febrero Marzo Abril Mayo Junio 1º 2 º 3 º 4 º 1º 2º 3º 4º 1º 2º 3º 4º 1º 2º 3º 4º 1º 2º 3º 4º Fuente: Elaboración Propia 22

23 10. PRESENTACIÓN Y ANÁLISIS DE LOS RESULTADOS Para dar solución a las actividades planteadas en el cronograma con el fin de lograr el desarrollo de la Pagina web Tienda Virtual de Arteco se realizaron varias actividades, entre ellas: La primera fue la documentación y consistió en la adaptación y en el reconocimiento de los requerimientos presentados por la empresa para la elaboración de la pagina web, teniendo un tiempo de tres semanas donde se pudo observar y analizar el diseño de la aplicación web. Una vez cumplida esta etapa, se procedió a la elaboración del plan de diseño web y a un diseño preliminar de la página. Esto se hizo en dos semanas, en donde se interpretaron los requerimientos previamente definidos. Posteriormente se ejecutaron las actividades correspondientes para el diseño en general de la página web, y el diseño de los catálogos virtuales de los productos ofrecidos por Arteco. Ilustración 2. Catalogo Virtual Fuente: Elaboración propia Se procede a subir la página, a dar ingreso a esta a los usuarios, por medio de la dirección se ingresa al FTP por medio del servidor ftp.piratadog.com y el usuario arteco@piratadog.com, se utiliza un cliente, en este 23

24 caso FileZila, por medio del cual se gestiona la Tienda Virtual. Cuarta semana de abril. Ilustración 3. FileZila Arteco Fuente: Elaboración propia 24

25 Ilustración 4. Página Principal "Tienda Virtual" Arteco Fuente: Elaboración propia Se entra en el diseño de la página de Lucero Ocampo, Gestión Comercial, dejando definidos los requerimientos para esta. Se empieza entonces a la elaboración de esta página, empezando por la adquisición del dominio y el hosting, quedando para el primero 25

26 Ilustración 5. Página principal Gestión Comercial Fuente: Elaboración propia En la segunda semana de mayo, después de varias reuniones, se tomo la decisión de remodelar y mostrar la nueva imagen de la Tienda Virtual, se entra en el diseño y se hace la nueva estructura de la página, buscando siempre que esta sea lo más interactiva en su interfaz para los usuarios. 26

27 Ilustración 6. Diseño nueva página Fuente: Elaboración propia 27

28 CONCLUSIONES Es importante brindar siempre un buen soporte a las páginas web, ya que Arteco y Gestión Comercial, son empresas que siempre evolucionan e innovan constantemente. Los requerimientos definidos en la etapa de análisis y recolección de la información, es el papel más importante para la construcción diseño e implementación de la pagina web Tienda Virtual. Por medio del estudio e investigación sobre compra en línea en páginas web se deja abierta la posibilidad de entrar en la implementación de esta en la Tienda Virtual. Se puede concluir que el cronograma planteado al inicio del proceso de práctica se cumplió a cabalidad, ya que se cumplieron los objetivos y expectativas planteadas al inicio de dicho proceso. 28

29 RECOMENDACIONES Durante el proceso de práctica, se desarrollaron, en su totalidad los procesos indicados previamente al inicio de esta, dando como resultado una página interactiva, amigable y agradable con los usuarios que la visitan, así se obtuvo un resultado satisfactorio para la empresa y el practicante. Como recomendaciones se aconseja tener un orden apropiado para el montaje de archivos y documentos en el servidor de la página web, estar siempre innovando y cambiando la apariencia de la página para que el usuario tenga una buena interactividad con ella. Implementar la compra en línea, para que se cumpla a cabalidad con el objetivo inicial del la empresa, acerca de mas que crear una página web, sea una vitrina de ventas. La red de internet del almacén debe estar separada de otros servicios (Datafono, Alarma, Teléfono e Internet), que entren a crear conflictos con esta, ocasionando inconvenientes con la el servicio de internet, se recomienda solicitar a la empresa que brinda el servicio, separar estos servicios de tal manera que el Internet entre por un solo cable. 29

30 REFERENCIAS BIBLIOGRAFIACAS BELL, Douglas; PARR, Mike. Java para estudiantes. México: Pearson Educación, ( febrero 2011 junio 2011 ) 30