Mejora tu sitio webMejora tusitio web – Curso de extensión universitaria – Julio 2008...

1

Mejora tu sitio webGuillermo Vigueras González

Curso de extensión universitariaCampus de Burjasot

Universidad de ValenciaJulio 2008

Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 2

Índice Breve introducción a CMS: Joomla Instalación de Apache + PHP + MySQL Instalación Joomla Introducción al administrador de Joomla Introducción a los templates de Joomla Nuestra primera página web con Joomla Libro de visitas Contacto (Google maps) Event calendar Elementos multimedia


Indice (II) eCommerce (VirtueMart) eCards Foro Mapa del sitio Optimización en buscadores Idiomas Juegos Extensibilidad de Joomla

Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

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, elminar, 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


Instalación de Apache + PHP + MySQL Instalar XAMPP. Este paquete lo engloba

todo


Instalación de Joomla En directorio ‘htdocs’ crear directorio ‘cursoJoomla’ En el directorio anterior descomprimir el contenido

de Joomla Iniciar instalación Joomla: ‘localhost/index.php’ Borrar directorio de instalación Cambiar la contraseña por defecto del usuario

'admin‘ a ‘admin’ (para evitar descuidos) Observar estructura de directorios creado


El administrador de Joomla Es lo que se llama el ‘back end’ Es una aplicación web con interfaz gráfica

muy intuitiva Para acceder a él hay que entrar con usuario

y contraseña (admin,admin) Permite configurar todos los aspectos de

nuestro sitio web


El administrador de Joomla (II)• Imagen administrador


Back end: Site

Configuracion de aspectos del sitio web Global configuration Language manager Media manager Preview Template manager Trash manager User manager


Back end: Menu

Menu manager (Publicar/despublicar elementos de cada menú) Mainmenu (probar) Othermenu Topmenu Usermenu


Menús Menumanager Mainmenu (Probar a publicar y despublicar)

Wrapper (página web embebida) FAQ (muestra contenidos que tenga asignado la

seccion/categoria FAQ) Blog (Permite construir un blog, mostrando los contenidos

de diversas secciones. Section >Limitar la sección a mostrar. Permite selección múltiple). Probar

Othermenu


Back end: Content

Definir un contenido en Joomla es crear un documento que será visualizado

Los contenidos estarán asociados a una categoría y sección

Dos tipos: Normal (texto visualizado y otro desplegable) Estático (no texto desplegable)


Back end: comp., mod. Y bots

Estos menús permiten acceder a los distintos componentes, módulos y plugins que tengamos instalados en nuestro sitio web

Acciones: Publicar / despublicar Configurar cada elemento …

Lo veremos más adelante


Módulos

Probar algunos módulos por defecto Wrapper (página web enmarcada en un módulo) Polls (configurar la encuesta) Statistics (algunas estadísticas de nuestro sitio) Latest news (últimos contenidos subidos a

nuestro sitio web) Syndicate (suscribirse a las noticias que estén

puestas en el front page RSS 2.0)


Back end: Installers

Permite instalar Componentes Módulos Plugins Templates Lenguajes


Templates en Joomla Definen la visualización de nuestra página Probar las cuatro plantillas instalándolas Explicar posiciones de la plantilla

Site>Preview>Inline with positions Right Left Top Bottom

Probar las posiciones definidas en cada plantilla con preview (ver que en algunas plantillas hay más posiciones que en otras)


Libro de visitas

Easy GuestBook Permite que la gente que visite la página pueda

dejar un comentario, dando sus datos (que podrán ser ciertos o no).

Se trata de un componente Tiene filtro antispam: CAPTCHA (imagen)

Pasos Crear Separator/Placeholder en Othermenu Añadir nuevo componente en Othermenu


Contacto Instalamos Plugin de google maps Creamos Content utilizando el plugin

Texto de nuestro contacto {mosmap lat='39.508852'|lon='0.420432'|

mapType='Hybrid'|zoom='16'|text='Departament d'InformàticaEscola Tècnica Superior d'Enginyeria (ETSE) Universitat de ValènciaAvda. Vicent Andrés Estellés, s/n46100 BurjassotValència (SPAIN)'|tooltip=‘texto'|marker='1'}

¿Cómo localizar coordenadas de nuestro punto? > Google maps Click botón derecho>’Ruta desde aquí’


Contacto (II) En mainmenu crear nuevo elemento: Link

content item Las dimensiones del mapa no son correctas Tenemos que meter el plugin ‘mosmap’ en

una tabla de una columna por una fila para darle dimensiones al mapa mediante la tabla


Contacto (III) Hacemos lo mismo pero ahora con un

módulo (un plugin se configura con las opciones que se pasan como parámetro, un componente desde el back_end) Categorías (definimos categorías de los

marcadores)>Draggable: se puede arrastrar Makers (definimos marcadores) Configuration (configuración del mapa: punto

inicial, zoom inicial, etc.)


Calendario de eventos Event calendar Instalar componente, módulos y plugin Componente

Añadir en othermenu>Separator Añadir New>LinkContent item Configurar el componente

Crear categorías para eventos añadir eventos

Módulos Publicar los módulos (parte derecha) Configurar módulos


Multimedia Vamos a ver

Reproductor video Reproductor audio Reproductor streaming (video y audio) Galería de fotos Podcast …

Creamos nuevo apartado en Other menu Menu>othermenu>New>Separator/Placeholder


Multimedia (Radio)

Extension: EXP Joomradio and Video version 2 (unzip_joomradio2.zip)

Instalar componente y módulo de radio Desde el módulo

Situarlo a la derecha Definir desde que menús/contendidos se verá (All,…) Que sea visible

Desde el componente Añadir emisoras de radio fichero .txt (importante: name, code) Publicarlas

Añadir elemento (componente) en Othermenu y probar


Multimedia (Video)

Módulo de video de Joomradio Instalar módulo de video

Desde el módulo de configura Situarlo a la derecha Definir desde que menús/contendidos se verá (All,…) Publicarlo

Desde el componente se configura Añadir fuentes de video del fichero .txt Publicarlas

Comprobar cómo qué se ve en pestaña ‘video’ del componente del elemnto de Othermenu


Multimedia (LCPlayer) Módulo que permite reproducir audio y visualizar

video embebido en el módulo (sin popup) Limitaciones

Comienza a reproducir por defecto Sólo permite definir 10 fuentes multimedia

Instalar módulo LCPlayer Situar a la derecha Definir visibilidad en cada menú Publicar


Multimedia(plugin MP3) OnePixelOut Player Uso Crear una carpeta ‘mp3’ en, por ej., /images/stories/,

o donde se quiera. Esta carpeta contendrá los ficheros mp3

Para indicar al plugin que fichero de debe reproducir usaremos: {audio}images/stories/mp3/your_mp3_file{/audio}

Si quisiésemos reproducir ficheros que están en otra máquina: {audio}http://domainname.com/mp3/file_name.mp3{/audio}


Multimedia(modcomp MP3)

Fichero: flash_mp3_player_popup_plugin.zip Instalar el modulo y el componente Posicionar el módulo donde queramos Configurar la lista de canciones con el

componente Sale un Popup con el reproductor


Multimedia (Reprod. YouTube, Google,…) Plugin easiertube

Youtube,GoogleVideos,Ustream.tv,… Obtener el enlace del video

Probar con Youtube (En el video>más info.>URL) En el content poner el texto del enlace 1 video por content Enlaces de videos Google, etc. están en el fichero

YouTubePlayer.txt


Multimedia (PodCast) KAPOD: Listado de recursos multimedia con info.

de cada uno. Permite descarga

Instalar componente y módulo Comprobar que el módulo está publicado Comp. config>establecer direcctorio de recursos

(habrá que crearlo. Ej ‘images\stories\mp3’) Categories Manage Files


Multimedia (Image Gallery) Instalar plugin ‘Simple Image Gallery’ No olvidar publicarlo Especificar directorio en el que están las

fotos El directorio debe estar en ‘images/stories’ Creamos images/stories/fotos {gallery}fotos{/gallery}

Restringir el acceso: Menu>Othermenu>Galleria de fotos>Access level>Registered


eCommerceVirtue Mart Elemento muy completo para implantar una

página de comercio electrónico La instalación del componente nos

proporcionará lo esencial para poder crear nuestra tienda virtual

Los módulos complementan la funcionalidad del componente


eCommerceVirtue Mart (II)

Instalación Instalar componente (con datos de muestra),

módulos(cart_1.1.0) y plugin Crear Separator/Placeholder en OtherMenu

(Publicar) Crear nuevo componente en Mainmenu (Publicar) Añadir módulo de ‘Shopping cart’

Explicación administrador Virtue Mart…


eCommerceVirtue Mart (III) Jugar un poco con el componente en modo ‘usuario’

Probar a navegar por el… View Fullsize image

Probar (modo admin) Añadir nuevos productos. Respetar rutas. Buscar imágenes en

Google. Añadir nuevas categorías. Respetar rutas. Buscar imágenes en

Google Crear una tienda virtual de la temática que cada uno quiera

Despublicar todos los artículos y categorías que haya Añadir categorías y productos (buscar imágenes en google)


eCards Componente de Joomla que permitimos que

usuarios de nuestra web puedan enviar las eCards que nosotros(administrador) haya subido

Instalación Instalar el componente Crear categoría (manage categories>New) Subir eCards/imágenes (Components>RWCards>Upload

o Site>Media Manager>Directorio: images/stories/cards) Publicar la categoría y la eCard

Probar a hacer algúan felicitación con el Paint o GIMP y subirla


Foro

• FireBoard: componente que permite añadir un foro a nuestro sitio web y administrarlo

• Instalar el componente (Load sample data)• Fireboard configuration (echar un vistazo)• Forum administration (gestionar los post)• Usuarios (inicialmente coge los usuarios del

sitio, cuando los usuarios se conectan al foro se podrán administrar)


Mapa del sitio Xmap: componente para crear de forma

rápida y sencilla un mapa de nuestro sitio web para facilitar la navegabilidad

Instalar componente Añadirlo a menú Othermenu Crear mapa del sitio


Optimización en buscadores Plugin JoomSEO Permite configurar la información de nuestro

sitio a la que accederán los bots de los motores de búsqueda

Instalar plugin. Configurar ciertos parámetros Probar viendo código fuente de la página


Múltiples idiomas

Instalamos un lenguaje Instalamos el componente JoomFish Publicamos el módulo para seleccionar el

idioma y lo posicionamos donde queramos Módulos>JoomFish language selection: nos

permite configurar el módulo


Games Algunos juegos para hacer nuestra web más

amena Instalar primero el componente ‘puarcade’ Instalar luego el componente ‘playgames’


Extensibilidad de joomla

Entrar en la página de Joomla y probar a descargar algún plugin interesante y ver cómo se instalaría y como insertarlo en nuestra página

Mejora tu sitio webMejora tusitio web – Curso de extensión universitaria – Julio 2008...

Documents

Transcript of Mejora tu sitio webMejora tusitio web – Curso de extensión universitaria – Julio 2008...