Tutorial básico. Apunte creado por imedia Creativa

Transcripción

1 Tutorial básico Apunte creado por imedia Creativa

2 Introducción Joomla CMS Su sitio Web está creado bajo un Sistema de gestión de contenidos CMS (Content Management Systems) Joomla. QUÉ ES UN CMS? Un CMS es un sistema de gestión de contenidos (Content Management System en inglés, abreviado CMS) es un programa que permite crear una estructura de soporte para la creación y administración de contenidos, principalmente en páginas web, por parte de los participantes. 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.

3 Acceso a la administración Formulario de Acceso 1- Escriba en la barra de direcciones del navegador el siguiente Link: 3- Añadir los datos de autentificación: Nombre de Usuario y Contraseña entregados por su super - administrador y hacer clic en el botón: Iniciar sesión. 2- Se mostrará la pantalla con el Formulario de Acceso.

4 Panel de Control Panel de Control / MENÚ SUPERIOR Una vez que haya iniciado sesión se presentará el Panel de Control, también conocido como Página de Inicio de la Administración. El Panel de Control consta de tres áreas diferentes: 1- Menú superior de opciones. 2- Iconos de acceso rápido. 3- Módulos del Administrador. 1- El menú superior de opciones proporciona acceso a todas las funciones disponibles en el Back-End. Las opciones de menú y submenú mostradas variarán dependiendo de su Nivel de Usuario, ya sea: Manager, Administrador o Súper-Administrador. A la derecha del menú existen unos botones que presentan el número de mensajes privados que ha recibido, el número de usuarios conectados y el enlace Salir.

5 Panel de Control Panel de Control / ICONOS DE ACCESO RÁPIDO 2- Los iconos de acceso rápido proporcionan enlaces a las principales funciones del Back-End.

6 Panel de Control Panel de Control / MÓDULOS DEL ADMINISTRADOR 3- Los módulos del administrador muestran información de los Usuarios conectados, los Componentes instalados, los Artículos de Contenido más Populares, los Últimos Artículos de Contenido publicados, y los Menús con el número de enlaces por menú.

7 Administrar Contenido Explicación En el Sistema de Gestión de Contenido Joomla!, existe una jerarquía de organización del contenido en tres niveles: 1 - Secciones: Contenedores principales; en su interior están las Categorías. 2 - Categorías: Contenedores secundarios; en su interior están los Artículos de Contenido. 3 - Artículos de Contenido: Son los textos e imágenes que usted muestra en una página. Debe tener en cuenta que no podrá crear un Artículo de Contenido a menos que tenga creadas una Sección y una Categoría en donde incluirlo. Puede imaginar esta estructura como una jerarquía en la que: las Secciones son cajones, las Categorías son carpetas y los Artículos de Contenido son documentos de papel. Para su sitio Web, el contenido de secciones y categorías está organizado por el super - administrador.

8 Administrar Contenido 1 - Creación de Secciones Ir al menú superior, seleccionar el botón "Contenido", luego hacer clic en la opción "Gestor de secciones"

9 Administrar Contenido 1 - Creación de Secciones Hacer clic en el icono "NUEVO" que esta al costado derecho de su pantalla para crear la nueva sección de contenido Llenar los datos obligatorios de nombre titulo de la sección. Luego hacer clic en el icono Guardar que esta en el costado derecho de su pantalla

10 Administrar Contenido 2 - Creación de Categorías Ir al menú superior, seleccionar el botón "Contenidos", luego hacer clic en la opción "Gestor de categorías"

11 Administrar Contenido 2 - Creación de Categorías Hacer clic en el icono "NUEVO" para crear la nueva categoría de contenido. Llenar los datos obligatorios de nombre titulo de la categoría. Luego elegir la sección, posteriormente hacer clic en el icono "GUARDAR" que esta en el costado derecho de su pantalla

12 Administrar Contenido 3- Creación de Artículos Ir al menú superior, seleccionar el botón "Contenidos", luego hacer clic en la opción "Gestor de artículos"

13 Administrar Contenido 3 - Creación de Artículos Un artículo corresponde a un contenido dinámico que se almacena en alguna sección y categoría definida. Hacer clic en el icono "NUEVO" para crear el nuevo artículo de contenido. Llenar los datos obligatorios de nombre titulo de el artículo.

14 Administrar Contenido 3 - Creación de Artículos Editor de Texto Llenar los datos obligatorios de nombre titulo de el artículo. Luego elegir la sección y categoría, posteriormente escribir el contenido y hacer clic en el icono "GUARDAR", si desea ver los cambios en su web sin salir del editor hacer clic en el botón "APLICAR" Recomendaciones: Utilizar el BLOC DE NOTAS para copiar y pegar textos desde WORD, PDF, INTERNET, etc. Este paso es fundamental para pegar un texto plano y limpio de estilos externos al sitio web.

15 Administrar Contenido 3 - Creación de Artículos Editor de texto Insertar Imágenes Para insertar una imagen debe colocar el cursor al principio del texto y luego hacer clic en el botón, "IMAGEN" dentro de las opciones del editor, una vez hecho el clic aparecerá un pop-up de edición de imagen. Obligatorio: Las imágenes deben estar alojadas en la siguiente ruta de carpetas que utiliza Joomla: stories/images/carpeta. Este punto sera revisado más a fondo en "Administrar Imágenes" posterior a "Administrar Contenido"

16 Administrar Contenido 3 - Creación de Artículos Editor de texto Insertar Imágenes Una vez dentro del editor de imágenes en la pestaña: "General" hay que escribir la ruta en donde esta alojada la imagen: stories/images/carpeta/imagen.jpg, luego se le debe dar una descripción corta y un titulo. El próximo paso es ubicar la imagen en la pestaña "Appearence"

17 Administrar Contenido 3 - Creación de Artículos Editor de texto Insertar Imágenes Una vez dentro del editor de imágenes en la pestaña: "Appearence" hay que dar las opciones necesarias para indicarle a Joomla en que posición va a estar nuestra imagen y si el texto rodeara la imagen. En este caso la imagen sera posicionada al costado izquierdo con espacio vertical y horizontal de 8 px. para que el texto rodee la imagen. Luego de esto hay que hacer clic en el botón "Insert "o "Update" si es que se esta actualizando.

18 Administrar Contenido 3 - Creación de Artículos Editor de texto Insertar Imágenes A continuación veremos como dejar el texto con una introducción e insertar el boton: "Leer más" para seguir leyendo el contenido completo en un articulo El resultado de de insertar imagen sera este:

19 Administrar Contenido 3 - Creación de Artículos Editor de texto Insertar botón "Leer más..." Para insertar el botón "leer más..." se debe poner el cursor en donde se quiere separar el texto de introducción del texto de contenido que completa el texto, luego se debe hacer clic en el botón "Leer más..." que esta en la parte inferior del editor de texto. A continuación aparecerá una linea de color rojo punteada, eso significa que ya esta listo el texto de introducción con el botón "leer más..." para ver el funcionamiento debe hacer clic en el botón "APLICAR o "GUARDAR" y posteriormente ver su sitio web.

20 Administrar Contenido 3 - Creación de Artículos Editor de texto Insertar botón "Leer más..." Resultado Insertar botón "Leer más...". A continuación veremos como insertar un Link externo a nuestro sitio web dentro del texto de contenido de un articulo, este link puede ser a otra web como por ejemplo a el sitio de google.

21 Administrar Contenido 3 - Creación de Artículos Editor de texto Insertar Link Para insertar un link se debe seleccionar el texto que sera el botón para nuestro link, una vez seleccionado se debe hacer clic en el botón link del editor de texto con este paso se abrirá el pop up de edición de links.

22 Administrar Contenido 3 - Creación de Artículos Editor de texto Insertar Link Una vez dentro de el pop up de edición de links se debe escribir el link que se desea como: luego hay que elegir un Target para configurar como se abrirá el link, el target blank se recomienda para abrir paginas externas al sitio como la web de google, De esta manera el visitante no se ira de su sitio web y vera el link en una nueva ventana del navegador. Para finalizar hay que hacer clic en insert o update

23 Administrar Botones del Menú Creación de Botones en el menú "Main Menú" Ir al menú superior, seleccionar el botón "Contenidos", luego hacer clic en la opción "Main Menú"

24 Administrar Botones del Menú Creación de Botones en el menú "Main Menú" Ir al menú superior, seleccionar el botón "Contenidos", luego hacer clic en la opción "Main Menú" De esta manera el visitante no se ira de su sitio web y vera el link en una nueva ventana del navegador. Para finalizar hay que hacer clic en insert o update

25 Administrar Contenido Creación de Botones en el menú "Main Menú" Hacer clic en el icono "NUEVO" para crear un nuevo botón. Se abrirán las opciones de selección de de artículos que se dividen en 3 opciones importantes: 1- Presentación de un articulo, 2 - Presentación, en formato blog, de los artículos de una categoría, 3 - Presentación, en formato blog, de los artículos de una sección.

26 Administrar Botones del Menú Creación de Botones en el menú "Main Menú" En este caso veremos la opción: 1- Presentación de un articulo, al hacer clic en la opción se abrirá Elemento del menú en donde hay que llenar el campo Titulo y hay que Seleccionar un articulo, una vez hecho clic se abrirá un popup para seleccionar el articulo deseado

27 Administrar Botones del Menú Creación de Botones en el menú "Main Menú" El pop-up muestra la lista de artículos creados, posteriormente hacer clic en el articulo que se quiere vincular al menú.

28 Administrar Botones del Menú Creación de Botones en el menú "Main Menú" Al haber elegido el articulo ya se abra creado el link en el menú, para ver el cambio hay que previsualizar el sitio web para ver los cambios.

29 Administrar Imágenes Subir y eliminar imágenes Carpeta Stories Para comenzar a subir imágenes mediante del "Gestor multimedia" hay que hacer clic en el menú superior de opciones hacer clic en el botón "Sitio" y elegir la opción "Gestor multimedia" o acceder directamente de los iconos de acceso rápido y hacer clic en el icono "Gestor multimedia" - Se mostrará la pantalla en donde podremos Administrar las Imágenes. - Esta pantalla muestra la carpeta global de imágenes, ejemplo:

30 Administrar Imágenes Subir y eliminar imágenes Carpeta Stories - La carpeta en donde alojaremos las imágenes sera: - Hacer clic en la carpeta "stories" para ver su contenido y empezar a subir imágenes.

31 Administrar Imágenes Subir y eliminar imágenes Carpeta Stories - Dentro de la carpeta "stories" es donde crearemos las carpetas dando un nombre en el recuadro de el costado derecho, por ejemplo las carpetas pueden llevar nombres según las secciones o categorías creadas anteriormente en la administración de contenido. - Al elegir el nombre de la carpeta hay que hacer clic en el botón "Crear carpeta".

32 Administrar Imágenes Subir y eliminar imágenes Carpeta Stories - Posteriormente nuestra carpeta la veremos en el panel y se debe hacer doble clic para entrar a ella y empezar la subida de imágenes. - Hacer clic en el botón "Examinar", se abrirá un pop-up en donde se elegirá la imagen desde su computador.

33 Administrar Imágenes Subir y eliminar imágenes Carpeta Stories - Elegir la imagen y hacer clic en el botón "Abrir".

34 Administrar Imágenes Subir y eliminar imágenes Carpeta Stories - Luego hacer clic en el botón "Iniciar subida" y la imagen ya estará disponible en el servidor para utilizarla en los artículos que desee. Requisitos sobre las imágenes: - Utilizar nombres de archivo de imágenes lo más breves posibles. Usar letras minúsculas o números sin espacios. También se puede usar el guión bajo_ para separar el nombre de una imagen, ejemplo: img_1.jpg - Utilizar archivos de imágenes de poco peso (kb de la imagen). - Si quiere optimizar sus imágenes, el primer aspecto que necesita conocer son los tres formatos de imagen reconocidos por su navegador Web. Estos formatos son el.jpg/jpeg, el.gif y el.png. - Tenga en cuenta las dimensiones de ancho su plantilla para el área de contenido para evitar añadir una imagen que supere el ancho de su plantilla.

35 Fin Tutorial