Tutorial Proyecto.pdf

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


~ 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


~ 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


~ 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.


~ 6 ~

Clicamos en Next.

Aceptamos los trminos y clicamos en next


~ 7 ~

Seleccionamos la ubicacin de instalacin. Y next.

Creamos un icono en el escritorio. Seguimos con la instalacin.


~ 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.


~ 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


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 36 ~

Y seleccionamos las pginas donde queremos que se muestre.

Y con esto ya tendremos nuestro mdulo publicado.


~ 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.


~ 38 ~

Ahora le aadimos el enlace.


~ 39 ~

Una vez tengamos esto, posicionamos donde queramos que se muestre el mdulo y

seleccionamos las pginas donde queremos que se muestre.


~ 40 ~

Guardamos los cambios y ya tendremos nuestro mdulo aplicado.


~ 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


~ 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.


~ 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.


~ 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.


~ 45 ~

Y as es cmo quedar.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 52 ~

Aqu hay muchas ms opciones que podemos ir modificando. Imagen previa, descripcin, iconos, fondo, si se puede descargar el libro, etc.


~ 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.


~ 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.


~ 55 ~


~ 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.


~ 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.


~ 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.


~ 59 ~

Cuando tengamos esto guardamos y cerramos, ya podremos ver nuestra galera publicada.


~ 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.


~ 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.


~ 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.


~ 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.


~ 64 ~

Y seleccionamos la categora que contiene todos los artculos.

Guardamos y cerramos, ya podremos ver nuestro blog publicado en la pantalla de inicio.


~ 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.


~ 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.


~ 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.


~ 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


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 76 ~

Ahora si tenemos ya hecho un men que apunte a una Categoria de blog donde esta el artculo

ya podremos visualizar el mapa.


~ 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.


~ 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.


~ 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.


~ 80 ~

Eliminamos la carpeta de instalacin para que no haya ningn tipo de problemas

Ya tendremos nuestra pgina subida y funcionando


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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.


~ 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:


~ 93 ~

Para cambiar el formato del Login habr que modificar el siguiente php.

- Login.php

Antes:

Despus:


~ 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 ?.


~ 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.


~ 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.


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

Documents

Tutorial Proyecto.pdf