CreaciA3n de Pa!ginas Web Con Jommla PDF

Como crear tu página web con
JOOMLA! y WORDPRESS
1
ÍNDICE
Introducción a CMS:
1 6 WordPress.
Joomla! y WordPress
Joomla!. Instalaciones WordPress. Estructura
2 7
previas del menú de tu web
3 Joomla!. Instalación WordPress. Gestión de

8
contenidos
Joomla!
4 9 WordPress. Casos de éxito
Funcionamiento
Joomla! Ejemplos y Repositorios de Aplicaciones
5 10
casos de éxito de Software libre
1 Introducción a CMS. Joomla y
WordPress.
3
INTRODUCCIÓN
¿QUÉ ES JOOMLA!?
Sistema de Gestión de Contenidos (CMS), que te ayuda a construir sitios web y
otras aplicaciones online potentes. Lo mejor de todo, es que Joomla! es una
solución de código abierto y está disponible libremente para cualquiera que
desee utilizarlo.
Con Joomla! Puedes crear:
• Webs Corporativas o Portales • Intranets y Extranets Corporativas
• Comercio Electrónico • Webs de Escuelas o Agrupaciones
• Pequeños Sitios de Negocios • Páginas Personales o Familiares
• Webs de Organizaciones o ONGs • Portales de Comunidades
• Aplicaciones Gubernamentales • Revistas y Periódicos
...las posibilidades son ilimitadas
INTRODUCCIÓN
¿QUÉ ES WORDPRESS?
WordPress es un gestor de contenidos (CMS) que permite crear un sitio web /

blog
- con el mínimo esfuerzo
- sin necesidad de recurrir a terceros
- de forma gratuita
- sin que te preocupes por copias de seguridad y actualizaciones de alojamiento
- fácil de usar y publicar ágilmente tus contenidos informativos
- personalizable como quieras, (existen miles de diseños de plantillas, gratis o
de pago)
- ayuda a mejorar tu posicionamiento web (SEO) en Google.
INTRODUCCIÓN
DIFERENCIAS ENTRE WORDPRESS Y JOOMLA

Joomla y Wordpress son 2 buenas opciones de
(CMS) para crear una página web y gestionar sus
contenidos. Pero existen algunas diferencias…
WORDPRESS
• CMS sencillo e intuitivo para crear toda clase de web incluso complejas.
• Su administración y configuración (en sus 2 versiones .org y .com) es más fácil
que Joomla
• Lleva poco tiempo hacerse con su manejo porque tiene menos apartados
• Sus plugins se pueden instalar directamente desde la administración, sin
necesidad de descargar previamente ningún instalador.
• Es más adecuada para webs sencillas e ideal para las que se actualicen
periódicamente.
INTRODUCCIÓN
DIFERENCIAS ENTRE WORDPRESS Y JOOMLA
JOOMLA!
• Cuenta con más opciones de configuración que hace que sea más flexible. Por
ejemplo, puedes definir configurar más aspectos de los elementos de menú o
en qué apartados de la web quieres colocar un determinado módulo.
• Es más adecuada para webs complejas con módulos distintos a mostrar en
cada página.
• Su funcionamiento requiere configurar base de datos (MySQL)
INTRODUCCIÓN
SIMILITUDES WORDPRESS Y JOOMLA

Herramientas gratuitas.
Extensiones: Disponen de muchas extensiones adicionales para conseguir más
funcionalidades (foro, galerías de imágenes, directorios, gestor de descargas,
etc.).
Usuarios: Ambos cuentan con un sistema de roles y permisos que permite
configurar a qué funciones puede acceder cada usuario. (superadmin,
administrador, editor, autor).
Diseño final: los resultados son muy parecidos. Depende de la plantilla elegida.
Hay miles de themes para ambas adaptadas a negocios (restaurantes,
hoteles…).
Consejo: elige una plantilla responsive para que se adapten a móviles y tabletas.
Elegir entre WordPress o Joomla! dependerá de las necesidades concretas de la
web que quieras realizar.
INTRODUCCIÓN
Objetivos del taller
• Adquirir las habilidades técnicas y organizativas para desarrollar una web

para tu idea, empresa u organización
• Aprender a manejar la configuración general de la gestión de contenidos,
Categorías y Sub-Categorías.
• Jerarquizar los contenidos y estructurarlos correctamente viendo buenas
prácticas para la creación de una arquitectura de contenidos Web.
• Claves de gestión y administración de Joomla! tanto como en el uso como en
la instalación de extensiones (Módulos, Componentes, Plugins, Idiomas y
Plantillas).
2 Joomla!. Instalaciones previas
10
WAMPSERVER
WampServer
Es un servidor web que permite crear aplicaciones web con Apache 2, PHP y
una base de datos MySQL. Al lado, phpMyAdmin permite administrar
fácilmente tus bases de datos.
COMPROBACIÓN S.O.
Consultar tu tipo de sistema operativo.

Para descargar correctamente WampServer necesitas conocer cuál es el sistema
operativo de tu equipo.
En este caso es el Sistema operativo de 64 bits, procesador x64.
Ir a Este Equipo (Mi PC) clic derecho del En este caso nuestro
ratón, Propiedades. equipo es de 64 bits.
DESCARGA WAMPSERVER
Descárgate el servidor web.

http://www.wampserver.com/en/
Clic para descargar en

Wampserver 64bits.
INSTALACIÓN WAMPSERVER
Instala WampServer.
Una vez descargado WampServer, tienes que instalarlo, para ello dirígete a tu
carpeta de descargas y abre el archivo con doble clic.
Instala WampServer.
En cuanto el panel de instalación se abre, te solicita que selecciones el navegador
que vas a utilizar, puedes dejarlo por defecto o buscar la carpeta raíz de tu
navegador habitual, en cuanto la tengas seleccionada haz clic en aceptar.
Instala WampServer.
En la siguiente pantalla deja por defecto ‘localhost’, dónde te pide el correo
puedes dejarlo también por defecto o poner tu correo electrónico y finalmente
haz clic en siguiente.
INICIANDO WAMPSERVER
Inicia WampServer.
Cada vez que vayas a acceder a Joomla! debes comprobar que WampServer
está iniciado y si no lo está debes iniciarlo haciendo doble clic en el acceso
directo que te aparecerá en el escritorio de tu equipo.
Si no tienes el acceso directo puedes crearlo realizando una búsqueda en menú
de inicio de tu equipo.
Inicia WampServer.
Ahora pasaremos a encender el servidor Wampserver. Nos vamos al Escritorio al
acceso directo que ha creado Wampserver.
Doble clic en el
icono que nos
aparece en la
pestaña de iconos
ocultos.
Clic en
Encender. El
icono se
pondrá
verde.
Inicia WampServer.
Para acceder a WampServer, abre tu navegador web y en la barra de
direcciones (url) escribe localhost.
En el apartado de Tools, haz clic en phMyAdmin o bien completamos la url:
localhost/phpmyadmin.
PHPMYADMIN
PhpMyAdmin.
Es una herramienta de software libre escrita en PHP con la intención de manejar
la administración de MySQL a través de páginas web, utilizando Internet. En este
caso, PhpMyAdmin nos va a servir para que Joomla! guarde la información en
la base de datos automáticamente.
3 Joomla!. Instalación
21
DESCARGA JOOMLA!
Joomla! Spanish.
Dirígete al sitio oficial Joomla! España donde encontrarás tu programa Joomla!
en español http://www.joomlaspanish.org/ y descarga la versión Joomla!
Spanish 3.3.6
INSTALACIÓN JOOMLA!
Instalación Joomla!.
Accede a la carpeta de C:\wamp\www y crea una nueva que se llame, por
ejemplo, Joomla3 (o el nombre que desees para acceder a tu proyecto) , dentro
de esta pega y descomprime el archivo .zip que descargaste en Joomla!
INICIANDO JOOMLA!
Iniciando Joomla!.
Abre el navegador y teclea en la barra de direcciones http://localhost/Joomla3/
(si el nombre de la carpeta de tu proyecto no es Joomla3, sustituye Joomla3 por
el nombre que hayas escogido), de esta manera accedemos a la pantalla de
configuración de Joomla!. Cubre el formulario con los siguientes datos y haz clic
en siguiente.
E-mail del
Nombre que desees Administrador
ponerle a la web
Usuario del
Administrador: admin
Contraseña del
Administrador
INSTALACIÓN JOOMLA!
Iniciando Joomla!.
Para configurar la base de datos cubre los siguientes datos como en el ejemplo,
excepto dónde pone Joomla3 que debes poner el nombre de la carpeta de tu
proyecto.
4 Joomla!. Funcionamiento
26
FUNCIONAMIENTO JOOMLA!
Antes de empezar con Joomla!.
1. Recuerda, antes de empezar a trabajar con Joomla!...

debes asegurarte que el servidor WampServer está iniciado.
2. Puedes descargar extensiones, idiomas en las siguientes direcciones:

• http://extensiones.joomlaspanish.org/
• http://extensions.joomla.org/
3. Términos que debes conocer:

• Backend: la parte del administrador para la gestión de contenidos.
• Frontend o sitio: parte que ve el usuario.
Cambiar idioma
Para añadir o cambiar el idioma de Joomla! tanto en el sitio (vista usuario)

como en el lado de administrador dirígete a extensiones/gestor de idiomas.
1. Si quieres instalar un idioma nuevo, haz clic en el botón instalar idioma
Cambiar idioma
2. Busca o selecciona el idioma que quieras de la lista y haz clic en install.
Cambiar idioma
3. Para comprobar que has realizado la actualización correctamente vuelve a
extensiones/gestor de idiomas.
El idioma aparecerá tanto en el sitio como en el lado del administrador.
Si quieres seleccionar ese idioma por defecto haz clic en la estrella para
ponerla de color amarillo.
Cambiar idioma
Puedes descargar otros idiomas que Joomla! no contenga.
Por ejemplo, dirígete a la página http://extensions.joomla.org/ y busca
Translations.
Cambiar idioma
Selecciona el Pack para la versión 3x Escoge el idioma que necesites, por

ejemplo, Galician
Cambiar idioma
Te redirigirá a otra página http://joomlacode.org, haz clic en Filename y guarda.

Cambiar idioma
Una vez lo hayas descargado, dirígete en la parte de administrador de Joomla!
(backend) a extensiones/gestor de idiomas. Haz clic en instalar idioma y vete al
apartado instalar.
FUNCIONAMIENTO JOOMLA
Cambiar idioma
1. Haz clic en Examinar, busca el archivo .zip de nuestro idioma (en este caso lo
hemos descargado en el escritorio), abre y finalmente haz clic en subir e
instalar.
Cambiar idioma
2. Una vez instalado nos aparecerá el siguiente mensaje.
Cambiar idioma
3. Vete a instalar idiomas, busca el idioma que acabas de instalar (Galician) y
haz clic en install.
4. Comprueba que está instalado en extensiones/gestor idiomas.
Si quieres seleccionarlo cómo predeterminado marca la estrella.
Frontend: distribución.
El Frontend o sitio es la pantalla de contenidos que ven los navegantes del sitio
web.
Con Joomla!, puedes modificar cualquier rincón de la web, su distribución es
esta:
Botones menú Encabezado
Formulario crear cuenta

Publicidad
Backend: distribución.
El Backend es donde el administrador gestiona los contenidos del sitio web
Usuarios: Puedes crear diversas cuentas de acceso, con diferentes permisos, para
las personas que van a administrar la web, y subir y editar contenidos.
Por ejemplo: Con acceso de “Administrador”, puede hacer cambios en la web,
con acceso “Gestor” puede agregar productos, pero, no podrá cambiar el sitio.
Menús: Configura desde aquí la barra de estructura de menús de sitio. Por
defecto viene inicio
Contenido: Desde aquí puedes gestionar:
• Artículos: Para añadir, editar y destacar contenidos
• Categorías: Los contenidos se distribuyen en categorías.
• Gestor multimedia: Para introducir y editar imágenes y vídeos.
Backend: distribución.
Componentes:
 Banners: secciones publicitarias.
 Herramientas: de búsqueda interna.
 Contactos
 Etiquetas: para posicionamiento web.
 Mensajería: crear y leer mensajes privados.
Extensiones:
• Gestor de idiomas: instalar idiomas.
• Plantillas
• Plugins
• Módulo
Backend: Accesos directos a contenidos que se suelen utilizar con mayor

frecuencia.
Botón de inicio
MÓDULOS. Gestión, distribución y publicación

En el Frontend o sitio hay distintas áreas, columnas o espacios distribuidos en la
página.
A través de tu Backend puedes editar, agregar o cambiar la ubicación de los
módulos, pero 1º tienes que conocer cómo Joomla! denomina a cada zona de tu
Frontend
- Módulo, nos referimos a

aquella zona destinada para
una acción, un buscador,
formulario, banner, etc

Para saber cómo Joomla! identifica cada módulo del sitio:
1. Ve a la parte de administrador extensiones/gestor de plantillas/opciones
2. y Activa la vista previa de las opciones de los módulos.
3. Guarda y cierra.

Una vez realizado este ajuste,
1. ve al sitio o Frontend
2. añade en la url ?tp=1 http://localhost/proyecto/?tp=1
Puedes ver en rojo el nombre de cada módulo de Joomla!
Necesitas ver los nombres de los
módulos para poder:
• Cambiar su posición
• Modificar la información o
• Dejar de publicar ese módulo.
Para empezar a trabajar con cada módulo, dirígete a extensiones/gestor de

módulos

Aquí visualizas todos los módulos: su nombre, estado, posición, etc., comprobarás
que coinciden con los de tu sitio web

Para quitar módulos dirígete a extensiones/gestor de módulos.
Ejemplo: vamos a ocultar Simplemente cambia la opción √ por la opción X.

los banners de publicidad Si quieres volver a publicarlos cambia de nuevo la
de Joomla!, los módulos opción.
con posición 8.
OJO!. Un módulo publicado no siempre va a estar
visible, ya que debe estar publicado en una página.
En este caso están todos publicados pero en el caso
de el módulo buscar, pone ninguno, por eso en el
frontend no puedes verlo.

Refresca el sitio y verás los cambios

Ejemplo: vamos a cambiar de lugar el módulo Pack 3.0 Joomla! Spanish
Dirígete a extensiones/gestor de módulos
Primero debes volver a publicar el módulo nuevamente.
Una vez publicado, haz clic en él para acceder al editor de módulos.
MÓDULOS. Cambiar de posición

Mostrar título: Elige si se muestra o no el título del módulo.
Posición: En qué posición se va a mostrar el módulo.
Estado: Selecciona si el módulo estará publicado o no.
En la pestaña menú asignado puedes:
• modificar su visibilidad
• y cambiar los ajustes para que se vea en una página concreta, en todas,
etc.
Tenemos el caso del módulo buscar, que está publicado, pero no se muestra, es
porque no está asignado a ninguna página, aquí es donde haríamos el cambio
para poder verlo, porque para que un módulo esté visible tienen que cumplirse 2
condiciones:
1.Que esté publicado.
2.Que esté asignado a alguna página.
MÓDULOS. Cambiar de posición. Ejemplo


1. Volver al Módulo y en la parte derecha en el menú desplegable, la opción
posición, y cambiar para la posición 7 derecha.

2. Refresca el Frontend y veras el resultado.

Retoma el módulo buscar, dirígete a hacerlo visible. Cómo vemos en la pantalla,
aparece la posición del módulo.
Sin embargo, si quitas las etiquetas en rojo (quitar de la url ?tp=1) no hay rastro
del mismo.
MÓDULOS. Mostrar módulo

Dirígete a extensiones/gestor de módulos y haz clic en el módulo buscar para
acceder a él, entra en menú asignado y clic, por ejemplo en todas las páginas.
MÓDULOS. Mostrar módulo

Acepta y guarda, y a continuación refresca el sitio y verás que ahora sí aparece el
módulo buscar.
PLANTILLAS: Gestionar, agregar y eliminar.

Todo lo relacionado con las plantillas está en extensiones/gestor de plantillas.

Las plantillas se pueden cambiar tanto en el Backend como en el Frontend, aquí
vamos a trabajar con las plantillas del sitio o Frontend, que solamente cambia el
diseño que ve el usuario.
Para seleccionar y que se muestre otra plantilla cómo predefinida, debes hacer
clic en la estrella, puedes probar con la plantilla Beez3 - Predeterminada.
La plantilla ha cambiado totalmente

el diseño del Frontend.
Plantilla: Son extensiones que nos
permiten cambiar la vista, el archivo
index.php de la plantilla de Joomla!
determina donde cargarán los
componentes y los módulos, así
como la tipografía, colores, etc.
Módulos: extensiones que nos
permiten cargar en una posición de
una plantilla una salida de datos o
una funcionalidad específica.

También puedes instalar plantillas creadas por otros usuarios, una página donde
puedes encontrar montones de extensiones, plantillas, idiomas, etc., es
http://extensions.joomla.org/.
Descargarás e instalarás una plantilla en nuestro frontend-sitio.
Descargar una plantilla:
OJO: Debes fijarse que sea compatible con tu versión de Joomla!
Páginas que Webempresa* (administrador de Joomla! en español) aconseja para

descargar plantillas.
Themexpert http://www.themexpert.com/tag/freebies
Joomla24 http://www.joomla24.com
Joomlaos.de http://www.joomlaos.de
Joomlashack http://www.joomlashack.com/joomla-templates/free-joomla-
templates
*Artículo de Webempresa: http://www.webempresa.com/blog/item/1061-los-10-mejores-sitios-para-descargar-
plantillas-joomla-gratis.html

1. Una vez encontrada la plantilla que te gusta, debes descargarla. En este caso
escogerás esta de la página http://www.a4joomla.com/free-joomla-3-
templates.html ya que es compatible con tu versión de Joomla! y es
gratuíta, pero debes estar registrado.

2. Una vez hayas descargado la plantilla (.zip) en tu pc, vas a la parte de
administrador (backend) de Joomla! y te dirigirás a extensiones/gestor de
extensiones.

3. Haz clic en examinar, abres la plantilla, en este caso darkcity, y después clic en
subir e instalar.

4. Si la plantilla se ha instalado correctamente te aparecerá un mensaje de
confirmación en verde, en la parte superior.

5. Una vez hayas instalado la plantilla, irás a extensiones/gestor de plantillas,
seleccionas la plantilla haciendo clic en la estrella para que sea mostrada en el
sitio.

6. Finalmente comprobarás el resultado, refrescando el sitio.

Para eliminar una plantilla lo primero que debes comprobar es que no está
seleccionada por defecto, ya que si está por defecto no podrás eliminarla. Las
plantillas que vienen predeterminadas con Joomla! tampoco las podrás
desinstalar.
1. Para ello debes ir a extensiones/gestor de extensiones, clic en gestionar y
todo lo que tengas en Joomla! aparecerá.

2. Buscas la plantilla que quieres desinstalar, en este caso darkcity. Una vez
localizada, seleccionala y haz clic en desinstalar.

3. Nuevamente, una vez desinstalada te aparecerá el mensaje verde de
confirmación.
CONTENIDO DE JOOMLA: Organizar su contenido

El contenido en Joomla! se organiza en 2 niveles o más, Categoría padre y
categoría hijo, dentro de la categoría hijo podrías crear más categorías hijo,
hasta llegar al contenido (artículos).
Categoría padre = CURSOS

Organizar contenido
Categoría hijo 1 = CURSOS DE Categoría hijo 2 = CURSOS DE

OFIMÁTICA PROGRAMACIÓN
Artículo A = Artículo C = HTML Contenido

Artículo B = EXCEL Artículo D = Java
WORD 5
CONTENIDO DE JOOMLA: Organizar su contenido
En este ejemplo la categoría cursos tiene dos categorías hijo, cursos de

ofimática y de programación las cuales están anidadas (agrupadas) dentro de
una categoría padre.
Además, cada tipo de curso tiene sus artículos, por ejemplo, la categoría cursos
de ofimática, tiene 2 artículos que son Word y Excel.
Entonces, los artículos de Word y Excel son el contenido real en Joomla! que
están anidados en una categoría hijo que se llama cursos de ofimática y a su
vez está dentro de una categoría padre junto con cursos de programación, que
se llama CURSOS.
Gestor de Artículos
Te permite administrar los artículos de tu página web.
Gestor de Artículos: Acciones.

Editar, publicar o eliminar uno o varios artículos:
Tienes que marcarlos con un √ en el recuadro en blanco ,luego haz clic en el
botón que refleje la acción que deseas.
Publicar o despublicar artículos:
Haz clic en los botones superiores o en el √ que aparece en cada artículo.
√: El artículo está publicado y es visible en el sitio web.
X: El artículo no se ha publicado en la web.
Destacar artículos:
Haz clic en la estrella para que cambie su color a amarillo.
El destacado sirve para crear acciones particulares, por ejemplo que un
artículo aparezca en la portada, o si tenemos una barra deslizante que
aparezca un listado de los artículos destacados.
Gestor de Artículos: Acciones.

Comprobar: sirve para cerciorarse de que el texto esté bien escrito.
Lote: funciona como sección de un grupo de artículos.
Gestor de Artículos: Estado del artículo
Acceso Público, no
•Publicado. Autor:
está restringido a
•Destacado. Administrador
otros usuarios
•Archivar o enviar a la
papelera para eliminar.
Idioma - todo: se va a Impactos: las veces
Nombre del artículo con poder ver en cualquier que se ha visto.
vínculo para abrirlo y idioma.
editarlo
Crear artículos
Para crear un artículo te dirigirás al menú contenido/gestor de artículos y clic en

nuevo.
Crear artículos
1. Lo primero que tienes que hacer es añadir un título a nuestro artículo.
2. A continuación, añadir el contenido, puedes editarlo con las herramientas de

edición que incorpora Joomla!.
Crear artículos
3.En la parte derecha, verás que tienes muchas

utilidades que permiten que tu información esté
organizada, sea fácil de localizar, visible…
En este menú es donde seleccionas la categoría para
el artículo que hayas creado. También se pueden
añadir etiquetas para relacionar artículos de temas
similares entre ellos.
Reflejarás el estado, es decir, si deseas que el artículo
esté publicado o no. Si lo destacas, aparecerá en
primera página. Si limitas su acceso, sólo los usuarios
que inicien sesión podrán verlo y modificar el idioma.
Crear artículos. Saltos de páginas e incrustar imágenes

Utilizar saltos de página es muy recomendable cuando un artículo contiene
mucha cantidad de texto, ya que de esta manera la lectura será más amena.
1. Para ello abres el artículo que quieras editar, y pones el cursor en el lugar
donde desees añadir el salto, y haz clic en la parte inferior del artículo en el
botón salto de página.

2. Guardar y cerrar . Comprueba los cambios en el sitio.

Para agregar una imagen, te dirigirás al menú de la parte inferior, y clic en
imagen.
Para insertar una imagen

debes haberla agregado
antes en la carpeta que
Joomla! crea para ello.
IMPORTANTE: no cambiarlas de carpeta una vez subidas, ya que deben estar

disponibles en la misma ubicación para que la web pueda mostrarlas
La carpeta se encuentra en: C:\wamp\www\proyecto\images En esta carpeta es dónde

guardaremos todas las
imágenes de nuestra web.
Nombre la carpeta dónde
tenemos Joomla!

CONSEJO: antes de subir una imagen se aconseja editar su tamaño porque así
pesarán menos y tu página ganará velocidad al cargarla.
2. Una vez hayas guardado la imagen que necesites en la carpeta, volver a abrir
el explorador de imágenes, desde el botón imagen que hay en la parte
inferior del artículo. Seleccionas la imagen y cubres el formulario.

3. Para editar una imagen agregada a un artículo (no es recomendable, se
recomienda subirla ya editada), seleccionas la imagen y haz clic en el icono de
la foto.

4. Cubre las casillas con el tamaño deseado en pixeles, clic en ok , guardar y
cerrar.

5. Éste sería el resultado en el sitio.
Artículos. Programa la publicación de un artículo.
La publicación de los artículos, es totalmente configurable, es decir, puedes crear

y subir el artículo hoy y fijar una fecha de inicio de publicación del mismo con
fecha posterior a la de hoy, con lo que se publicará ese día automáticamente.
Una fecha de fin de publicación que automáticamente quitará la visibilidad del

artículo el día programado.
La meta descripción y las palabras clave o etiquetas separadas por “,” son muy
importantes para el SEO (posicionamiento en los buscadores externos).
Artículos. Programa la publicación de un artículo.
Información interna.
Artículos. Cambiar fondos
Además de añadir una imagen a un artículo, puedes agregarle una imagen de

fondo con la opción imagen del artículo completo.
Artículos. Opciones de artículo

Zona designada para activar o desactivar opciones de los artículos, como por
ejemplo, mostrar el título del artículo, las etiquetas, fechas, etc.
Crear artículos. Enlaces.

En tus artículos además de texto e imágenes, puedes añadir enlaces, vídeos, etc.
Insertar un enlace en un nuevo artículo.
1. Una vez tengas el texto de tu artículo, sitúa el cursor en el lugar dónde se va a
ubicar el enlace.
2. Clic en insertar/insertar enlace.
Crear artículos. Incrustar vídeos y parámetros adicionales.

3. Cubre los campos del formulario insertar enlace y acepta.

Para incrustar un vídeo necesitas más herramientas que las que te aparecen en
el editor de artículos.
Para incrustar un vídeo (no el link), dirígete a extensiones/gestor de plugins y

localiza Editor – TinyMCE.

2. Seleccionas la funcionalidad extendida (para que te agregue mayor número
de herramientas en el editor de artículos), guardas y cerrar. También se debe
eliminar iframe de los elementos prohibidos.

3. Una vez realizado este cambio, volver a abrir el artículo dónde quieres incrustar
el vídeo y compruebas que tienes dos barras de herramientas más.

4. Sitúa el cursor en la zona de texto dónde vayas a incrustar el vídeo, luego haz
clic en insertar/insertar video

5. Cubres el formulario y aceptas.
Categorías
Recuerda que las categorías aquellas que organizan el contenido, en el caso de
Joomla!, los artículos.
En este momento, en tu web tienes varios artículos que contienen información
muy diferente. Puedes acceder a ellos a través del menú últimas noticias, pero
si tuvieses una treintena de artículos más, posiblemente, no sabrías cómo
localizarlos rápidamente.
Para que esto no suceda, las categorías clasifican los artículos según su
contenido.
Para gestionar todo lo relacionado con las categorías accede a contenido/gestor
de categorías.
Categorías
Crea una categoría padre.
1. Haz clic en nuevo, asigna un título, cubre la descripción, etiquetas y por el
momento, guarda y cierra. (padre no asignado)
Categorías
2. Creamos dos categorías más, que serán las categorías hijo, por lo tanto
debemos asignarle una categoría padre (Información TIC).
Categorías
3. Una vez creadas, anida las categorías hijo a la categoría padre, para ello
entrar en cada categoría hijo y en el menú derecho, donde pone padre
selecciona INFORMACION TIC.
4. Una vez anidadas vuelve a gestor de categorías y comprueba que las

categorías hijo aparecen por debajo de su categoría padre.
Categorías. Asignar artículos a categorías por lote

Para poder asignarle a un artículo una categoría dirígete a contenido/gestor de
artículos, accede a un artículo y en el menú derecho, categoría, asígnale una
categoría hijo.
Imagina que tienes 20 artículos que deben pertenecer a una categoría, pero no la
tienen asignada todavía, para asignarles la categoría en lote los seleccionarías y
haz clic en lote.
Categorías. Asignar artículos a categorías por lote. Ejemplos.

Esta opción asigna etiquetas, restricciones de acceso, configuración del idioma y
categorías a los artículos seleccionados. En este caso, vas a asignar una categoría
así que seleccionas la categoría hijo dónde deseas anidarlos y clic en procesar.
Crear elementos de menú con categorías y artículos.
Un menú en Joomla! es un listado de opciones, en este caso en forma de

botones, que aparecen en nuestra web para que el usuario pueda dirigirse de
forma rápida y sencilla a aquella zona en donde va a localizar la información que
necesita.
En este caso, el menú que vas a editar es el que aparece en la pantalla principal
con tan sólo un botón de inicio.
Creación de elementos de menú con categorías y artículos.

Para crear un elemento de menú dirígete a Menús/menú principal y haz clic en nuevo.
1. Añade un título, que tendrá que ver con las categorías que hayas creado. Tipo
de elemento de menú, en este caso, por ejemplo, lista de todas las categorías.
Creación de menús con categorías y artículos.

2. Escoge la categoría de nivel superior, guarda y cierra.
Creación de menús con categorías y artículos.

4. Finalmente, comprueba en el sitio los cambios.
Creación de submenús con categorías y artículos.

1. Crea también el menú de las categorías hijo, el tipo de elemento de menú será
lista de categorías y en el menú derecho, elemento padre, marcas cuál es su
categoría padre.
Creación de submenús con categorías y artículos.
Comprueba el resultado
y verás cómo has creado
un submenú dentro de
Infomación TIC.
USUARIOS. Concepto
Con Joomla! podrás gestionar diferentes tipos de usuarios con distintos niveles de
acceso.
Hasta ahora has trabajado con 2 tipos de usuarios:
• Usuario registrado.
• Usuario no registrado.
En cada módulo o en cada contenido podías restringir el acceso de los usuarios, es
decir, el nivel de acceso podía ser:
• Público: para todos los usuarios.
• Privado: sólo para usuarios registrados.
USUARIOS. Grupo de usuarios

Usuario Usuario
Frontend Backend
Invitado Mánager
Registrado Administrador
Súper
Autor
Administrador
Editor
Supervisor
USUARIOS. Diferencia entre los grupos de usuarios.

Las diferencias entre los usuarios del frontend están en las jerarquías, es decir, en
ver, editar y publicar ciertos contenidos de la web. Mientras que los usuarios del
backend se centran en la administración de la página.
•Algunos pueden
acceder al Backend
Usuarios
Frontend
Usuarios
Backend
•Pueden acceder al
Frontend
USUARIOS. Ajustes.
Estos ajustes se pueden modificar en usuarios/grupos.
USUARIOS. Niveles de Acceso

Usuario Frontend Usuario Backend
Invitado: Un invitado es un usuario no registrado, dependiendo de Mánager: Un mánager puede ser visto como un supervisor con acceso
cómo ha configurado el sitio el administrador, éste podrá navegar al panel de administración. El mánager no tiene capacidad para
libremente por todo el contenido o tener restringido el acceso a cambiar plantillas, alterar el diseño de las páginas o añadir o eliminar
cierto tipo de contenidos, reservados para usuarios registrados. extensiones. Los mánager tampoco tienen autoridad para añadir
usuarios o alterar los perfiles de usuarios existentes.
Registrado: Un usuario registrado no puede crear, editar o publicar Administrador: Los administradores tienen un rango de acceso más
contenido en un sitio. Pero puede enviar nuevos enlaces web para amplio que los mánager, además de los accesos del mánager puede
ser publicados y puede tener acceso a contenidos restringidos que no añadir o eliminar extensiones sitio web.
están disponibles para los invitados.
Autor: Los autores pueden crear contenido (no editarlo), indicar Súper Administrador: tienen el mismo poder que un ‘root’ en un
ciertos aspectos de cómo se presentará el contenido y especificar la sistema tradicional Linux y disponen de posibilidades ilimitadas para
fecha en la que se publicará el material ejecutar todas las funciones administrativas de Joomla!. Sólo los Súper
Administradores tienen la capacidad de crear nuevos usuarios con
permisos de Súper Admistrador, o asignar este permiso a usuarios ya
existentes.
Editor: Un editor tiene todas las posibilidades de un autor, y además
la capacidad de editar el contenido de sus propios artículos y los de
cualquier autor.
Supervisor: Los supervisores pueden ejecutar todas las tareas de los
autores y editores, además tienen la capacidad de publicar un
artículo.
USUARIOS. Niveles de acceso.

Para gestionar estos niveles de acceso te diriges a usuarios/niveles de acceso.
Una vez aquí, compruebas que tienes 5 tipos de usuarios.

En esa ventana, se puede crear un nuevo nivel de acceso haciendo clic en nuevo o
puedes editarlos haciendo clic en uno.

En usuario/gestor de usuario se puede crear un tipo de usuario, en este caso
aparece un súper usuario, que serás tú mismo.
USUARIOS. Gestor de usuarios.

Un usuario se puede crear tanto desde el backend como del frontend. Para crear
un nuevo usuario (usuario registrado) desde el backend haz clic en nuevo.

Desde el Frontend. En el formulario de acceso haz clic en crear usuario.

Puedes comprobar que aparecen los usuarios que has creado. Un punto a tener
en cuenta, es que en el frontend no va a poder crear super usuarios, usuarios
editores, etc.

Haz clic en uno de los usuarios recién creados, para ver más opciones en la
parte de grupos de usuarios asignados. En esta pestaña, puedes cambiar el
tipo de usuario, por defecto registrado. Si quisieras un nuevo grupo, te
dirigirías a usuarios/grupos.
USUARIOS. Opciones básicas

En esta zona puedes configurar otras opciones como el idioma por defecto de la
web para este usuario, su zona horaria, etc.
USUARIOS. Opciones básicas

Para comprobar que tu usuario funciona correctamente iniciarás sesión en el
sitio.
4 Joomla!. Ejemplos
124
CASOS DE ÉXITO
Ejemplos
Algunos ejemplos de páginas web creadas con Joomla!

http://www.terrasdepontevedra.org/es/
http://www.madridejos.es/
http://www.ayuntamientodequer.es/
http://www.sansebastiangomera.org/
6 WordPress: crea una página web
126
INTRODUCCIÓN
DIFERENCIAS entre Wordpress.COM y Wordpress.ORG
https://wordpress.com https://wordpress.org
CREA una WEB con Worpress.COM
Empieza a crear tu WEB en Wordpress.COM
Ir a enlace: http://es.blog.wordpress.com
CREAR WEB con Wordpress.COM
PASO 1 - CONFIGURA TU WEB
TÍTULO: Nombre principal de la web

ESLOGAN(OPCIONAL): En pocas palabras explica de que trata tu web
IDIOMA: es-Español.
PASO 2 - TEMA
- Escoge la apariencia que tendrá tu web. Será el diseño de tu web.
- Hay miles de plantillas gratis y de pago que oscilan desde los 30€.
- Consejo: elige una responsive para que se adapte a móviles y tablets
DISEÑO: PLANTILLAS DE WORDPRESS.COM PARA NEGOCIOS

Wordpress.com te ofrece diversidad de plantillas con diseños espectaculares para
cualquier negocio. Las hay gratis, de pago y premium.
EJEMPLOS PARA
CAFETERIA U HOTEL
-
DISEÑO: PLANTILLAS DE WORDPRESS.COM PARA NEGOCIOS

Si las plantillas de wordpress.com no te encajan con tu negocio
puedes encontrar y descargar miles de plantillas en repositorios
que existen en internet. Ejemplos:
http://themeforest.net
http://www.themesparawordpress.com/
c
PASO 3 - PERSONALIZA EL TEMA COMO MÁS TE GUSTE
- Colores: Escoge los colores de tu web. Hay tres paletas de colores gratuitas.
- Cabecera: Personaliza una cabecera que llame la atención de tus visitantes. Esta
imagen aparecerá en la parte superior de tu página. Por lo tanto es un elemento muy
importante que destacará tu web
- Opciones de tema: Se escoge barra lateral y relación de aspecto en miniatura.
- Widgets: Los widgets son pequeñas aplicaciones para aportar funcionalidades
diferentes a tu web y te ayudan a organizar los elementos más importantes .
WordPress.Com
7 Estructura el menú de tu web
134
COMO CREAR UN MENÚ PARA TU WEB
Para crear un menú para tu web

debes acceder a la pestaña Páginas
y añadir nueva página.
Visibilidad: Decide quien quieres
que vea tu página. Público,
Protegido con Contraseña, Privado
Nombre de la página de tu Menú
Publicar
inmediatamente.
Descripción del contenido que aparecerá en
dicha página. Añade contenidos multimedia
a tu página si lo necesitas.
Una vez que hayas creado tu página de Inicio o Página Principal debes ir a la
configuración de lectura de nuestra web
Aquí desplegar para

elegir cual va a ser
nuestra página
principal. En nuestro
caso escogeremos
INICIO la página que
hemos credo en el paso
anterior.
Aquí desplegar para elegir cual

va ser la página en la que se
encuentren nuestras entradas.
Para ello deberemos crear otra
página como hemos dicho en
el paso anterior y volver aquí y
asignarla.
Ejemplo: He creado la página de Inicio es decir la página principal de tu web. Con

una descripción y una imagen.
Enlace permanente: Esta será la URL de nuestra página. Esta se
puede editar si desea.
Tu web después de crear dos páginas para nuestro menú.

Título de tu web
Eslogan de tu web
Páginas del menú de tu web

INICIO: Página principal.
NOTICIAS: Pagina asociada a
las entradas.
Descripción de la página INICIO.

Menús: Desde esta opción puedes modificar tu estructura de menú web para facilitar a
tus visitantes la de navegación por ella
Coloca cada elemento en el orden que prefieras.

Haz clic en la flecha que hay a la derecha del elemento para mostrar
más opciones de configuración.
8 WordPress. Gestión los
contenidos
140
PUBLICA NUEVA ENTRADA
PUBLICAR UNA ENTRADA/POST/ARTÍCULO

Todas las entradas: Visualiza todas las entradas de tu web.
Añadir nueva: Añade una nueva entrada/post a tu web
Categorías: Añade nuevas categorías o consulta las
existentes.
Etiquetas: Consultar las etiquetas de tus publicaciones de
tu web o bien añade nuevas etiquetas.
Copia un Artículo: Añade un artículo a tu entrada o a tu
web
PUBLICACIÓN NUEVA ENTRADA
Añadir multimedia: Insertar una imagen o video a
la publicación
Título: Frase breve que resume el contenido de la entrada.
Aquí escribiremos todo en contenido de

la entrada.
Cambiar estado: Permite variar entre si la entrada se

guarda para poder publicarla con posterioridad o bien se
publica en el momento.
Etiquetas y categorías: Las etiquetas son palabras sueltas
que definen el contenido de la entrada y las categorías es
el grupo en el podemos clasificar las entradas.
Imagen destacada: Imagen que refleje el contenido de la
entrada.
Compartir: Compartir en las diferentes redes sociales.
Ubicación: Añadir la ubicación desde la cual estás

publicando tu nueva entrada.
Extracto: Resumen extra si es necesario del contenido a
publicar.
Configuración Avanzada
Biblioteca Multimedia
Limite de carga 3GB Añadir nuevo medio (Imágenes, Audio, Video)
Seleccionar por mes
Todas las
imágenes
subidas a la
web
Biblioteca Multimedia: AÑADIR NUEVO

Tipos de archivos permitidos: jpg,jpeg,png,gif,pdf,doc,ppt,odt,pptx,docx,pps,ppsx,xls,xlsx,key
Arrastra o selecciona tus
archivos
LOS MEJORES WIDGETS/PLUGIN
¿Qué es un widget o plugin ?
Son módulos que se muestran en nuestra web normalmente en la barra lateral para
mostrar información adicional con funcionalidades muy diversas:
• Mapa de google maps para indicar como llegar
• enlaces a tus redes sociales
• textos con información
• banners de publicidad
• formularios de búsqueda
• suscripción a boletines,
• vídeos
• etc…
¡Puedes encontrar Widget muy variados para incorporar en tu web!

ESTADÍSTICAS DE TU WEB
9 WordPress. Casos de Éxito
148
CASOS DE ÉXITO
EJEMPLOS DE WEB CREADAS CON WORPRESS
-Nivel internacional: BBC AMÉRICA, MTV NEWS, BEYONCÉ, SPOTIFY, FORD, CNN,
THE NEW YORK TIMES.
-Nivel Local: UNED (Universidad Nacional de Educación a Distancia) Lugo.

10 ANEXO:
libre
Repositorios de aplicaciones de software
150
REPOSITORIOS DE APLICACIONES
DE SOFTWARE LIBRE
Repositorios de aplicaciones de software libre

Joomla!
http://es.blog.wordpresss.com
http://www.wampserver.com/en
http://www.joomlaspanish.org
http://www.joomla.org/
WordPress
Video introducción:
https://www.youtube.com/watch?v=u95vocRy1aY
&list=PLmIEoKACpcDy5Gw_v7RFxRQ04cvXCF40&i
ndex
Página de inicio wordpress:
http://es.blog.wordpresss.com
https://wordpress.org
Tutoriales
http://ayudawp.com

CreaciA3n de Pa!ginas Web Con Jommla PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CreaciA3n de Pa!ginas Web Con Jommla PDF

Cargado por

Copyright:

Formatos disponibles

Como crear tu página web con

3 Joomla!. Instalación WordPress. Gestión de

WordPress es un gestor de contenidos (CMS) que permite crear un sitio web /

DIFERENCIAS ENTRE WORDPRESS Y JOOMLA

DIFERENCIAS ENTRE WORDPRESS Y JOOMLA

SIMILITUDES WORDPRESS Y JOOMLA

Objetivos del taller

• Adquirir las habilidades técnicas y organizativas para desarrollar una web

Consultar tu tipo de sistema operativo.

Descárgate el servidor web.

Clic para descargar en

Antes de empezar con Joomla!.

1. Recuerda, antes de empezar a trabajar con Joomla!...

2. Puedes descargar extensiones, idiomas en las siguientes direcciones:

3. Términos que debes conocer:

Para añadir o cambiar el idioma de Joomla! tanto en el sitio (vista usuario)

Selecciona el Pack para la versión 3x Escoge el idioma que necesites, por

Te redirigirá a otra página http://joomlacode.org, haz clic en Filename y guarda.

Formulario crear cuenta

Backend: Accesos directos a contenidos que se suelen utilizar con mayor

MÓDULOS. Gestión, distribución y publicación

- Módulo, nos referimos a

MÓDULOS. Gestión, distribución y publicación

MÓDULOS. Gestión, distribución y publicación

MÓDULOS. Gestión, distribución y publicación

Para empezar a trabajar con cada módulo, dirígete a extensiones/gestor de

MÓDULOS. Gestión, distribución y publicación

MÓDULOS. Gestión, distribución y publicación

Ejemplo: vamos a ocultar Simplemente cambia la opción √ por la opción X.

MÓDULOS. Gestión, distribución y publicación

MÓDULOS. Gestión, distribución y publicación

MÓDULOS. Cambiar de posición

MÓDULOS. Cambiar de posición. Ejemplo

MÓDULOS. Cambiar de posición. Ejemplo

MÓDULOS. Cambiar de posición. Ejemplo

MÓDULOS. Cambiar de posición. Ejemplo

MÓDULOS. Mostrar módulo

MÓDULOS. Mostrar módulo

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

La plantilla ha cambiado totalmente

PLANTILLAS: Gestionar, agregar y eliminar.

Páginas que Webempresa* (administrador de Joomla! en español) aconseja para

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

PLANTILLAS: Gestionar, agregar y eliminar.

CONTENIDO DE JOOMLA: Organizar su contenido

Categoría padre = CURSOS

Categoría hijo 1 = CURSOS DE Categoría hijo 2 = CURSOS DE

Artículo A = Artículo C = HTML Contenido

CONTENIDO DE JOOMLA: Organizar su contenido

En este ejemplo la categoría cursos tiene dos categorías hijo, cursos de

Gestor de Artículos: Acciones.

Gestor de Artículos: Acciones.

Gestor de Artículos: Estado del artículo

Para crear un artículo te dirigirás al menú contenido/gestor de artículos y clic en