4

UNIVERSIDAD CATLICA DE EL SALVADOR FACULTAD DE INGENIERA Y ARQUITECTURA

PROYECTO:

DISEO Y DESARROLLO DE SITIOS WEB AUTOADMINISTRABLES PARA EMPRESAS FILIALES DE LA CMARA DE COMERCIO E INDUSTRIA DE EL SALVADOR

PRESENTADO POR: LUIS ALONSO MAGAA SALAS

PARA OPTAR AL TTULO DE: INGENIERO EN SISTEMAS INFORMTICOS

SANTA ANA, SEPTIEMBRE DE 2010

UNIVERSIDAD CATLICA DE EL SALVADOR AUTORIDADES UNIVERSITARIAS

MONSEOR Y LICENCIADO FRAY ROMEO TOVAR ASTORGA

RECTOR

MSTER MOISS ANTONIO MARTNEZ ZALDVAR

VICERRECTOR

MSTER CSTULO AFRANIO HERNNDEZ ROBLES

SECRETARIO GENERAL

ARQUITECTO JULIO ENRIQUE NJERA MARTNEZ

DECANO DE LA FACULTAD DE INGENIERA Y ARQUITECTURA

SANTA ANA, SEPTIEMBRE DE 2010

i6

AGRADECIMIENTOS

A Dios Todopoderoso: Por ser mi Seor y Salvador, con eterna gratitud por cada una de sus bendiciones.

A mis padres Luis Alonso Magaa y Gloria Estela Salas: Gracias a su esfuerzo y sacrificio me fue posible culminar esta meta, que representa la razn de mis deseos de superacin.

A mis hermanas Jennifer Andrea y Laura Michelle Magaa Salas: Que siempre me han dado su amor fraternal.

A mi novia Leonor Raquel Rodrguez Orellana: Por apoyarme en todo momento con su amor de pareja e impulsarme da a da a seguir adelante.

A mis compaeros de trabajo y amigos: Por sus muestras de cario y apoyo a lo largo de todos estos aos de estudio.

A la Universidad Catlica de El Salvador: Por darme la oportunidad de poder adquirir conocimientos y haberme permitido realizar mi proyecto de graduacin.

A la Cmara de Comercio e Industria de El Salvador, Filial Santa Ana: Por haberme brindado la oportunidad de incluirme en su proyecto con las empresas filiales y permitirme as culminar con mi proceso de formacin universitaria.

NDICE DE CONTENIDOS NDICE DE FIGURAS .................................................................................................... 6 NDICE DE ANEXOS ..................................................................................................... 7 1. INTRODUCCIN ....................................................................................................... 8 2. DESCRIPCIN DEL PROYECTO DESARROLLADO ........................................ 9 2.1 Investigacin preliminar ........................................................................................ 11 2.2 Determinacin de los requerimientos de las empresas Arte Madera y Dipol s.a. de c.v. ........................................................................................................................... 11 2.3 Aspectos tcnicos del proyecto ............................................................................. 13 2.3.1 Estudio de factibilidad ................................................................................... 13 2.3.2 Hardware utilizado ........................................................................................ 15 2.3.3 Software utilizado.......................................................................................... 15 2.3.4 Recursos utilizados para la implementacin. ................................................ 18 2.4 Anlisis de los sitios Web. ................................................................................ 18 2.4.1 Definicin de secciones y contenido de los sitios. ....................................... 18 2.4.2 Mapa de los sitios web ................................................................................... 21 2.4.3 Anlisis del diseo de la estructura de los sitios ............................................ 22 2.5 Diseo y desarrollo de los sitios web. ................................................................... 27 2.5.1 Instalacin y configuracin de herramientas y software. ............................... 28 2.5.2 Instalacin y configuracin de complementos del CMS................................ 28 2.5.3 Creacin de las plantillas del diseo de los sitios. ......................................... 29 2.5.4 Diseo de banners y logos de los sitios. ......................................................... 29 2.5.5 Creacin de la pgina principal y dems secciones de los sitios. .................. 33 2.5.6 Diseo de los panel de administracin de los sitios. ...................................... 34 2.5.7 Verificar compatibilidad entre distintos navegadores. ................................... 34

2.6 Implementacin de los sitios web ......................................................................... 35 2.6.1 Cotizacin y compra de hosting y dominio .................................................... 35 2.6.2 Configuracin del CMS y complementos en el hosting. ................................ 39 2.6.3 Publicacin de los sitios, implementacin de seguridad y prueba de los sitios web. .................................................................................................................................. 39 2.6.4 Capacitacin al personal de las empresas ....................................................... 40 3. BIBLIOGRAFA ........................................................................................................ 43

NDICE DE FIGURAS Figura 1. Mapa del sitio Web de Dipol S.A. de C.V........................................................ 21 Figura 2. Mapa del sitio Web de Arte Madera. ................................................................ 22 Figura 3. Estructura del sitio Dipol S.A. de C.V.............................................................. 23 Figura 4. Estructura del sitio Arte Madera. ...................................................................... 24 Figura 5. Logo original de Dipol S.A de C.V. ................................................................. 30 Figura 6. Lienzo de digitalizacin de logo Dipol S.A. de C.V. . ..................................... 30 Figura 7. Capa 1 logo Dipol S.A. de C.V.. ...................................................................... 31 Figura 8. Capa 2 logo Dipol S.A. de C.V.. ...................................................................... 31 Figura 9. Logo digitalizado de Dipol S.A. de C.V. .......................................................... 31 Figura 10. Logo original de Arte Madera ........................................................................ 31 Figura 11. Lienzo de digitalizacin de logo de Arte Madera .......................................... 32 Figura 12. Capa 1 logo Arte Madera................................................................................ 32 Figura 13. Capa 2 logo Arte Madera................................................................................ 32 Figura 14. Capa 3 logo Arte Madera................................................................................ 32 Figura 15. Capa 4 logo Arte Madera................................................................................ 32 Figura 16. Capa 5 logo Arte Madera................................................................................ 32 Figura 17. Logo digitalizado Arte Madera. ...................................................................... 33 Figura 18. Navegacin del sitio de Arte Madera en Internet Explorer 6.0 ...................... 35

NDICE DE ANEXOS

Anexo 1. Glosario ............................................................................................................ 47 Anexo 2. Cronograma propuesto. .................................................................................... 50 Anexo 3. Cronograma realizado. ..................................................................................... 52 Anexo 4. Formulario para estudio de factibilidad. ........................................................... 54 Anexo 5. Instalacin de gestor de contenidos y servidor XAMPP. ................................. 56 Anexo 6. Plantilla Joomla Serie2Kostenlos. .................................................................... 60 Anexo 7. Diseo de plantilla de los sitios ........................................................................ 61 Anexo 8. Banners de los sitios ......................................................................................... 62 Anexo 9. Pgina principal y dems secciones de los sitios.............................................. 63 Anexo 10. Diseo del panel de administracin de los sitios ............................................ 69 Anexo 11. Configuracin y complementos del CMS en el hosting ................................. 70 Anexo 12. Manual de usuario: www.dipolsa.com ........................................................... 71

1. INTRODUCCIN

En la actualidad se est consciente que los avances tecnolgicos y cientficos que ha logrado la humanidad han sido el fruto de la inteligencia, la creatividad y la voluntad del hombre. Siendo uno de esos revolucionarios avances el Internet.

En sus inicios el Internet tuvo un origen militar cuando su idea original fue el poder transmitir informacin de manera segura entre varios computadores, aos ms tarde el Internet se comercializ y se convirti en la red ms grande del mundo. Su uso se ha vuelto una herramienta indispensable en muchas reas y actividades del ser humano, como lo es actualmente en las comunicaciones y los negocios.

El Internet es considerado como uno de los principales medios de comunicacin masivo, de los ms utilizados y de ms rpido crecimiento. De igual manera muchas empresas y negocios utilizan el Internet para promocionar sus servicios, dar a conocer sus

actividades e informacin permitiendo as tener un canal de comunicacin interactivo con sus clientes.

Es as como las grandes empresas a nivel mundial conscientes de estos beneficios, incorporan como parte de sus estrategias de mercadeo sus propios sitios Web, a fin de buscar un mayor crecimiento y desarrollo, contratando personas externas para la creacin y mantenimiento de los mismos; a diferencia de las pequeas y medianas empresas que debido al recurso econmico dudan en invertir en este tipo de tecnologas.

En este contexto, el presente proyecto busc apoyar a este tipo de empresas con la creacin de sus sitios web autoadministrables, en el cual son sus empleados quienes realizan el mantenimiento y actualizacin de la informacin.

2. DESCRIPCIN DEL PROYECTO DESARROLLADO

El desarrollo de proyectos de sistemas computacionales, como las pginas web, deben tener la certeza de que se logren dos objetivos principales: que sea un sistema correcto y que est correcto el sistema. Ningn sistema que deje satisfacer ambos objetivos es completamente til para la gerencia u organizacin. Para dar el mayor cumplimiento de los objetivos en todo proyecto se debe realizar una planificacin previa, para el caso del proyecto desarrollado se bas en el ciclo de vida clsico del desarrollo de sistemas, el cual es el conjunto de actividades que los analistas, diseadores y usuarios realizan para desarrollar e implementar un sistema de informacin. El mtodo del ciclo de vida para el desarrollo de sistemas consta de 6 fases:

a). Investigacin preliminar: La solicitud para recibir ayuda de un sistema de informacin puede originarse por varias razones: sin importar cuales sean stas, el proceso se inicia siempre con la peticin de una persona.

b). Determinacin de los requerimientos del sistema: El aspecto fundamental del anlisis de sistemas es comprender todas las facetas importantes de la parte de la empresa que se encuentra bajo estudio. Los analistas, al trabajar con los empleados y administradores, deben estudiar los procesos de una empresa para dar respuesta a las siguientes preguntas clave:

Qu es lo que hace? Cmo se hace? Con que frecuencia se presenta? Qu tan grande es el volumen de transacciones o decisiones? Cul es el grado de eficiencia con el que se efectan las tareas? Existe algn problema? Qu tan serio es? Cul es la causa que lo origina?

10

c). Diseo del sistema: El diseo de un sistema de informacin produce los detalles que establecen la forma en la que el sistema cumplir con los requerimientos identificados durante la fase de anlisis. Los especialistas en sistemas se refieren, con frecuencia a esta etapa, como: diseo lgico en contraste con la del desarrollo del software, a la que denominan diseo fsico.

d). Desarrollo del software: Los encargados de desarrollar software pueden instalar software comprobando a terceros o escribir programas diseados a la medida del solicitante. La eleccin depende del costo de cada alternativa, del tiempo disponible para escribir el software y de la disponibilidad de los programadores.

e). Prueba de sistemas: Durante la prueba de sistemas, el sistema se emplea de manera experimental para asegurarse de que el software no tenga fallas, es decir, que funciona de acuerdo con las especificaciones y en la forma en que los usuarios esperan que lo haga.

f). Implantacin y evaluacin: La implantacin es el proceso de verificar e instalar nuevo equipo, entrenar a los usuarios, instalar la aplicacin y construir todos los archivos de datos necesarios para utilizarla. Una vez instaladas, las aplicaciones se emplean durante muchos aos. Sin embargo, las organizaciones y los usuarios cambian con el paso del tiempo, incluso el ambiente es diferente con el paso de las semanas y los meses.

El presente proyecto fue desarrollado en un tiempo de seis meses dividido en fases y actividades mensuales basado en el cumplimiento del ciclo de vida clsico del desarrollo de sistemas. Ambos sitios fueron desarrollados de manera paralela, es decir, que tanto su diseo, desarrollo e implementacin se elaboraron simultneamente en sus fases segn el cronograma propuesto.

11

2.1 Investigacin preliminar

El proyecto desarrollado fue una peticin de parte de la Cmara de Comercio e Industria de El Salvador a la Universidad Catlica de El Salvador (UNICAES), quien realiz la propuesta a los estudiantes. Se procedi en contactar al encargado del proyecto en la Cmara de Comercio e Industria de El Salvador para investigar en qu consista y conocer las empresas beneficiadas, que para el caso se asignaron las empresas Dipol s.a.de c.v. y Arte Madera.

2.2 Determinacin de los requerimientos de las empresas Arte Madera y Dipol s.a. de c.v. Se realizaron diversas visitas a las empresas Dipol S.A de C.V. y Arte Madera en las cuales se conocieron a los dueos de las empresas, a los contactos durante el desarrollo del proyecto y a las actividades a que stas se dedican, as como tambin se identificaron y definieron los requerimientos de cada sitio web y lo que deseaban publicar en ellos. A continuacin un detalle por cada empresa:

Dipol s.a. de c.v.

Se visit la empresa y se entrevist a los Sres. Manuel de Jess Polanco Flores y Jorge Alfaro; este ltimo fue el contacto en el desarrollo de todo el proyecto. Al entrevistar a los seores Polanco y Alfaro se conoci que el rubro de la empresa es una peletera con ventas, como: suelas, pieles, cueros, etc.; tanto a clientes nacionales como internacionales. Ellos deseaban tener un sitio web amigable y del agrado de sus

visitantes, con una presentacin profesional y moderna, mens accesibles y sobre todo con bajo costo de inversin y una manera fcil de administrar y actualizar.

Detallaron adems, sus requerimientos de la siguiente manera:

12

Dar a conocer a sus clientes de una manera detallada los productos que su empresa ofrece. Mostrar de alguna manera los eventos que peridicamente realizan. Publicar ofertas mensuales o productos en liquidacin. Un control de visitantes del sitio. Informacin de su empresa, como: historia, horarios de atencin, ubicacin, noticias, etc. Un registro completo de sus clientes. Que sus clientes realicen pedidos en lnea. Cuentas de correo electrnico para sus empleados con el nombre de su empresa. Un formulario donde los visitantes puedan dejar un comentario o sugerencia.

Arte Madera

En la visita de la segunda empresa se entrevist al Sr. Carlos Chvez, dueo y contacto de Arte Madera; al entrevistar al Sr. Chvez se conoci que el rubro de su empresa es la fabricacin y venta de muebles de madera, como: comedores, tocadores, chineros, entre otros muebles. Su visin era tener un sitio donde sus clientes pudieran apreciar su arte, y a la vez tuviera un estilo que se caracterizara por la madera. Adems de poderla actualizar de manera fcil y con el menor costo de inversin. As defini los siguientes requerimientos:

Un catlogo de productos por categoras. Informacin general de su empresa. Un buzn de sugerencias para sus visitantes. Anuncios que muestren las ofertas ms recientes. Apreciar el nmero de personas que visitan la pgina. Cuentas de correo electrnico para empleados.

13

2.3 Aspectos tcnicos del proyecto

2.3.1 Estudio de factibilidad Para poder desarrollar e implementar el proyecto, fue necesario realizar un estudio de factibilidad para conocer que tan viable era para las empresas, es decir, si disponan de las herramientas y recursos tanto tecnolgicos como humanos para su implementacin. Para ello se realiz un estudio utilizando como instrumento un cuestionario con preguntas cerradas y abiertas (ver anexo 4), contestadas por los encargados de cada empresa. A continuacin se detallan los resultados:

Factibilidad tcnica

Para el mantenimiento y actualizacin de los sitios web autoadministrables desarrollados nicamente, es necesario tener una computadora y conexin a Internet, debido que todo el diseo y contenido del sitio est alojado en el servidor web contratado; segn informacin obtenida por el estudio ambas empresas cumplen con los aspectos tcnicos necesarios, como se puede apreciar en el siguiente cuadro:

Empresa Descripcin Total de computadoras Procesador RAM Disco duro Velocidad de Internet

Arte Madera

Dipol s.a de c.v.

1 de escritorio Intel Celeron CPU 2.53 GHz 512 MB 80 GB 128 Kbps

3 Laptops y 9 de escritorio Pentium 4 CPU 2.4 GHz 512 MB 40 GB 512 Kbps

14

Factibilidad operacional

Debido a que los sitios web creados son autoadministrables, el mantenimiento y actualizacin del contenido es realizado por el personal de la empresa y gracias a que el sistema de administracin es sencillo e intuitivo para su fcil manejo, nicamente es necesario que las personas tengan conocimientos bsicos en computacin. Segn informacin obtenida por el estudio ambas empresas cuentan con el personal capacitado para realizar dichas tareas.

Arte Madera

Dentro de la empresa utilizan nicamente como programa informtico Microsoft Office 2003, as mismo cuentan con tres personas con nivel intermedio en conocimientos informticos. Por lo que estn aptos para la administracin y manejo del sitio web.

Dipol s.a. de c.v.

Dentro de la empresa utilizan varios programas informticos utilizados por personal de la empresa, entre estos estn: CorelDraw 14, Microsoft Office, Photoshop, Gimp, Skype, Visual FoxPro. Adems, de tener 4 personas con conocimientos intermedios y 12 personas con conocimientos bsicos.

Factibilidad econmica

Los sitios web autoadministrables creados han sido desarrollados en software libre, los cuales son gratuitos. Tampoco se incurri en mayores gastos para su implementacin ya que no fue necesario la compra de ningn servidor, una direccin IP pblica, muchos menos la contratacin de un proveedor de servicios de Internet adicional del que ya se cuenta. Toda la implementacin del sitio se hizo a travs de un servidor web (Web Hosting, en ingls) y un dominio, el cual fue contratado y costeado por cada empresa.

15

Los representantes de ambas empresas estuvieron totalmente de acuerdo en realizar la inversin.

2.3.2 Hardware utilizado Para todo el desarrollo del proyecto se utiliz una computadora porttil con las siguientes caractersticas:

Marca: Modelo: Sistema operativo: Procesador: RAM: Disco duro:

HP HP Pavilion dv6 Notebook PC Windows Seven Intel Core 2 Duo CPU T6500 2.10 GHz 4 GB 320 GB

El equipo detallado anteriormente es de propiedad del pasante por lo que las empresas no incurrieron en ningn gasto.

2.3.3 Software utilizado

SOFTWARE Gestor de Contenidos Joomla 1.5.15

DESCRIPCIN
Joomla es un sistema de gestin de contenidos, y entre sus principales

OBJETIVO

virtudes est la de permitir editar el Software que se utiliz contenido de un sitio web de manera para el diseo y desarrollo sencilla. Es una aplicacin de cdigo de ambos sitios web. abierto programada mayoritariamente en

Hypertext Preprocessor (PHP) bajo una

16

licencia GPL (General Public License). Este administrador de contenidos puede trabajar en Internet o intranets y requiere de una base de datos MySQL, as como, preferiblemente, de un servidor de

protocolo de transferencia de hipertexto web (HTTP Apache).

XAMPP es un servidor independiente libre, que

de plataforma, software

consiste principalmente en la base de datos MySQL, el servidor Web Software que se instal

Apache y los intrpretes para lenguajes para el desarrollo de los

Servidor XAMPP de script: PHP y Perl. El nombre sitios de manera local, el proviene del acrnimo de X (para cual integr la instalacin 1.7.3 cualquiera de los diferentes sistemas de servidor web Apache, el
operativos), Apache, MySQL, PHP, gestor de bases de datos Perl. El programa acta como un servidor MySQL y el interprete Web libre, fcil de usar y capaz de para lenguaje PHP. interpretar pginas dinmicas.

Adobe

Dreamweaver es en forma de

una estudio Software que se utiliz en el proyecto para la

aplicacin

enfocada a la construccin y edicin de sitios web basadas en estndares. Es el Adobe Dreamweaver CS3 programa de este tipo ms utilizado en el sector del diseo y la programacin web. Adems permite a los

edicin de archivos de hojas de estilo en cascada (Cascading Style Sheets, CSS) y PHP.

diseadores y desarrolladores crear con total confianza sitios web basados en estndares. Diseando de forma visual o directamente sobre el cdigo.

17

Adobe Photoshop (Taller de Fotos) es una aplicacin informtica en forma de taller de pintura y fotografa que trabaja Adobe Photoshop sobre un "lienzo" y que est destinado Software que se utiliz para la edicin, retoque fotogrfico y para la edicin de CS3 pintura a base de imgenes de mapa de imgenes de los sitios. bits (o grficos rasterizados). Adobe Illustrator, es una aplicacin que trabaja sobre un tablero de dibujo, Adobe Illustrator CS3 conocido como "mesa de trabajo" y est destinado a la creacin artstica de dibujo y pintura para Ilustracin Software que se utiliz para la creacin y

vectorizacin de los logos de las empresas.

Sothink Sothink SWF Quicker aplicacin

SWF para

Quicker, la

es

una Software que se utiliz de para la creacin de los

creacin

animaciones y pelculas en formato banners de los sitios en SWF de manera fcil e intuitiva.
VMWare es un sistema de virtualizacin por software que simula un sistema fsico con unas caractersticas de hardware

formato SWF.

VMWare Workstation 6.0

determinadas. Permite ejecutar (simular) Software que se utiliz varios sistemas operativos dentro de un para virtualizar el sistema mismo hardware de manera simultnea, operativo Windows Server permitiendo as el mayor 2003. aprovechamiento de recursos.

Windows Server 2003 es un sistema Windows Server 2003 operativo de la familia Windows para servidores que sali al mercado en el ao 2003.

Sistema operativo utilizado para el desarrollo del

proyecto.

18

Componentes, Mdulos y Plugins, son Aplicaciones Componentes, Mdulos y Plugins para Joomla FileZilla es un cliente FTP, FileZilla libre (GNU) Utilizado y de cdigo la gratuito,

que

se

extensiones y complementos para Joomla utilizaron para funciones que permite aadirle funciones como productos, catlogo contador de de

adicionales a los sitios.

visitas, hora y fecha en los sitios, etc. Software que se utiliz

abierto. para la subida de los sitios de a los respectivos hosting contratados.

para

transferencia

archivos a un servidor.

2.3.4 Recursos utilizados para la implementacin. Conexin de Internet de 512 Kbps Hosting y dominio contratado. 15 horas para capacitacin del personal de cada empresa.

2.4 Anlisis de los sitios Web. Tras realizar las visitas pertinentes a las empresas y tener la informacin necesaria, reuniendo todos sus requerimientos que deban cumplir los sitios web, se procedi a realizar un anlisis el cual ayud a determinar aspectos para el diseo y desarrollo de los sitios. 2.4.1 Definicin de secciones y contenido de los sitios. El anlisis de todos los requerimientos, permiti conocer y definir las secciones de los sitios web, concentrndose en un men principal apreciable en todo el sitio. La descripcin de las secciones de cada sitio se presenta a continuacin:

19

Dipol s.a. de c.v. Pgina de inicio: Contiene una presentacin animada de imgenes de la empresa, as como un texto de bienvenida y su misin y visin. Historia de la empresa: La seccin muestra los antecedentes histricos de la empresa. Nuestra ubicacin: Muestra el horario de atencin al cliente, la direccin de la casa matriz y su sucursal y los telfonos de contacto. Catlogo de productos: El catlogo de productos es una seccin que muestra por categoras y sub categoras los productos de la empresa. Conteniendo adems, un buscador de productos para poder filtrar el catlogo por nombres o cdigo de los productos. Noticias: Contiene un calendario para que la empresa pueda aadir noticias sobre eventos, actividades o anunciar cualquier tipo de informacin que deseen, archivndose por su da de publicacin. Multimedia: La seccin multimedia da cumplimiento al requerimiento de querer mostrar de alguna manera los eventos que peridicamente realiza la empresa, para ello las posibilidades son por galera de imgenes y galera de videos. Sugerencias: Es un formulario que permite a los usuarios ingresar sus datos y escribir un comentario o sugerencia, el cual es enviado a un correo electrnico. E-Mail empleados: Es un acceso al panel de administracin de correo electrnico del hosting contratado, y da acceso a las cuentas de los empleados.

20

Registrarse: Permite a los clientes registrarse a la pgina llenando un formulario con los campos definidos por la empresa, y as crear una cuenta con usuario y contrasea y tener acceso a secciones especiales. Realizar pedidos: Es una seccin especial nicamente para clientes registrados en el sitio y les permite enviar a un correo electrnico sus pedidos.

Arte Madera Pgina de inicio: Es la pgina principal del sitio y contiene una transicin de fotografas de productos fabricados por la empresa y una breve descripcin de la empresa. Historia de la empresa: Esta seccin contiene los antecedentes histricos de la empresa. Misin y visin: Es una seccin donde el visitante puede leer la misin y visin de la empresa. Nuestra ubicacin: En esta seccin se muestra el horario de atencin al cliente, las direcciones de la casa matriz y la sala de ventas y los telfonos de contacto. Catlogo de productos: El catlogo de productos es una seccin que muestra por categoras y sub categoras los productos de la empresa. Conteniendo adems un buscador de productos para poder filtrar el catalogo por nombre del producto. Sugerencias: Es un formulario donde los visitantes del sitio pueden escribir sus comentarios o sugerencias y enviarlas a un correo electrnico. E-mail empleados: Es una seccin especial y permite que los empleados de la empresa puedan revisar sus cuentas de correo electrnico.

21

2.4.2 Mapa de los sitios web Luego de definir las secciones y contenido de los sitios, se pudo analizar la posicin jerrquica de cada una de las secciones y definir los mapa de cada uno de los sitios.

DIPOL S.A. DE C.V.

INICIO HISTORIA DE LA EMPRESA NUESTRA UBICACIN CATLOGO DE PRODUCTOS NOTICIAS MULTIMEDIA GALERA DE VIDEOS GALERA DE FOTOS SUGERENCIAS E-MAIL EMPLEADOS REGISTRARSE A DIPOLSA REALIZAR PEDIDOS PEDIDOS SUELAS PEDIDOS VARIOS

Figura 1. Mapa del sitio Web de Dipol s.a. de c.v.

22

ARTE MADERA

INICIO HISTORIA DE LA EMPRESA MISIN Y VISIN NUESTRA UBICACIN CATLOGO DE PRODUCTOS SUGERENCIAS E-MAIL EMPLEADOS

Figura 2. Mapa del sitio Web de Arte Madera.

2.4.3 Anlisis del diseo de la estructura de los sitios Como ltimo anlisis realizado tras el conocimiento de los requerimientos y necesidades de las empresas, la estructura de cada sitio define otras secciones y el posicionamiento de stas dentro de los mismos. A continuacin se presenta la estructura de cada sitio y una breve descripcin de sus dems secciones:

23

Estructura para Dipol s.a. de c.v.

BANNER DE LA EMPRESA
FECHA Y HORA
ACTUAL

MEN PRINCIPAL

PRESENTACIN DE IMGENES TEXTO DE BIENVENIDA. MISIN Y VISIN

ANUNCIOS DE OFERTAS DEL MES

BUSCADOR DE PRODUCTOS

ENCUESTAS

INICIO DE SESIN
CONTADOR DE VISITAS

TEXTO Y LOGO DE LA CMARA DE COMERCIO E INDUSTRIA DE EL SALVADOR

Figura 3. Estructura del sitio Dipol s.a. de c.v.

24

Estructura para Arte Madera.

BANNER DE LA EMPRESA
FECHA Y HORA
ACTUAL

MEN PRINCIPAL

PRESENTACIN DE IMGENES BREVE DESCRIPCIN DE LA EMPRESA

ANUNCIOS DE OFERTAS DEL MES

BUSCADOR DE PRODUCTOS

ENCUESTAS

INICIO DE SESIN
CONTADOR DE VISITAS

TEXTO Y LOGO DE LA CMARA DE COMERCIO E INDUSTRIA DE EL SALVADOR

Figura 4. Estructura del sitio Arte Madera.

25

Banner de la empresa: Es un banner en animacin flash que contiene el logo y slogan de la empresa. Fecha y hora: Muestra la fecha y hora actualizada. Men principal: Contiene las secciones del men principal. Buscador de productos: Es un buscador para el catlogo de productos que permite filtrar por nombre o cdigo del producto. Inicio de sesin: Permite a los usuarios iniciar sesin en el sitio ingresando su nombre y contrasea, previamente creadas en el registro del sitio. Presentacin de imgenes: Es una transicin aleatoria de imgenes de la empresa. Texto de bienvenida, misin y visin (Dipol s.a de c.v.): Contiene un texto de bienvenida, as como la misin y visin de la empresa. Breve descripcin de la empresa (Arte Madera): Contiene palabras de bienvenida al sitio y una breve descripcin de la empresa. Texto y logo de la Cmara de Comercio e Industria de El Salvador: Refiere a que el sitio es realizado a travs de la Cmara de Comercio e Industria de El Salvador. Anuncios de ofertas del mes: Seccin donde se visualizan las ofertas vigentes del mes. Encuestas: Los usuarios pueden votar en lnea las encuestas disponibles del sitio. Contador de visitas: Es un registro de cada visitante del sitio que muestra estadsticas de las visitas por da, semana, mes y total

26

2.4.4 Definicin de los perfiles de los usuarios. El gestor de contenidos Joomla incorpora un gestor de usuarios que permite crear los usuarios de los sitios web, asignndoles un perfil dependiendo de los permisos o privilegios que tiene cada usuario para la administracin de los sitios. Joomla los agrupa de dos maneras, desde el sitio (Front-End) y detrs del sitio o desde el panel de administracin (Back-End). A continuacin una breve descripcin de cada uno de ellos:

Usuarios del sitio (front-end):

Invitado (Guest): Un invitado es sencillamente un usuario de Joomla que ha navegado hasta encontrar su sitio web. Los invitados pueden navegar libremente por todo el contenido o tener restringido el acceso a cierto tipo de contenidos, reservados para usuarios registrados.

Registrado (Registered): Un usuario registrado no puede crear, editar o publicar contenido en un sitio Joomla. Puede enviar nuevos enlaces web para ser publicados y puede tener acceso a contenidos restringidos que no estn disponibles para los invitados.

Autor (Author): Los autores pueden crear contenido, indicar ciertos aspectos de como se presentar el contenido y especificar la fecha en la que se publicar el material.

Editor (Editor): Un editor tiene todas las posibilidades de un autor, y adems la capacidad de editar el contenido de sus propios artculos y los de cualquier otro autor.

Supervisor (Publisher): Los supervisores pueden ejecutar todas las tareas de los autores y editores, y adems tienen la capacidad de publicar un artculo.

27

Usuarios del panel de administracin (back-end):

Manager (Manager): Un manager puede ser visto como un supervisor con acceso al panel de administracin del Back-End. El manager tiene acceso, en el panel del administrador, a todos los controles asociados al contenido, pero no tiene capacidad para cambiar las plantillas, alterar el diseo de las pginas, as como aadir o eliminar extensiones de Joomla. Los managers tampoco tienen autoridad para aadir usuarios o alterar los perfiles de usuarios existentes.

Administrador (Administrator): Los administradores tienen un rango de acceso ms amplio que los managers. Adems de todas las actividades relacionadas con el contenido que puede ejecutar un manager; los administradores pueden aadir o eliminar extensiones al sitio web, cambiar plantillas o alterar el diseo de las pginas e incluso alterar los perfiles de usuario a un nivel igual o inferior al suyo.

Sper-Administrador (Super Administrator): Los Sper-Administradores tienen el mismo poder que usuario ROOT en un sistema tradicional Linux y disponen de posibilidades ilimitadas para ejecutar todas las funciones administrativas de Joomla.

Para los sitios de Dipol S.A. de C.V. y Arte Madera se utilizaron nicamente los perfiles Registrados, para aquellos usuarios del sitio que necesiten un nivel superior para poder visualizar secciones especiales del sitio y Sper Administrador, es para las personas encargadas de la administracin total de los sitios.

2.5 Diseo y desarrollo de los sitios web. Como cuarta fase tras obtener todos los anlisis necesarios para el diseo de los sitios, se procedi al desarrollo de los mismos. El cual se realiz en su totalidad de manera local, es decir, se instal el servidor web, gestor de base de datos, gestor de contenidos y dems herramientas en el equipo.

28

Para evitar incompatibilidades con el sistema operativo Windows Seven se trabaj en una mquina virtual con sistema operativo Windows Server 2003, utilizando como software de virtualizacin el VMWare Workstation 6.0.

2.5.1 Instalacin y configuracin de herramientas y software.

Para dar inicio con el desarrollo del proyecto se procedi con la instalacin del gestor de contenidos Joomla 1.5.15 (uno por cada sitio) y el servidor XAMPP 1.7.3 el cual incorpora el servidor web Apache, el gestor de base de datos MySql y el intrprete de lenguajes PHP (Ver anexo 5).

2.5.2 Instalacin y configuracin de complementos del CMS.

Para la creacin de ciertas secciones de los sitios, fue necesario utilizar algunos componentes, mdulos y plugins que se configuraron para aadir las funcionalidades necesarias a los sitios. A continuacin se detallan las aplicaciones instaladas:

COMPONENTE/MDULO/PLUGIN TC Today Date

SECCIN

SITIO Arte Madera y Dipol s.a. de c.v. Arte Madera y Dipol s.a. de c.v. Arte Madera y Dipol s.a. de c.v. Dipol s.a. de c.v. Dipol s.a. de c.v.

Fecha y Hora

Aku Newslide

Ofertas del Mes

Vinaora Visitors Counter

Contador de Visitas

Zoom Gallery Seyret

Galera de Imgenes Galera de Videos

29

Builder Community

Gestor para registro de usuarios Presentacin transitoria de imgenes

Dipol s.a. de c.v.

PhotoSlide

Arte Madera y Dipol s.a. de c.v. Arte Madera y Dipol s.a. de c.v. Arte Madera y Dipol s.a. de c.v.

Akeeba Backup

Respaldo de los sitios

DJ Classifieds

Catlogo de productos

2.5.3 Creacin de las plantillas del diseo de los sitios.

Como siguiente etapa se prosigui con el diseo de las plantillas utilizadas en los sitios, la plantilla seleccionada fue Serie2Kostenlos de Joomla (Ver anexo 6) ya que era la que mejor se adecuaba al diseo de la estructura de ambos sitios. La creacin del diseo consisti en editar y personalizar el archivo template.css de la plantilla, que es un archivo en cdigo CSS (Cascade Style Sheet) y permiti modificar aspectos, como: colores de fondo, tipo y color de letra, imgenes, posicin de objetos y suprimir cdigo innecesario.

La personalizacin del diseo fue acorde a los requerimientos presentados en la fase 1 por cada empresa (Ver anexo 7).

2.5.4 Diseo de banners y logos de los sitios.

Diseo de logos. Como parte del diseo se realiz la digitalizacin de los logos, ya que cada empresa los proporcion pero carecan de buena calidad y no eran adecuados para su uso en los

30

sitios. Para su digitalizacin se utiliz el programa Adobe Illustrator CS3, a continuacin se muestra el proceso realizado.

Dipol s.a. de c.v.

Antes

Figura 5. Logo original de Dipol S.A de C.V.

Diseo en Adobe Illustrator CS3

Figura 6. Lienzo de digitalizacin de logo Dipol S.A. de C.V. en Adobe Illustrator CS3.

31

Despus Capas creadas para el diseo

Figura 7. Capa 1.

Figura 8. Capa 2.

Logo digitalizado

Figura 9. Logo digitalizado de Dipol S.A. de C.V.

Arte Madera
Antes

Figura 10. Logo original de Arte Madera

32

Diseo en Adobe Illustrator CS3

Figura 11. Lienzo de digitalizacin de logo de Arte Madera en Adobe Illustrator CS3.

Despus Capas creadas para el diseo.

Figura 12. Capa 1

Figura 13. Capa 2

Figura 14. Capa 3.

Figura 15. Capa 4

Figura 16. Capa 5

33

Logo digitalizado

Figura 17. Logo digitalizado Arte Madera.

Diseo de banners. Su diseo consisti en crear los banners en animaciones flash utilizando los logos digitalizados, slogans de las empresas y otra informacin adicional; utilizando para ello el programa Sothink SWF Quicker (Ver anexo 8).

2.5.5 Creacin de la pgina principal y dems secciones de los sitios. En esta fase se procedi a la configuracin del gestor de contenidos para la creacin de la pgina principal de cada sitio, y la configuracin de los componentes, mdulos o plugins para las dems secciones.

La pgina principal de ambos sitios contienen todas las secciones explicadas en el diseo de la estructura de los sitios, mientras que en las dems secciones nicamente son visibles las secciones: Fecha y Hora, Men Principal y Buscador de Productos. Esto con el fin de mantener un mayor espacio para el contenido.

Para la creacin de secciones como la pgina principal, historia de la empresa, nuestra ubicacin y misin y visin; fue necesaria nicamente la creacin de nuevos artculos y agregar su respectivo texto e imgenes.

34

La seccin Pedidos (para Dipol S.A. de C.V.) y E-mail empleados (para Arte Madera) son secciones restringidas, es decir, que solo pueden ser visualizadas por usuarios registrados a los sitios (Ver anexo 9).

2.5.6 Diseo de los paneles de administracin de los sitios. El gestor de contenidos Joomla incorpora un panel de administracin (Back-End) en donde los usuarios encargados para la actualizacin y mantenimiento de la informacin de los sitios web administrables de Dipol S.A. de C.V. y Arte Madera acceden para poder modificar, agregar o borrar el contenido de manera fcil e intuitiva. En esta fase se procedi a editar y personalizar el archivo CSS para darle el diseo visual a dichos paneles acorde al diseo de la plantilla de los sitios (Ver anexo 10).

2.5.7 Verificar compatibilidad entre distintos navegadores. Al evaluar los sitios web en distintos navegadores se comprob su compatibilidad en los navegadores Internet Explorer 7.0 o superior, FireFox Mozilla, Opera y Google Chrome; exceptuando en Internet Explorer 6.0 e inferiores, dado que algunos componentes no cargan debidamente, para ello se instal un plugin que identifica el navegador que est utilizando el usuario, y si ste es Internet Explorer 6.0 o Inferior se muestra un mensaje de advertencia en la parte superior del sitio y un enlace para descargar una actualizacin ms reciente del navegador, as como se muestra en la siguiente imagen:

35

Figura 18. Navegacin del sitio de Arte Madera en Internet Explorer 6.0

2.6 Implementacin de los sitios web Como quinta y ltima fase del proyecto tras finalizar todo el desarrollo de los sitios de manera local se prosigui a su implementacin, el cual consisti en su publicacin en Internet utilizando un hosting y un dominio para cada uno. Para poder realizar esta fase se realizaron ciertas etapas.

2.6.1 Cotizacin y compra de hosting y dominio En esta etapa se realizaron varias cotizaciones de diferentes proveedores de hosting y dominio en el pas, las cuales fueron presentadas a las empresas para decidir el proveedor ms conveniente; a continuacin se detallan las cotizaciones:

36

Cotizacin de svwebs.net

37

Cotizacin de webhosting.joomlaelsalvador.com

38

Cotizacin de web-e-volution.com

39

Posteriormente de ser presentadas las cotizaciones a las empresas Dipol S.A de C.V. y Arte Madera, se evaluaron las ofertas. Ambas empresas optaron por contratar su hosting y dominio con www.webhosting.joomlaelsalvador.com servicios y al mejor precio. por ofrecer los mejores

Siendo as, el sbado 19 de Junio de 2010 se present en las instalaciones de Arte Madera y Dipol S.A. de C.V. el representante del hosting seleccionado realizando los contratos por un ao de la siguiente manera:

Empresa Descripcin Plan contratado Espacio en disco Cuentas de correo Bases de datos Dominio

Arte Madera Bsico 5 GB 15 cuentas 5 www.artemadera.com.sv

Dipol s.a de c.v. Estndar 10 GB 25 cuentas 10 www.dipolsa.com

2.6.2 Configuracin del CMS y complementos en el hosting.

Una vez contratados los hosting y dominios de dipolsa.com y artemadera.com.sv, se procedi a realizar la configuracin del CMS Joomla en los hosting, haciendo nuevamente su instalacin en los servidores respectivos. Posteriormente se restauraron las bases de datos en el gestor y se subieron las carpetas contenedoras de los datos de cada sitio, por medio del cliente FTP (File Transfer Protocol) FileZilla (Ver anexo 11).

2.6.3 Publicacin de los sitios, implementacin de seguridad y prueba de los sitios web.

Luego de haber configurado el Sistema de Gestin de Contenidos (CMS, Content Management System en ingls) y ambos sitios en los hosting contratados, se procedi

40

con hacer la publicacin preliminar de los sitios con sus respectivos dominios, www.artemadera.com.sv en el caso de la empresa Artemadera y www.dipolsa.com para la empresa Dipol S.A. de C.V; a partir de esto se inici con hacer pruebas de ambos sitios en todas las secciones creadas y a verificar que no existiera ningn problema con los componentes instalados y que todo funcionara de manera correcta, tal y como se configuraron de manera local.

Por parte de la implementacin de seguridad se instal el componente Jsecure, el cual permite personalizar la ruta para el acceso al panel de administracin de los sitios, debido que el CMS Joomla define por estndar la ruta: <tu dominio>/administrator.

La funcin del Jsecure es poder definir una propia ruta de acceso, para ello en la configuracin del componente se establece una clave secreta que es utilizada en la ruta para acceder al panel. Siendo entonces la nueva ruta: <tu dominio>/administrator/?<clave secreta>

De esta manera se ocult el panel de administracin a personas ajenas o no autorizadas, dando una mayor seguridad a los sitios. Tambin como parte de prevencin a cualquier fallo o dao a los sitios, se instal el componente Akeeba Backup, el cual permite realizar de una manera rpida y sencilla una copia de seguridad de respaldo de todo el sitio y su base de datos, creando un archivo comprimido para posteriormente ser descargado al disco duro del equipo.

2.6.4 Capacitacin al personal de las empresas

Con la culminacin de la construccin de los sitios web, se prosigui a una etapa muy importante dentro del proyecto, la cual se refiere a la induccin y enseanza sobre como los usuarios o empleados asignados administraran los sitios con el mantenimiento y actualizacin de la informacin. Para ello se brind una capacitacin dando a conocer las partes administrables y como manipular cada una de ellas.

41

Se cre una cuenta de usuario del tipo Superaministrador para cada sitio y la cual cuenta con todos los privilegios de administracin tanto desde el sitio web como en el panel de administracin.

Las partes administrables del sitio www.dipolsa.com son:

Presentacin de imgenes de pgina principal. Edicin del texto de la pgina principal. Edicin del texto de la Historia de la Empresa Edicin del texto de Nuestra Ubicacin Agregar, editar o eliminar categora de productos Agregar, editar o eliminar productos. Agregar, editar o eliminar noticias. Agregar, editar o eliminar galera de imgenes. Agregar, editar o eliminar fotos en galera de imgenes. Agregar, editar o eliminar categora de videos. Agregar, editar o eliminar videos. Agregar, editar o eliminar ofertas del mes. Agregar y editar encuestas del sitio. Realizar respaldos del sitio completo. Administrar cuentas de usuarios.

Las partes administrables del sitio www.artemadera.com.sv son:

Edicin del texto de la pgina principal. Edicin del texto de la Historia de la Empresa Edicin del texto de Nuestra Ubicacin Agregar, editar o eliminar categora de productos Agregar, editar o eliminar productos. Agregar, editar o eliminar ofertas del mes.

42

Agregar y editar encuestas del sitio. Realizar respaldos del sitio completo.

43

3. BIBLIOGRAFA Cmara de Comercio e Industria de El Salvador (s.f.). Obtenido el 20 de Enero de 2010, de Cmara de Comercio: Http: //www.camarasal.com

Nexodigital (s.f.). Diseo de Sitios y Pginas Web Auto administrables Obtenido el 16 de Agosto de 2010, de Nexodigital: http://www.nexodigital.cl/diseno-web-autoadministrable.html

Softpechis. (s.f.). Recuperado el 17 de Agosto de 2010, de Softpechis: http://softpechis.files.wordpress.com/2009/11/instalacion-de-xampp-y-moodle.pdf

Taringa. (s.f.). Recuperado el 15 de Agosto de 2010, de Taringa: http://www.taringa.net/posts/downloads/6081068/FileZilla--FTP-set-up-3_3_2-ultimaversion-descargar-gratis.html

Wikipedia. (s.f.). Recuperado el 8 de Agosto de 2010, de Wikipedia: Http://es.wikipedia.org/wiki/Joomla!

Wikipedia. (s.f.). Recuperado el 8 de Agosto de 2010, de Wikipedia: http://es.wikipedia.org/wiki/Internet

Wikipedia. (s.f.). Recuperado el 8 de Agosto de 2010, de Wikipedia: http://es.wikipedia.org/wiki/Sitio_web

Wikipedia. (s.f.). Recuperado el 15 de Agosto de 2010, de Wikipedia: http://es.wikipedia.org/wiki/Adobe_Dreamweaver

Wikipedia. (s.f.). Recuperado el 15 de Agosto de 2010, de Wikipedia: http://es.wikipedia.org/wiki/Adobe_Photoshop

44

Wikipedia. (s.f.). Recuperado el 15 de Agosto de 2010, de Wikipedia: http://es.wikipedia.org/wiki/Adobe_Illustrator

Wikipedia. (s.f.). Recuperado el 15 de Agosto de 2010, de Wikipedia: http://es.wikipedia.org/wiki/VMware

Wikipedia. (s.f.). Recuperado el 15 de Agosto de 2010, de Wikipedia: http://es.wikipedia.org/wiki/Windows_Server_2003

45

ANEXOS

46

Anexo 1. Glosario.

Archivo comprimido: Es el resultado del proceso de conversin de un archivo comn a un formato de comprensin, reduciendo as su tamao original.

Base de datos: Es un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemticamente para su posterior uso.

CMS: Acrnimo de Content Management System, en ingls. Es un programa que permite crear una estructura de soporte para la creacin y administracin de contenidos.

CSS: En ingls Cascading Style Sheets, CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML.

Dominio: Es la parte principal de una direccin en el web que usualmente indica la organizacin o compaa que administra dicha pgina.

Disco duro: Es un dispositivo no voltil, que conserva la informacin an con la prdida de energa, que emplea un sistema de grabacin magntica digital.

FTP: (Sigla en ingls de File Transfer Protocol) en informtica, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una.

GNU: Es un acrnimo recursivo que significa GNU No es Unix (GNU is Not Unix).

GPL: Es una licencia creada por la Free Software Foundation en 1989, est orientada principalmente a proteger la libre distribucin, modificacin y uso de software.

Hardware: Corresponde a todas las partes fsicas y tangibles de una computadora, como: sus cables, gabinetes o cajas, perifricos de todo tipo y cualquier otro elemento fsico involucrado.

47

Hosting: El alojamiento web (en ingls web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar informacin, imgenes, vdeo, o cualquier contenido accesible va Web.

HTML: Siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web.

Lienzo: En un software de diseo grfico digital lienzo se le conoce al rea de trabajo donde se disean y crean grficos, animaciones, etc.

Linux: Es un sistema operativo de distribucin libre, es decir gratuito.

Mac OS: Es el nombre del sistema operativo creado por Apple para su lnea de computadoras Macintosh. Es conocido por haber sido el primer sistema dirigido al gran pblico en contar con una interfaz grfica compuesta por la interaccin del mouse con ventanas, Icono y mens.

Mquina Virtual: Es un software que emula a una computadora y puede ejecutar programas como si fuese una computadora real.

Navegador web: Es un programa que permite ver la informacin que contiene una pgina web.

PHP: Es un lenguaje de programacin interpretado, diseado originalmente para la creacin de pginas web dinmicas.

Plantilla: Es una forma de dispositivo que proporciona una separacin entre la forma o estructura y el contenido.

48

Plugin, modulo o componente: Es una aplicacin que se relaciona con otra para aportarle una funcin nueva y generalmente muy especfica.

Procesador: Es el componente del computador y otros dispositivos programables, que interpreta las instrucciones contenidas en los programas y procesa los datos.

RAM: Es la memoria desde donde el procesador recibe las instrucciones y guarda los resultados.

Servidor Web Apache: Es un programa que est diseado para transferir hipertextos, pginas web o pginas HTML, como: figuras, formularios, botones y objetos incrustados como animaciones o reproductores de msica.

Sistema Operativo: Es un software que acta de interfaz entre los dispositivos de hardware y los programas usados por el usuario para utilizar un computador.

Sitio Web autoadministrable: Pginas web en las cuales un usuario comn con permisos puede interactuar y cambiar el contenido de ellas en el momento que desee y con una interfaz totalmente amigable.

Sitio Web:

Un sitio web es un conjunto de pginas web, tpicamente comunes a

un dominio de Internet o subdominio en la World Wide Web en Internet.

Software:

Se

le

conoce al

equipamiento

lgico

soporte

lgico

de

una computadora digital; comprende el conjunto de los componentes lgicos necesarios que hacen posible la realizacin de tareas especficas, conocido tambin como programas, aplicaciones.

Unix: Es un sistema operativo portable, multitarea y multiusuario; desarrollado, en principio, en 1969 por un grupo de empleados de los laboratorios Bell de AT&T.

49

Virtualizacin: En informtica, virtualizacin se refiere a la abstraccin de los recursos de una computadora, llamada Hypervisor o VMM (Virtual Machine Monitor) que crea una capa de abstraccin entre el hardware de la mquina fsica (host) y el sistema operativo de la mquina virtual.

Windows: Es una serie de sistemas operativos desarrollados por Microsoft desde 1981.

50

Anexo 2: CRONOGRAMA PROPUESTO

Nombre de la Institucin: Cmara de Comercio e Industria de El Salvador

Giro de la Institucin: Actividades de asesoramiento empresarial y en materia de gestin Nombre del Estudiante: _Luis Alonso Magaa Salas Supervisor Institucional: Supervisor Decanato: Licda. Marisela de Lpez Lic. Juan Haroldo Linares Facultad: Fecha de Inicio: Fecha de Finalizacin:
CRONOGRAMA DE ACTIVIDADES
MES ACTIVIDAD
Visitas a las empresas Definir el tipo de sitios web a construir.
Identificar las herram ientas y Software a utilizar

Ingeniera y Arquitectura 01/ Febrero /2010 02/Agosto/ 2010

FEBRERO 1 2 3 4 1

MARZO 2 3 4 1

ABRIL 2 3 4 1

MAYO 2 3 4 1

JUNIO 2 3 4 1

JULIO 2 3 4 1

AGOSTO 2 3 4

Analisis del diseo de la estructura de los sitios Definicion del diseo visual de los sitios web. Definir los perfiles de usuarios. Instalacion y configuracion de herramientas y software. Instalacion y configuracion de los complementos del CMS Creacion de las plantillas del diseo de los sitios web Disear el mapa de los sitios
Dis eo de banners , logos , botones , im genes , etc.

Disear la estructura de los sitios

Creacion de la pagina principal y dem as categorias de los s itios

50

51
CRONOGRAMA DE ACTIVIDADES
FEBRERO 1 Diseo del panel de administracion de los sitios. Agregar contenido e informacion a los sitios web Verificar la compatibilidad entre distintos navegadores Cotizacion y compra de Hosting y dominio Configuracion de CMS y complementos en el Hosting
Publicacion preliminar, implementacion de seguridad y pruebas de los sitios sitios Publicacion final de los web

MARZO 4 1 2 3 4 1

ABRIL 2 3 4 1

MAYO 2 3 4 1

JUNIO 2 3 4 1

JULIO 2 3 4 1

AGOSTO 2 3 4

web. Capacitacion al personal de las empresas Seguimiento de los sitios web

52

Anexo 3: CRONOGRAMA REALIZADO

Nombre de la Institucin: Cmara de Comercio e Industria de El Salvador

Giro de la Institucin: Actividades de asesoramiento empresarial y en materia de gestin Nombre del Estudiante: _Luis Alonso Magaa Salas Supervisor Institucional: Supervisor Decanato: Licda. Marisela de Lpez Lic. Juan Haroldo Linares Facultad: Fecha de Inicio: Fecha de Finalizacin: Ingeniera y Arquitectura 01/ Febrero /2010 02/Agosto/ 2010

52

53

54

Anexo 4. Formulario para estudio de factibilidad.

UNIVERSIDAD CATLICA DE EL SALVADOR FACULTAD DE INGENIERA Y ARQUITECTURA

ESTUDIO DE FACTIBILIDAD PARA LA CREACIN DE LOS SITIOS WEB AUTO ADMINISTRABLES PARA EMPRESAS FILIALES DE LA CMARA DE COMERCIO E INDUSTRIA DE EL SALVADOR, SANTA ANA. Proyecto realizado por: Bachiller Luis Alonso Magaa Salas Nombre de la Empresa: ____________________________________________________ Encargado o Representante de la empresa: ____________________________________ Indicaciones: Contestar las siguientes preguntas conforme a las herramientas tecnolgicas que cuenta su empresa.

1. Cuntas computadoras dispone en su empresa? _________________________________________________________________

2. Mencione las caractersticas de acuerdo al siguiente orden: Tipo y Velocidad de procesador, Capacidad de memoria RAM, Capacidad de Disco Duro, Sistema Operativo.
_______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________

3. Tiene conexin a Internet en su empresa? Si No

55

4. Si su respuesta anterior fue Si, Qu velocidad a conexin a Internet posee? 128 Kb/s 256 Kb/ 512 Kb/s 1 MB/s o 2 MB/s

5. Qu programas informticos son utilizados en su empresa? _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ 6. Existe personal con conocimientos informticos dentro de su empresa?, En qu nivel se encuentra? _________________________________________________________________ _________________________________________________________________

Persona que proporcion los datos:

________________________________ Nombre

____________________ Firma y Sello

56

Anexo 5. Instalacin de gestor de contenidos Joomla y Servidor XAMPP

57

58

59

60

Anexo 6. Plantilla Joomla Serie2Kostenlos

61

Anexo 7. Diseo de plantilla de los sitios.

Dipol s.a. de c.v.

Arte Madera

62

Anexo 8. Banners de los sitios. Dipol s.a. de c.v.

Arte Madera

63

Anexo 9. Pgina principal y dems secciones de los sitios. Dipol s.a. de c.v.

Pgina principal:

64

Historia de la empresa

65

Catlogo de productos

66

Arte Madera

Pgina principal

67

Historia de la empresa

68

Catlogo de productos

69

Anexo 10. Diseo del panel de administracin de los sitios

Dipol s.a. de c.v.

Arte Madera

Anexo 11: Configuracin y complementos del CMS en el hosting Anexo 11: Configuracin y complementos del CMS en el hosting

70

Anexo 11. Configuracin y complementos del CMS en el hosting.

71

Anexo 12. Manual de Usuario: Administracin del sitio Dipol s.a. de c.v.

72

NDICE

Introduccin ....................................................................................................................... 3 1. Presentacin de imgenes de la pgina principal....................................................... 4

2. Edicin del texto de las secciones: pgina principal, historia de la empresa y nuestra ubicacin ................................................................................................................ 5 3. 4. 5. 6. 7. 8. Agregar, editar o eliminar categora de productos y productos .................................. 6 Agregar noticias. ......................................................................................................... 8 Agregar, editar o eliminar galera de imgenes. ......................................................... 9 Agregar, editar o eliminar videos. ............................................................................ 10 Agregar o editar ofertas del mes ............................................................................... 11 Realizar respaldo del sitio completo. ........................................................................ 12

MANUAL DE USUARIO: WWW.DIPOLSA.COM

73

INTRODUCCIN

El sitio Web www.dipolsa.com es un sitio autoadministrable que contiene secciones que pueden ser modificadas por un usuario especfico ya sea agregando, editando o eliminando contenido de ste. El siguiente manual pretende orientar de una manera intuitiva al personal asignado para su administracin; facilitando el mantenimiento y actualizacin de la informacin.

A continuacin se describir detalladamente cada una de las secciones que el usuario debe y necesita conocer para la administracin.

MANUAL DE USUARIO: WWW.DIPOLSA.COM

74

1.

Presentacin de imgenes de la pgina principal.

Para cambiar las imgenes que aparecen en la presentacin de la pgina principal del sitio se debe abrir un navegador de Internet e ingresar a la siguiente direccin: http://www.panel.dipolsa.com/ e ingresar el nombre de usuario y contrasea de acceso, tal como se muestra en la imagen.

Una vez ingresado al panel Web del sitio nos aparecern todas las carpetas y archivos contenidos en el hosting, debe ubicarse en la carpeta IMAGES/BANNER_INICIO en donde nicamente se debe agregar o eliminar las imgenes que se desea aparezcan en la pgina principal. Tal como se muestra en la siguiente imagen:

MANUAL DE USUARIO: WWW.DIPOLSA.COM

75

2. Edicin del texto de las secciones: pgina principal, historia de la empresa y nuestra ubicacin Para la edicin del texto de las secciones mencionadas, se debe ingresar al sitio Web: www.dipolsa.com y dirigirse a la parte de inicio de sesin e ingresar con un nombre y usuario con privilegios como mnimos de Editor. Tal y como se muestra en el recuadro color rojo de la siguiente imagen.

Luego de iniciar sesin se ingresa a la seccin que se desea editar, se notara que en la parte superior izquierda del ttulo nos aparece el icono de Editar en el cual se

dar un clic y el texto se mostrar dentro de un recuadro muy parecido a un procesador de texto ( EDITOR ) para poderlo editar como se quiera. Como se muestra en la siguiente imagen:

MANUAL DE USUARIO: WWW.DIPOLSA.COM

76

3.

Agregar, editar o eliminar categora de productos y productos.

Dentro del catlogo de productos se puede modificar sus categoras y productos agregando, eliminando o editando las ya existentes. Para esto se ingresara al panel de administracin del sitio y se iniciar sesin con un usuario y contrasea con privilegios mnimos de Administrador.

MANUAL DE USUARIO: WWW.DIPOLSA.COM

77

Una vez iniciado se dirige al men COMPONENTES y se seleccionar la opcin CATLOGO DE PRODUCTOS.

Luego de seleccionar la opcin mostrar el gestor de administracin del catlogo de productos, en el cual se puede escoger CATEGORA o PRODUCTO y realizar las acciones que se desea (Agregar, Editar o Borrar productos y categoras).

MANUAL DE USUARIO: WWW.DIPOLSA.COM

78

4.

Agregar noticias.

Para agregar noticias se debe ingresar al sitio www.dipolsa.com e iniciar sesin con un usuario y contrasea con privilegios mnimos como Autor y dirigirse a la seccin de Noticias. En la parte izquierda del sitio se desplegar el men de Sesin de Noticias.

Para aadir una nueva noticia basta con dar clic a la opcin Aadir artculo y redactar la noticia, aadir fotografas, grficos, etc.; en el Editor. Algo muy importante es a la hora de guardar la noticia se debe cerciorar que la opcin seleccionada en Categora debe ser NOTICIAS DIPOLSA. Tal y como se muestra en la siguiente imagen:

MANUAL DE USUARIO: WWW.DIPOLSA.COM

79

5.

Agregar, editar o eliminar galera de imgenes.

Iniciando sesin con privilegios mnimos como Administrador se dirige a la seccin MULTIMEDIA y seleccionar la opcin GALERA DE FOTOS. En la parte inferior izquierda de la pantalla se ver la opcin SISTEMA en la cual se debe hacer un clic.

MANUAL DE USUARIO: WWW.DIPOLSA.COM

80

Se mostrar en pantalla el ADMINISTRADOR DE GALERA DE IMGENES

Seleccionar la opcin que se desea realizar Administrador de Galeras para agregar, editar o eliminar las galeras de imgenes y Administrador de Medios para agregar, editar o eliminar las fotografas de las galeras.

6.

Agregar, editar o eliminar videos.

Siempre iniciada sesin en el sitio con privilegios mnimos como Administrador se dirige a la opcin MULTIMEDIA y se selecciona GALERA DE VIDEOS.

Se da clic en la opcin ADD VIDEOS y en la pantalla se nos desplegar un recuadro donde se debe pegar el enlace del video, que previamente se debe haber cargado en
10

MANUAL DE USUARIO: WWW.DIPOLSA.COM

algn servidor de videos como YouTube.com, posteriormente se aplica y se agregan detalles del video.
81

7.

Agregar o editar ofertas del mes

Iniciando sesin en el sitio con privilegios mnimos como Administrador aparece en pantalla un nuevo men: Administracin del Sitio, seleccionando la opcin Aadir Oferta.

11

MANUAL DE USUARIO: WWW.DIPOLSA.COM

82

En el editor se agrega una imagen y el texto que se desea en la oferta; algo muy importante ante de guardar es cerciorarse que en Seccin se debe escoger la opcin OFERTAS DEL MES.

8.

Realizar respaldo del sitio completo.

Para poder realizar respaldos del sitio completo se debe ingresar al panel de administracin y en la opcin COMPONENTES escoger Akeeba Backup y luego Respaldar Ahora.

12

MANUAL DE USUARIO: WWW.DIPOLSA.COM

83

En la siguiente pantalla nicamente debe darse clic al botn RESPALDAR AHORA y si se desea se puede escribir algn comentario en el editor. El respaldo generara un archivo comprimido ZIP que posteriormente se podr descargar al equipo.

13

MANUAL DE USUARIO: WWW.DIPOLSA.COM