Proyecto Final Sergio Prez
~ 2 ~
INDICE
1. JOOMLA 2.5
1.1. INTRODUCCIN
2. XAMPP Y WAMP
2.1. INTRODUCCIN
2.2. INSTALACIN WAMP
2.3. COMO INSTALAR JOOMLA 2.5
3. PLANTILLA
3.1. INSTALACIN
3.2. CAMBIOS REALIZADOS
3.3. DUPLICAR PLANTILLA
4. AADIR UN MENU HORIZONTAL CSS3/HTML5
4.1. CAMBIAR COLORES
4.2. POSICIN
4.3. AADIR LOGO
4.4. AADIR ICONOS REDES SOCIALES
5. INSTALACIN DE MODULOS
5.1. SUNSET TWITTER SIDEBAR
5.2. SUNSET FACEBOOK LIKEBOX
5.3. EL TIEMPO
5.4. VISITALTEA
5.5. RADIO ALTEA
5.6. INSERTAR UN VIDEO DE YOUTUBE
5.7. FOTOGALERA PRETTY PHOTO
6. COMPONENTES UTILIZADOS
6.1. AKEEBA BACKUP
- INSTALACIN
- FUNCIONAMIENTO
6.2. FLIPPINGBOOK
- INSTALACIN
- FUNCIONAMIENTO
6.3. FWGALLERY
- INSTALACIN
- FUNCIONAMIENTO
6.4. K2
- INSTALACIN
- FUNCIONAMIENTO
6.5. XMAP
- INSTALACIN
- FUNCIONAMIENTO
Proyecto Final Sergio Prez
~ 3 ~
7. AADIR UN MENU VERTICAL ACORDEN JQUERY/CSS3
7.1. INSERTAR DOCUMENTOS
7.2. INSERTAR IMGENES CON SPRITES CSS
8. INSERTAR IFRAME SIN MDULO 9. AADIR SLIDESHOW CON CSS3/JQUERY SIN MDULO 10. DNDE ESTAMOS? INSERTAR MAPA GOOGLE MAPS 11. COMO SUBIR LA WEB A UN SERVIDOR 12. POSICIONAR PGINA WEB EN GOOGLE
- ROBOTS.TXT
- SITEMAP
- HERRAMIENTAS DE WEBMASTER
13. OTRAS OPCIONES DE JOOMLA
- AADIR UN CONTACTO
- CAMBIAR FAVICON
- PRIORIDAD EN JOOMLA (INDEX.PHP/INDEX.HTML)
- ERROR 404
- ADMINISTRACIN
- OCULTAR CARPETA ADMINISTRATOR
- OCULTAR IDENTIFICACIN JOOMLA
- OCULTAR INDEX.PHP EN LA RUTA WEB
Proyecto Final Sergio Prez
~ 4 ~
1. JOOMLA 2.5
1.1. INTRODUCCIN
Joomla es un Sistema de gestin de contenidos (en ingls Content Management System,
o CMS) que permite desarrollar sitios web dinmicos e interactivos. Permite crear, modificar o
eliminar contenido de un sitio web de manera sencilla a travs de un Panel de Administracin.
Es un software de cdigo abierto, desarrollado en PHP y liberado bajo licencia GPL. Este
administrador de contenidos puede utilizarse en una PC local (en Localhost), en una Intranet o
a travs de Internet y requiere para su funcionamiento una base de datos creada con un
gestor MySQL, as como de un servidor HTTP Apache.
Caractersticas como: generacin de cdigo HTML bien formado, gestin de blogs, vistas de
impresin de artculos, flash con noticias, foros, polls(encuestas), calendarios, bsquedas
integradas al sitio y soporte multi-idioma.
Su nombre es una pronunciacin fontica para anglfonos de la palabra swahili yumla, que
significa "todos juntos" o "como un todo". Se escogi como una reflexin del compromiso del
grupo de desarrolladores y la comunidad del proyecto.
2. XAMPP Y WAMP
2.1. INTRODUCCIN
WAMP
WAMP es el acrnimo usado para describir un sistema de infraestructura de internet que usa
las siguientes herramientas:
Windows, como sistema operativo;
Apache, como servidor web;
MySQL, como gestor de bases de datos;
PHP (generalmente), Perl, o Python, como lenguajes de programacin.
El uso de un WAMP permite servir pginas html a internet, adems de poder gestionar datos
en ellas, al mismo tiempo un WAMP, proporciona lenguajes de programacin para desarrollar
aplicaciones web.
LAMP es el sistema anlogo que corre bajo ambiente Linux
WAMP es el sistema anlogo que corre bajo ambiente Windows
MAMP es el sistema anlogo que corre bajo ambiente Macintosh
Proyecto Final Sergio Prez
~ 5 ~
XAMPP
XAMPP es un servidor independiente de plataforma, software libre, que consiste
principalmente en la base de datos MySQL, el servidor web Apache y los intrpretes para
lenguajes de script: PHP y Perl. El nombre proviene del acrnimo de X (para cualquiera de los
diferentes sistemas operativos), Apache, MySQL, PHP, Perl.
El programa est liberado bajo la licencia GNU y acta como un servidor web libre, fcil de usar
y capaz de interpretar pginas dinmicas. Actualmente XAMPP est disponible para Microsoft
Windows, GNU/Linux, Solaris y MacOS X.
2.2. INSTALACIN WAMP
Para poder instalar WAMP lo primero que debemos hacer es ir a la web
http://www.wampserver.com/ y bajarnos el paquete que se adapte a nuestro sistema
operativo, siendo de 32 o 64 bits.
En nuestro caso nos bajaremos el de 64 bits. Una vez descargado empezaremos la instalacin.
Proyecto Final Sergio Prez
~ 6 ~
Clicamos en Next.
Aceptamos los trminos y clicamos en next
Proyecto Final Sergio Prez
~ 7 ~
Seleccionamos la ubicacin de instalacin. Y next.
Creamos un icono en el escritorio. Seguimos con la instalacin.
Proyecto Final Sergio Prez
~ 8 ~
Y ahora ya le podamos dar a Install para que empiece a instalar todo.
Una vez instalado nos aparecer un men en la barra de notificaciones. Clicamos en l y le
damos a Start All Services. Y el icono cambiar de estar en rojo o naranja a verde.
Proyecto Final Sergio Prez
~ 9 ~
2.3. COMO INSTALAR JOOMLA 2.5
Ahora vamos a ver como instalar Joomla 2.5. Para empezar nos descargamos el CMS desde su
pgina oficial, http://www.joomla.org/download.html y buscamos la versin ms reciente, que
actualmente es la 2.5.11.
Mientras se est descargando vamos a preparar la base de datos. Para ello vamos a
http://localhost/phpmyadmin
Proyecto Final Sergio Prez
~ 10 ~
En la parte de abajo donde pone Agregar Usuario, le clicamos para crear un nuevo usuario con
su base de datos. Nos aparecer una ventana donde tendremos que indicar los siguientes
campos:
Nombre de usuario: aqu pondremos el nombre de usuario que queremos crear para obtener
los permisos a la base de datos
Servidor: en este caso es local, automticamente nos pondr localhost al marcar esta opcin.
Constrasea: la que queramos. Aconsejable poner el nombre de usuario para que no se nos
olvide. Si la subiramos a un servidor FTP ya la cambiaramos.
Marcar la opcin de Crear base de datos con el mismo nombre y otorgar todos los privilegios.
Marcar todos.
Proyecto Final Sergio Prez
~ 11 ~
Una vez hecho todo esto ya nos aparecer el usuario y su base de datos.
Ahora si tenemos descargado el CMS, lo descomprimimos en una carpeta. Y la llamamos como
que queramos que se llame nuestra pgina Web. La insertamos en la carpeta WWW, es decir,
Unidad:/wamp/www
NOTA: Si hubiramos instalado el XAMPP, seria en la carpeta HTDOCS.
Una vez insertada nos quedar as.
Proyecto Final Sergio Prez
~ 12 ~
Ahora nos dirigimos al navegador e introducimos el nombre que hayamos puesto a la carpeta
detrs de localhost, es decir, http://localhost/altea y empezar la instalacin de Joomla.
Primer de todo seleccionamos el idioma.
Aceptamos la licencia, e introducimos los de datos de la base de datos y su usuario,
recordamos los nombres que hemos creado anteriormente.
Proyecto Final Sergio Prez
~ 13 ~
No habilitamos la capa FTP, porque de momento no vamos a subirla a ningn servidor.
Introducimos el nombre del sitio, un correo electrnico, y el usuario y contrasea que vamos a
utilizar para entrar al Administrator. IMPORTANTE: no instalar datos de ejemplo.
Proyecto Final Sergio Prez
~ 14 ~
Ahora para finalizar vamos a eliminar la carpeta de instalacin para que cuando entremos no
nos vuelva a salir la instalacin.
Ahora ja podremos ver nuestro sitio instalado. Y entraremos a
http://localhost/altea/administrator introducir el usuario y contrasea que hemos puesto en la
instalacin. En el siguiente punto veremos como instalar la plantilla.
Proyecto Final Sergio Prez
~ 15 ~
3. PLANTILLA
3.1. INSTALACIN
Ahora vamos a instalar una plantilla que nos guste, en nuestro caso nos ha gustado la
estructura de la plantilla tmd_them_15, aqu una captura.
No nos tenemos que fijar mucho en los colores ya que luego los cambiaremos. Solo nos
importa la estructura.
Proyecto Final Sergio Prez
~ 16 ~
Para instalarla nos vamos a http://localhost/altea/administrator, en la pestaa Extensiones
Gestor de extensiones. Seleccionamos el archivo de la plantilla que ser un ZIP, y la subimos,
automticamente nos la instalar.
Una vez instalada, nos vamos a Extensiones Gestor de plantillas. Y la establecemos por
defecto. Y ya tendremos nuestra plantilla instalada y publicada.
Proyecto Final Sergio Prez
~ 17 ~
3.2. CAMBIOS REALIZADOS
La plantilla se ha cambiado bastante ms que nada para que se adapte a nuestro gusto, aqu
tenemos unas capturas.
ANTES
DESPUES
Como se puede apreciar no se parece en nada. Se explicara en los siguientes puntos cmo se
ha configurado todo detalladamente.
Proyecto Final Sergio Prez
~ 18 ~
3.3. DUPLICAR PLANTILLA
Vamos a duplicar la plantilla en varias, para que? Para cambiar el ttulo de la cabecera en cada
elemento de men.
Aqu por ejemplo vemos de ttulo El Pueblo de Altea
Pero ahora queremos ir a al elemento de men El Pueblo, veremos esto.
Para esta plantilla es necesario duplicar las plantillas para cada elemento de men.
NOTA: Si tuviramos la plantilla Beez5 que viene por defecto en Joomla no hara falta, con
duplicarla desde dentro sera suficiente.
Para duplicar nuestra plantilla hace falta duplicar tambin la base de datos. IMPORTANTE: SI
TOCAMOS SIN SABER NOS CARGAREMOS TODO EL CONTENIDO Y EL JOOMLA ENTERO.
Primero de todo nos vamos a http://localhost/phpmyadmin y buscamos nuestra base de
datos. Pulsamos en ella y nos aparecern todas las tablas que contiene la base de datos (los
datos de nuestro Joomla)
NOTA: Preferible no tener la plantilla puesta por defecto durante este proceso.
Proyecto Final Sergio Prez
~ 19 ~
Para duplicar la plantilla, tenemos que buscar la tabla, extensions, es decir, la encontraremos
con el prefijo que tengamos, el nuestro es w1hao_(esto puede variar) por lo que aparecer
w1hao_extensions.
Proyecto Final Sergio Prez
~ 20 ~
Ahora en el campo Type tendremos que buscar que ponga Template. Y a la vez buscamos
nuestra plantilla por defecto. Tmd_them_15.
Ahora le damos a copiar, y le llamamos igual que cuando copiemos la carpeta del template
(maysculas y espacios incluidos). Guardamos los cambios.
IMPORTANTE: SOLO CAMBIAR EL NOMBRE, NO TOCAR NADA MS.
Proyecto Final Sergio Prez
~ 21 ~
Ahora vamos a buscar en la base de datos la tabla, con nuestro prefijo,
w1hao_templates_styles. Buscamos nuestra plantilla, la copiamos.
Lo mismo de antes, solo cambiamos el nombre, nada ms.
Proyecto Final Sergio Prez
~ 22 ~
Por ultimo nos vamos a la ruta donde se instalan las plantillas fsicamente. La ruta es
Unidad://wamp/www/altea/templates/ y aqui ya veremos nuestra plantilla
Copiamos la plantilla y la llamamos como lo hemos hecho anteriormente.
Una vez hecho esto nos vamos al Gestor de plantillas i observamos que ya tenemos nuestra
plantilla duplicada.
Todo este proceso lo podemos hacer como tantos elementos de men tengamos y queramos
cambiar.
Proyecto Final Sergio Prez
~ 23 ~
Vamos a asignarle un men donde se va a mostrar esta plantilla duplicada. En Gestor de
Plantillas seleccionamos la plantilla recientemente copiada. Y marcamos donde queremos ver
esta plantilla.
Ahora si queremos cambiar imgenes, estilos CSS, PHP, etc. Lo haremos sobre la carpeta que
hemos duplicado. As obtendremos el resultado que hemos visto al principio.
Proyecto Final Sergio Prez
~ 24 ~
4. AADIR UN MENU HORIZONTAL CSS3/HTML5
Para aadir un men Horizontal CSS3/HTML5 nos tenemos que bajar el cdigo de la pgina
www.cssmenumaker.com y habr muchsimos diseos donde podremos elegir el que
queramos. Para esto habr que modificar el cdigo directamente y no lo podremos hacer
mediante mdulos.
Una vez elegido el men lo descargamos. Hemos elegido este:
Cuando lo bajemos tendremos un cdigo HTML y un cdigo CSS, primero abrimos el HTML,
aunque el CSS tambin va puesto en el HTML nosotros vamos a elegir la opcin de colocarlo en
un fichero aparte.
Primero copiamos el cdigo HTML en el INDEX.PHP del template donde queremos que se
muestre el men.
Luego copiamos el interior del STYLE.CSS y lo introducimos en el archivo css que utiliza nuestra
plantilla por defecto. Con esto ya lo tendremos funcionando.
Proyecto Final Sergio Prez
~ 25 ~
4.1. CAMBIAR COLORES
Si queremos cambiar los colores y adaptarlos a nuestro template es muy fcil solo tendremos
que sustituir los actuales por los que queramos, para eso con un poco de ayuda del navegador,
photoshop y el cdigo css podremos cambiarlos.
4.2. POSICIN
En el men viene por defecto la posicin relativa, por lo que el men se quedara donde esta.
Lo que queremos hacer es que se quede fija, es decir, que el men este visible en todo
momento en la parte superior, para esto tendremos que tener mucho cuidado porque si
directamente ponemos la posicin fixed nos deformara un poco todo el men, por eso hay que
ir probando y jugando.
Primero vamos a cambiar la posicin a fixed y aadimos un z-index para que sea la primera
capa.
Proyecto Final Sergio Prez
~ 26 ~
Como podemos ver ya lo tenemos fijo, con Joomla puede que tengamos problemas ya que
existen muchas capas dentro del contenido, por lo que habr que ir probando con los Z-index.
NOTA: Para aadir los nombres de los menus, habr que colocarlos directamente en el HTML,
es decir, introducir nosotros la ruta.
4.3. AADIR LOGO EN EL MENU
Como muchas webs queremos aadir el men en un lado del men que cuando le pulsemos
nos lleve a la pgina de inicio. Para esto primero habr que buscar nuestro logo y colocarlo en
la carpeta Images de nuestra plantilla.
Una vez tengamos esto creamos un nuevo campo para el men y aadimos la ruta de la
imagen y el enlace donde queramos que nos lleve cuando pulsemos la imagen.
Le ponemos a la imagen la altura del men, que la podremos saber inspeccionando el
elemento en Google Chrome o Firefox.
En este caso la altura es 49px.
Proyecto Final Sergio Prez
~ 27 ~
Para que cuando pasemos el raton por encima no nos haga ningn efecto como el resto. El
hover.
Como le hemos puesto una clase al logo podremos editarlo introduciendo la siguiente lnea.
Con esto nos quitar el efecto del hover y quedar mucho mejor.
4.4. AADIR ICONOS REDES SOCIALES
Para aadir los iconos haremos lo mismo que con el logo pero aadiendo los iconos de forma
que se queden en la parte superior y al lado del men. Primero buscamos unos iconos que nos
gusten. Y aadimos otra lista y los aadimos dentro. Quedar de esta forma.
Una vez lo tengamos guardamos y aplicamos. Y asi ser la vista previa.
Proyecto Final Sergio Prez
~ 28 ~
5. INSTALACIN DE MODULOS
5.1. SUNSET TWITTER SIDEBAR
Vamos a instalar un mdulo que nos va a permitir tener una caja con los ltimos twits
realizados.
Nos descargamos de aqu este mdulo
http://www.susnet.co.uk/extensions.raw?task=callelement&item_id=6&element=1818592e-
83b7-4777-92a3-ea7164338f21&method=download
Una vez bajado lo instalamos desde el Gestor de extensiones de Joomla.
Una vez instalado nos vamos al Gestor de mdulos y buscamos que se haya instalado
correctamente.
Proyecto Final Sergio Prez
~ 29 ~
En las opciones siguientes podremos modificar, el Twitter ID que queremos que nos aparezca,
en Sidebar Position en qu lado queremos que aparezca, en Top Position elegiremos el espacio
en pixeles que se dejar entre el top y el modulo. Lo dejaremos como est en la imagen.
NOTA: Es indiferente de la posicin de Joomla, da igual en cual la pongamos siempre y cuando
este visible, automticamente se pondr donde le indiquemos en las caractersticas del
modulo.
Tambin si queremos podemos modificar colores y estilos.
Proyecto Final Sergio Prez
~ 30 ~
Una vez lo tengamos a nuestro gusto lo publicamos para que se muestre en todas las pginas
que nosotros queramos.
Ahora ya lo tendremos publicado y quedar de la forma siguiente.
Proyecto Final Sergio Prez
~ 31 ~
5.2. SUNSET FACEBOOK LIKE BOX
Vamos a instalar un mdulo que nos va a permitir tener una caja con lo ltimo publicado en
Facebook.
Nos descargamos de aqu este mdulo
http://www.susnet.co.uk/extensions.raw?task=callelement&item_id=4&element=1818592e-
83b7-4777-92a3-ea7164338f21&method=download
Una vez bajado lo instalamos desde el Gestor de extensiones de Joomla.
Una vez instalado nos vamos al Gestor de mdulos y buscamos que se haya instalado
correctamente.
Proyecto Final Sergio Prez
~ 32 ~
En las opciones siguientes podremos modificar, la pgina de Facebook que queremos mostrar,
el idioma, color, etc.
Tambin podemos modificar la posicin como en el mdulo anterior de twitter, en qu lado
queremos que se muestre y el margen que daremos entre el Top y el mdulo.
NOTA: Es indiferente de la posicin de Joomla, da igual en cual la pongamos siempre y cuando
este visible, automticamente se pondr donde le indiquemos en las caractersticas del
mdulo.
Proyecto Final Sergio Prez
~ 33 ~
Una vez lo tengamos a nuestro gusto lo publicamos para que se muestre en todas las pginas
que nosotros queramos.
Ahora ya lo tendremos publicado y quedar de la forma siguiente.
Proyecto Final Sergio Prez
~ 34 ~
5.3. EL TIEMPO
Este es un mdulo muy sencillo, porque no hay que descargar nada, utilizaremos un mdulo
en el podamos personalizar el HTML y listo.
Pero para obtener el cdigo HTML tenemos que ir a la pgina www.tiempo.com buscamos
nuestra ciudad. Y pinchamos en El tiempo gratis en tu Web.
Lo personalizamos a nuestro gusto y generamos el cdigo.
Proyecto Final Sergio Prez
~ 35 ~
Ahora creamos un mdulo nuevo en Joomla que se pueda personalizar el HTML y copiamos el
cdigo que hemos generado.
Una vez hecho esto, lo colocamos en la posicin que queramos.
Proyecto Final Sergio Prez
~ 36 ~
Y seleccionamos las pginas donde queremos que se muestre.
Y con esto ya tendremos nuestro mdulo publicado.
Proyecto Final Sergio Prez
~ 37 ~
5.4. VISITALTEA
El mdulo que vamos a insertar ahora ser simplemente una imagen con un enlace a una pgina interna. Para esto nos har falta una imagen y un mdulo donde se pueda personalizar el HTML. Primero empezamos creando este mdulo y subimos la imagen tal cual.
Examinamos y buscamos la imagen que queremos. Si no la tenemos previamente subida, la podemos subir. E insertamos.
Proyecto Final Sergio Prez
~ 38 ~
Ahora le aadimos el enlace.
Proyecto Final Sergio Prez
~ 39 ~
Una vez tengamos esto, posicionamos donde queramos que se muestre el mdulo y
seleccionamos las pginas donde queremos que se muestre.
Proyecto Final Sergio Prez
~ 40 ~
Guardamos los cambios y ya tendremos nuestro mdulo aplicado.
Proyecto Final Sergio Prez
~ 41 ~
5.5. RADIOALTEA
Este mdulo es igual que el anterior pero con un enlace externo a nuestra pgina.
5.6. INSERTAR UN VIDEO DE YOUTUBE
Para insertar un video de YouTube como mdulo es igual de sencillo que todos los dems,
necesitaremos un video que queramos poner y un mdulo donde tambin podamos
personalizar el HTML.
Primero buscamos el video y buscamos el enlace que nos permite publicarlo en nuestra web.
Este ser nuestro video,
http://www.youtube.com/watch?feature=player_embedded&v=7a9zefdOMqs
Proyecto Final Sergio Prez
~ 42 ~
En YouTube tambin nos da una opcin de generar el cdigo para nuestra Web por eso
clicamos sobre l. Y este ser el cdigo que tendremos que insertar en el mdulo.
Creamos un modulo donde podamos personalizar el HTML y pegamos el link.
Proyecto Final Sergio Prez
~ 43 ~
Posicionamos el mdulo y seleccionamos las pginas donde queremos que se muestre.
NOTA: Antes de copiar todos los cdigos en HTML, tenemos que tener habilitados en el Plugin
del editor que permita los cdigos HTML iframe y script.
Proyecto Final Sergio Prez
~ 44 ~
5.7. FOTOGALERA PRETTY PHOTO
Esta fotogalera es ms visible que la FWGallery por eso vamos a instarla y sustituirla. Primero
nos bajamos el pluggin y lo instalamos desde el gestor de extensiones, una vez instalado lo
activamos.
Y en el plugin hay un pequeo tutorial de como introducir fotos y videos. Solamente con
introducir un cdigo HTML nos mostrara la imagen siempre y cuando el pluggin este activado.
Nos vamos a insertar un mdulo e insertaremos el cdigo cambiando los enlaces para que nos
muestren nuestras imgenes.
El modulo que vamos a insertar es de Personalizar HTML y vamos insertando las imgenes con
el cdigo que hemos cogido del tutorial del pluggin. Insertamos las imgenes que queramos.
Posicionamos en la posicin que nos convenga y le decimos que nos muestre la galera solo en
el men fotogalera.
Proyecto Final Sergio Prez
~ 45 ~
Y as es cmo quedar.
Proyecto Final Sergio Prez
~ 46 ~
6. COMPONENTES UTILIZADOS
6.1. AKEEBA BACKUP
- INSTALACIN
El Akeeba Backup nos permitir hacer copias de seguridad de la pgina web de Joomla y restaurarlas fcilmente. Para su instalacin primero nos bajamos la ltima versin en su pgina oficial. https://www.akeebabackup.com/download/akeeba-backup.html A dia de hoy esta es la versin estable
Una vez bajado el zip lo instalamos mediante el Gestor de extensiones, y una vez instalado ya podremos empezar a hacer copias de seguridad. - FUNCIONAMIENTO
Nos vamos a la pestaa Complementos y veremos ya instalado el componente. Clicamos sobre
l.
Proyecto Final Sergio Prez
~ 47 ~
Para configurarlo nos vamos a Configuration. Ah podremos cambiar varios aspectos, pero el
que ms nos interesa es el de la ubicacin de las copias y el tipo de formato en el que vamos a
descargarlas. En el tipo de formato pondremos ZIP en vez de JPA.
Proyecto Final Sergio Prez
~ 48 ~
Cuando ya lo tengamos correctamente configurado podemos empezar una nueva copia. Por
defecto nos pondr la fecha y hora de la copia de seguridad, pero podemos cambiarla.
Clicamos en Backup Now y empezar a hacernos la copia de seguridad. Puede tardar unos
minutos en acabar.
Proyecto Final Sergio Prez
~ 49 ~
Cuando haya terminado podremos ir a Manage Backups para ver todas las copias de seguridad
creadas y descargarlas.
Cuando nos descargemos una copia y queramos restaurarla solamente habr que
descomprimir el ZIP en una carpeta, e instalarla como si fuera un nuevo Joomla.
6.2. FLIPPINGBOOK - INSTALACIN FlippingBook es un complemento que nos permitir ver revistas, catalogos o libros online, el componente es de pago, por lo que la versin demo est un poco reducida. Nos podemos descargar el demo desde su pgina oficial. http://www.page-flip-tools.com/ Tambien podremos descargar el Pack de Idiomas e instalar el Espaol.
Proyecto Final Sergio Prez
~ 50 ~
Una vez descargado todo lo instalamos desde el Gestor de Extensiones de Joomla. Y ya lo tendremos en espaol.
- FUNCIONAMIENTO El funcionamiento de este componente es muy fcil porque no tiene muchas opciones. Aqu podemos cambiar cosas generales, como fondos, sonidos al pasar pgina, tema, etc.
Proyecto Final Sergio Prez
~ 51 ~
Primero de todo tenemos que saber que no podemos subir un libro tal cual en formato PDF, tenemos que separarlo en pginas y guardar las pginas como imgenes y luego ya las vamos subiendo. Empezamos por la pestaa categoras, ah crearemos una categora nueva. No tiene misterio.
Luego creamos un libro que es donde estarn las pginas. Y seleccionamos la categora donde la vamos a poner.
Proyecto Final Sergio Prez
~ 52 ~
Aqu hay muchas ms opciones que podemos ir modificando. Imagen previa, descripcin, iconos, fondo, si se puede descargar el libro, etc.
Proyecto Final Sergio Prez
~ 53 ~
Ahora vamos a subir las pginas que como hemos dicho anteriormente tenemos que prepararlas como imgenes. Una vez las tengamos las colocamos dentro de nuestra carpeta de Joomla, donde sea, automticamente el componente nos la localizara enseguida con todas sus pginas.
Seleccionamos el libro donde van a pertenecer las pginas.
Proyecto Final Sergio Prez
~ 54 ~
Y guardamos los cambios. As con todas las pginas porque en nuestro caso son muy pocas. Pero si quisiramos subir un libro de 100 pginas seria muy pesado, por eso existe una forma de subirlas de un tirn, y es en la pestaa Aadir pginas al lote. Aqu podemos seleccionar la carpeta y al libro que va a pertenecer, automticamente nos separar las imgenes en pginas diferentes.
Ahora vamos a publicarlo, para esto tendremos que crear un elemento de men nuevo donde tendremos publicado el libro. El tipo de elemento de men ser un Libro Simple y seleccionaremos nuestro libro. Y Guardamos.
Proyecto Final Sergio Prez
~ 55 ~
Proyecto Final Sergio Prez
~ 56 ~
6.3. FWGALLERY
- INSTALACIN
Este componente nos va a permitir tener una foto galera en nuestra pgina web totalmente
gratuita, para descargarla solamente har falta registrarse y ya nos dejar bajarnos el ZIP. Lo
podemos hacer directamente desde aqu https://fastw3b.net/joomla-extensions/product/7-
fw-gallery.html
Una vez que hayamos bajado el componente lo instalamos desde el Gestor de extensiones
como siempre y una vez este ya lo tendremos instalado.
- FUNCIONAMIENTO
Es muy fcil de utilizar, primero de todo crearemos una galera que es quien contendr todas
las imgenes. Para ello vamos a la pestaa Galeras y creamos una nueva. Le ponemos el
nombre que queremos. Guardamos y cerramos.
Proyecto Final Sergio Prez
~ 57 ~
Ahora lo que vamos a hacer es subir las imgenes, aqu s que las tendremos que subir una por
una. Vamos a la pestaa Imgenes y le damos a nuevo. Ponemos el nombre de la imagen, la
galera a la que pertenece y cargamos la foto.
Proyecto Final Sergio Prez
~ 58 ~
Guardamos los cambios y cerramos, y asi con todas las imgenes. En la pestaa Configuracin podemos realizar muchos cambios para que a la hora de mostrarnos la galera nos muestre unas opciones, como descargar, previsualizar, imprimir, enviar por correo electrnico, etc. Lo podemos personalizar a nuestro gusto clicando en el botn editar.
Una vez ya hayamos subido todas las fotos vamos a publicar la galera. Tendremos que crear un nuevo elemento de men, en el tipo de men elegiremos la opcin de la Fotogaleria FWgallery Single Gallery Layout, y seleccionamos la galera donde estbamos subiendo las fotos.
Proyecto Final Sergio Prez
~ 59 ~
Cuando tengamos esto guardamos y cerramos, ya podremos ver nuestra galera publicada.
Proyecto Final Sergio Prez
~ 60 ~
6.4. K2 - INSTALACIN El K2 es uno de los componentes ms completos de Joomla, ya que permite crear un blog dentro del propio Joomla, por lo que resulta muy prctico. Primero lo que debemos hacer es descargarnos el componente desde su pgina oficial, tambin podremos bajarnos el idioma espaol. Se puede bajar todo de su pgina oficial http://getk2.org/
Una vez lo tengamos todo descargado empezamos la descarga como siempre desde el Gestor de extensiones. Una vez este el idioma y el componente instalado podremos ver un men donde se podrn hacer muchsimas cosas con K2.
Proyecto Final Sergio Prez
~ 61 ~
- FUNCIONAMIENTO
Vamos a crear un blog y publicarlo en la primera pgina as nos quedar una pgina web
moderna.
Primero lo que tenemos que hacer es crear una categora donde irn todos los artculos.
Luego podemos modificar todas las opciones de visualizacin. Tamao de imagen principal,
imagen de la categora, iconos, redes sociales, etc.
Una vez tengamos todo modificado y guardado procedemos a crear algunos artculos en la
pestaa de tems. Introducimos el ttulo y a la categora a la que pertenece.
Proyecto Final Sergio Prez
~ 62 ~
Luego le ponemos un contenido. Como veis hemos puesto un botn de leer ms, por lo que en
la pantalla principal no aparecer todo el contenido, si queremos ver todo el contenido nos
llevara a la pgina del artculo.
En la pestaa Imagen vamos a insertar una imagen, examinamos y la subimos.
Proyecto Final Sergio Prez
~ 63 ~
Tambin podemos modificar aspectos de visualizacin, pero mejor modificarlos en la
categora, ya que si nos aqu lo tendremos que hacer uno por uno y en la categora afecta a
todos los artculos.
Una vez hayamos puesto algunos artculos vamos a publicarlo para que se vea en la pantalla de
inicio. En el elemento de men Inicio o Home modificamos el tipo de elemento de men y
ponemos K2 Categoria.
Proyecto Final Sergio Prez
~ 64 ~
Y seleccionamos la categora que contiene todos los artculos.
Guardamos y cerramos, ya podremos ver nuestro blog publicado en la pantalla de inicio.
Proyecto Final Sergio Prez
~ 65 ~
6.5. XMAP
- INSTALACIN
El XMAP es un complemento de Joomla que nos permite crear un mapa del sitio. Es muy fcil
manejarlo. Lo descargamos desde su pgina web oficial
http://joomla.vargas.co.cr/en/downloads/components/xmap
Cuando lo tengamos descargado vamos al Gestor de extensiones y lo instalamos.
- FUNCIONAMIENTO
Para aadir un mapa nuevo clicamos en Nuevo y lo creamos. Ponemos el ttulo y marcar los
menus que queremos hacer para que nos los muestre.
Proyecto Final Sergio Prez
~ 66 ~
Si queremos aadirlo en el pie de pgina simplemente creamos un men nuevo que se llame
PIE y dentro aadimos un elemento de men que se llame SITEMAP. El tipo de elemento de
men tiene que ser XMAP Mapa del sitio HTML.
Y elegimos el mapa que hemos creado anteriormente.
Proyecto Final Sergio Prez
~ 67 ~
Guardamos los cambios y cerramos, ahora queremos aadirlo en el pie de pgina, lo podemos
aadir mediante la ruta del enlace al sitemap, si al elemento de men lo hemos llamado
sitemap automticamente la ruta del enlace ser http://localhost/altea/index.php/sitemap.
Esa ruta es la que acceder a nuestro Mapa del sitio. Por lo que editamos el INDEX.PHP del
template y aadimos el pie de pgina.
Vamos a la pgina y vemos como queda.
Clicamos sobre l y nos aparecer ya el mapa del sitio.
Proyecto Final Sergio Prez
~ 68 ~
7. AADIR UN MENU VERTICAL ACORDEN JQUERY/CSS3
Lo que vamos a hacer es insertar un men vertical acorden, esto quiere decir que se
desplegara como si fuese un acordeon, nos interesa este men para introducir en el los
documentos y poder descargarlos, pondremos unos pequeos iconos que estar formado por
el nuevo mapeado que utiliza css3 llamado Sprite.
Para instalarlo primero nos tenemos que bajar lo que es la estructura desde la pgina web
http://webdesign.tutsplus.com/tutorials/site-elements/orman-clarks-vertical-navigation-
menu-the-css3-version/
Una vez lo tengamos podemos ver como es.
Y el contenido de la carpeta
Proyecto Final Sergio Prez
~ 69 ~
Una vez copiemos todo el contenido dentro de nuestra plantilla tiene que quedar igual que
estaba ah porque si nos no funcionara, la nica diferencia es que el contenido del index.html
lo tenemos que copiar todo dentro del index.php.
7.1. INSERTAR DOCUMENTOS
Para insertar los documentos es tan fcil como introducir un enlace directo al documento. Los
enlaces los podemos encontrar en la pgina del ayuntamiento de Altea.
A la vez tendremos que ir aadiendo ms listas para que se muestren las subcategoras.
7.2 INSERTAR IMGENES CON SPRITES CSS
Imgenes con Sprites es una nueva manera de mapear imgenes, pero esta vez con CSS,
primero de todo tenemos que seleccionar pequeas imgenes que queramos insertar en el
mapeo.
Luego vamos a la pgina www.csssprites.com y subimos las imgenes que tengamos.
Proyecto Final Sergio Prez
~ 70 ~
Una vez tengamos todas las imgenes generamos el Sprite y nos descargamos el PNG. Cuando
descarguemos la imagen estarn todos los iconos en una sola imagen.
Ahora introduciremos el siguiente cdigo en el estilo CSS. Aqu estamos diciendo que se ponga
una imagen de fondo, que en nuestro caso se llama Sprite, la imagen que nos hemos
descargado anteriormente.
Proyecto Final Sergio Prez
~ 71 ~
Ahora tenemos que aadir las posiciones que nos da la web. Y las colocamos as con todas las
imgenes que tengamos.
Y tendremos ya un mapeado de imagen perfecto hecho con Sprite CSS.
Proyecto Final Sergio Prez
~ 72 ~
8. INSERTAR IFRAME SIN MDULO
Un iframe es una web dentro de otra web, por lo que nosotros vamos a realizar un iframe
modificando la plantilla de Visitaltea, aadiendo el cdigo directamente en el index.php.
Primero lo que debemos hacer es borrar el pie de pgina (Toda la divisin que contenga la
clase Footer) y eliminar la imagen que tenemos en la cabecera (Solamente con borrar la
imagen de la carpeta ya se elimina). Colocaremos el iframe de manera que ocupe toda la
pgina con el siguiente cdigo.
Este cdigo tiene que estar dentro de la etiqueta .
Src= es la pgina que nos va a mostrar.
Scrolling= es si queremos que la pgina se desplace hacia abajo.
Width= aqu pondremos que ocupe 100% para que la pgina sea completa.
Height= la altura que queremos que tenga la pgina.
Y este ser el resultado. Como podemos ver no salimos de nuestra pgina porque tenemos el
men en la parte superior siempre fijo.
Proyecto Final Sergio Prez
~ 73 ~
9. AADIR SLIDESHOW CON CSS3/JQUERY SIN MDULO
Vamos a aadir un slideshow sin insertar ningn mdulo, es decir, editando el PHP y
aadiendo el cdigo de un slideshow que nos hemos bajado. Primero comprobamos que hay
dentro de la carpeta.
Todo el contenido del Index.html o tenemos que pasar dentro del Index.php de la plantilla que
vayamos a visualizar el slideshow. En nuestro caso la plantilla Galeria. El contenido del
index.html la parte que es copiamos todo lo de dentro al archivo css de nuestra
plantilla, template.css. Y el resto lo dejamos como est.
Importante que la carpeta que contiene el javascript este en la raz de la plantilla.
Proyecto Final Sergio Prez
~ 74 ~
La carpeta imgenes no hace falta copiarla, podemos aadir las images dentro de la carpeta
que viene por defecto en la plantilla. Si lo hemos hecho bien podremos ver el resultado.
10. DNDE ESTAMOS? INSERTAR MAPA GOOGLE MAPS
Para insertar un mapa es muy fcil, solamente con ir a la pgina oficial de google maps y
obtener el cdigo es suficiente. Primero de todos vamos a la pgina http://maps.google.com y
buscamos nuestro sitio de trabajo o nuestra ciudad, en este caso pondremos la ciudad.
Proyecto Final Sergio Prez
~ 75 ~
Ahora le damos al botn compartir para obtener el cdigo. El que pone Sitio Web.
Ahora creamos una categora donde ir el artculo que insertaremos el cdigo. Creamos el
artculo. Y pegamos el cdigo que hemos copiado de google maps editando el HTML del
artculo. Guardamos y cerramos.
Proyecto Final Sergio Prez
~ 76 ~
Ahora si tenemos ya hecho un men que apunte a una Categoria de blog donde esta el artculo
ya podremos visualizar el mapa.
Proyecto Final Sergio Prez
~ 77 ~
11. COMO SUBIR LA WEB A UN SERVIDOR
Para subir la pgina web vamos a utilizar Hostinger, que es un host espaol y funciona
bastante bien siendo gratuito.
Primero crearemos una cuenta gratuita con el subdominio www.elpueblodealtea.hol.es
Una vez creada y podamos acceder al panel de control, podremos subir la pgina mediante un
ZIP sin descomprimir y automticamente el hosting lo descomprimir o podemos subir archivo
por archivo con el Filezzilla Client aunque asi tardar un poco ms, vamos a elegir la primera
opcin.
Proyecto Final Sergio Prez
~ 78 ~
Hacemos una copia de seguridad con Akeeba Backup y nos la descargamos. Importamos el
sitio en Hostinger y nos tardar unos minutos.
Creamos una base de datos en el hosting.
Proyecto Final Sergio Prez
~ 79 ~
Cuando estemos restaurando introducimos la base de datos, la contrasea y el nombre del
host.
Ahora activaremos la capa FTP para que podamos subir archivos directamente desde Joomla. Y
la contrasea para el administrator.
Proyecto Final Sergio Prez
~ 80 ~
Eliminamos la carpeta de instalacin para que no haya ningn tipo de problemas
Ya tendremos nuestra pgina subida y funcionando
Proyecto Final Sergio Prez
~ 81 ~
12. POSICIONAR PGINA WEB EN GOOGLE
- ROBOTS.TXT
Para un buen posicionamiento en Google y en todos los buscadores necesitamos un archivo
que se llama robots.txt esto permitir a la araa de Google (GoogleBot) encontrar nuestra
pgina Web. Este archivo lo copiaremos en la raz. Para que esto funcione perfectamente en
Joomla introduciremos lo siguiente:
- SITEMAP
Para un buen posicionamiento tambin nos hace falta un sitemap.xml que lo que hace es
estructurar nuestra pgina Web. Se puede obtener mediante el complemento que instalamos
llamado XMAP, pero ahora que ya la tenemos subida es mas fcilmente visitar esta pgina web
http://www.xml-sitemaps.com/ donde introduciremos la URL de nuestra Pgina Web y nos
descargaremos el sitemap.xml.
Una vez descargado tambin lo tenemos que introducir en la raz.
Proyecto Final Sergio Prez
~ 82 ~
- HERRAMIENTAS DE WEBMASTER
Las herramientas de webmaster de Google nos van a ayudar a posicionar correctamente
nuestra pgina Web. Podemos acceder mediante esta pgina
www.google.es/webmasters/tools/?hl=ES una vez all aadiremos un nuevo sitio.
Ahora nos pedir que verifiquemos que es nuestra la cuenta. Para ello nos descargaremos el
archivo que nos adjuntan, lo metemos en la raz y clicamos en verificar.
Si todo esta correcto nos aparecer un mensaje indicndonos que esta todo perfectamente.
Proyecto Final Sergio Prez
~ 83 ~
Ahora vamos a ver si detecta nuestros robots.txt, le clicamos en el enlace de nuestra pgina.
Ahora nos dirigimos a Salud URL Bloqueadas, e introduciremos en el cajn la ruta de los
robots.txt es decir aqu.
Una vez hecho esto clicamos en Probar.
Proyecto Final Sergio Prez
~ 84 ~
Si est todo bien nos saldr el siguiente mensaje. Que quiere decir que la araa nos ha
encontrado.
Ahora vamos a introducir un sitemap, para esto nos vamos a optimizacin sitemaps.
Y arriba a la derecha Clicamos en Aadir o Probar Sitemap. Y aadimos la direccin de nuestro
sitemap.
Proyecto Final Sergio Prez
~ 85 ~
Y si esta todo correcto nos aparecern unas estadsticas.
Y hasta que Google no actualice su indexacin no apareceremos oficialmente en el buscador,
para ello tendremos que esperar 24/48h. Hay veces que incluso google tarda hasta 6 meses en
indexar una pgina web.
Proyecto Final Sergio Prez
~ 86 ~
13. OTRAS OPCIONES DE JOOMLA
- AADIR UN CONTACTO
Para crear un contacto es muy sencillo, nos vamos a Componentes Contactos. Una vez all
creamos una nueva categora.
Guardamos y cerramos, ahora nos vamos a la pestaa contactos y creamos uno nuevo.
Podemos vincular nuestro usuario con el ya creado para superuser y guardamos y cerramos.
Proyecto Final Sergio Prez
~ 87 ~
Ahora creamos un elemento de men nuevo de tipo contacto nico. Seleccionamos el
contacto recientemente creado y ya est. Guardamos y cerramos.
Ya tenemos nuestro formulario de contacto.
Proyecto Final Sergio Prez
~ 88 ~
- Cambiar Favicon
El favicon es el icono pequeo que aparece en los navegadores, es muy fcil de cambiar
simplemente tenemos que hacer una imagen de 16x16 y cambiarle la extensin a favicon.ico
una vez cambiado lo copiamos en la raz de nuestro Joomla y tambin en la raz de la carpeta
adminsitrator.
Ya tenemos el favicon cambiado fcilmente.
Proyecto Final Sergio Prez
~ 89 ~
- PRIORIDAD EN JOOMLA (INDEX.PHP/INDEX.HTML)
Cuando accedemos a nuestra pgina de Joomla lo que hace el CMS es coger por defecto
siempre todos los archivos index.php, pero si por algn motivo queremos dejar fuera de
servicio nuestra pgina temporalmente (porque esta de mantenimiento) y queremos hacer un
index.html personalizado indicando este estado, aunque lo subamos al servidor Joomla no nos
har caso y seguir mostrando el index.php. Para ello tendremos que hacer una pequea
modificacin para que esto tenga resultado.
Lo primero que debemos hacer es localizar en el directorio raz de nuestra pgina el archivo
htacces.txt. Una vez lo tengamos localizado, lo editamos con el Notepad++ (por ejemplo) y
localizamos la lnea RewriteEngine On
Ahora lo que debemos hacer es introducir justo debajo de esta lnea esta otra DirectoryIndex
index.html index.php default.htm, lo que nos quiere decir esta lnea es que primero leera el
index.html que el index.php, asi podremos colocar nuestro index.html personalizado para
cuando queramos dejar fuera de servicio temporalmente nuestra pgina Web.
Proyecto Final Sergio Prez
~ 90 ~
Una vez hecho esto seguir sin funcionarnos, pero solamente nos faltara una pequea cosa. Y
es que tendremos que cambiar el nombre del fichero htacces.txt por el de .htacces
Ahora solamente nos quedara subir nuestro index.html al servidor y ya tendremos nuestra
pgina fuera de servicio temporalmente.
Proyecto Final Sergio Prez
~ 91 ~
- ERROR 404
Para personalizar a nuestro gusto la pgina de error es muy sencillo podemos descargar alguna
pgina ya personalizada en internet o hacerla nosotros, en nuestro caso la hemos hecho
nosotros. Primero nos vamos a la carpeta Templates System y ah encontraremos un archivo
que se llama error.php, ah es donde tenemos que cambiar todo lo que queramos. Y tambin
en la carpeta CSS encontraremos la hoja de estilo llamado error.css.
Podemos copiar el index.php y el template.css de nuestra plantilla y sustituir los nombres, y
luego solo ser borrar el contenido de dentro y aadir una imagen.
La imagen la hemos hecho nosotros con photoshop. Y este es el resultado.
Proyecto Final Sergio Prez
~ 92 ~
- ADMINISTRACIN
Hemos cambiado la administracin para que no se note que la pgina se ha hecho con Joomla,
para cambiar el diseo completo tendremos que ir a la carpeta Administrator Templates y
ah estarn todos los templates que tenemos instalado por defecto en la pgina, podemos
cambiar el estilo de la plantilla que tengamos por defecto, en nuestro caso es el bluestork.
Como es algo que se disea al gusto solo vamos a ensear los cambios
Para cambiar el formato del interior de la Administracin hay que modificar los siguientes php.
Todos los cambios se tienen que realizar en todos los ficheros.
- Index.php
- Component.php
- Cpanel.php
- Error.php (esta es para la pgina de error)
Antes:
Despus:
Proyecto Final Sergio Prez
~ 93 ~
Para cambiar el formato del Login habr que modificar el siguiente php.
- Login.php
Antes:
Despus:
Proyecto Final Sergio Prez
~ 94 ~
- OCULTAR CARPETA ADMINISTRATOR
Para una mayor seguridad vamos a ocultar el administrator para que nadie pueda entrar
aunque sepa que la pgina sepa que es Joomla, para ello vamos a instalar un plugin que se
llama Admin Exile, que nos encriptara la carpeta de una forma segura y a la vez para entrar a
ella tendremos que aadir un texto al final de la ruta.
Primero lo instalamos el plugin como siempre desde Gestor de Extensiones. Una vez instalado
nos vamos a plugins y lo buscamos.
En URL Access Key podemos insertar una clave que nos genere alguna pgina de internet, y en
Redirect URL nos redirecciona a la pgina principal en caso de que no introduzcamos bien la
ruta o salgamos del administrador. Entre la la palabra administrator y la clave tenemos que
introducir un signo ?.
Proyecto Final Sergio Prez
~ 95 ~
Si entramos al administrador es que funciona perfectamente.
- OCULTAR IDENTIFICACIN JOOMLA
Para que los hackers no sepan que es una pgina Joomla y as evitar que nos la roben sin
nuestro permiso vamos a ocultar la identificacin de Joomla que podemos verla explorando el
cdigo fuente.
Proyecto Final Sergio Prez
~ 96 ~
Para ocultarlo bastara con editar el index.php de nuestra plantilla e insertar el siguiente
cdigo. Si tenemos varias plantillas en la misma pgina pues entonces habr que aadirlo en
todas.
Y as es como nos aparecer ahora.
Proyecto Final Sergio Prez
~ 97 ~
- OCULTAR INDEX.PHP EN LA RUTA WEB
Me refiero a esta ruta,
Si no ocultamos esta ruta podemos tener problemas a la hora de posicionar nuestra pgina
Web en los buscadores. Por eso solamente tendremos que aadir unas lneas en el archivo
.htaccess.
Ahora nuestras rutas sern ms cortas y sern mucho mejor para los buscadores,