Mejora tu sitio webMejora tusitio web – Curso de extensión universitaria – Julio 2008...
Transcript of 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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 3
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
Instalación de Apache + PHP + MySQL Instalar XAMPP. Este paquete lo engloba
todo
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 6
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 7
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 8
El administrador de Joomla (II)• Imagen administrador
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 9
Back end: Site
Configuracion de aspectos del sitio web Global configuration Language manager Media manager Preview Template manager Trash manager User manager
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 10
Back end: Menu
Menu manager (Publicar/despublicar elementos de cada menú) Mainmenu (probar) Othermenu Topmenu Usermenu
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 11
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 12
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)
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 13
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 14
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)
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 15
Back end: Installers
Permite instalar Componentes Módulos Plugins Templates Lenguajes
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 16
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)
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 17
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 18
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í’
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
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.)
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 21
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 22
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 23
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 26
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}
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 27
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 28
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 29
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 30
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 31
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 32
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…
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 33
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)
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
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)
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 38
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
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 39
Games Algunos juegos para hacer nuestra web más
amena Instalar primero el componente ‘puarcade’ Instalar luego el componente ‘playgames’
Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 40
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