Instalación de joomla

INSTALACIÓN DE JOOMLA EN WINDOWS SERVER 2008 CON XAMPP INSTALADO.

GESTORES DE CONTENIDOS: ¿Qué es un sistema gestor de contenidos (CMS)?.

Es una aplicación web que permite crear, editar, gestionar y publicar contenidos digitales que componen un sitio web. El sistema permite gestionar de manera independiente el contenido y el diseño del sitio. También permite a múltiplos usuarios una fácil y controlada publicación de información en el sitio web.

Normalmente ofrecen acceso a un interfaz de usuario que permite a usuarios autorizados la creación, publicación y configuración del sitio web. Dicho interfaz permite la creación de contenidos web mediante formularios que no requieren al usuario ninguna capacidad de programación web. ¿Qué características tienen los CMS?. 

Sencillo e intuitivo: Permite a los usuarios sin formación específica en el desarrollo de páginas web realizar sitios web con aspecto profesional.



Altamente personalizable: Pretenden dar solución a un abanico grande de requisitos funcionales y visuales para un sitio web. Por tanto deben permitir un amplio rango de opciones de personalización.



Extensible a través de plugins y módulos. Debe tener una arquitectura modular que permita su extender la funcionalidad del sitio mediante la incorporación de distintos módulos.



Optimizado para un alto rendimiento y velocidad. Su rendimiento debe estar al nivel de un sitio desarrollado con medios convencionales.



Ofrecer características de seguridad. El acceso a la información y los permisos para llevar a cabo acciones sobre el sitio web debe ser controlado.



Documentación y apoyo comunitario. El uso de la plataforma ha de estar bien documentado y conviene que esté bien soportada por una amplia comunidad de usuarios.



Énfasis en estándares web y buenas prácticas. Los principios de diseño han de ser adecuados y modernos.



Definir tipos de usuarios. Se permite realizar gestión de usuarios y definición de listas de acceso a usuarios para implementar las estrategias de seguridad oportunas.

¿Qué ventajas ofrecen los CMS a la hora de crear sitios web?.

Las ventajas de un CMS son: 1

  

   

Capacidad para el usuario de editar o añadir contenidos sin depender de expertos en desarrollo web. Esta característica mejora el control y el dinamismo del sitio web.

Ahorro de costes en la creación y mantenimiento del sitio web sin necesidad de pagar por servicios especializado de desarrollo web.

Estructura adecuada para los sitios web que reciben contenidos de diversos autores.

Una buena gestión de usuarios y permisos permite la inclusión de contenidos desde distintas fuentes.

Amplia oferta de servicios de alojamiento que permiten ubicar el sitio en Internet de manera sencilla y económica.

Comunidad de programadores desarrollando extensiones de funcionalidad de uso corriente para poder ampliar las capacidades del sitio web de forma sencilla.

Se pueden obtener estadísticas de conexión de usuarios y de visitas a la web de manera sencilla.

Proporciona mecanismos para que poder posicionarse de manera destacada en los buscadores más conocidos.

¿Qué tipos de CMS existen?.

Los CMS pueden utilizarse para crear y publicar contenidos digitales relacionados con aplicaciones de distintas características:        

Creación de Sitios y portales web: Joomla y Drupal Creación de Blogs: WordPress y Blogger Creación de Foros: phpBB y Bbpress Creación de Wikis: MediaWiki y DocuWiki Creación de tiendas virtuales: Magento y osCommerce Creación de Galerias: Gallery Creación de Fotoblogs: PixelPost Creación de entorno de trabajo colaborativo: WebCollab

Según las características técnicas podemos encontrar CMS basados en distintos lenguajes de programación (PHP, ASP.Net, Java, Python, Ruby on Rails … etc) o según el componente de base de datos (Oracle, MySQL, Access ..etc).

INSTALACIÓN DE JOOMLA. En primer lugar debemos descargar Joomla. La versión que vamos a descargar es la 3.03 y la vamos a descargar desde la página www.joomlaspanish.org.

2

Descargaremos el zip.

Una vez tenemos instalado XAMPP y arrancado sus servicios Apache y MySQL, y tenemos descargado el paquete de Joomla! 3.0 (el fichero .zip), podemos seguir los siguientes pasos: Dentro del directorio htdocs (normalmente localizado en C:\xampp\htdocs) creamos una carpeta nueva llamada, por ejemplo, joomla30.

3

Descomprimimos dentro de esta carpeta el paquete (fichero .zip) que hemos descargado.

Con esto terminado ya solo tenemos que entrar a travĂŠs de nuestro navegador a la url http://localhost/joomla30 y accederemos a la instalaciĂłn de Joomla! 3.0 4

Idioma: tenemos que seleccionar el idioma en el cual queremos que nos guíe Joomla! para su instalación. Automáticamente detecta en qué idioma tenemos nuestro navegador (o sistema operativo) y marcará la opción adecuada.

Ahora le tenemos que introducir el nombre del sitio que vamos a crear, así como una serie de datos de configuración y seguridad.

5

Y pulsamos siguiente.

Base de datos: tenemos que poner los datos de configuraciĂłn de la base de datos (en donde se va a instalar el contenido del sitio web). El hospedaje o servidor es localhost, usuario es root y contraseĂąa no tiene, nombre de la base de datos (en nuestro ejemplo joomla) y prefijo (el que nos salga por defecto de forma aleatoria).

6

Pulsamos en siguiente.

7

Y ahora en instalar.

Y finaliza la instalaciĂłn:

8

Nos propone eliminar la carpeta de instalaciรณn y lo hacemos pinchando sobre el botรณn de "Eliminar la carpeta de instaciรณn...."

9

Ahora, si pinchamos en sitio nos llevarรก al sitio que hemos creado:

Y podemos verlo:

Si pinchamos sobre "Administrador" 10

Podremos entrar a la parte de configuraciรณn del sitio:

11

Ahora, una breve explicación sobre los tipos de usuarios en Joomla: Tipos de Usuarios y Permisos de Acceso Los Usuarios de sitios web Joomla! pueden dividirse en dos categorías principales:  

Invitados Usuarios Registrados

Los Invitados son sencillamente usuarios de Joomla! que han navegado hasta encontrar su sitio web. Dependiendo de cómo el administrador ha configurado el sitio, los invitados podrán navegar libremente por todo el contenido o tener restringido el acceso a cierto tipo de contenidos, reservados para usuarios registrados.

Los Usuarios Registrados están registrados en su sitio con un nombre de usuario y contraseña.

Este nombre de usuario y contraseña les permite acceder al área restringida del sitio, recibiendo privilegios especiales no disponibles para los invitados. Los usuarios registrados se dividen en dos grupos:   

Usuarios del Sitio (Front-end) Usuarios del Administrador (Back-end)

Con 'front-end' nos referimos a la parte pública, a las áreas del sitio web tal y como los visitantes o los usuarios registrados las ven. Un usuario registrado trabajará normalmente en el frontend. Es como en un comercio, en el que los artículos en venta se muestran en los escaparates y en las estanterías. Aquí puedes echar un vistazo a tu alrededor.

El back-end es tu área de administración, y por eso a veces la llamaremos directamente 'administración' o 'zona de administración'. Siguiendo con el símil del front-end, el back-end sería la "trastienda" del comercio, la parte privada a la que sólo tienen acceso ciertas personas de confianza y los encargados de hacer que el comercio funcione. Puedes otorgar a usuarios registrados los permisos necesarios para trabajar en tu back-end. Este privilegio suele estar limitado a unos cuantos empleados, que deben gestionar ciertas tareas del sitio web. Puedes acceder al formulario de acceso de la zona administrativa a través del directorio /administrator http://localhost/administrator Ahí puedes iniciar sesión con tus datos de acceso y elegir tu idioma preferido Usuarios del Sitio (Front-end) Los usuarios del Sitio (Front-end) disfrutan de ciertos derechos adicionales sobre los visitantes, entre los que se puede incluir la capacidad para crear y publicar contenido en el sitio web.

Generalmente, nos referimos a estos usuarios como proveedores de contenido ya que su meta principal es la de proveer contenido al sitio web, no la de administrar el sitio o alterar su diseño.

Los proveedores de contenido pueden enviar nuevos contenidos directamente mediante la interfaz web, usando un editor WYSIWYG (What You See Is What you Get, es decir: ‘Lo que ve es lo que se obtiene’) integrado, sin necesidad de ningún conocimiento de código HTML.

12

Dentro de esta amplia clasificación de proveedores de contenido, existen cuatro niveles específicos, que pueden ser asignados por el administrador del sitio. Estos niveles son: Registrado (Registered), Autor (Autor), Editor(Editor) y Supervisor (Publisher).

Usuario

Acceso y Permisos

Registrado Registered

Un Usuario Registrado no puede crear, editar o publicar contenido en un sitio Joomla!. Puede enviar nuevos Enlaces Web para ser publicados y puede tener acceso a contenidos restringidos que no están disponibles para los invitados.

Autor Author

Los Autores pueden crear su propio contenido, especificar ciertos aspectos de cómo se presentará el contenido e indicar la fecha en la que debería publicarse el material.

Editor Editor

Los Editores tienen todas las posibilidades de un Autor, y además la capacidad de editar el contenido de sus propios artículos y los de cualquier otro Autor.

Supervisor Publisher

Los Supervisores pueden ejecutar todas las tareas de los Autores y Editores, y además tienen la capacidad de publicar un artículo.

El nivel por defecto de los nuevos usuarios es el de Usuario Registrado. Para que los usuarios del Sitio (Front-end) puedan acceder a otro tipo de nivel, es necesario que un Administrador o un Súper-Administrador cambie su perfil mediante el Panel de Administración (Back-end).

Usuarios del Administrador (Back-end) Los usuarios del Back-end: Mánager, Administrador y Súper-Administrador, habitualmente se conocen como Administradores del Sitio, pero también tienen acceso a la interfaz del Frontend. Como los usuarios del Front-end, los usuarios del Back-end tienen diferentes privilegios: Usuario

Acceso y Permisos

Mánager Manager

Un Mánager tiene los mismos permisos que un Supervisor pero con acceso al panel de administración del Back-end. Los Mánagers tienen acceso, en el panel del administrador, a todos los controles asociados al contenido, pero no tienen capacidad para cambiar las plantillas, alterar el diseño de las páginas, o añadir o eliminar extensiones de Joomla!. Los Mánagers tampoco tienen autoridad para añadir usuarios o alterar los perfiles de usuarios existentes.

AdministradorAdministrator Los Administradores tienen un rango de acceso más amplio que los Mánagers. Además de todas las actividades relacionadas con el contenido que puede ejecutar un Mánager, los administradores pueden añadir o eliminar extensiones al 13

sitio web, cambiar plantillas o alterar el diseño de las páginas, e incluso alterar los perfiles de usuario a un nivel igual o inferior al suyo. Lo que no pueden hacer los Administradores es editar los perfiles de Súper- Administradores o cambiar ciertas características globales del sitio web. De hecho, ni siquiera verán los usuarios de tipo ‘Super-Administrador’ en el Administrador de Usuarios.

SúperAdministrador Super Administrator

Los Súper-Administradores tienen el mismo poder que un ‘root’ en un sistema tradicional Linux y disponen de posibilidades ilimitadas para ejecutar todas las funciones administrativas de Joomla!. Solo los Súper-Administradores tienen la capacidad de crear nuevos usuarios con permisos de Súper-Administrador, o asignar este permiso a usuarios ya existentes.

Para poder poder entrar en el back-end, debemos entrar en la dirección de joomla y añadirle la dirección /administrator.

14

También podemos entrar de la forma usual, escribiendo el usuario y contraseña en la página principal:

Y una vez entre, pulsar sobre "site administrator", lo cual hará que nos abra una nueva pestaña:

15

Donde habrĂĄ que introducir el usuario y contraseĂąa de administrador (aunque sea la misma que hemos utilizado para entrar previamente a Joomla)

Una vez introduzcamos el usuario y contraseĂąa de administrador, pulsamos sobre conectar y:

16

Como podéis ver, ya estamos en la página del administrador y en la pestaña de la izquierda tenemos la página de Joomla. De esta forma tenemos el back-end y el front-end a la vista. El front-end que es lo que verán mis usuarios y visitantes y el back-end, donde yo podré configurar la página.

Cuando entréis al back-end, entraréis directamente en el panel de control de Joomla, el cual tiene una serie de opciones en la izquierda que me permiten gestionar mi sitio:

También tenemos arriba una serie de menús que sirven para gestionar también el sitio: 17

A la izquierda de los menús, veréis una opción que nos muestra la vista previa de cómo será el sitio una vez hayamos hecho una determinada modificación:

Y a la derecha veréis una opción de menú en la que si pincháis tendréis la opción de salir del back-end.

Ahora veremos un ejemplo rápido de cómo trabajan estas dos zonas en Joomla. Entraremos en la zona de back-end y pincharemos sobre el "gestor de módulos":

18

AllĂ­ veremos los mĂłdulos que tenemos o no instalados:

Y voy a desactivar el "login form" o formulario de acceso, que es el que nos permite entrar de forma habitual en Joomla:

19

Y desmarcamos la casilla de verificaciĂłn. DespuĂŠs actualizamos el front-end, y donde tenĂ­amos esto:

Ahora tendremos esto:

20

O sea, que ya no tendremos el login form.

Volved a activarlo y volved a actualizar.

Ahora vamos a cambiar el formulario de acceso de posición en la página principal. Volvemos al back-end y editamos el formulario de acceso dentro del gestor de módulos. Para ello pasamos el ratón por debajo del nombre del módulo y veremos que aparece un desplegable, que al pulsar nos ofrece una serie de opciones. Pinchamos sobre la opción "editar" y:

21

Cambiamos a la posición 3. Después pulsamos sobre el botón de "guardar y cerrar".

Como veis ya lo tenemos en la posición número 3. Ahora actualizamos el front-end:

22

Como veis, ha cambiado de posiciรณn dentro de nuestra pรกgina. Volved a dejarlo en la posiciรณn 7.

CASOS DE ร XITO: http://tour-eiffel.fr/ http://www.trendbazaar.dk/ http://kokorochocolate.com/ http://www.tranquillityblue.co.za/ http://www.techrepublic.com/blog/web-designer/inspiration-15-joomlaimplementations/1085/

23

Interfaz del back-end:

1. Menú superior compuesto por las siguientes entradas: 

Sistema: Establece las opciones globales de configuración del sitio y permite realizar tareas de generales de mantenimiento.



Usuarios: Gestiona usuarios, permisos y accesos y permite enviar c. Menús: Añade y gestiona menús y entradas de menú.



Contenido: Añade y modifica artículos, cambia la estructura del sitio, correos a usuarios, gestiona los repositorios de imágenes ..etc.



Componentes: Permite configurar cierta funcionalidad disponible para su uso en el sitio web, tales como faldones publicitarios, contactos, sindicación a noticias externas …etc.



Extensiones: Gestiona las extensiones que aumentan la funcionalidad y las capacidades del sitio web



Ayuda: Acceso a la ayuda online de Joomla.

2. Botones de acceso rápido a funciones de uso frecuente 3. Vista Previa del sitio y barra de información sobre usuarios en línea y el estado de la mensajería privados. También se incluye la opción de salir.

24

4. Paneles de información que detallan los últimos 5 artículos editados, los 5 artículos más populares y los 5 últimos usuarios en línea.

INICIANDO LA CONSTRUCCIÓN DE NUESTRO SITIO:

Cambio de logo.

Si vais al front-end veréis que la página tiene un título que se creó al configurar el sitio Joomla.

En mi caso:

Yo lo quiero cambiar por este:

Accedemos a nuestro Joomla y nos vamos al back-end:

25

Ahora nos vamos al menĂş, opciĂłn "Gestor de plantillas":

Y desde aquĂ­, pulso sobre la plantilla "protostar":

26

Y en la pestaĂąa de "opciones" hay una opciĂłn llamada "logo":

27

Utilizaremos esta opciĂłn para cambiar nuestro logo. Pinchamos en "seleccionar y subimos el archivo que deseamos como logo.

Apretamos sobre examinar, buscamos en nuestro disco duro el logo e iniciamos la subida.

DespuĂŠs veremos que lo tenemos ya en nuestro sitio de Joomla:

28

Pulsamos sobre insertar:

Ahora, aplicamos, guardamos y cerramos:

29

Y previsulizamos el front-end:

Ademรกs con la ventaja de que este logo se va a redimensionar con respecto a las dimensiones que tiene el navegador:

30

Por otra parte, como podéis ver, el color de mi logo es de tono amarillo y marrón oscuronegro, mientras que los colores de las opciones de los formularios son azules. Así que los voy a cambiar por un tono parecido al del logo: Para ello, me vuelvo a ir al "menu-extensiones-gestor de plantillas" y pinchamos sobre la plantilla que estamos utilizando:

Vamos a la pestaña de opciones-color de la plantilla:

31

Escogemos el color que deseamos. Yo en mi caso he bajado un complemento para firefox que captura el color que deseas y luego puedes elegirlo en la paleta:

Pulsamos sobre "guardar y cerrar" y actualizamos el front-end:

32

Como veis, ya ha cambiado el color.

Ahora vamos a ver qué posiciones tiene la plantilla, es decir, como se estructuran las posiciones dentro de la plantilla. En esta versión esta opción está deshabilitada por defecto. Si nosotros ponemos después de la url de nuestro site, en el navegador ?tp=1, y actualizamos, no pasa nada.

Así que vamos a habilitar dicha función y veréis el sentido que tiene. Nos vamos al back-end y en extensiones-gestor de plantillas, pinchamos en opciones.

33

Y vamos a habilitar dicha opciรณn:

Ahora guardamos y cerramos. Cuando actualizamos el front-end, ya podemos ver cรณmo estรกn configuradas las posiciones:

34

Así, por ejemplo, me gustaría añadir en la posición 0, un contenido de datos de acceso. Para ello, nos vamos a ir al back-end. Nos dirigimos al menú extensiones-gestor de módulos.

Y pulsamos sobre nuevo módulo. Después elegiremos personalizar HTML:

35

Ahora le tenemos que poner un nombre, la posiciĂłn:

Y ahora nos vamos a la opciĂłn de "salida personalizada" y aĂąadimos el texto:

36

Ahora vamos a guardar. Y entramos en el front-end:

Ahora vamos a embellecerlo con un icono. Para insertar un icono lo debemos hacer desde un editor html, pero desde el propio de joomla no lo vamos a hacer bien, así que vamos a descargarnos uno y de paso probamos como se añaden las extensiones en Joomla.

Buscamos el jce editor en google y la primera entrada nos envía a su página.

37

Vamos a "downloads - editor - joomla 3" y pinchamos sobre la primera opciĂłn de descarga:

Ahora, en el back-end, nos vamos al menĂş "extensiones - gestor de extensiones":

38

Y pinchamos sobre examinar. Buscamos el paquete que hemos descargado.

Y lo seleccionamos. Pinchamos a continuaciรณn sobre el botรณn subir e instalar.

39

Y ya tengo instalado el editor. Ahora nos vamos al menú "sistema-configuración global". Y desde aquí vamos a cambiar el editor por defecto a JCE.

Con esto tendríamos al JCE por defecto para trabajar en los módulos, artículos, etc que hagamos en Joomla. Ahora podemos ir de nuevo al menú "Extensiones - gestor de módulos":

Y editar el módulo que habíamos creado:

40

Como veis, este editor es más completo. Podéis ver un botón llamado "Toggle Editor", que lo que hace es que tengamos una visión en HTML de lo que hemos escrito. Pulsarlo y veréis.

Ahora, volviendo al icono, lo vamos a añadir aquí, pero para ello lo tenemos que insertar como una etiqueta html en este código. ¿Cómo lo hacemos?. Nos vamos a ir al directorio de instalación de Joomla y en particular al siguiente archivo:

41

Si lo abrĂ­s (con el wordpad) y vais casi al final, verĂŠis que nos encontramos con la clase icon, que contiene un montĂłn de referencias a distintos iconos:

Y buscamos el icon-lock:

42

Y ahora, en el editor de html de nuestro Joomla insertamos la clase de icon-lock donde queremos que aparezca, con su clase delante (i class):

Guardamos y actualizamos el front-end:

43

Ahora vamos a comprobar que aunque redimensionamos, se aliena dependiendo del tamaĂąo que le damos al navegador:

44

Artículos.

Ahora vamos a agregar algunos artículos. Antes de agregar los artículos será necesario que defina la estructura de contenido de mi sitio web. Joomla organiza el contenido a través de categorías y de artículos. Y estos artículos y categorías pueden ser mostradas a través de ítems de menú.

Por ello vamos a ir a la opción "contenido-gestor de categorías"

Dentro, vemos que ya hay una creada. Nosotros vamos a crear una categoría nueva. Esta categoría nueva será para los artículos informativos de manera general, los que dejaremos fijos en mi sitio web.

Le pondremos de nombre general y guardaremos y crearemos una categoría nueva:

45

Esta nueva categoría la utilizaremos para organizar todos los artículos del blog. A esta categoría le pondremos el nombre "blog". Guardaremos después y veremos que tenemos las dos categorías creadas:

Ahora ya podremos crear los artículos. Para ello, nos dirigimos a la parte izquierda y pulsamos sobre la opción artículos:

46

Una vez aquí podemos crear un nuevo artículo para mostrar información de la empresa. Le agregamos un título y un texto de relleno (acordaros de guardarlo en la categoría general)

Ahora guardamos y creamos otro artículo (por ejemplo para listar nuestros clientes). Lo llamamos clientes e insertamos texto de relleno, categoría general, lo guardamos y cerramos:

47

Ahora ya tenemos creado un artículo de nosotros y otro de clientes, ambos en la categoría general.

Ahora crearemos ítems de menú para el contenido creado. Para ello iremos a los menús y elegiremos el "gestor de menús". Veo que tengo creado un menú, que es el menú principal.

Voy a utilizar este menú principal para agregar contenido, así que pinchamos sobre él.

48

Dentro vemos un único link llamado principal. Vamos a crear un nuevo ítem de menú para el artículo de nosotros. Le daremos el nombre de "nosotros" y seleccionamos el artículo al que está referido:

En nuestro caso seleccionamos "artículos"- "artículo simple":

49

Y ahora colocamos el título del artículo o ítem de menú (como he puesto antes, pondré "nosotros" aunque podría ser otro):

Y ahora seleccionamos el artículo (que ya habíamos creado) desde "Seleccionar el Artículo":

50

Y ahora, guardamos y cerramos....

Y ahora creamos un nuevo Ă­tem de menĂş para el artĂ­culo de clientes (del mismo tipo que nosotros):

51

52

Y ya lo tenemos:

Y ahora, sin nos dirigimos a nuestro sitio, veremos que además del ítem de menú "inicio", tenemos además los dos nuevos que hemos creado:

53

Ahora quiero que este menú no aparezca ahí, sino en la parte izquierda - superior y de forma horizontal. Para ello nos dirigimos al menú "extensiones- gestor de módulos"

Y vamos a "menú principal":

54

Fijaros que el "menú principal" está en la posición 7. ¿Os acordáis de cómo podíamos ver las posiciones?. En el frontend, escribimos a continuación de la url la opción ?tp=1 y podremos ver las posiciones:

Vemos la posición 1 y también la posición actual que es la 7. Como queremos que aparezca en la posición 1, vamos al backend y en el menú "extensiones - gestor de módulos" vamos a variar la posición 7 por la posición 1, accediendo al "menú principal":

55

Guardamos y cerramos y actualizamos el frontend:

Además quiero que me aparezca de forma horizontal. Para ello, volvemos al backend y vamos de nuevo a "extensiones - gestor de menús". Pinchamos sobre "menú principal" y nos vamos a la pestaña opciones y en la parte inferior a "opciones avanzadas":

56

Una vez ahí, vamos a escribir ..........................................

Ahora ya podemos entrar en los artículos creados y ver el contenido que hemos generado en ellos.

Vamos a intentar dar un mejor aspecto a los artículos que hemos creado. Para ello nos vamos al backend, menú "contenido - gestor de artículos":

Y una vez dentro vemos los dos artículos creados. Ahora pinchamos sobre el botón de opciones:

57

Desde aquĂ­ puede habilitar o deshabilitar las opciones que quiero que se muestren de un artĂ­culo. Por ejemplo puedo mostrar u ocultar el autor de los artĂ­culos.

Vamos a ocultarlo, guardamos y nos vamos al frontend para ver el resultado:

58

Y actualizado:

Ahora vamos a ocultar algunas opciones mรกs. Por ejemplo el correo, la navegaciรณn, los iconos....

59

Y actualizamos el frontend...

Intentar ocultar la categoría...

Como podéis ver, todas estas variaciones se producen sobre todos los artículos en general, pero a lo mejor queremos mostrar u ocultar opciones de algún artículo en particular. Para ello, primero vamos a mostrar otra vez la fecha en todos los artículos:

60

Y vamos a ocultarla, pero sólo en el artículo "nosotros". Para ello iremos al backend, menú "menús - gestor de menús"

Y entramos en "menú principal". Dentro de éste, pinchamos sobre el artículo "nosotros":

Y dentro de él, sobre "opciones avanzadas":

61

Como podéis ver, tenemos todas las opciones que teníamos en el "gestor de artículos" y un desplegable, en el cual podemos elegir si utilizar la configuración que hemos decidido para todos los artículos, ocultar o mostrar.

En el caso de este artículo vamos a ocultar la opción de fecha de creación:

Guardamos y cerramos y actualizamos el frontend, pasando de ésto:

a esto:

62

De manera que podemos modificar opciones en "general" o en "particular".

Seguiremos ahora "embelleciendo" nuestros artículos. Ahora incluiremos una imagen en uno de nuestros artículos. Nos vamos al menú "contenido - gestor de artículos" y entramos en el articulo "nosotros".

Desde aquí insertaremos una imagen utilizando el icono estándar de inserción de imagen que tenéis abajo a la derecha (el cuarto):

63

Desde aquí puedo crear nuevas carpetas para mantener un orden en las imágenes de mi página.

Creo la categoría "general" y en dicha carpeta subo las imágenes que me interesen. En mi caso voy a subir una imagen:

64

Ahora, una vez subida puedo seleccionar distintos parámetros, como la alineación, dimensiones, etc..

Arriba a la derecha podéis ver una previsualización de cómo quedaría la imagen. Insertamos y veremos el resultado:

65

Guardamos y abrimos el artículo en el frontend:

Si os fijáis, al redimensionar la ventana del frontend, se redimensiona también la imagen.

Ahora vamos a incluir algunas opciones adicionales que harán más atractivo nuestros artículos.

Para ello vamos a buscar en el navegador "bootstrap" y nos dirigiremos a la parte de CSS.

66

Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web. Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y formularios.

Tenéis también la opción en español:

Aquí podemos ver ejemplos de cómo se definen las diferentes clases que tiene bootstrap.

67

Ahora veremos el uso de dichas clases para dar a nuestro artículo, distintos estilos visuales. A la izquierda de la página podéis ver un menú con las distintas partes o estilos de tipografía, de código, de tablas, formularios, botones, etc...

Vamos por ejemplo a la parte de componentes "menú componentes" y en la parte izquierda pinchamos sobre "alerts":

68

Una vez allí, vemos, bajando un poco, una serie de ejemplos de tipos de letra de alerta. Bajo ellas tenemos el código que hemos de utilizar para utilizarlo en nuestro artículo:

Y lo que haremos será incluir el texto que queremos resaltar dentro del la clase, donde están los puntos suspensivos. Yo voy a utilizar el segundo tipo (azul). Entonces lo que haré será copiar el segundo código (correspondiente al tipo azul) y lo pegaré en el código de mi artículo de la siguiente manera: Me voy al backend, menú "contenido - gestor de artículos" y entraré en el artículo "nosotros".

Una vez aquí pincharé sobre la vista de código "toggle editor":

Ahora pegaremos el código de la clase que hemos copiado en bootstrap: <div class="alert alert-info">...</div>

y colocaremos el texto que queremos resaltar en el lugar de los puntos suspensivos: 69

e incluso podemos añadirle un icono como ya vimos anteriormente, por ejemplo el icono help:

Y ahora vemos el resultado en el frontend:

Como podéis ver tenemos el texto tal y como queríamos y además el icono. En definitiva, podemos usar todo lo que vemos en el bootstrap, siguiendo los ejemplos que vemos en la página de bootstrap.

Otro ejemplo sería la creación de una lista con un icono delante, tal como haríamos con la viñetas en word.

Volvemos al artículo en formato código y utilizamos el icono estrella, por ejemplo. Después le ponemos el texto que queramos y lo repetimos con otro texto: 70

Ahora vamos al editor normal pinchando sobre toggle editor:

Y podemos ver que no han quedado en linea debido a la posiciĂłn de la imagen. En este caso podemos hacer uso de este mismo editor y poniĂŠndonos delante de los iconos y apretando "enter", podemos bajar los elementos de la lista hasta hacerlos quedar bien:

Guardamos y vemos el resultado en el frontend:

71

Ahora vamos a incluir una tabla en nuestro artículo. Nos vamos de nuevo a bootstrap y al menú "CSS", a la izquierda elegimos "tables" y podremos observar los distintos tipos de tablas que podemos utilizar:

Primero crearemos nuestra tabla en el backend. Nos iremos al editor de el artículo "nosotros" y elegiremos el lugar en el cual queremos ubicar la tabla. A continuación la insertaremos haciendo uso del botón del editor correspondiente:

72

Creamos la tabla:

Guardamos y vamos al frontend para ver que tal queda:

73

Como podemos ver no tiene un gran estilo, así que vamos a hacer uso de una de las clases de bootstrap. Al igual que hacemos con el tipo de letra, copiamos la clase e incluimos dentro el código (en este caso de la tabla). Así que nos vamos al código del artículo en el backend y vemos que al final del artículo está el código de la tabla:

Ahora buscamos el código de la tabla que queremos incluir en la págian de bootstrap:

Y sustituiremos el "border = 1" que hay después de "table" por el código que queremos:

74

Guardamos y vemos el resultado en el frontend:

Como podéis ver, el resultado cambia bastante. Es igual a la tabla de la que hemos cogido el código en bootstrap.

Ahora vamos a definir algún botón de bootstrap. Nos vamos a bootstrap y accedemos al menú CSS y en la parte izquierda a "botones":

75

Estos botones o código de botones los podemos aplicar sobre los links que tengamos o sobre los controles de botón. Podemos actuar sobre el color (como podéis ver en la imagen de arriba) o sobre el tamaño (lo podéis ver en bootstrap a continuación de los colores). Vamos a probar uno de ellos.

Copiaremos el código de la clase del botón por defecto (default button) en "tamaño":

Ahora vamos al backend y al artículo. Creamos el link que queremos convertir en botón:

76

Indicamos la URL a la que apunta el link e insertamos:

Ahora, si nos vamos al cรณdigo (toggle editor), y vamos al cรณdigo del link que hemos creado:

77

Ahora podemos copiar delante el código del botón de bootstrap:

Guardamos y vemos el resultado en el frontend:

Ahora lo podemos cambiar de color. Para ello vamos a bootstrap y copiamos el código del color que queramos:

Y lo pegamos en el código del artículo:

Y podremos ver el resultado en el frontend después de guardar.

78

Ahora vamos a agregar dos artículos nuevos desde el backend. Ya sabéis como: "Contenido gestor de artículos - nuevo":

Lo vamos a agregar a la categoría de "blog" y añadiremos un texto. Después lo guardaremos.

Ahora vamos a agregar un ítem o entrada de menú para este artículo. También os acordáis de cómo hacerlo. tenéis que ir al backend, menú "menús - menú principal" y agregamos uno nuevo.

Seleccionamos el tipo, que será de tipo artículo pero en formato blog:

En la categoría "blog" y como título del ítem, le pondremos "noticias" y guardamos. Si vamos al frontend podremos ver el nuevo menú y el artículo:

79

Ahora vamos a cambiar algunas características del artículo. Nos vamos al backend y desde el menú "contenido-gestor de artículos", entramos en el artículo recién creado y vamos a añadirle un "leer más":

Y quedará de la forma siguiente:

80

Ahora vamos a insertar una imagen. Lo podemos hacer como antes, pero también podemos hacerlo desde la parte inferior del editor. Tenemos una opción de imagen de introducción e imagen del artículo completo.

Insertaremos la imagen que queramos como imagen de introducción (yo me he creado una carpeta blog para estas imágenes en el menú "contenido - gestor multimedia"). Como dentro de esta carpeta no tengo la imagen, en la parte de abajo pincharé el botón examinar, buscaré y elegiré la imagen que quiero insertar y la subiré. De esta manera se subirá a la carpeta blog.

La opción de imagen flotante la dejaremos como está por defecto, aunque si queréis podéis experimentar con las otras opciones:

81

Yo he insertado una imagen de introducción y otra de artículo completo, como podéis ver.

Ahora voy a visualizar el frontend:

Podéis ver la imagen pequeña (de introducción) que he insertado. Y si entro dentro de Noticias:

82

Ya aparece la imagen grande (la de artículo completo).

Otra opción interesante es la de la estrella que tenemos en el artículo en el backend:

Si la activamos, pasaremos de que no se refleje nuestro artículo en el inicio:

83

A verse reflejado:

En cuanto a las imĂĄgenes, tened en cuenta que podemos agregar cuantas queramos en cualquier punto del artĂ­culo. Probad a insertar algunas.

84

También tenemos la posibilidad de mostrar algún enlace y la forma en la que se abre en nuestro artículo desde el backend. Si vamos al gestor de artículos y al artículo en el que queremos insertar el enlace:

Y vemos el resultado en el frontend:

Como veis, aparecen al principio del artículo. Si queremos ponerlos al final, tan solo tenemos que ir al gestor de artículos en el backend, y en el botón de "opciones" elegirlo así:

85

Ahora voy a añadir varios artículos más en la sección de blog. Como se puede ver:

Y en el frontend, donde están todos los artículos tipo blog:

86

Como se ve, hay un artículo principal y los siguientes a dos columnas. Si quisiéramos tenerlos a una sola columna podríamos hacerlo si vamos al menú "menús- menú principal - noticias opciones avanzadas - opciones plantilla blog" y poner un 1 en la casilla de columnas.

87

En este menú también podemos modificar la cantidad de artículos por página que queremos mostrar. En mi caso si pongo un 1 en la casilla de "artículos principales" y en "introducción de artículos" (en total dos artículos), observaremos que el tercer artículo se queda fuera y pasa a la página 2 (nos crea debajo un índice con las páginas)

88

Y en el frontend:

Ahora vamos a intentar resaltar el artículo principal de esta sección (o los dos primeros, etc... depende de cómo lo tengamos en la casilla de "artículos principales". Para ello, nos descargaremos un complemento de firefox llamado "firebug":

89

Firebug es una extensión de Firefox creada y diseñada especialmente para desarrolladores y programadores web. Es un paquete de utilidades con el que se puede analizar (revisar velocidad de carga), editar, monitorizar y depurar el código fuente, CSS, HTML y JavaScript de una página web de manera instantánea.

Por ejemplo, si nos vamos a los artículos de noticias (recordad que yo tengo uno como principal, y enciendo firebug:

Podemos ir desplegando las clases hasta dar con la que "domina" el artículo principal:

90

En este caso es leading-0. Copiamos esta clase y nos dirigimos a la carpeta de mi sitio - templates - protostar - Details and Files - carpeta css, y dentro de ésta abrimos el archivo templates.css. Allí podríamos por ejemplo variar el color de fondo con background u otros parámetros.

Etiquetas Otra de las opciones que vamos a ver es la posibilidad de insertar etiquetas.

Sin nos dirigimos a "Menú Principal - Artículos" y entramos en uno de los artículos, veremos que puedo definir etiquetas: Artículos relacionados Una manera de relacionar los artículos es a través de los metadatos. Cada artículo tiene dentro de la opción Publishing, una parte a la derecha dirigida a los metadatos:

91

Vemos que podemos ingresar una meta descripción y meta palabras. En las meta palabras puedo introducir palabras claves para poder relacionar artículos. Esta relación la podríamos colocar al lado del artículo para que el usuario pudiese verla y ver de esa manera todos los artículos que se relacionan con dicho artículo.

Nosotros añadiremos algunas palabras claves para un artículo. Por ejemplo yo en mi artículo sobre los globos de oro, añadiré como palabras clave los oscars, Hollywood y noticias.

92

Y guardamos. Ahora voy a dirigirme a otro artículo (en mi caso el artículo noticias) y le añadiré otra serie de palabras clave y lo guardo:

93

Ahora necesito publicar un módulo para que se vean estas relaciones. Es decir, el usuario estas relaciones las tendrá que ver en alguna parte de la página. Para ello voy al menú "extensiones gestor de módulos":

Y desde aquí voy a crear un nuevo módulo, en este caso de "artículos relacionados":

Le daré un nombre a este módulo:

94

Para seleccionar la posición podré hacerlo como se dice al principio de esta práctica (con ?tp=1) o buscando por internet "protostar map". Yo ahora lo haré de la primera forma

Y voy a elegir la posición número 7 (fíajte que estés dentro de la plantilla protostar y no en otra como Beez). El resto de opciones las dejo como están:

95

Y guardo.

Y ahora vamos a verlo en el frontend:

96

Y vemos que se relaciona con noticias. Si pinchamos:

Nos vamos al artículo "noticias" que por otra parte se relaciona con "la hora de los globos de oro". Si fuésemos a un artículo que no tuviese metadatos, no aparecería el módulo de "artículos relacionados" Como se puede ver, el nuevo módulo ha sido colocado encima del módulo de acceso. Si quiero tenerlo debajo puedo ir al backend y dentro de "extensiones", en "la gestión de módulos", pulsando sobre la doble flecha:

97

Me permite arrastrar y soltar cualquier módulo por encima de otro. En este caso quedará de la siguiente manera:

Y lo vemos en el frontend:

Gestion de usuarios En Joomla 3 la gestión de usuarios la realizaremos en el backend, desde “Usuarios > Gestor de usuarios”. Aquí veremos una lista con todos los usuarios de nuestro sitio, su estado, grupo al que pertenecen, fechas de visitas, etc. Podremos activar y desactivar sus cuentas o modificar su perfil entre otras opciones.

98

AĂąadir usuarios: Para aĂąadir un nuevo usuario pulsaremos en nuevo e introduciremos sus datos (nombre, contraseĂąa, email).

99

Grupos de usuario asignados: En la segunda pestaña, se elegirán los grupos a los que se quiera que pertenezca este usuario, se pueden escoger más de uno, pero si se elige solamente uno, por ejemplo, Publisher, tendrá también acceso a crear y editar.

Esto hace que pueda tener infinitas posibilidades de configuración de usuarios, pues se pueden crear nuevos niveles según las necesidades.

100

Opciones básicas: Esta pestaña es para elegir el estilo de la plantilla que utilizará este usuario, el idioma de la administración, si es que tiene acceso a ella, el del sitio, la zona horaria, etc. Una forma de personalizar el acceso por usuario, aunque generalmente los campos que se utilizan son el de idioma y el de la zona horaria, hay la posibilidad de personalizar el resto de opciones.

101

Añadir un nuevo usuario desde la interfaz de usuario: En caso de que sean los propios usuarios los que se registren desde la interfaz de usuario, se añadirán automáticamente al grupo de usuarios registrados y podremos gestionarlos desde la administración igual que al resto de usuarios. Deberían hacerlo, claro, a través del frontend:

En este caso se puede elegir que estos usuarios necesiten de la aprobación del administrador del sitio, o de la persona responsable de esta operación, o se den de alta automáticamente. No es muy conveniente que se den de alta automáticamente, pues esto puede ser una puerta abierta a ataques no deseados.

102

Grupos de usuarios Todos los usuarios de Joomla tienen que pertenecer a algún grupo. La gestión de los grupos la realizaremos desde “Usuarios > Grupos”.

Aquí veremos una lista con los grupos existentes por defecto en nuestro Joomla junto con el número de usuarios que lo integran.

103

Podremos añadir o eliminar. tantos grupos como queramos, pulsando en “Nuevo”. La única información que tendremos que introducir será el nombre del grupo y su grupo padre (por defecto el padre es el grupo “Público”).

Una buena práctica es el adecuar los nombres de los grupos de usuarios a las necesidades del proyecto. No es necesario mantener los que vienen en la instalación, son solo un ejemplo.

104

Niveles de acceso en la parte pública (Front-end) 

Anónimo (usuario sin registrar). Tiene acceso a todas las partes del sitio web que el administrador haya dejado como públicas (Public)



Registrado (Registered) Puede acceder a zonas de la parte pública de Joomla a las que el administrador le haya asignado nivel de acceso "registered". Un nivel recomendado para alumnos, padres... Si no queremos que publiquen.



Autor (Author) Puede enviar artículos desde la zona pública, pero no puede editar los artículos de los demás, ni publicar los que escribe él mismo. Estos artículos quedan pendientes de validación hasta que un administrador los autorice y publique. Puede añadir enlaces al componente Enlaces Web que quedan publicados sin necesidad de aprobación.



Editor (Editor). Puede enviar artículos y editar los de los demás, pero no puede publicar. Los artículos quedan Pendientes de validación, al igual que el caso del Autor. Puede ser un nivel recomendado para un compañero docente, en la Web de Centro. Tienen los mismos privilegios que el Autor para usar el componente Enlaces Web.



Publicador o Editor Jefe (Publisher). Tiene permisos para enviar, modificar y publicar sus artículos o los de otros usuarios. También tiene los privilegios para usar Enlaces Web.

Niveles de acceso en la parte de administración 

Gestor (Manager): Los usuarios de este grupo tienen un acceso parcial a la zona de administración: o

Sitio: Gestor Multimedia.

105





o

Menús: Edición de Menús existentes, y creación de Elementos de Menú (todas las funciones relacionadas).

o

Contenido: Gestor de Contenidos, Gestor de Secciones, Gestor de Categorías, Gestor de la Página de Inicio y Gestor del Archivo (y todas las funciones relacionadas)

Administrador (Administrator): Los usuarios de este grupo pueden acceder a la mayoría de funciones administrativas. Además de los permisos contemplados para el grupo "gestor" tiene acceso a: o

Sitio: Administrador de Usuarios (crear/editar/borrar cualquier tipo de usuario excepto Super-Administrador).

o

Menús: Administrador de Menús (acceso a todas las funciones).

o

Contenido: Administrador de las Papeleras, Estadísticas.

o

Extensiones: Instalar/Desinstalar, Crear, Editar cualquier Extensión (excepto el Administrador de Idiomas y el Administrador de Plantillas).

Super-Administrador (Super Administrator): Los usuarios de este grupo pueden acceder a todas las funciones administrativas.

A tener en cuenta 

Los superadministradores son los únicos con capacidad total de gestionar usuarios, registros y permisos.



Desde el Gestor de usuarios se puede editar los datos de estos, bloquearlos, eliminarlos, cambiar su contraseña, asignarle otro nivel de permisos...



Cuando se crea un nuevo usuario desde el administrador de usuarios el sistema envía automáticamente una notificación a esa persona con sus datos de acceso. Para que esto funcione como es debido, en la configuración global debemos tener bien configurado el sistema de envío de correo.



Cada usuario puede actualizar sus propios datos una vez identificado en el sistema.

Gestión de permisos Veamos cómo podemos cambiar los permisos de acceso a diferentes partes de la instalación de Joomla, de los grupos de usuarios.

Artículos, secciones, menús, elementos de menús, módulos y otros contenidos de un sitio web Joomla pueden configurarse para que sean accesibles únicamente a usuarios con determinados permisos. Estos privilegios de acceso básicamente son tres niveles: 

Público: Todo el mundo tiene acceso



Registrado: Solo los usuarios registrados tienen acceso



Especial: Solo los usuarios con estatus de autor o superior tienen acceso

Hay más niveles, pero vamos a trabajar con estos.

106

Un ejemplo es el del Menú de usuario que se crea al instalar los datos de ejemplo. Este menú sólo es visible cuando un usuario se identifica en el sistema con su nombre de usuario y contraseña.

Ahora podemos ver las 3 categorías de permisos en un menú, Público, Registrado y Especial en los artículos.

107

Podríamos crear categorías, artículos o módulos que fueran visibles solo para usuarios con el nivel de permisos deseado, para que los autores puedan introducir sus artículos desde el interfaz de usuario, que se vea el icono para introducirlo en el editor de texto y que este solo lo vean los rangos de “autores” y superiores.

Con solo poner un poco de imaginación, las posibilidades de configuración de permisos es muy amplio, no se puede decir infinita, pero sí, con muchísimas posibilidades. Lo que permite gestionar los permisos de un simple blog, hasta una compleja intranet de una gran empresa, con seguridad, eficiente y fácilmente.

Elección de un servidor de hosting. Proceso de alta en un servidor de hosting gratuito: Varias son las empresas que nos ofrecen por internet servicios de alojamiento para nuestra página o nuestro sitio web. Consideraciones a tener en cuenta a la hora de elegir uno:          

Tipo de servidor: Windows /Linux Tipo de servicio requerido: servidor dedicado o no Programas y servicios incluidos: PHP, MYSQL, Cuentas de correo Espacio en disco Cuentas de correo Tipo de panel de control Idioma del panel de control Precio Política de escalabilidad Otros

108

Lo recomendado para empezar es utilizar un servidor gratuito aunque nos llenen de publicidad. Una vez seguros de lo que queremos y necesitamos, podremos decantarnos por un servidor de pago.

Para hacer nuestras pruebas utilizaremos http://www.hostinger.es/, un servidor de alojamiento gratuito con panel de control en español.

Lo primero que tenemos que hacer es crear una nueva cuenta desde la parte superior derecha.

En la siguiente pantalla que nos aparece rellenaremos todos los campos.

Vais siguiendo los pasos. Es importante poner una dirección de correo electrónico válida puesto que posteriormente nos enviarán un código de activación al mismo para poder finalizar el proceso de alta de usuario.

Una vez recibido el correo con el código de activación, se nos dará un enlace para activar la cuenta . Cuando lo hagamos ya estaremos en disposición de entrar con nuestro nick y nuestra contraseña. (en la parte superior derecha también) Una vez estamos dados de alta, entramos a través del enlace y nos propondrá crear una nueva cuenta de hosting.

109

Pincharemos sobre el botón de "order" correspondiente a la versión "free", claro:

A partir de aquí tendremos que elegir el nombre del subdominio (o dominio si tenemos uno) y elegir una contraseña para operar (poner la misma que para entrar).

tras unos pasos nos creará la cuenta:

110

Y en la pestaĂąa de hosting ya tendremos el subdominio-cuenta creado, el cual podemos administrar:

Si bajamos veremos una zona de "archivos", donde tenemos un icono llamado "acceso FTP":

111

Si pinchamos sobre ĂŠl, veremos los datos que nos hacen falta para conectarnos por ftp para poder subir nuestro "sitio" al hosting.

Ahora, arrancamos el cliente Filezilla y accedemos a nuestro espacio en el hosting con los datos anteriores.

112

En la parte izquierda tenemos nuestro disco duro, así que nos vamos a la carpeta donde tenemos alojado joomla y comenzamos a subir las carpetas y los archivos, pasándolos al servidor (parte derecha).

La otra opción es comprimir todo el directorio de joomla y subir el comprimido. Después nos podríamos conectar a través de la consola SSH que tenemos en el panel de control del hosting y descomprimir dicha carpeta.

Una vez tengamos subida toda la información de nuestro site, debemos de exportar la base de datos de joomla. Para ello, abriremos el navegador y esciribiremos esto en la barra de direcciones: /localhost/phpmyadmin

113

Ahora, en la parte izquierda, seleccionamos la base de datos de joomla (generalmente la creamos con el mismo nombre: joomla) y exportamos la base de datos:

Dentro de la pestaĂąa mĂĄs le damos a la opciĂłn de exportar y:

114

Pinchamos sobre continuar y nos guardamos la base de datos:

Ahora, desde el panel de control de hostinger, debemos de crear una base de datos nueva:

115

Una vez dentro:

le damos un nombre y le ponemos una contraseĂąa a la base de datos. TenĂŠis que acordaros de los datos que le ponĂŠis. Una vez creada:

Nos vamos al panel de control de nuevo e importamos la base de datos que hemos exportado desde phpmyadmin (nuestro ordenador):

116

Y pinchando sobre examinar:

Elegimos el archivo de respaldo de la BD. Una vez importada la base de datos debemos de cambiar el fichero de configuraciรณn de joomla para que funcione nuestro joomla en el servidor. Para ellos debemos cambiar una serie de datos del fichero por los datos que nos provee el servidor.

117

Modifico los siguientes campos del archivo configuration.php: public $host = 'mysql.hostinger.es'; **Host MySQL public $user = ' '; **Nombre de usuario de la base de datos public $password = ' '; **ContraseĂąa de la base de datos public $db = ' '; **Nombre de la base de datos MySQL public $live_site = 'http://sitio.16mb.com/DIR_Joomla'; public $log_path = 'http://sitio.16mb.com/DIR_Joomla/logs'; public $tmp_path = 'http://sitio.16mb.com/DIR_Joomla/tmp';

118