mejora tu sitio web - uv.es · base de datos mysql: información + configuración ! scripts php:...

Mejora tu sitio web Rafael Sebastián Aguilar

Curso de extensión universitaria

Campus de Burjasot Universidad de Valencia

Febrero 2014

1 Mejora tu sitio web – R. Sebastian – Universitat de Valencia - Febrero 2014

Mejora tu sitio web – R. Sebastian – Universitat de Valencia - Febrero 2014

Curso Joomla DIA 1 l  Introducción sobre virtulización de máquinas l  Breve introducción a CMS: Joomla l  Instalación de Apache + PHP + MySQL

l  Para servidores Windows (opcional) l  Para servidores Linux (curso)

l  Instalación Joomla l  Introducción al administrador de Joomla l  Introducción a los templates de Joomla l  Nuestra primera página web con Joomla

2


Introducción CMS: Joomla •  CMS: Content Management

System o Sistema de gestión de contenidos. Como su nombre indica, es un sistema que permite al usuario de forma cómoda (gráfica) administrar los contenidos una web (añadir, eliminar, etc.)

•  Será la plantilla del CMS la que defina qué posiciones posibles hay para cada contenido que se va a añadir. El gestor le asignará una posición de todas las posibles

•  Otras de las características de CMS es la modularidad. Se pueden añadir módulos desarrollados por terceros, siempre la plantilla indicará el lugar

posiciones

3

Servidores web


Cliente IP 192.168.11.25

Puerto 80

Cliente IP 192.168.11.15

Apache (web) MySQL (BD)

Servidor IP 192.168.11.1

4

BD = Base de datos

Joomla

IP cambia en cada caso

Maquina Virtual



Vamos a usar un servidor virtual mediante VMWare Player*: •  Simula un PC (servidor) dentro de un PC (cliente)

Windows 7

Cliente IP 192.168.11.25

El servidor esta en “Matrix” (…y no es consciente, piensa que está en el mundo real)

El Cliente esta en el “mundo real” (… y tiene un “mundo matrix” dentro)

Windows XP

5

*http://www.vmware.com/products/player/

Servidor dentro del cliente


Real Windows 7 (realidad)

Virtual Windows XP

(matrix)

6

Introducción CMS: Joomla

l  Todas las acciones de administración se realizan a través del navegador web

l  No es necesario tener conocimientos de HTTP l  Joomla está programado en PHP l  Elementos principales de Joomla:

l  Base de datos MySQL: información + configuración l  Scripts PHP: Acceso a la base de datos y presentación de la

información

Mejora tu sitio web – R. Sebastian – Universitat de Valencia - Febrero 2014 7


Posibilidades de Joomla Acción Cómo?

Organizar tu web Administrador

Publicar contenidos Editor, artículos, categorías

Modificar aspecto del portal Plantillas

Calendario, Estadísticas, Visitas, reproductores, etc

Módulos y Componentes

8


Como instalar el servidor?

l  Instalar servidor de páginas web: l  Windows [diapositivas 10-15]

l  Linux

9


Windows o Linux Windows 7


Como instalar el servidor en Windows? (extra)

l  Instalar XAMPP. Este paquete lo engloba todo (servidores Apache, MySQL, …)

l  Permite que instalemos un servidor de páginas web (Apache) y una base de datos (MySQL) en nuestro PC en pocos pasos

l  Usaremos la última version 1.8.1

l  Descargar de: http://www.apachefriends.org/ l  xampp-win32-1.8.1-VC9-installer (autoinstalador) l  Instalar “como servicio” l  Tras instalar borrar carpeta C:\xampp\tmp

10

Instalación de Apache + PHP + MySQL


XAMPP (Servidor web - Apache)

Estado

11


XAMPP (Servidor BD-MySql)

Crear Base de datos 1. nombre de la base de datos 2. el nombre del usuario de dicha base de datos 3. una contraseña para ese usuario creado 4. nombre del servidor (mayoría de las ocasiones será localhost).

phpMyAdmin

NOTA: Acceder con https://localhost... (si no se instalo como servicio)

12


Instalación de Joomla Importante! (ver próximas transparencias)

l  Al crear la base de datos con MySQL apuntar: l  Usuario de la base de datos l  Nombre de la base de datos l  Contraseña de usuario

l  Versión de Joomla l  Joomla_2.5.8-Spanish-Pack_Completo

13


XAMPP Crear Base de Datos

14


XAMPP Crear Usuario

15


Configuración de Joomla

l  En directorio ‘htdocs’ crear directorio ‘Joomla’ l  C:\xampp\htdocs\Joomla

l  En el directorio anterior descomprimir el contenido de Joomla_2.5.8

l  Iniciar instalación Joomla: ‘http://localhost/joomla/’

16


Como instalar el servidor en Linux?

l  Abrir la máquina virtual Linux: l  Descomprimir “servidor.zip” y ejecutar “servidor” l  Indicar que el servidor fue copiado “I copied it” l  No actualizar, “Remind me later”

17


Como instalar el servidor Apache en Linux?

l  Descargar e Instalar servidor Apache: l  Botón de Inicio à Máquina à Yast l  Instalar / Desinstalar software

18



l  Instalar paquetes de servidor Apache: 1.  Ver à Patrones à þ Servidor Web y LAMP 2.  Seleccionar paquete “php5-zlib” (derecha)

19



l  Activar servidor Apache y mySql: 1.  Servicios del sistema (niveles de ejecución) 2.  Apache2 (botón Activar); mysql (botón Activar)

20



l  Comprobar servidor Apache y mysql: 1.  Abrir navegador web (Firefox) 2.  Conectar al servidor desde dentro: http://localhost 3.  Conectar al servidor desde windows: http://IPservidor*

21

*Obtén la IP de tu servidor!!


Como configurar servidor mysql en Linux?

l  Acceder a la consola de administración. l  Convertiros en super-usuarios y crear BD

1.  Escribir su 2.  Contraseña tres+dos=5 3.  mysql_secure_installation

l  Current password: ENTER l  Clave: Una-buena-clave l  Presionar ENTER para el resto de preguntas

4.  ./joomla_db_create.sh 22


Como configurar servidor mysql en Linux?

l  Comprobar que hemos instalado en la BD: 1.  En la consola del terminal, escribir:

l  cat joomla_db_create.sh 2.  Apuntar los datos de usuario y password 3.  No cerrar la ventana de consola

23


Como instalar Joomla*?

l  Descargar y descomprimir Joomla 2.5.8 1.  En el escritorio descomprimir Joomla258.zip

l  Utiliza botón derecho y “Extract Archive Here, Autodetect Subfolder”

2.  En la consola de comandos escribir: l  mv Escritorio/joomla258 /srv/www/htdocs/joomla l  chown –R wwwrun /srv/www/htdocs/joomla

l  Comprobar instalación 1.  En el FireFox probar, http://localhost/joomla

24

*http://www.joomlaspanish.org/



l  Seleccionamos el idioma preferido, y Siguiente

l  Comprobar que todo aparece como Si l  Aceptamos licencia l  Configuramos la base de datos

l  Utilizar los datos anteriores: l  Nombre del host: localhost l  Usuario: joomla l  Contraseña: La-clave-de-joomla l  Nombre de la base de datos: joomladb

l  Configuración FTP, > Siguiente 25



l  Completar la configuración principal l  Nombre de sitio web l  Un email l  Configuramos el usuario administrador:

l  Usuario: admin l  Contraseña: admin

l  > Siguiente

26



l  Eliminar los datos de la instalación

27


El administrador de Joomla

l  Es lo que se llama el ‘back end’o administrador l  Es una aplicación web con interfaz gráfica muy

intuitiva l  Permite configurar todos los aspectos de

nuestro sitio web. Escribir en Firefox: l  http://localhost/joomla/administrator/ l  Para acceder a él hay que entrar con usuario y

contraseña (admin,admin)

28

El administrador de Joomla


Crear un Usuario


l  Crear un usuario para cada miembro del grupo l  Usuario 1: Grupo = “Super usuario”, Idioma=“Español” l  Usuario 2: Grupo = “Público”, Idioma=“Inglés”

l  Configuración de aspectos del sitio web l  Configuración Global l  Gestor de artículos l  Gestor de categorías l  Gestor multimedia l  Gestor de menús l  Gestor de Usuarios l  Gestor de módulos l  Gestor de extensiones l  Gestor de idiomas l  Gestor de plantillas


Administrador Joomla

31


Administrador Joomla Configuración global > Sitio l  Algunas cosas que podemos configurar:

l  Directorios de instalación de Joomla y Base de datos (MySQL) l  Sistema de correo electrónico para notificaciones

l  Vamos a incluir información para que los motores de búsqueda como Google puedan indexar nuestra página

32

Para Google


Administrador Joomla Configuración global > Servidor l  Configuración de cuenta de correo:

l  Ejemplo: (poner vuestros datos) l  Para que cuando un nuevo usuario se registre le lleguen un email

33

l  Gestor de artículos l  Contiene el texto que aparece en el portal web l  Debe de ser asignado a una categoría definida previamente l  Pueden estar activo (publicados) o no activos (no publicado)


Administrador Joomla Gestionar contenidos

Nombre Publicado Si/No Categoría

Orden en categoría

Quien puede verlo?

34

l  Gestor de categorías l  Se utilizan para estructurar la información del portal l  Se definen creando una jerarquía l  Es parecido al uso de carpetas y subcarpetas en windows l  Pueden incluir texto descriptivo l  Ejemplo:

§  Categoría “Música” §  Subcategorías “Clásica”, “Rock”, “Jazz”,… §  Rock: “60s”, “70s”,…


Administrador Joomla Gestionar contenidos

Para ver un artículo o todos los artículos de una categoría debe existir un enlace que conduzca a ellos!!

35


Administrador Joomla Gestor de artículos l  Contenedor de Artículo y Categorías l  Categorías: Ayudan a organizar

Diferentes niveles

36


Crea tu web Gestor de artículos l  Añadir un artículo:

l  Título: Web Personal de XXXX l  Texto: ….. l  Destacado > Si l  Comprobar vuestra web

37


Crear tu web Gestor de categorías l  Modificar permisos para que tu artículo solo

puedan verlo los usuarios registrados l  Comprueba el portal. Qué efecto tiene?

l  Acceder como “admin” l  Comprueba el portal

38


Crear tu web Edición online l  Si estamos registrados y tenemos permisos

podemos modificar contenido desde el Portal

39


Crear tu web Gestor de categorías l  Crear las categorías de tu portal

l  Ejemplo de una web de Club de Fans: l  Biografía, Conciertos, Discografía, Fotos, Videos

§  Discografía: LPs, Sencillos, Recopilatorios

l  Crea artículos y asócialos a las categorías correspondientes l  En los artículos utiliza Negrita, Cursiva,

subrayado l  Usa la opción “Leer más” l  Añadir imágenes. Tendrás que descargarla primero y luego

subirla al portal o usar su URL 40


Crea tu web Gestor de artículos l  Selecciona un artículo que hayas creado en una

subcategoría l  Escribir algo de texto (si no tiene) l  Visible para el “público” general l  Con las siguiente “Opciones Artículo”:

l  Con iconos de “email”, “imprimir”, y “número de veces leído” l  Incluir un icono en la introducción del artículo

l  Podéis encontrarlo en el portal?

41


Crea tu web Gestor de menús l  Vamos añadir un nuevo elemento al menú

principal l  Gestor de Menús à “Elementos de menu” à Nuevo l  Título: Biografía / Tipo Elemento Menu: Lista de

Categorías / Elegir una Categoría: Biografía

42


Crea tu web Gestor de menús l  Seleccionar crear nuevo elemento de menú

l  Tipo de Menú: “Artículo simple”

43


Crea tu web Gestor de menús

l  Ejemplo de Menú completo en “Elementos Menú”

44

Tipo de contenido al que accedemos cuando clickamos en el menú

Página de inicio


Crea tu web Gestor de menús l  Información en la sección de “Menús”

45

Nombre Menú Número de submenus Módulos visibles desde dentro del menú y (lugar que ocupan en la ventana)


Crea tu web Gestor de menús l  El “menú principal”: Inicio

l  Configuración del aspecto de la página principal l  Prueba diferentes configuraciones de los números indicados en el recuadro rojo l  Finalmente, cambia la página de inicio del portal para que aparezca “Primeros pasos”

46


Crea tu web Gestor de menús l  Vamos a crear un nuevo Menú

l  Se llamará “Menú Usuario” l  Crear Elementos de Menú para este menú que permitan

l  Crear artículos l  Acceder al blog personal

l  Colocarlo a continuación del Menú principal

47

mejora tu sitio web - uv.es · base de datos mysql: información + configuración ! scripts php:...

Documents