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 2011

3

TABLA DE CONTENIDO

Pág.

INTRODUCCION .................................................................................................... 8

1. PRESENTACIÓN DEL SITIO DE PRÁCTICA ............................................... 9

1.1. RESEÑA HISTÓRICA ................................................................................. 9

1.2. MISIÓN ........................................................................................................ 9

1.3. VISIÓN ........................................................................................................ 9

1.4. POLÍTICA DE CALIDAD ........................................................................... 10

1.5. SERVICIOS QUE PRESTA ....................................................................... 10

1.6. NÚMERO DE EMPLEADOS ..................................................................... 10

1.7. ESTRUCTURA ORGANIZACIONAL ........................................................ 11

2. DEFINICIÓN DE LAS LÍNEAS DE INTERVENCIÓN ................................... 12

3. DIAGNÓSTICO DEL ÁREA DE INTERVENCIÓN O IDENTIFICACIÓN DE LAS NECESIDADES ............................................................................................ 13

4. EJE DE INTERVENCIÓN ............................................................................. 14

4

4.1. DISEÑO WEB ........................................................................................... 14

4.2. IMPLEMENTACIÓN .................................................................................. 14

5. JUSTIFICACION .......................................................................................... 15

6. OBJETIVOS ................................................................................................. 16

6.1. OBJETIVO GENERAL .............................................................................. 16

6.2. OBJETIVOS ESPECÍFICOS ..................................................................... 16

7. MARCO TEÓRICO ....................................................................................... 17

8. DEFINICION OPERACIONAL DE TERMINOS............................................ 19

8.1. PAGINA WEB: .......................................................................................... 19

8.2. MARKETING EN INTERNET .................................................................... 19

8.3. ALOJAMIENTO WEB ............................................................................... 20

8.4. DREAMWEAVER...................................................................................... 20

8.5. HTML ........................................................................................................ 20

8.6. FLASH ...................................................................................................... 21

9. CRONOGRAMA DE ACTIVIDADES ........................................................... 22

5

10. PRESENTACIÓN Y ANÁLISIS DE LOS RESULTADOS ............................ 23

CONCLUSIONES ................................................................................................. 28

RECOMENDACIONES ......................................................................................... 29

REFERENCIAS BIBLIOGRAFIACAS .................................................................. 30

6

LISTA DE ILUSTRACIONES

Pág. ILUSTRACIÓN 1. ORGANIGRAMA ARTECO ................................................................... 11

TABLA 1. CRONOGRAMA DE ACTIVIDADES .................................................................. 22 ILUSTRACIÓN 2. CATALOGO VIRTUAL ......................................................................... 23 ILUSTRACIÓN 3. FILEZILA ARTECO ............................................................................. 24 ILUSTRACIÓN 4. PÁGINA PRINCIPAL "TIENDA VIRTUAL" ARTECO ................................... 25 ILUSTRACIÓN 5. PÁGINA PRINCIPAL GESTIÓN COMERCIAL ........................................... 26 ILUSTRACIÓN 6. DISEÑO NUEVA PÁGINA ..................................................................... 27

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. Palabras Claves: Tienda Virtual, web, decoración, diseño.

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.

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.

1.2. 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.

1.3. 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.

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.

1.5. 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.

1.6. NÚMERO DE EMPLEADOS La empresa cuenta con 6 empleados en nómina, 3 practicantes y 20 empleados indirectos.

11

1.7. ESTRUCTURA ORGANIZACIONAL

Ilustración 1. Organigrama Arteco

Fuente: Elaboracion propia

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.

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.

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.).

4.2. 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.

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 (www.mueblesarteco.com), con el cual quiere darle uso, para sus ventas.

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.

6.2. 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.

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

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.

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.

8.2. 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.

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.

8.4. 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.

8.5. 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 >).

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.

8.6. 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.

22

9. CRONOGRAMA DE ACTIVIDADES

Tabla 1. Cronograma de Actividades

Actividades 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º

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”

Fuente: Elaboración Propia

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 www.mueblesarteco.com, se ingresa al FTP por medio del servidor ftp.piratadog.com y el usuario arteco@piratadog.com, se utiliza un cliente, en este

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

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 www.luceroocampogestioncomercial.com

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.

27

Ilustración 6. Diseño nueva página

Fuente: Elaboración propia

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.

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.

30

REFERENCIAS BIBLIOGRAFIACAS

BELL, Douglas; PARR, Mike. Java para estudiantes. México: Pearson Educación, 2003.

www.w3.org ( febrero 2011 – junio 2011 )