Diseño Web. Evin Alexis Ramos Grisales UNIVERSIDAD CATÓLICA DE PEREIRA FACULTADAD DE CIENCIAS BASICAS E INGENIERIA

Transcripción

1 Diseño Web Evin Alexis Ramos Grisales UNIVERSIDAD CATÓLICA DE PEREIRA FACULTADAD DE CIENCIAS BASICAS E INGENIERIA PROGRAMA DE INGENIERÍA DE SISTEMAS Y TELECOMUNICACIONES PRÁCTICAS ACADÉMICAS 2012

2 Diseño Web Evin Alexis Ramos Grisales Documento de Práctica Profesional Tutor: Ingeniero Carlos Andrés Cortés UNIVERSIDAD CATÓLICA DE PEREIRA FACULTADAD DE CIENCIAS BASICAS E INGENIERIA PROGRAMA DE INGENIERÍA DE SISTEMAS Y TELECOMUNICACIONES PRÁCTICAS ACADÉMICAS 2012

3 TABLA DE CONTENIDO RESUMEN... 8 INTRODUCCION PRESENTACIÓN DE LA ORGANIZACIÓN MultitintasINK Misión Visión Perfil del Equipo Directivo y la Empresa Productos y Servicios que ofrecemos Nuestro Producto Líder Políticas de Cumplimiento Sucursales DEFINICIÓN DE LAS LÍNEAS DE INTERVENCIÓN DESCRIPCIÓN DEL PROBLEMA JUSTIFICACIÓN OBJETIVOS General Específicos MARCO TEÓRICO PROGRAMACIÓN WEB GESTORES DE CONTENIDO Funcionamiento Gestión de usuarios Tipos de gestores de contenidos Como trabaja un gestor de contenido Plataformas de Gestión de Contenido Joomla Como Gestor De Contenido

4 7. CRONOGRAMA DE ACTIVIDADES Actividades Cronograma MARCO METODOLOGICO Gestor de Contenido seleccionado para el desarrollo de la plataforma web Instalación de Joomla en el Ambiente de Prueba Modelo de Plantilla Escogida Proceso de Instalación de la plantilla en el Gestor de Contenido Categoría de los Productos que ofrece la empresa MultitintasINK y Menús Contemplados en el sitio virtual Categoría de Productos Menús Contemplados para el Nuevo sitio Virtual Creación de las Categorías en Joomla Creación de los Artículos en Joomla Creación de los Menús en Joomla Implementación del nuevo sitio virtual Interfaz del antiguo sitio virtual de la empresa Multitintas INK CONCLUSIONES RECOMENDACIONES APÉNDICES BIBLIOGRAFÍA... 53

5 Lista de Tablas. Tabla 1 Versiones del Gestor de Contenido Joomla... 24

6 Lista de Ilustraciones. Ilustración 1 Topología de Gestor de Contenido Ilustración 2 Topología de Comunicación Ilustración 3 Logos de Plataformas Gestoras de Contenido Ilustración 4 Interfaz del Gestor de Artículos Joomla Ilustración 5 Barra de Herramientas Joomla... 27

7 Lista de Imágenes Imagen 1 Extracción del Contenido Joomla Imagen 2 Instalación de Joomla- Idioma Imagen 3 Instalación de Joomla- Registro con la Base de datos Imagen 4 Instalación de Joomla- Configuración de Usuario/Admin Imagen 5 Instalación de Joomla- Login como Admin Imagen 6 Interfaz de Joomla como Administrador Imagen 7 Modelo de Plantilla Escogida Imagen 8 Instalación del Plug-in plg_icespeed.zip Imagen 9 Instalación de las Extensiones Imagen 10 Plantilla por Defecto o principal Imagen 11 Modelo de Plantilla Instalada Imagen 12 Categorías de los productos en Joomla Imagen 13 Artículos sobre los productos en Joomla Imagen 14 Lista de los Menús en Joomla Imagen 15 Lista de los Menús en la plantilla Imagen 16 Interfaz del nuevo Sitio Virtual Imagen 17 Antigua Interfaz del Sitio Virtual MultitintasINK... 49

8 RESUMEN ABSTRACT En el presente trabajo tiene como propósito desarrollar e implementar un nuevo sitio virtual para la empresa MultitintasINK, apoyando por un gestor de contenido que sirva como herramienta base para la gestión y administración del contenido. En este documento se evidencia las pautas necesarias que se siguieron en la instalación de Joomla como gestor de contenido escogido para el desarrollo de la nueva plataforma web que servirá de apoyo para la gestión y administración de la información. Palabras Claves: Joomla, Gestor de Contenido, Artículos, Modulo, Categorías, Plug-in. In the present work aims to develop and implement a new virtual site for the company MultitintasINK, supporting a content management system that serves as a basic tool for the management and content management. This document is evidence that the necessary guidelines were followed in the Joomla content management system as chosen for the development of the new web platform that will support the management and information management. Keywords: Joomla, Content Management, Articles, Module, Categories, Plug-in.

9 INTRODUCCION El uso de herramientas computacionales brinda un soporte en la solución a problemas que actualmente poseen las empresas, los sitios virtuales en la actualidad son herramientas de ayuda indispensable para facilitar el acceso a diferentes tipos de información que manejan entidades como los bancos, instituciones educativas, organizaciones, negocios, entre otros. Permitiendo un manejo eficiente, administrativo y logar reducir costos. Los sistemas computaciones requieren de un trato especial y adecuado dependiendo de los requerimientos técnicos que se necesiten en el desarrollo del sistema de gestión.

10 1. PRESENTACIÓN DE LA ORGANIZACIÓN 1.1. MultitintasINK Abrió sus puertas al público en el año 2006 con el propósito de prestar servicios y distribuir productos de tecnología para la ciudad de Bucaramanga y municipios aledaños a Santander, después de un proceso de consolidación y posicionamiento en el año 2010 entramos a competir exitosamente en el mercado de la ciudad de Pereira y municipios de la zona cafetera de Colombia. Somos una empresa dedicada a la comercialización de productos tecnológicos y suministros para computadoras, contamos con los mejores estándares de calidad y al mismo tiempo tenemos los mejores precios del mercado, nos hemos caracterizado por satisfacer las necesidades de nuestros clientes con los más novedosos artículos útiles para el desempeño tecnológico de su empresa con lo último de la tecnología a su alcance con el propósito de generar siempre beneficio y comodidad a nuestros clientes. Brindando así experiencia calidad y garantía en cada uno de los productos y servicios que ofrecemos Misión Satisfacer las necesidades de nuestros clientes, soportados en la asesoría y manejo responsable de la información, ofreciendo servicios de calidad y productos competitivos, con un equipo humano innovador. Convertirnos en referente importante en el departamento de Santander y el eje cafetero, para la provisión de servicios tecnológicos especialmente en suministros para computadores, orientando nuestro trabajo hacia la excelencia. Seremos una empresa emprendedora, influyente, líder, que aporte bienestar económico y social a todos nuestros clientes y empleados Visión A mediano plazo, estar en el grupo de las primeras empresas de tecnología dedicadas a ofrecer productos y servicios técnicos en Santander y los departamentos del eje cafetero, aportando actualización en todo lo relacionado, medidamente la introducción de tecnología más innovadora a la medida de las necesidades empresariales, ser una empresa de referencia que camina con el cambio de la tecnología y la sociedad. Queremos estar comprometidos con los

11 problemas de nuestros clientes de forma transparente y eficaz para convertirnos en su proveedor de confianza. Para esto, la empresa estima apoyarse en el cumplimiento de patrones de desarrollo organizacional con la participación de todos los actores involucrados en el proceso productivo Perfil del Equipo Directivo y la Empresa. Contamos con oficinas y almacenes equipados y habilitadas para satisfacer los requerimientos diarios de nuestros clientes. Somos líderes, capaces de guiarnos y guiar a los demás. Somos activos, pues tomamos la iniciativa para lograr generar soluciones. Nos sentimos comprometidos con nosotros mismos, con el equipo de trabajo y con nuestros clientes, estamos atentos, a las necesidades de nuestros empleados y clientes, somos dinámicos, siempre buscando nuevas soluciones Productos y Servicios que ofrecemos a) Venta de computadores portátiles, de escritorio, impresoras y periféricos en general. b) Venta de suministros originales t remano facturado, recarga de tóner y cartuchos, medios magnéticos, cintas, tintas, tóner, papel fotográfico, resma de papel. c) Montaje de impresoras con sistema de tintas continuas, impresoras láser multifuncionales, inyección de tinta, matriz de punto, punto de venta, monitores, Ups y accesorios. d) Diseño y montaje de redes inalámbrica (Wi-Fi), cableado estructurado, servidores, cámaras IP para vigilancia Nuestro Producto Líder. a) La venta de suministros originales en todas las marcas tales como: tóner, Tintas, Cintas. b) Productos y suministros remano facturado con alta gama de excelencia, eficiencia Políticas de Cumplimiento. Brindar a nuestros clientes un servicio constante, eficiente y de calidad Entregar a tiempo los requerimientos de nuestros clientes. Soporte Pre-venta y Post-venta.

12 1.7. Sucursales Tenemos oficinas en diferentes puntos del país con el fin de que los productos sean más fáciles para adquirir a nuestros clientes. MULTITINTAS INK, CC Gratamira, Local 125, Bucaramanga. COMPU MALL INK, CC Gratamira, Local 112, Bucaramanga. MULTITINTAS INK COMPUTER, CC San Andresito Centro, Local B. 4to piso. MULTITINTAS INK PEREIRA, CC Lago Plaza, Local 218, Pereira. MULTILAGO COMPUTER, CC Lago Plaza, Local 205, Pereira.

13 2. DEFINICIÓN DE LAS LÍNEAS DE INTERVENCIÓN El proyecto se enfoca en un sistema de información, de tal manera que se pueda publicar información gráfica de los productos que ofrece la empresa por medio de un sitio web.

14 3. DESCRIPCIÓN DEL PROBLEMA La empresa Multitintas INK actualmente posee un sitio virtual que no les está proporcionando la adecuada información a los clientes sobre los productos y servicios que ofrece. Por este motivo está interesada en actualizar su sitio virtual por uno nuevo donde le proporcione la posibilidad de publicar y ofrecer los productos y servicios de una manera organizada donde los clientes puedan visualizar y se mantengan actualizados sobre los productos, servicios y tecnología de última generación.

15 4. JUSTIFICACIÓN La importancia de este proyecto se centra en ayudar a la empresa Multitintas INK en la actualización del sitio virtual de tal manera que puedan ofrecer mejor servicio de forma oportuna y adecuada con la implementación de un nuevo sitio web donde tenga la información de manera organizada y actualizada. El sitio web tendrá una continuidad, ya que en el futuro se desea implementarles nuevos servicios de apoyo y acompañamiento a los clientes y la constante actualización de los productos que ingresan al mercado.

16 5. OBJETIVOS 5.1. General. Diseño e implementación de un nuevo sitio web de tal manera poder engrandecer la imagen de empresa a través de elementos gráficos con el objeto de ofrecer la diversa gama productos y despertar una sensación de confianza en los clientes a través del sitio virtual Específicos Investigar y analizar cuál sería el mejor gestor de contenido web que se ajusta a las necesidades de la empresa Multitintas INK. Recolectar información relacionada con los productos y organizarlos por categorías y marcas. Instalar en un ambiente de prueba el gestor de contenido y la plantilla propuesta por la empresa para la actualización del antiguo sitio virtual mientras que se soluciona el problema del actual Hosting y dominio con la empresa Publicar, donde tienen el antiguo sitio virtual. Hacer le traspaso del nuevo contenido del sitio virtual alojado en un entorno de prueba junto con la base de datos al nuevo hosting y poner a funcionar la nueva página.

17 6. MARCO TEÓRICO 6.1. PROGRAMACIÓN WEB El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia. La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio. El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra. (Wikipedia, Wikipedia, 2012). La programación Web, parte de las siglas WWW, que significan World Wide Web o telaraña mundial. Para realizar una página con la programación Web, se deben tener claros, tres conceptos fundamentales los cuales son, el URL (Uniform Resource Locators), es un sistema con el cual se localiza un recurso dentro de la red, este recurso puede ser una página web, un servicio o cualquier otra cosa. En resumen el URL no es más que un nombre, que identifica una computadora, dentro de esa computadora un archivo que indica el camino al recurso que se solicita. El siguiente concepto dentro de la programación Web, es el protocolo encargado de llevar la información que contiene una página Web por toda la red de internet, como es el HTTP (Hypertext Transfer Protocolo). Y por último el lenguaje necesario cuya funcionalidad es la de representar cualquier clase de información que se encuentre almacenada en una página Web, este lenguaje es el HTML (Hypertext Markup Language). En la programación Web, el HTML es el lenguaje que permite codificar o preparar documentos de hipertexto, que viene a ser el lenguaje común para la construcción de una página Web.

18 Con el comienzo de Internet y la programación web, se desfasaron los diseños gráficos tradicionales, con lo que se empezaron a diseñar interfaces concretas para este medio, buscando ficheros pequeños para facilitar la carga de los mismos. La programación web se orientaba a un diseño muy cargado y interactuando con el usuario, mientras que al empezar a competir con millones de webs se ha optado más por el diseño sencillo y de fácil comprensión. En programación web se creó la necesidad de conocer a fondo diferentes lenguajes de programación como HTML, JavaScript y DHTML. Con esto se creó un nuevo profesional de la informática, el diseñador web, experto en estos menesteres, que viene siendo algo así como un experto en programación web, a caballo entre el diseñador gráfico tradicional y el programador de aplicaciones llevadas a Internet (.lenguajes-de-programacion) 6.2. GESTORES DE CONTENIDO Un sistema de gestión de contenidos (econtent management system, abreviado CMS) es un programa que permite crear y administrar contenidos, principalmente en páginas web. Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio. El sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. Otras consideraciones iniciales Entendido como un sistema de soporte a la gestión de contenidos; ya que, en realidad, son las estrategias de comunicación las que realmente llevan a gestionar contenidos y publicidad de forma efectiva; los sistemas informáticos pueden a lo sumo proporcionar las herramientas necesarias para la publicación en línea, o bien incluir servicios de soporte a la toma de decisiones por lo que a la gestión de contenidos se refiere. El gestor de contenidos se aplica generalmente para referirse a sistemas de publicación, pudiendo subestimarse las funcionalidades de soporte y mantenimiento, en detrimento de las funcionalidades relacionadas con la optimización de los tiempos de publicación. La correcta implantación del sistema, con arreglo a las necesidades del cliente es necesaria, y es necesario entender el proyecto de un portal web en el seno de un proyecto de comunicación estructurado y bien planteado.

19 Funcionamiento. Un sistema de administración de contenidos siempre funciona en el servidor web en el que esté alojado el portal. El acceso al gestor se realiza generalmente a través del navegador web, y se puede requerir el uso de FTP para subir contenido. Cuando un usuario accede a una URL, se ejecuta en el servidor esa llamada, se selecciona el esquema gráfico y se introducen los datos que correspondan de la base de datos. La página se genera dinámicamente para ese usuario, el código HTML final se genera en esa llamada. Normalmente se predefine en el gestor varios formatos de presentación de contenido para darle la flexibilidad a la hora de crear nuevos apartados e informaciones Gestión de usuarios. Dependiendo de la plataforma escogida se podrá escoger diferentes niveles de acceso para los usuarios; yendo desde el administrador del portal hasta el usuario sin permiso de edición, o creador de contenido. Dependiendo de la aplicación podrá haber varios permisos intermedios que permitan la edición del contenido, la supervisión y reedición del contenido de otros usuarios, etc. Ilustración 1 Topología de Gestor de Contenido

20 Tipos de gestores de contenidos Los gestores de contenido se pueden clasificar según diferentes criterios: Por sus características Según el lenguaje de programación empleado, como por ejemplo Active Server Pages, Java, PHP, ASP.NET, Ruby On Rails, Python. Según la licencia: Código abierto o Software propietario. Por su uso y funcionalidad Blogs; pensados para páginas personales. Foros; pensados para compartir opiniones. Wikis; pensados para el desarrollo colaborativo. Enseñanza; plataforma para contenidos de enseñanza on-line. Comercio electrónico; plataforma de gestión de usuarios, catálogo, compras y pagos. Publicaciones digitales. Difusión de contenido multimedia. Propósito general Como trabaja un gestor de contenido Un sistema de administración de contenido siempre funciona en el servidor web en el que esté alojado el portal. El acceso al gestor se realiza generalmente a través del navegador web, y se puede requerir el uso de FTP para subir contenido. Cuando un usuario accede a una URL, se ejecuta en el servidor esa llamada, se selecciona el esquema gráfico y se introducen los datos que correspondan de la base de datos. La página se genera dinámicamente para ese usuario, el código HTML final se genera en esa llamada. Normalmente se predefine en el gestor varios formatos de presentación de contenido para darle la flexibilidad a la hora de crear nuevos apartados e informaciones. (Gallardo, 2009)

21 Ilustración 2 Topología de Comunicación Plataformas de Gestión de Contenido Ilustración 3 Logos de Plataformas Gestoras de Contenido Fuente: Elaboración propia Drupal. (PHP) Poderoso CMS muy conocido por la calidad de su código y por la seguridad que brinda, es estable y de actualización continua, configuración sencilla, instalación ágil, importante cantidad de módulos y temas visuales, excepcional documentación y comunidad activa y muy amigable, gran concepto de nodo. Mambo. Mambo es un sistema de portales CMS basado en el lenguaje de programación PHP y base de datos SQL de código abierto. Basa todo su aspecto en templates o themes. Características principales de Mambo: Base de datos movida por los estándares PHP/MySQL. Módulo de seguridad multinivel para usuarios/administradores. Noticias, productos o secciones totalmente editables y configurables. Sección de temas que pueden ser enviados por los usuarios registrados.

22 Plantillas y Templates totalmente configurables incluyendo menú central y bloques a izquierda y derecha, según se quiera. Soporte de subida de imágenes para incorporar a nuestra propia librería y para usar en cualquier parte del sitio web. Foros dinámicos y encuestas con vista de resultados. Soporta Linux, FreeBSD, MacOSX server, Solaris, AIX, SCO, WinNT, Win2K. (Gallardo, 2009) XOOPS: Es un gestor de contenidos (CMS) potente y a la vez, sencillo, escrito en PHP. Permite a los administradores manejar sitios Web dinámicos, crear comunidades virtuales, gestionar usuarios, modificar la estructura del sitio y ofrecer contenido mediante una sencilla interfaz. Con XOOPS, puedes centrarte definitivamente en el contenido, olvidando para siempre las tareas complejas. Características de XOOPS Base de datos. XOOPS utiliza una base de datos relacional (actualmente MySQL) para almacenar los datos necesarios para ejecutarse en un entorno basado en el contenido. Totalmente modulable. Los módulos pueden instalarse, desinstalarse, activarse o desactivarse con sólo un clic de ratón, a través del apartado de administración. Personalización. Los usuarios registrados pueden editar sus perfiles, seleccionar temas para el sitio, subir avatares personalizados y mucho más. Gestión de usuarios. Posibilidad de buscar usuarios por varios criterios; enviar e- mails y mensajes privados a usuarios a través de un sistema de mensajes basado en plantillas. Soporte por la comunidad web. XOOPS fue creado y es mantenido por un equipo de varios voluntarios de distintas partes del mundo. La comunidad de XOOPS tiene más de doce sitios de soporte oficiales para dar soporte a otros idiomas distintos del inglés. Soporte Multilenguaje. Soporta totalmente el multilenguaje, incluyendo el japonés, chino tradicional, coreano, etc. Sistema versátil de permisos de grupo. Potente y amigable sistema de permisos que permite a los administradores establecer permisos a grupos de usuarios. Interfaz basado en temas. XOOPS se basa en un potente sistema de temas. Tanto administradores como usuarios pueden cambiar la apariencia de todo el sitio web

23 con sólo un clic de ratón. Hay más de 60 temas disponibles para la descarga. (jagg) WordPress. Es un sistema de gestión de contenido enfocado a la creación de blogs (sitios web periódicamente actualizados). Desarrollado en PHP y MySQL, bajo licencia GPL. WordPress se ha convertido en el CMS más popular de la blogosfera. (Gallardo, 2009) Joomla: Es un sistema de gestión de contenidos que puede ser utilizado independientemente. Entre sus principales virtudes está la de permitir integrar, añadir o editar el contenido de un sitio web de manera sencilla. Es un código abierto programado mayoritariamente en PHP bajo una licencia GPL. Este administrador de contenidos puede trabajar en redes locales dígase intranet o internet y requiere de una base de datos creada con un gestor MySQL, así como de un servidor HTTP Apache. (Wikipedia, Wikipedia) Es un Sistema de Gestión de Contenidos (CMS) poderoso y fácil de utilizar. Si se acerca por primera vez a los sistemas de publicación web, descubrirá que Joomla! proporciona soluciones sofisticadas a sus necesidades en línea. Joomla! puede generar un sitio web robusto a nivel de empresa, posibilitando la ampliación sin límites para sus necesidades de publicación a medida. Además, suele ser la opción de sistema adecuada para pequeños negocios o usuarios domésticos que quieren un sitio con apariencia profesional pero a la vez simple de elaborar y utilizar. Joomla!, reconocido como software de clase mundial, ha sido premiado como el Mejor Proyecto de Código Abierto en el certamen Linux and Open Source Awards del 2005 y (ayuda.joomlaspanish.org) Este es el CMS más usado en internet, grandes portales de todo tipo se han montado bajo este poderoso gestor de contenido, por su variedad de templates de acuerdo al rubro de la página, además de su amplia comunidad de desarrolladores libres que sacan diversos módulos para poder instalarlos. (Gallardo, 2009) Características de Joomla En Joomla se incluyen características como: mejoras en el rendimiento web, versiones imprimibles de páginas, flash con noticias, blogs, foros, polls (encuestas), calendarios, búsqueda en el sitio web e internacionalización del lenguaje. Su nombre es una pronunciación fonética para anglófonos de la palabra swahili yumla, que significa "todos juntos" o "como un todo". Se escogió como una reflexión del compromiso del grupo de desarrolladores y la comunidad del proyecto.

24 Versiones de Joomla Versión Fecha Con soporte Lanzamiento hasta (LTS) (LTS) Color Significado ROJO Versión sin Soporte VERDE Versión con Soporte AZUL Versión en Desarrollo Tabla 1 Versiones del Gestor de Contenido Joomla 1 Fuente: Elaboración propia La primera versión de Joomla (1.0.0) fue publicada el 16 de septiembre de 2005 y se trataba de una evolución paralela (fork) mejorada de Mambo combinada con modificaciones de seguridad y anti-bugs. Le siguió la versión 1.5 y Joomla 1.6, mejorando considerablemente el sistema ACL de usuarios y la posibilidad de crear árbol de secciones ilimitado, evitando así las restricciones que tenía el antiguo sistema de clasificación de contenidos. (Wikipedia, Wikipedia) Extensiones de Joomla Una de las mayores potencialidades que tiene este CMS es la gran cantidad de extensiones existentes programadas por su comunidad de usuarios que aumentan las posibilidades de Joomla con nuevas características y que se integran fácilmente en él. Existen varias extensiones disponibles y con diversas funcionalidades como por ejemplo: 2 Generadores de formularios dinámicos Directorios de empresas u organizaciones Gestores de documentos Galerías de imágenes multimedia Motores de comercio y venta electrónica Software de foros y chats Calendarios Software para blogs

25 Servicios de directorio Boletines de noticias Herramientas de registro de datos Sistemas de publicación de anuncios Servicios de suscripción A su vez estas extensiones se agrupan en: Componentes Módulos Plantillas Plug-in (Wikipedia, Wikipedia)

26 Joomla Como Gestor De Contenido. El Gestor de Artículos. Muestra un listado de todos los artículos de contenido de Joomla. Para acceder, seleccionamos en el menú Contenido, luego Gestor de Artículos y aparece una interfaz como se muestra en la ilustración 4. Ilustración 4 Interfaz del Gestor de Artículos Joomla Esta interface está dividida en dos zonas diferentes, en la parte superior la zona1 se llama Barra de Herramientas y en la zona2 se llama Lista de Artículos. Barra de Herramientas Esta zona dispone de una serie de botones que nos permiten Archivar, Publicar, Despublicar, Mover, Copiar, Borrar o Editar los artículos seleccionados y también crear un Nuevo artículo y obtener ayuda. Algunas de estas operaciones se pueden realizar también utilizando los controles de la tabla de artículos, como hemos visto más arriba.

27 Ilustración 5 Barra de Herramientas Joomla Desarchivar. Cambia el estatus de uno o más artículos de "Archivado" a Desarchivado. Los artículos archivados pueden hacerse visibles en la zona pública añadiendo un enlace especial al menú. Archivar. Cambia el estatus de uno o más artículos a 'Archivado'. Publicar. Publica un artículo que se encuentra no publicado o en borrador. Despublicar. Despublica u oculta de la zona pública uno o más artículos que se encuentran publicados. Mover. Permite trasladar un artículo a una sección y/o categoría diferente. Copiar. Permite hacer una copia o duplicado de un artículo y guardarlo en otra sección y/o categoría diferente. Papelera. Permite eliminar uno o más elementos. Los elementos seleccionados serán enviados a la 'Papelera de artículos' y quedarán des publicados. Es necesario vaciar la papelera para eliminarlos definitivamente. Editar. Permite editar el artículo seleccionado. También puede editarse un elemento haciendo clic sobre su nombre o título. Nuevo. Este botón abre la ventana de edición para crear un nuevo artículo. Preferencias. El botón preferencias nos permite establecer una serie de preferencias generales que afectarán de forma predeterminada a todos los artículos a no ser que en alguno de ellos se definan parámetros de configuración individualizados. Ayuda. Abre la ayuda en pantalla. Lista de Artículos La lista de artículos publicados en el sitio se muestra dentro de una tabla con varias columnas.

28 Casilla de Selección: Estas casillas sirven para seleccionar el artículo o los artículos con los que vamos a trabajar antes de utilizar algunos botones de la barra de herramientas superior. Título: Es el título del Artículo de contenido. La lista de Artículos está ordenada según el orden específico de Secciones y Categorías dentro de cada Sección. Se puede pulsar el Título del Artículo para editarlo. Publicado: Indica si el artículo está Publicado o No Publicado. Pasando el ratón sobre el icono podremos ver un resumen de la información de publicación. Pulsando en el icono podremos cambiar el estado de publicado a no publicado o viceversa. Página de Inicio: Indica si el Artículo se muestra o no en la Página de Inicio del sitio. Pulsando este icono podremos mostrar u ocultar este Artículo en la Página de Inicio. Ordenar: Pulsando las flechas de icono podremos mover el Artículo de Contenido Arriba o Abajo, y así cambiar el orden en el listado. También podemos ordenar los Artículos de Contenido introduciendo un valor en el campo orden y pulsando el icono Guardar. Acceso: Muestra qué tipo de usuarios pueden visualizar el Artículo en la zona pública. Pulsando el Nivel de Acceso podremos escoger otro valor: Public (Público), Registered (Registrado) o Special (Especial). Sección: Indica el nombre de la Sección a la que pertenece el Artículo. Pulsando sobre el Título de la Sección podremos editarla en caso necesario. Categoría: Indica la Categoría a la que pertenece el Artículo. Pulsando sobre el Título de la Categoría podremos editarla en caso necesario. Autor: Indica es el nombre del autor del Artículo. Podemos pulsar el Nombre de Autor para editarlo, si es necesario. Fecha: Esta es la fecha en que se creó el Artículo. 7. ID: Muestra el Número de Identificación del Artículo en la base de datos. Joomla! lo genera automáticamente en el momento en que se crea el artículo.

29 7. CRONOGRAMA DE ACTIVIDADES 7.1. Actividades A1: Reconocimiento de la empresa (Inducción). A2: Levantamiento de los Requerimientos. A3: Organizar y Clasificar la Información de los productos que se van a ofrecer en el nuevo sitio virtual. A4: Investigar y escoger el gestor de contenido. A5: Instalar el gestor de contenido en el ambiente de prueba junto con la plantilla propuesta por le empresa. A6: Desarrollo e implementación del nuevo sitio virtual. A7: Documentación del sitio virtual Cronograma Actividades Febrero Marzo Abril Mayo Junio 3º 4º 1º 2º 3º 4º 1º 2º 3º 4º 1º 2º 3º 4º 1º 2º 3º 4º A1 X X A2 X X A3 X X A4 X X A5 X X A6 X X X X X X X X X X A7 X X X X X

30 8. MARCO METODOLOGICO 8.1. Gestor de Contenido seleccionado para el desarrollo de la plataforma web. Dentro de la gama de gestores de contenidos que sobresalen y que ofrecen una gran variedad de posibilidades para el manejo y administración de las plataformas brindando la posibilidad de manejar, publicar contenidos sin necesidad de conocer el lenguaje html. El gestor de contenido que fue escogido para el desarrollo del nuevo sitio virtual para la empresa MultitintasINK es Joomla en la versión 2.5, y en el lenguaje Español. Joomla en su versión 2.5, se ajusta muy bien a la necesidad propuesta por la empresa para el desarrollo del nuevo sitio virtual ya que ofrece una variedad de herramientas como: gestor de contenido dinámico, personalizable y escalable robusto, que sin tener mucha habilidad técnica es fácil de aprender y de usar. Es un gestor de contenido de código abierto, utilizarlo es gratis. Está escrito en php y utiliza MySQL como base de datos. Para el proceso del diseño de la página web, la empresa el gerente de la empresa Multitintas INK propuso un modelo de plantilla la cual será usada para la implementación del nuevo sitio virtual que les brindada mayores y mejores servicios. La instalación del Gestor de contenido Joomla en su Versión 2.5 se hizo en un ambiente de prueba mientras se soluciona el Hosting y el Dominio con la empresa Publicar Instalación de Joomla en el Ambiente de Prueba Paso #1 Para la instalación del Gestor de contenido Joomla se obtuvo de la página oficial donde se encuentra disponible en las versiones: Joomla 1.5 Joomla 1.6 Joomla 1.7

31 Joomla 2.5 Para nuestra plantilla se recomienda instalar la versión del Gestor de Contenido Joomla 2.5 que se descargó directamente de esta URL Paso #2 Para instalara el gestor de contenido Joomla se necesita un servidor MySQL donde vamos a crear una Base de Datos para poder correr e instalar con normalidad Joomla en cualquiera de sus versiones. Para este caso se Instaló el Servidor WampServer, en si versión 1.6 que de descargo de la página oficial Se debe tener en cuenta las versiones y compatibilidades con el gestor de contenido. Apache: v2.x recomendada + PHP: v MySQL: v Microsoft IIS: v7 PHP v MySQL v5.1 Se instala el servidor en el equipo de cómputo normalmente, luego instalado en el ordenador se ejecuta y se procede a crear la base de datos en esta dirección Ya creada la base de datos se procede a instalar Joomla. Paso #3 Extraemos el contenido de Joomla en la carpeta local donde quedo instalado el servidor de MySQL.

32 Imagen 1 Extracción del Contenido Joomla Fuente. Elaboración propia Paso #5 Instalación de Joomla Ingresamos al navegador preferido y escribimos en la URL Localhost En este paso se escoge la clase de idioma.

33 Imagen 2 Instalación de Joomla- Idioma En este paso se registra la información relacionada con la base de datos que anteriormente se creo. Como ejemplo tenemos: Imagen 3 Instalación de Joomla- Registro con la Base de datos

34 Host Name - localhost Username - root Database Name - something like joomla_yourproejctname. En este paso de llenan los campos de registro como el nombre del sitio web, nombre de usuario administrador del gestor de contenido web y password. Paso #6 Imagen 4 Instalación de Joomla- Configuración de Usuario/Admin. Ingresar al Gestor de contenido como Administrador

35 Imagen 5 Instalación de Joomla- Login como Admin. Interface de Joomla como Administrador del contenido Web Imagen 6 Interfaz de Joomla como Administrador

36 8.3. Modelo de Plantilla Escogida. Imagen 7 Modelo de Plantilla Escogida Proceso de Instalación de la plantilla en el Gestor de Contenido. Al descomprimir el paquete donde se obtuvieron estos archivos que son necesarios para la instalación y el correcto funcionamiento de la plantilla: IT_TheSoftware_Template.zip mod_icemgamenu.zip plg_icemgamenu.zip 4. mod_icetabs.zip

37 5. mod_icecaption.zip 6. plg_icespeed.zip Clone_Installer_Joomla..zip installation_guide.pdf Installation_Guide_IceMegaMenu.pdf Se empieza instalando con paquete de Plug-in plg_icespeed.zip como se muestra en la Imagen 8. Imagen 8 Instalación del Plug-in plg_icespeed.zip Este Plug-in sirve para optimizar la carga del contenido web.

38 Imagen 9 Instalación de las Extensiones Ir a Extensiones -> Administrador de extensiones para instalar la plantilla de IceTheme y sus extensiones de cortesía. En la página "Subir paquete de archivos" la forma que usted debe ver a los archivos que se han extraído por primera vez en el equipo desde el Todo en un paquete e instalar uno por uno. Los archivos zip que se instalaron fueron los siguientes: IT_TheSoftware_Template_v.1.6.x.zip mod_icemgamenu_v.1.6.x.zip plg_icemgamenu_v.1.6.x.zip mod_icetabs_v.1.6.x.zip mod_icecaption_v.1.6.x.zip plg_icespeed_v.1.6.x.zip Ya tiendo todos los módulos y Plug-in instalados en el Gestor de Contenido, se procede a poner la plantilla por defecto.

39 Imagen 10 Plantilla por Defecto o principal Ir al "Administrador de plantillas" de la página (Adminsitrator Joomla -> Extensiones del menú () -> Plantilla Manager) Para seleccionar la plantilla de Joomla por defecto para su sitio web. A continuación, en la fila, que es el "it_thesoftware" plantilla, haga clic en la estrella blanca para hacer esta plantilla por defecto de su página web.

40 Luego tenemos un modelo de plantilla como se muestra en la imagen 11 Imagen 11 Modelo de Plantilla Instalada Ya se encuentra instalada la plantilla en el gestor de contenido y lista para ser modificada ingresándole la información pertinente que se desea mostrar sobre los productos y servicios que ofrece la empresa MultitintasINK. Para esto se deben tener en cuenta las posiciones de los módulos para ubicar los artículos y los menús.

41 8.5. Categoría de los Productos que ofrece la empresa MultitintasINK y Menús Contemplados en el sitio virtual Categoría de Productos. I. Computadores. -Desktop/Escritorio -Laptop/Portátil -Todo en Uno --Marcas. ---Argon. ---Logil. ---Janus. --Minis ---Marcas ----Samsung ----acer ----Hp/Compaq ----Sony-Vaio ----Lenovo ----Toshiba -Normales --Marcas ---Samsung ---acer ---Hp/Compaq ---Sony-Vaio ---Lenovo ---Toshiba II. --Marcas ---Samsung ---acer ---Hp/Compaq ---Sony-Vaio ---Lenovo ---Toshiba Impresoras -Multifuncional --Inyección de Tinta

42 ---Marcas ----Hp Deskejt ----Cannon ----Epson --Laser ---Marcas ----Hp Deskejt. ----Epson -Impresora Normal --Inyección de Tinta ---Marcas ----Hp Deskejt ----Cannon ----Epson --Laser -Matriz de Punto --Marca ---Marcas --Epson ----Hp Deskejt. ----Epson III. Accesorios para Computador -Teclados --Marcas --Microsoft --Logitech --Hp --Genius -Mause --Marcas --Microsoft --Logitech --Hp --Genius -Camaras Web s --Marcas --Microsoft

43 --Logitech --Hp --Genius -Discos Duros (Internos, Externos) --Marcas --Toshiba --Samsung -Bases de Refrigerantes -Adaptadores de Energía para Portátiles --Marcas ---Samsung ---acer ---Hp/Compaq ---Sony-Vaio ---Lenovo ---Toshiba -Fundas -Estabilizadores /Reguladores de Energía -Audífonos --Marcas --Microsoft --Compaq --Genius -Presentadores --Marcas --Logitech --Genius -Lectores de Memorias IV. Mundo Digital Video cámaras Cámaras Digitales Tables Teléfonos Móviles V. Redes

44 -Cables --Serial a USB --Paralelo a USB --Datos para Impresora -Switch -Router -Wi-Fi -Multiplicadores de Red -Targetas de Red PCI Menús Contemplados para el Nuevo sitio Virtual. Computadores. Impresoras. Mundo Digital. Redes y Conectividad. Tintas y Suministros. Nuestras Tiendas. Contáctenos Creación de las Categorías en Joomla. Se partió de la idea donde se realizó la categorización de los productos se procede a crear las categorías en el gestor de contenido como se muestra en la Imagen 12. Se puede observar la creación de las categorías (padre e hijas), donde se encuentran configuradas de tal forma que se puedan visualizar estando en un estado público donde cualquier usuario pueda observar y navegar por estas.

45 Imagen 12 Categorías de los productos en Joomla 8.7. Creación de los Artículos en Joomla Teniendo claro las categorías se empieza a crear los artículos, es la información que se va amostrar cuando el usuario le dé clic sobre un producto un menú. Para nuestro ejemplo que se muestra en la imagen 13, solo se ha creado un artículo que se llama Samsung QX412 que pertenece a la categoría ComputadoresLaptop/PortatilesNormalesMarcaSamsung.

46 Imagen 13 Artículos sobre los productos en Joomla 8.8. Creación de los Menús en Joomla Ya como se tiene creadas las categorías y los artículos asignados correspondientemente se procede a crear los menús como se ilustra en la imagen 14 donde los usuarios van a navegar y observar la información y los servicios que ofrece el sitio virtual. En la lista de los menús que se encuentran creados en la imagen 14 se visualiza que aún no se han puesto como públicos.

47 Imagen 14 Lista de los Menús en Joomla Para nuestro caso se ubicó la información de los menús a manera de ejemplo de tal forma que se visualizaran en la plantilla que se ilustra en la imagen 15, donde se muestra claramente cada uno de los menús que aran parte principal del sitio virtual. Imagen 15 Lista de los Menús en la plantilla