FACULTAD DE CIENCIAS ECONÓMICAS, JURÍDICAS Y SOCIALES UNIVERSIDAD NACIONAL DE SALTA

Transcripción

1 Índice Índice Propuesta de Trabajo Objetivos Herramientas a utilizar Apache PHP MySQL PHPMyAdmin Appserv Joomla Instalación de Appserv Instalación de Joomla Conceptos claves Árbol de menú Desarrollo de la página Instalación de plantilla Creación de Categorías Creación de Menús Creación de Módulos y asignación de Menú al Modulo Duplicación de Plantillas Slider de Fotos Multicategorias Banner Lateral Cabera y Logos Complejidades añadidas Fin del Proyecto Migración de la Base de Datos Subida de la página al servidor Conclusiones Proyectos a futuro Bibliografía Autores Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 1 de 59

2 Propuesta de Trabajo Como Becarios del Departamento de Tecnología y Servicios Informáticos de la Facultad de Ciencias Economicas, Jurídicas y Sociales de la UNSa se nos dio la oportunidad de trabajar en el proyecto de Rediseño de la actual página web de la Facultad. Si bien la página web a nivel informativo cumple con los requerimientos que todo portal web de una institución educativa tiene, su aspecto visual es muy poco llamativo y por lo cual genera muy poco interés e interacción con los usuarios visitantes. Por lo tanto la idea del rediseño de la página consiste en continuar cumpliendo con esos requisitos para proveer información y mejorar su aspecto visual de tal modo que sea fácil para los distintos usuarios (visitantes, alumnos, docentes, PAU, autoridades, etc.) poder navegar a través de ella. La idea de trabajo fue propuesta por el Ingeniero Miguel Angel Soto, quien es Coordinador TIC del Departamento de Tecnología y Servicios Informáticos de la Facultad de Cs. Economicas y los Becarios encargados de llevar a cabo este proyecto son: CU: Caro, Carlos Roberto Raúl CU: Guaymas, Zulema Leticia Objetivos Como objetivos generales se puede destacar: Mantener el nivel de la Página Web como portal informativo. Aumentar la calidad en cuanto a su aspecto visual. Generar mayor interés para ser visitada por parte de los usuarios. Que la Página tenga el nivel que un Portal Web diseñado por alumnos avanzados de la carrera de Licenciatura en Análisis de Sistemas de la UNSa debe tener. Como Objetivos específicos se puede destacar: Investigar el uso y dominio de tecnologías de desarrollo Web y sus nuevas versiones. Afianzar los conocimientos adquiridos a lo largo del cursado de la carrera de Licenciatura en Análisis de Sistemas. Encarar un proyecto de tal envergadura, cumpliendo con los requerimientos del cliente y los plazos estipulados. Aumentar experiencias en el desarrollo de páginas web por parte de los Becarios. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 2 de 59

3 Herramientas utilizadas Se necesito para llevar a cabo este proyecto las siguientes herramientas: Apache ( Servidor web) PHP ( Lenguaje de programación web) MySQL ( Motor de Base de datos) PHPMyAdmin ( Interfaz grafica para administración de Base de Datos) Appserv ( paquete de instalación que contiene todas las herramientas mencionadas anteriormente) Joomla ( sistema de gestión de contenidos para el desarrollo de sitios web) A continuación se detalla una breve explicación de cada una de estas herramientas: Apache Es un Servidor Web de distribución libre y de código abierto, siendo el más popular del mundo desde abril de 1996 por su excelencia, confiabilidad, robustez y estabilidad. Entre sus características más importantes se destacan: Corre en una multitud de Sistemas Operativos, lo que lo hace prácticamente universal. Apache es una tecnología gratuita de código fuente abierta. Esto le da una transparencia a este software de manera que si queremos ver que es lo que estamos instalando como servidor, lo podemos saber, sin ningún secreto. Apache es un servidor altamente configurable de diseño modular. Es muy sencillo ampliar las capacidades del servidor Web Apache. Actualmente existen muchos módulos para Apache que son adaptables a este, y están ahí para que los instalemos cuando los necesitemos. Otra cosa importante es que cualquiera que posea una experiencia decente en la programación de C o Perl puede escribir un modulo para realizar una función determinada. Amplias librerías de PHP y Perl a disposición de los programadores. Es capaz de utilizar lenguajes como PHP, TCL, Python, etc. PHP PHP son las iniciales de PHP: Hyper Text Preprocessor y se trata de y un lenguaje interpretado similar a JavaScript que se ejecuta en el servidor, y que permite la creación documentos y páginas web con contenido dinámico. PHP fue desarrollado en 1995 por Rasmus Lerdorf como un conjunto de herramientas que permitían añadir cierto contenido dinámico a las páginas web. Debido a la popularidad que alcanzó, fue rediseñado por completo por Zeev Suraski y Andi Gutmans, dando lugar a PHP 3. Posteriormente, ha sido ampliado con más funcionalidades dando lugar a PHP 4; para finalmente desembarcar con PHP 5. A diferencia de JavaScript, PHP está pensado para su ejecución en el servidor y está especialmente concebido para su interpretación con multitud de sistemas de gestión de bases de datos. Las principales características del lenguaje son: Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 3 de 59

4 Es un lenguaje de programación interpretado que se ejecuta en el servidor y que permite la creación de documentos HTML dinámicos. Desde este punto de vista es similar a ASP, pero a diferencia de este, que solo se ejecuta en entornos Microsoft, PHP es de libre distribución y se suele ejecutar en entornos Unix/Linux. Presenta una sintaxis similar a la de C, Perl, Java y JavaScript, lo que facilita su aprendizaje. Permite la conexión y el acceso multitud de sistemas de gestión de bases de datos. También dispone de mecanismo para el procesamiento de archivos, tratamiento de textos, generación dinámica de imágenes y tratamiento de documentos XML. Ofrece soporte múltiples protocolos de comunicaciones de Internet como, por ejemplo: HTTP, IMAP, FTP, etc. Su código fuente es gratuito y abierto. Además, se encuentra disponible para muchas plataformas (entorno Windows, Unix, Linux, etc.) Esto ofrece la ventaja de que las aplicaciones desarrolladas en PHP se pueden transportar de una plataforma a otra sin necesidad modificar una sola línea de código. MySQL MySQL es un sistema de gestión de base de datos relaciona, multihilo y multiusuario. MySQL es muy utilizado en aplicaciones web, como Drupal o phpbb, en plataformas (Linux / Windows Apache MySQL PHP/Perl/Python), por herramientas de seguimiento de errores como Bugzilla. Su popularidad como aplicación web está muy ligada a PHP, que a menudo aparece en combinación con MySQL. MySQL es una base de datos muy rápida en lectura cuando utiliza el motor no transaccional MyISAM, pero puede provocar problemas de integridad en entornos de alta concurrencia en la modificación. En aplicaciones web hay baja concurrencia en la modificación de datos y en cambio el entorno es intensivo en lectura de datos, lo que hace MySQL ideal para este tipo de aplicaciones. Las principales características de este gestor de base datos son las siguientes: Aprovecha la potencia de sistemas multiprocesador, gracias a su implementación multihilo. Soporta gran cantidad de tipos de datos por columnas. Dispone de API s en cantidad de lenguajes (C, C++, Java, PHP, etc.). Gran portabilidad entre sistemas. Soporta hasta 32 índices por tabla. Gestión de usuarios y passwords, manteniendo un muy buen nivel de seguridad en los datos. Gran rapidez y facilidad de uso, como así también facilidad de instalación y configuración. PHPMyAdmin Es una herramienta de código abierto, programado en PHP, cuya finalidad es la administración eficiente de bases de datos MySQL a través de una interfaz web. Con PHPMyAdmin se puede Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 4 de 59

5 crear y eliminar bases de datos, crear y eliminar tablas, editar campos (cambiar los tipos de datos, longitud, incremento, etc.), ejecutar cualquier sentencia SQL y administrar privilegios (mediante Roles y Usuarios), entre muchas cosas más. Appserv Es una herramienta OpenSource para Windows que facilita la instalación de Apache, MySQL y PHP en la cual estas aplicaciones se configuran en forma automática. Como extra incorpora PHPMyAdmin para el manejo de MySQL. Joomla Joomla es un Sistema de gestión de contenidos (en inglés Content Management System, o CMS) que permite desarrollar sitios web dinámicos e interactivos. Permite crear, modificar o eliminar contenido de un sitio web de manera sencilla a través de un Panel de Administración. Es un software de código abierto, desarrollado en PHP y liberado bajo licencia GPL. Este administrador de contenidos puede utilizarse en una PC local (en Localhost), en una Intranet o a través de Internet y requiere para su funcionamiento una base de datos creada con un gestor MySQL, así como de un servidor HTTP Apache. Instalación de Appserv paso a paso 1 Se ejecuta el archivo de instalación con doble clic o con clic derecho Abrir. Figura 1 Figura 1 2- Se abrirá la pantalla de instalación y se hace clic en Next. Figura 2 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 5 de 59

6 Figura 2 3- Acuerdo de licencia: AppServ es distribuido bajo la licencia GNU/GPL. Debe leer el acuerdo de licencia antes de instalar. Si se desea continuar clic en I Agree de lo contrario para cancelar la instalación clic en Cancel. Figura 3 Figura 3 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 6 de 59

7 4 Luego se escoge la ubicación de la instalación, por defecto se instala en la ruta C:\AppServ. Si se desea cambiar la ubicación se debe hacer clic en Browse, de lo contrario si está conforme con la ubicación clic en Next. Figura 4 Figura 4 5 El siguiente paso se debe seleccionar lo que se desea instalar. En nuestro caso es necesario instalar todos los componentes del paquete, por lo tanto se debe seleccionar todos los elementos de la lista (Apache MySQL PHP - PHPMyAdmin) y se hace clic en Next. Figura 5. Figura 5 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 7 de 59

8 6 A continuación se debe introducir el nombre del servidor, en nuestro caso se coloco localhost. También se debe colocar un e-meil del administrador y se deja por defecto como puerto del Apache HTTP Port el 80. Figura 6. Figura 6 7 El siguiente paso es introducir la contraseña del motor de Base de Datos MySQL, se escribe dos veces y se hace clic en Install. Las opciones de Old Password Support y Enable InnoDB quedan sin seleccionar. Figura 7. Figura 7 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 8 de 59

9 8 Al finalizar la instalación se invita a iniciar los servidores Apache y MySQL,los cuales se deben dejar seleccionados y se hace clic en Finish. Figura 8. Figura 8 9 Para verificar que se ha instalado y que funciona correctamente, se debe abrir y escribir en un navegador la dirección De esta manera aparece en la pantalla la siguiente imagen informando todos los componentes instalados. Figura 9. Figura 9 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 9 de 59

10 Instalación de Joomla paso a paso Para la realización del proyecto se instala la versión de Joomla 2.5.6, el cual exige los siguientes requerimientos técnicos: Apache 2.x. o superior PHP o superior MySQL o superior 1 Hay que estar seguro de que estén instalado los requerimientos técnicos con las versiones que sea compatible con Joomla Para ello se debe abrir y escribir en un navegador la dirección De esta manera aparece en la pantalla la siguiente imagen informando todos los componentes instalados. Figura 10. Figura 10 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 10 de 59

11 2 Se debe descargar Joomla de la página El archivo es en formato.zip, se aconseja descargar la versión en español. Figura 11 Figura 11 3 Descomprimir el archivo en el directorio raíz del servidor web, es decir dentro de la carpeta www. Luego se debe abrir y escribir en un navegador la dirección y aparecerá la pantalla de instalación de Joomla. La primera imagen pedirá la elección del idioma para comenzar el proceso de instalación, una vez elegido se debe hacer clic en Siguiente. Figura 12 Figura 12 4 Se verifica que el entorno del servidor donde será instalado Joomla cumple con los requisitos técnicos o no. Si se observa la mayoría de los resultados del test en verde es una buena señal. Dependiendo de la configuración, puede haber diferencias. El instalador de Joomla comprueba las opciones de configuración del servidor web (en nuestro caso Apache), PHP y del sistema operativo. Si se usa un sistema Unix (Linux, Mac OS X), debes prestar atención a los permisos de archivo. Esto es especialmente importante para el archivo Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 11 de 59

12 configuration.php. Este archivo será generado al final de la instalación con los valores concretos del sitio. Si el instalador no puede escribir en el directorio raíz, Joomla no puede crear el archivo, y la instalación no podrá completarse. En caso de que los permisos de escritura aparezcan con un "No" rojo, se deberá configurar correctamente los permisos en el servidor, y luego hacer clic en el botón "repetir el chequeo". Una vez que todo esté "en verde" se debe hacer clic en Siguiente. Figura 13 Figura Todo producto de software esta licenciado de alguno u otra manera. Joomla! está licenciado de acuerdo con la versión 2.0 de la GNU General Public License. En este paso se debe hacer clic en Siguiente. Figura 14 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 12 de 59

13 Figura 14 6 Para la configuración de la base de datos es necesario contar con los parámetros de la base de datos instalados con Appserv. Se debe completar la información de la siguiente manera: Tipo de Base de datos: Mysql Nombre del host: localhost Usuario: root Contraseña: la misma que se introdujo cuando se instalo MySQL con Appserv Nombre de la Base de datos: el nombre de la base de datos que alojara el sitio, en nuestro caso fue económicas Prefijo de la tabla: El campo prefijo de tabla MySQL es realmente práctico. Delante de cada nombre de tabla generado por el instalador web, éste escribirá el texto introducido en ese campo. Por defecto, el instalador web sugiere uno creado aleatoriamente. El porqué de esto tiene una explicación muy sencilla. A veces puede ser que el proveedor sólo permita el acceso a una base de datos MySQL. Si se quiere tener dos o más sitios Joomla en el servidor, hay un problema, ya que las tablas no se diferenciarán unas de otras. Con el prefijo de tabla es posible distinguir entre muchas tablas. Es posible que exista base de datos creadas antes de la instalación de Joomla. Si se desea resguardar esa base de datos se debe dejar seleccionada la opción de Respaldar, en caso contrario se selecciona en Eliminar. Al finalizar el proceso de configuración de la base de datos se debe hacer clic en Siguiente. Figura 15 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 13 de 59

14 Figura Para evitar problemas con los permisos de acceso y posiblemente con un PHP funcionando en Modo Seguro, existe la posibilidad de usar las funciones FTP de PHP para la subida y gestión de archivos. Esto no es necesario en una instalación local. Si se ha instalado Joomla en un servidor virtual con el proveedor de alojamiento, se puede introducir los datos FTP que éste proporcionó. Si el proveedor permite esta función, es recomendable por razones de seguridad crear diferentes cuentas FTP para los usuarios y para la instalación de Joomla. En nuestro caso no fue necesaria la configuración de usuario FTP, por lo que este paso se omitió. Figura 16 Figura 16 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 14 de 59

15 8 La configuración final consiste en elegir un nombre para el sitio web Joomla, que nuestro caso fue económicas. Luego se debe introducir los datos de acceso para el administrador de joomla: un correo , el nombre del usuario que por lo general es admin y la contraseña de acceso. Para finalizar si aun no se cuenta con experiencia con la creación de sitios web a través de Joomla, se recomienda instalar datos de ejemplo que servirán como guía, simplemente se hace clic en Instalar datos de Ejemplo (Español). Para terminar se hace clic en Siguiente. Figura 17 Figura 17 9 En el último paso se muestra un mensaje de felicitaciones por haber realizado correctamente la instalación de Joomla. También se observa un aviso en color rojo, pidiendo que se elimine el directorio llamado 'installation'. Se debe seguir el aviso, ya que de otro modo el sitio Joomla no funcionará correctamente, para ello se debe hacer clic en Eliminar la carpeta de instalación (installation). Figura 18 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 15 de 59

16 Figura Para ver los resultados de la instalación de Joomla si se hace clic en Sitio de la Figura 18, se mostrara el sitio web creado con los datos de ejemplo instalados por Joomla. Figura 19 Si se hace clic en Administrador de la Figura 9 se mostrara la pantalla de acceso al panel administrador de Joomla, al cual se puede acceder con los datos ingresados en el paso 8. Figura 20 Figura 19 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 16 de 59

17 Figura 20 Conceptos claves Para poder iniciar el proyecto de creación de página web, fue necesario tener en claro conceptos y términos que se utilizan en el proceso de creación de un sitio web con Joomla. Qué es una plantilla? Una plantilla de Joomla es básicamente un paquete de archivos que se encargan de controlar la presentación de los contenidos del CMS, si bien su diseño y construcción inicial son similares a los que se realizarían en un sitio web tradicional la plantilla no puede considerarse por sí sola como un sitio web ya que necesita de la base de datos del Joomla para tomar la apariencia de un sitio web completo. Si durante el proceso de instalación se instalan datos de ejemplo, Joomla trae unas plantillas iníciales como Atomic, Beez2, Beez5, td_cletra, entre otras. Lo cual no quita la posibilidad de instalarle más plantillas al administrador de Joomla. Qué es una categoría? Una category (categoría) es el nombre para una colección de ítems de contenido relacionados entre si, por ejemplo: La categoría "Aeroplanos" puede contener los ítems "Biplanos", "Alas dobles" y "Jets". La categoría es parte de la jerarquía del contenido. Sección es el nivel superior de la jerarquía, el segundo nivel es categoría y el tercer nivel es llamado Ítem de contenido Qué es una sección? Existen en Joomla 2.5? Una Section (Sección) es una colección de categorías que se relacionan entre si de alguna manera. Es parte de la jerarquía de ítems Section/Category/Content (Sección/Categoría/Contenido). Una sección puede ser llamada 'Transporte', las categorías dentro de esta sección podrían ser 'Botes', 'Autos y 'Aeroplanos'. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 17 de 59

18 En Joomla 2.5 el concepto de sección ya no aparece, tampoco está presente el concepto de ítem de contenido. Directamente en Joomla 2.5 se administran como categorías, dentro de las cuales se puede crear sub categorías y así sucesivamente. Qué es una extensión? Cuando Joomla queda instalado por primera vez, obtenemos un potente gestor de contenidos con muchas posibilidades, pero en ocasiones "necesitamos de algo más": un foro, una galería de imágenes, un sistema de comentarios, un libro de visitas, etc. Sería muy complejo desarrollar un sistema de gestión de contenidos que tuviera todas estas funcionalidades, por lo que en Joomla se crearon las "extensiones", un conjunto de aplicaciones desarrolladas por la comunidad de usuarios en PHP, y puestas en su gran mayoría a disposición de todos. Casi toda aplicación existente en Internet, ha sido desarrollada para Joomla, o está en desarrollo. Existen tres tipos de extensiones para Joomla: componentes, módulos y plugins. Qué es un modulo? Son pequeños contenidos que se muestran en el exterior (frontend), en alguna de las posiciones para módulos que incorpora cada plantilla (left, right, user1...) Qué es un plugins? Son pequeños programas que permiten integrar otros contenidos en el cuerpo del artículo, habitualmente. Qué es un componente? Suelen ser programas desarrollados en PHP más o menos grandes e independientes de Joomla, aunque aprovechan su sistema de usuarios, gestión, etc. El componente se instala en su propio menú del panel de administración y siempre requiere de una configuración previa. Árbol de menú Al inicio del proyecto se nos entrego lo que sería inicialmente la estructura del menú que contendrá la nueva página. A diferencia de la anterior el nuevo sitio web tendrá separado las novedades, noticias, referencias y material informativo en dos categorías bien definidas: ALUMNOS y DOCENTES. La estructura de menú entregada por el Ing. Miguel Soto fue la siguiente: INICIO INSTITUCIONAL ALUMNOS Últimas Novedades Dirección de Alumnos Sistemas de Alumnos Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 18 de 59

19 Plataforma Moodle Calendario Académico Horarios Exámenes Finales Formularios Planes de Estudio Abanderas Cátedras DOCENTES Últimas Novedades Dirección de Docencia Sistema de Alumnos Plataforma Moodle Biblioteca Calendario Académico Concurso Docentes Reglamentos de Concursos Solicitud de Inscripción Acta de Cierre Formulario de Ayuda Económica CARRERAS SEDES Sede norte tartajal Últimas Novedades Calendario Académico Horarios de Clases Exámenes Finales Sede sur rosario Últimas Novedades Calendario Académico Horarios de Clases Exámenes Finales POSTGRADO DEPARTAMENTOS/INSTITUTOS BIBLIOTECA ENLACES DE INTERES Cátedras Webmail Plataforma Moodle Servicio de Apoyo Universitario Universidad Nacional de Salta Boletín Oficial Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 19 de 59

20 Durante el desarrollo del proyecto surgió la necesidad de agregar más menús y submenús a la estructura inicial. Se agrego submenús al menú INICIO y dos menús de PAU y TECNICATURA PAU. La estructura agregada fue la siguiente: INICIO Portal Noticias Principales Alumnos Ingreso 2013 PAU Últimas novedades Memorandum TECNICATURA PAU Últimas novedades Calendario académico Exámenes Finales Material Bibliográfico Programas Desarrollo de la Página Web El primer paso para llevar a cabo el proyecto es la recolección de información para ello se deben hacer las siguientes preguntas: Qué plantilla utilizar? Qué es lo que el usuario necesita? Qué datos voy a utilizar? Cómo debe ser la estética de la página? Qué módulos van a ser necesarios? Instalación de Plantilla Una vez que se tiene claro que es lo que se desea hacer, se debe pasar a la programación, en este caso usando Joomla. El primer paso es buscar una plantilla que se aproxime a las características recolectadas con anterioridad para luego ir adaptándola a los requerimientos solicitados. La plantilla seleccionada para llevar a cabo este proyecto fue Allrounder para la versión de Joomla 2.5.x, se la puede descargar del siguiente link: La plantilla Allrounder tiene característica que genera un aspecto visual muy atractivo Figura 21, contiene un menú horizontal desplegable y menú vertical desplazable por lo que se ajusta a los requerimientos pedidos inicialmente: la nueva página debe tener ambos tipos de menú. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 20 de 59

21 Cabe mencionar que al principio comenzamos a diseñar plantillas con el Artisteer3, pero por recomendación de compañeros y colegas se decidió buscar una ya creada para hacer las modificaciones necesarias; lo que llevo a la elección de la plantilla Allrounder. Figura 21 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 21 de 59

22 Pasos para cargar la plantilla en el administrador de joomla. 1 - Ingresar al administrador con el usuario y contraseña correspondiente y seleccionar la opción gestor de extensiones. Figura 22 Figura A continuación elegir el botón seleccionar archivo, buscar la plantilla y seleccionarla. Se recuerda que la plantilla está almacenada en un archivo comprimido, no se debe descomprimir ya que se carga en el administrador en ese formato, será el mismo administrador de Joomla quien se encargara de descomprimirlo después. Luego presionar subir archivo. Figura 23 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 22 de 59

23 Figura Para verificar que la plantilla fue cargada con éxito dirigirse a la opción gestor de plantillas, a ella se puede acceder por el panel de control o por el menú horizontal. Figura 24 Figura Al seleccionar esta opción de desplegara una ventana en la cual hay dos pestañas una que dice estilos y la otra plantillas, seleccionamos la opción plantillas y si todo fue cargado con éxito deberá aparecer la plantilla que se eligió, junto con las demás plantillas cargadas por defecto. Figura 25 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 23 de 59

24 Figura En la pestaña estilos podemos observar una lista de estilos de plantillas, aquí si se deberá colocar por defecto la plantilla que se cargo con anterioridad, para ello debemos hacer clic sobre la estrella que aparece en la columna con el nombre DEFECTO. Figura 26 Figura 26 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 24 de 59

25 6 - Además si hace clic sobre el nombre de la plantilla se abrirá una nueva ventana en la que aparecerá el editor principal de la plantilla. En este editor de estilos se pueden hacer cambios sobre la apariencia de la misma (colores, logos, menú en los que se aplicara la plantilla). Figura 27 Por otro lado dentro de la pestaña Plantilla se podrá observar las plantillas instaladas como lo muestra la Figura 25, si se hace clic sobre el nombre se abrirá una nueva ventana donde se podrá personalizar la planilla. Se observara el código principal y el código de los archivos CSS como se muestra en la Figura 28. Al hacer clic sobre el nombre de los archivos sea el del código principal o el de los CSS se abrirá un editor de código para poder personalizar la plantilla como se desea. Quien realice esta operación deberá tener conocimientos mínimos sobre programación y código de hojas de estilos. Figura 27 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 25 de 59

26 Figura 28 Creación de Categorías Después de haber instalado la plantilla, se procedió a la creación de las categorías que contendrá la página. Se decidió crear una categoría para cada ítems del menú para evitar cualquier tipo de dudas a la hora de asignar un articulo de un tema a una categoría especifica. Por lo tanto la creación de categorías y subcategorías se hizo siguiente la estructura de árbol de menú (página 18). Pasos para crear una categoria en el administrador de Joomla 1 - Ingresar al administrador con el usuario y contraseña correspondiente y seleccionar la opción gestor de categorías. Figura 29 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 26 de 59

27 Figura 29 2 A continuación, se abrirá el gestor de las categorías y se podrá visualizar la lista de las categorías y sub categorías creadas en caso de que lo hubiese. En el menú horizontal se puede observar los botones que sirven para administrar la lista de categorías. Para crear una nueva se debe hacer clic en el botón Nuevo. Figura 30 3 Luego una nueva ventana se abrirá para añadir una nueva categoría de artículos. Se deberá colocar un nombre de categoría, el campo alias se completa por default, en caso de ser categoría se debe seleccionar la opción No asociado del campo padre y en caso de ser sub categoría se selecciona el nombre de la categoría que será padre de esa sub categoría. El campo Estatus debe ser Publicado y los demás campos se completan por default. Para finalizar se debe hacer clic en Aplicar y luego en Guardar & Cerrar. Figura 31 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 27 de 59

28 Figura 30 Figura 31 4 Finalmente la categoría recientemente creada aparece en la lista de categorías de la Figura 30. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 28 de 59

29 Creación de Menús Tras haber creado las categorías necesarias se procedió a la creación de menús. Como se dijo con anterioridad la creación de menús y categorías se realizaron siguiendo la mismas estructuras, es decir se crearon tantos menús como categorías creadas hay y se crearon tantos sub menús como sub categorías hay creadas. Pasos para crear un menú en el administrador de Joomla 1 - Ingresar al administrador con el usuario y contraseña correspondiente y seleccionar la opción gestor de menús. Figura 32 Figura 32 2 A continuación, se abrirá el gestor de los menús y se podrá visualizar la lista de los menús creados hasta el momento. La nueva página web debe contener un menú horizontal con la estructura de árbol completa (detallada en la página 18). También debe contener un Menú vertical exclusivo para Alumnos que se visualizara en la sección Alumnos de la página, de la misma forma en la sección Docentes debe contener un menú exclusivo para Docentes. Esta es una de las características más significativas que la diferencia de la página web antigua. 3 Por tal motivo se crearon 3 menús generales llamados: Menu Horizontal, Menu Alumnos, Menu Docentes como lo indica la Figura 33. Para crearlos simplemente se debe hacer clic en el botón Nuevo y colocar el nombre que corresponde. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 29 de 59

30 Figura 33 4 Después de crear estos tres menús generales, se procederá a crear los menús siguiendo la estructura de árbol ya especificada. Para ello se debe hacer clic sobre el nombre del menú general y se abrirá una ventana para comenzar la creación de menús y sub menús. Figura 34 Luego se debe hacer clic en el botón Nuevo para crear un ítem de un menú. Figura 34 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 30 de 59

31 5 Después de hacer clic en el botón Nuevo se abre una nueva ventana donde se debe colocar el nombre del menú y tipo de menú. En Localización de Menú se debe seleccionar a que menú general corresponde y en Elemento Padre se coloca si es un menú la opción Elemento Raíz del Menú y si es un sub menú se debe buscar cual será el menú padre. Los demás campos se completan por default. Finalmente se debe hacer clic en Aplicar y Guardar & Cerrar. Figura 35 Figura 35 6 Hay que tener muy presente los diferentes tipos de menú que existen en Joomla 2.5; ya que la configuración de los mismos permitirá mostrar un artículo en particular, una lista de artículos, una lista perteneciente a una categoría, etc. Joomla ofrece una selección de numerosos tipos de menú cada uno con características muy particulares. Figura 36 En el caso particular de la nueva página web, se utilizo mucho los tipos de menú Category Blog que es utilizado para el menú Últimas Novedades de Alumnos y Docentes, ya que en esta sección se mostraran la lista de artículos que se esté publicando. Otro tipo de menú muy utilizado es Articulo Simple que permite que se publique un solo artículo en particular, un ejemplo de este tipo se observa en el sub menú Autoridades, perteneciente al menú Institucional. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 31 de 59

32 Figura 36 Creación de Módulos y Asignación de Menús al Modulo Como se explico con anterioridad un modulo es un contenido ubicado en una posición de la plantilla que permite visualizar tal contenido; tal contenido puede ser un menú, un slider, un banner, etc. Lo que se realizara ahora es crear justamente un modulo para cada uno de los tres menús creados con anterioridad, de tal manera que se le pueda asignar una posición en la plantilla y pueda ser visualizado. Pasos para crear un modulo en el administrador de Joomla 1 - Ingresar al administrador con el usuario y contraseña correspondiente y seleccionar la opción gestor de módulos. Figura 37 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 32 de 59

33 Figura 37 2 Al ingresar se podra observar la lista de modulos asignados. Para crear uno se debe hacer clic en el boton Nuevo. Figura 38 Figura 38 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 33 de 59

34 3 Se abrirá una ventana donde se debe ingresar el tipo de modulo a crear, como se está creando módulos para menú, se debe hacer clic en el tipo Menú. Figura 39 Figura 39 4 Luego se deberá colocar un titulo para el modulo menú, que podría llevar el mismo nombre del menú general, por ejemplo: Menú Horizontal. La opción más importante que se debe completar es la Posición para ello se debe hacer clic en Seleccionar posición y se desplegara la lista de las posiciones habilitadas en la plantilla. En el caso del menú Horizontal la posición se llama position-1. Finalmente se hace clic en Aplicar y luego en Guardar & Cerrar. Figura 40 Figura 40 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 34 de 59

35 5 Análogamente se debe crean módulos para los Menú de Alumnos y Menú Docentes ambos en la posición position-7. Finalmente los tres menús creados tendrán la siguiente apariencia. Menú Horizontal: Menú Alumnos (vertical): Menú Docentes (vertical): Duplicación de Plantilla Como se aclaro en un momento, una de las diferencias significativas con la página web antigua, es que la nueva página tendrá secciones divididas: * Sección Inicial * Sección Alumnos * Sección Docentes * Sección Pau Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 35 de 59

36 Por lo tanto para que se pueda notar una diferencia en el diseño se decidió hacer 3 copias más de la misma plantilla, para así tener 4 plantillas distintas para cada una de las secciones. Pasos para duplicar una plantilla en Joomla 1 - Ingresar al administrador con el usuario y contraseña correspondiente y seleccionar la opción gestor de plantillas. Luego se abrirá el gestor y aparecerá la lista de las plantillas instaladas, se debe buscar la plantilla a duplicar, en nuestro caso es ALLROUNDER-j1.6 y se selecciona el checkbox que está a la par del nombre de la plantilla. Luego clic en botón Duplicar. Figura 41 Figura 41 2 Luego aparecerá el duplicado de la plantilla debajo de la original con el número de copia entre paréntesis. Figura 42. Para poder cambiar el nombre y no generar confusiones se hace clic sobre el nombre de la plantilla para poder editarla y renombrarla en el panel de edición de la plantilla Figura 27. Se debe hacer 3 copias de la plantilla en total con el nombre de Alumnos, Docentes y Pau. Figura 42 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 36 de 59

37 3 Luego de haber creado las 3 copias se procederá a editarlas en el panel de la Figura 27, para que todas tengan una apariencia visual distinta se cambio color de fondo de la cabecera y titulo. Los colores elegidos para cada sección fueron los siguientes: Sección Inicial: Sección Alumnos: Sección Docentes: Sección PAU: 4 Por último se debe asignar los menús creados a las plantillas correspondientes. Esto se hace en el panel de edición de cada plantilla Figura 27. Al ingresar allí se debe bajar hasta el cuadro Asignación de Menú donde aparecerán todos los menús y submenús creados anteriormente. Se debe tildar el checkbox de la opción de menú que será visualizada en la plantilla en cuestión. Figura 43. Por ejemplo: Si estamos en el panel de edición de la plantilla Alumnos, se tildaran los checkboxs de los ítems que pertenecen a Menú Alumnos y los ítems de Alumnos que pertenecen al Menú Horizontal. Finalmente se hace clic en Aplicar y Guardar & Cerrar. De la misma manera que se asigno el menú en la plantilla, se tiene que asignar el modulo correspondiente a cada menú. El procedimiento es casi igual, se debe ir al Gestor de Módulos, seleccionar el modulo que lleva el nombre del menú. Al hacer clic se debe bajar hasta el cuadro Menú Asignado y allí se tildan los chexboxs de los ítems pertenecientes a cada menú. Al finalizar se hace clic en Aplicar y Guardar & Cerrar. Al concluir la asignación de menús a cada plantilla. El resultado final es: El Menú Horizontal es visualizado en las cuatro plantillas. El Menú Alumnos (vertical) es visualizado en la plantilla de Alumnos. El Menú Docentes (vertical) es visualizado en la plantilla Docentes. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 37 de 59

38 Figura 43 Slider de Fotos Para que la nueva página web sea más llamativa y más interactiva, se decidió agregar un Slider de Fotos. El slider deberá estar en la portada inicial de la página web, en el se publicaran las noticias principales acompañadas de una imagen relacionada. Por lo tanto el primer paso fue buscar un slider cuyas características se adecuen a las necesidades de la nueva página web. El slider más adecuado que se encontró es Lof ArticlesSlideShow Module, el mismo se puede descargar desde el siguiente link: El módulo Lof ArticlesSlideShow es una extensión gratuita compatible para Joomla! 1.5, 2.5 y 3.0 y cuya apariencia es la que se observa en la Figura 44. En su presentación, el módulo mostrará de forma automática la imagen que esté en el artículo y aquellos elementos con los que lo hemos configurados: Título, descripción, fecha, categoría, etc. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 38 de 59

39 Figura 44 Pasos para instalar Slider de fotos en Joomla 1 El primer y segundo paso es igual proceso de instalar una plantilla (Página 22), con la diferencia que lo que se debe subir e instalar es el archivo comprimido del slider. Figura 45 Figura 45 2 Luego se debe ingresar al Gestor de Módulos y podrá observar el slider instalado. Figura 46 Figura 46 3 Si se hace clic sobre el nombre del slider, se podrá acceder al panel de configuración del mismo. Figura 47. En él se podrá cambiar colores, tamaños y aspectos del mismo a gusto del administrador. También se puede modificar las transiciones y los efectos de las noticias en el Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 39 de 59

40 slider. El dato más importante se tiene que ingresar en la pestaña Data Source y en la opción Categorías se debe seleccionar cual es la categoría de artículos que serán visualizadas en el slider, en nuestro caso se creó una categoría Noticias de Inicio que será la utiliza para mostrar artículos en el slider. Finalmente se hace clic en Aplicar y en Guardar & Cerrar. Figura 47 4 Finalmente el slider de noticias adquiere el siguiente aspecto. Figura 48 Figura 48 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 40 de 59

41 Multicategorias La nueva Página de la facultad estará dividida en secciones muy importante como ya se ha mencionado, algunas de ellas son * Sección Inicial * Sección Alumnos * Sección Docentes * Sección Pau De manera que una noticia que tenga información destinada a los alumnos se publicaran en la sección de Alumnos, una noticia para docentes en la sección de Docentes y una noticia para el personal de apoyo universitario en la sección Pau. A veces suele pasar que hay noticias generales, es decir que es destinada para toda la comunidad de la Facultad; para este caso las noticias se publicaran en la sección Inicial como noticia destacada en el slider de fotos y además en su respectiva sección (Alumnos, Docentes y/o Pau). Sería poco eficiente tener que armar una noticia para asignar a cada categoría de la sección que se desea publicar, es decir si hay que publicar una novedad que interesa tanto a Alumnos como Docentes, se debería confeccionar el mismo artículo tres veces para publicar en Sección Inicial, Sección Alumnos y Sección Docentes. Para evitar este problema surge el concepto de Multicategoria. Al habilitar multicategorias en Joomla, es posible que al confeccionar un mismo artículo se publique en las categorías que se desea sin importar la cantidad. Para ello se debe instalar este componente en el administrador de Joomla. Pasos para instalar el componente Multicategoria en Joomla 1 Se debe descargar el componente de la siguiente página: Se debe tener en cuenta que para poder descargar el componente es necesario tener una cuenta registrada en la página Milkdev; en caso de no poseer, los pasos para crear una son muy sencillos: completar un formulario y habilitar la cuenta con el link de validación que se enviara al correo. Finalmente el componente descargado será un archivo comprimido. Figura 49 Figura 49 2 Luego el proceso de instalación es similar a la instalación del slider de fotos o al de la plantilla (Pagina 22). Al finalizar la instalación, se podrá comprobar que el componente fue instalado correctamente si se dirige al menú Componentes y si aparece el submenú Multicategories. Figura 50 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 41 de 59

42 Figura 50 Pasos para crear un artículo y asignarle en más de una Categoría 1 Una vez instalado el componente, se debe realizar los pasos para crear un artículo simple en Joomla. Para ello se hace clic Panel de Control en la opción Añadir un Nuevo Artículo. Figura 51 Figura 51 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 42 de 59

43 2 Luego aparece el panel de creación de artículo, hay que tener en cuenta las siguientes alternativas: a) Si se desea que el articulo aparezca en una sola categoría simplemente se debe asignarla en el menú desplegable Categoría. Figura 52 Figura 52 b) Si se desea que el artículo aparezca en más de una categoría se debe asignarle una de las categorías en el menú desplegable Categoría y luego clic en el botón inferior de Multicategories. Figura 53 Figura 53 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 43 de 59

44 Luego aparece una nueva ventana con las lista de todas las categorías disponibles, allí se deberá seleccionar todas en las cuales se desee publicar el articulo. Para seleccionar más de uno se debe apretar el botón Ctrl+clic con el mouse. Finalmente clic en Select. Figura 54 Figura 54 c) Si se desea publicar una noticia en el slider principal de fotos y en más de una categoría se debe seleccionar en el menú desplegable Categoría la opción Noticias de Inicio. Luego clic en el botón Multicategorie para seleccionar todas las categorías donde se debiera publicar. 3 Finamente clic en el botón Aplicar y luego en Guardar & Cerrar. Banner Lateral Se decidió continuar con la utilización de un banner lateral derecho compuestos por imágenes para los enlaces a los sitios más utilizados por la comunidad. Para la nueva página de la facultad el banner contendrá los enlaces a: Plataforma Moodle Sistemas SIU-Guarani Cuentas Facebook Cuentas Twitter Boletín de Información Ingreso 2013 ( es un caso especial dedicado a los alumnos ingresantes durante el año 2013) Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 44 de 59

45 Pasos para crear el banner lateral con imágenes 1 El primer paso consiste en buscar imágenes representativas para los sitios a los cuales se hará referencia. Las imágenes seleccionas son: 2 Luego se debe crear el modulo correspondiente para ubicar las imágenes de manera lateral. El proceso de creación de modulo esta explicado en la página 32, con la diferencia que el tipo de modulo debe ser Perzonalizado HTML y la posición en la cual se debe colocar es right. Finalmente el modulo debe estar publicado correctamente y bajo el nombre de Seguinos en:. Figura 55 Figura 55 3 Luego se hace clic sobre el nombre del modulo creado y se abrirá el editor. Para comenzar a subir las imágenes al servidor se debe hacer clic en el botón inferior Imagen. Figura 56 4 Después se eso se abrirá una nueva ventana que permite subir imágenes desde el ordenar al servidor donde está alojado el sitio web. Para ello se debe hacer clic en el botón Elegir archivos, una vez seleccionado se debe hacer clic en el Iniciar Subida. Una vez subida la foto se la podrá buscar en el panel superior de la misma ventana donde se pueden observar otras fotos subidas, si se la encuentra se debe seleccionar y hacer clic en el botón Insertar. Figura 57 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 45 de 59

46 Figura 56 Figura 57 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 46 de 59

47 5 Una vez insertada la imagen en el panel se podrán hacer las configuraciones necesarias para que tenga la apariencia deseada. En primer lugar se debe ajustar el tamaño haciendo clic en el icono de dibujo y colocando un tamaño 100% x 100, estos tamaños están expresados en pixeles y se coloca el valor % para que la imagen se adapte a las diferentes resoluciones de pantalla. Figura 58 Figura 58 6 Luego se procede a insertar el enlace correspondiente, para ello se debe hacer clic en el icono de enlace. Figura 59 Figura 59 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 47 de 59

48 7 El enlace aplicado debe ser configurado para que pueda abrirse en otra ventana, para al momento de insertar el enlace, se debe desplegar el menú Destino y seleccionar la opción Abrir en ventana nueva. Finalmente clic en Actualizar. Figura 60 Figura 60 8 Se debe realizar el mismo procedimiento con las demás imágenes. Al terminar se debe hacer clic en Aplicar y en Guardar & Cerrar del panel de configuración del modulo. Se podrá observar el banner lateral en la página. Figura 61 Figura 61 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 48 de 59

49 Cabecera y Logos A modo de poder generar un mejor aspecto visual de la nueva página web y teniendo en cuenta que la Facultad de Cs. Economicas actualmente posee un logo que la represente; se decidió colocar en la cabecera de la nueva página el logo de la Universidad y el logo de la Facultad. Para ello fue necesaria la asignación de nuevos módulos. El logo de la Universidad Nacional de Salta debe estar en la cabecera del lado izquierdo. La plantilla ya contenía una posición asignada para el logo propio. Lo que fue necesario fue simplemente reemplazar el logo de la plantilla original por el logo de la UNSa, haciendo los ajustes de tamaño correspondiente. Se dejo la posición por defecto que era headermodule1 y el tipo de modulo que era Personalizar HTML. Figura 62 Figura 62 Para colocar el logo de la Facultad fue necesario asignar un nuevo modulo ya que debía estar en la cabecera del lado derecho. Para ello se siguió el procedimiento de creación de módulos (Pagina 32) y el tipo de modulo debe ser Personalizar HTML. Luego se abrió el panel de Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 49 de 59

50 configuración, se coloco como nombre Logo Economicas y la posición seleccionada fue banner. Luego se subió el logo y se hicieron los ajustes de tamaño correspondiente. Figura 63 Figura 63 Finalmente se creó un artículo informativo sobre la creación de los logos y se los enlazo de la misma manera que se enlazaron artículos y páginas a los logos del Banner derecho de la página. El resultado es el que se ve en la Figura 64, la cabecera de la página con ambos logos en los extremos, esta estructura se repite para todas las secciones creadas: Alumnos Docentes Pau. Figura 64 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 50 de 59

51 Complejidades Añadidas A lo largo del todo el desarrollo de la pagina web, fueron agregadas diversas complejidades que sumados a nuestra poca experiencia en el desarrollo de sitios web con Joomla se convirtieron en grandes problemas que tuvimos que resolver. Una de esos problemas fue la idea de la creación de artículos para ser publicados en más de una categoría. Si bien el componente Multicategoria puede solucionar este problema, al instalarlo inicialmente no se podía visualizar correctamente en las secciones correspondientes. El error que teníamos es que a la hora de definir los menús que contenían las noticias se debe colocar como Menú Tipo: Categoría Blog de Multicategoria y además los artículos que se publiquen se deben asignar todas categorías en las cuales se quiera mostrar haciendo clic en el botón inferior de Multicategorie que está en el panel de creación de artículos y no en el menú desplegable de Categorías. Otro problema que tuvimos atravesar fue que los links de los artículos que se publicaban en el slider de fotos se vinculaban en la misma ventana mostrando el slider nuevamente y por debajo del mismo el articulo completo el cual se le hizo clic. Lo que realmente se deseaba era que al hacer clic en el link del slider, se dirigiera a otra ventana mostrando el artículo completo sin el slider de fotos. La solución adoptaba después de varias semanas de búsqueda de posibles soluciones fue: Crear un submenú llamado Noticias Principales dentro del menú horizontal Inicio. El nuevo submenú Noticias Principales es de tipo Category Blog de Artículos. La inserción de nuevos módulos a la página, también trajo complicaciones esto es debido a que la plantilla original viene con posiciones específicas y que están adaptadas a los módulos que contiene. Al instalar nuevos módulos con nuevas posiciones (ejemplo: slider de fotos, banner lateral derecho, logo de la facultad que se encuentra en la cabecera a la derecha) fue necesario reorganizar la plantilla y modificar algunos valores de la hoja de estilo. Esto se hace siempre cuando se tenga conocimientos de programación y de hojas de estilo. Esto sin duda fue uno de los grandes inconvenientes surgidos en la creación de la pagina web, ya que al realizar una modificación en la posición de un modulo se generaba un movimiento en la posición de otro modulo. Fin del Proyecto Al haber finalizado el proyecto se comenzó con el trabajo de alojar el sitio en el servidor del Departamento. Como primera medida fue necesario buscar información para saber cómo hacer este proceso ya que ambos becarios no teníamos ni los conocimientos ni experiencias para hacerlo. Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 51 de 59

52 Para poder poner el sitio en marcha se realizaron dos trabajos: migrar la base de datos y colocar el directorio que contenía el sitio en nuestro servidor local al directorio asignado en el servidor de Departamento, haciendo las configuraciones necesarias que esta tarea conlleva. Migración de la Base de Datos Esta tarea consiste en migrar todos los datos almacenados en la Base de Datos alojada de manera local en nuestro servidor a la Base de Datos del servidor del Departamento. Este proceso se realizo utilizando la interfaz grafica de PHPMyAdmin. Pasos para migrar la Base de Datos 1 Ingresar al panel principal de PhpMyAdmin en nuestro servidor local con el usuario y contraseña correspondiente y seleccionar la base de datos de nuestro sitio. Figura 65 Figura 65 2 Al seleccionar la base de datos que se quiere migrar se debe hacer clic en el botón Exportar. Figura 66 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 52 de 59

53 Figura 66 3 Luego nos saldrá el panel para configurar los parámetros para realizar la exportación. Se debe asegurar que el formato en el que se exportara debe ser SQL, para ello se selecciona el radio button de la columna de la izquierda. En el cuadro de Estructura deben estar seleccionadas las opciones de Añadir Drop Table/Drop View, Añadir If Not Exists, Añadir el valor Auto_increment y Usar backquotes con tablas y nombres de campo. En el cuadro de Datos se debe asegurar que estén seleccionadas las opciones Completar los Inserts, Inserts extendidos y Usar hexadecimal para campos binarios. En el cuadro inferior se debe asegurar que estén seleccionadas las opciones de Enviar (generar archivo descargable) y la compresión como comprimido con zip. Luego colocar un nombre para poder identificar el archivo descargable en el cuadro de Plantilla del nombre del archivo. Por último hacer clic en el botón Continuar. Figura 67 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 53 de 59

54 Figura 67 4 El archivo se descargara en formato zip, se descomprime y estará listo para poder importarlo a otra base de datos. Figura 68 Figura 68 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 54 de 59

55 5 Para realizar el proceso de importación, primero se debe crear una base de datos en la servidor donde se quiere migrar los datos. El nombre de la base de datos debe ser el mismo al nombre que tenia la base de datos en el servidor local, es decir el nombre es economicas. Para ello, hay que situarse en el panel principal del administrador de base de datos y se coloca el nombre en el cuadro de Crear nueva base de datos, el valor de cotejamiento se lo deja por defecto y finalmente se hace clic en el botón Crear. Figura 69 Figura 69 6 Una vez creada se debe seleccionar la base de datos, y se hace clic en el botón Importar. Figura 70 Autores: C.U. Caro Carlos Roberto Raúl C.U. Guaymas Zulema Leticia Página 55 de 59