SOFTLI INSTITUTO DE APRENDIZAJE. DAVID SALAZAR MORALES. VICTOR MANUEL VALDEZ ARZATE ASESOR: L. I. A. CRISTIAN RODRIGUEZ
20014
INTRODUCCION. En este gran proyecto mostraremos la creación de una página web con las siguientes herramientas JOOMLA Y WAMP SERVER. Para empezar explicaremos los pasos para la instalación de WAMP SERVER Y JOOMLA. Mostraremos como se cran los ARTICULOS, CATEGORIAS Y MENUS, también como publicar e instalara los MODULOS, instalar y colocar TEMPLATES, hacer y colocar FAVICONS, Mostraremos como insertar IMÁGENES, VIDEOS Y FORMULARIOS. Este es un gran proyecto de gran enseñanza ya que estamos haciendo nuestro equipo en un servidor.
2
INSTALACION Y CONFIGURACION DE WAMP SERVER. 1. Descargar WAMP SERVER 2.4 desde su portal en internet según su computadora, deberá cerciorarse de cuantos bits es su computadora (32 o 64 bits). 2. Lo Ejecutaremos como Administrador y aparecerán las diferentes ventanas de la instalación, ahora ira de la mano del programa de instalación.
3. En la barra de estado d ela computadora aparecerá una “W” color VERDE la cual indica que el WAMP SERVER esta activo. Y dando clic sobre el icono, tanto izquierdo como derecho tendrá menús, como se muestra en seguida.
Clic IZQUIERDO.
Clic DERECHO.
3
4. Enseguida abrirá su navegador y escribirá “localhost” y aparecerá una pantalla como la siguiente en la cual dará clic en PHPMYADMIN.
5. Después de dar clic en PHPMYADMIN este enlace lo direccionara a el sitio ADMINISTRADOR DE PHP en donde se hará la creación de una Base de Datos. Dando clic en el menú de la parte superior donde dice BASE DE DATOS.
4
Después aparecerá una pantalla como la siguiente en donde colocara en nombre de su base de datos en este caso “ESCUELA” y se dará clic en CREAR. Y debe esperar en lo que la crea y en la parte de abajo aparecerá la BASE DE DATOS.
INSTALACION Y CONFIGURACION DE JOOMLA 2.5 6. Descargaras JOOMLA 2.5, la cual estará en un formato ZIP y se deberá descomprimir, copiando esos archivos y deberá entrara a el disco (C:) a la carpeta WAMP y a una carpeta WWW y ahí se pegaran los archivos.
Se deberá ver la carpeta con los archivos, como la siguiente imagen:
5
7. Ahora configuraremos JOOMAL, entrara a el navegador con la URL
LOCALHOST, aparecerรกn unas pantallas como las siguientes.
6
EMPECEMOS A CONSTRUIR NUESTRO SITIO. En este caso al poner LOCALHOST en el navegador aparecerá nuestro sitio, el cual poco a poco iremos construyendo.
TEMPLATE. Y siempre el template que aparece como default es el siguiente:
Empezaremos con la elección de nuestro TEMPLATE, en este caso el que se utilizo se llama JOMI.
Para la instalación del TEMPLATE, se deberá abrir una nueva ventana en el navegador y colocar como URL “LOCALHOST/ADMINISTRATOR” y aparecerá la siguiente pantalla, donde te pide el nombre de usuario y la contraseña esta se coloco en la configuración anteriormente.
7
Enseguida después de haber puesto el USUARIO Y CONTRASEÑA, aparecerá la siguiente pantalla la cual es nuestra página de administración del sitio.
Ahora si empecemos con la instalación de TEMPLATE, para esto se deberá dar clic en el menú de la parte superior donde dice EXTENCIONES y se desplegara otro menú y se dará clic en GESTOR DE EXTENCIONES, como se muestra enseguida.
8
Tendremos una pantalla como la siguiente, donde daremos clic donde dice SELECCIONAR ARCHIVO, aparecerá la ventana para buscar el archivo daremos clic en el TEMPLATE que se descargo, después de eso se dará clic en SUBIR E INSTALAR.
Ahora se dará clic de nuevo en EXTENCIONES>>GESTOR DE PLANTILLAS.
9
Después de la anterior ventana buscaremos nuestro TEMPLATE y daremos clic en la CASILLA y después en donde dice ESTABLECER COMO DEFECTO.
Se verá así:
10
CREACION DE CATEGORIA. Para crear una categoría deberá dar clic en el menú de la parte superior en donde dice CONTENIDO>>GESTOR DE CATEGORIAS>>AÑADIR NUEVA CATEGORIA.
Después aparecerá una pantalla como la siguiente en donde solo se deberá llenar el campo que dice TITULO.
Damos clic en GUARDAR Y CERRAR. En este caso se harán 6 CATEGORIAS:
BIENVENIDOS.
11
ESTAMOS JUNTOS. NUESTRA HISTORIA ESTUDIANDO. ENCUENTRANOS. AL DIA.
CREACION DE ARTICULOS. Para empezar se dará clic en el menú d ela parte superior donde dice CONTENIDO>>GESTOR DE ARTICULOS>>AÑADIR NUEVO ARTIDULO.
Aparecerá una pantalla como la siguiente en donde se llenara la casilla de TITULO, CATEGORIA Y SE PONDRA LA INFORMACION QUE CONTENDRA EL ARTICULO EN EL ESPACIO DE ABAJO.
En la parte de la categoría es de opción múltiple y aparecerán las categorías que se hayan creado y ahí se debe de elegir la que corresponda a el articulo. Y para el articulo que debe aparecer en la pagina principal solo se deberá de cambiar en donde dice DESTACADO.
Damos clic en GUARDAR Y CERRAR.
12
En este caso se harán 6 ARTICULOS:
CAMPEONES. CONTACTANOS. HISTORIA. MENSAJE DE BIENVENIDA. NOSOTROS. NOTICIAS.
CREACION DE EL MENU. Daremos clic en el menú de la parte superior en donde dice MENUS>>MENU PRINCIPAL>>AÑADIR NUEVO ELEMENTO DE MENU.
Se mostrara una pantalla como la siguiente,
Se situara donde dice TIPO ELEMENTO MENU y se dará clic en SELECCIONAR, esto es para elegir el tipo de menú que se quiere insertar y aparecerá una ventana como la siguiente, donde se dará clic en ARTICULO SIMPLE.
Después se deberá llenar el campo TITULO MENU.
13
En el caso de que el menú sea el de la pagina principal se deberá colocar donde dice PAGINA PRINCIPAL “SI” Damos clic en GUARDAR Y CERRAR. En este caso se crearan 8 MENUS:
INICIO. TODOS JUNTOS. HISTORIA OFERTA EDUCATUVA. AULA VIRTUAL BLOGGER. NOTI SOFTLI CONTACTO.
14
SOFTLI. INICIO.
TODOS JUNTOS.
15
NUESTRA HISTORIA.
16
OFERTA EDUCATIVA.
AULA VIRTUAL.
17
BLOGGER.
En lo que fue la AULA VIRTUAL Y EL BLOGGER, no se creó ARTICULO ni CATEGORIA, ya que solo se creo el ELEMENTO DE MENU, eso se hizo dando clic en el menú superior donde dice MENUS>>MUNU PRINCIPAL>>AÑADIR NUEVO ELEMENTO DE MENU.
Nos muestra una página como la siguiente en donde en el campo TIPO ELEMENTO MENU se debe dar clic en SELECCIONAR para que nos aparezca la siguiente ventana, donde se elegirá URL EMBEDIDA EN UN MARCO INCORPORADO.
18
Para lo cual nos mostrara una pagina como la siguiente en donde se llenara el campo TITULO Y EL DE URL con el URL de la pagina.
DAMOS CLIC EN GUARDAR Y CERRAR.
19
CONTACTO.
Para la sección CONTACTO se instalo un MÓDULOS llamado CONTACTO FOX, lo cual se realizo como anteriormente se había explicado sobre la instalación de el TEMPLATE pero solo cambia en lo último, nos vamos a EXTENCIONES>>GESTOR DE EXTENCIONES, damos clic en SELECCIONAR ARCHIVO, se abrirá la ventana elegimos el archivo ZIP y damos clic en SUBIR E INSTALAR. Después nos vamos a EXTENCIONES>>GESTOR DE MODULOS.
20
Al cual le damos clic para abrirlo y configurarlo a el estilo de cada quien. FAVICON.
Para la creación del FAVICON se debe de hacer en línea vamos a internet y ponemos en el explorador FAVICON EN LÍNEA elegimos la mejor pagina y seguimos los pasos que nos señalan se descarga, nos vamos al disco (C:) carpeta WAMP, carpeta WWW, carpeta TEMPLATES, carpeta en este caso JOMI y se pega la imagen con el nombre FAVICON. SLIDER.
21
Para la sección SLIDER se instalo un MÓDULOS llamado VINAORA SLICK SLIDESHOW, lo cual se realizo como anteriormente se había explicado sobre la instalación de el TEMPLATE pero solo cambia en lo último, nos vamos a EXTENCIONES>>GESTOR DE EXTENCIONES, damos clic en SELECCIONAR ARCHIVO, se abrirá la ventana elegimos el archivo ZIP y damos clic en SUBIR E INSTALAR. Después nos vamos a EXTENCIONES>>GESTOR DE MODULOS.
22
Al cual le damos clic para abrirlo y configurarlo a el estilo de cada quien. Para subirla imágenes debemos hacer una carpeta nueva con las imágenes y se debe entrar a el disco (C:), carpeta WAMP, carpeta WWW, carpeta IMAGES y ahí se pega la nueva carpeta con las imágenes del SLIDER.
VISITAS. TRADUCTOR.
23
Para el MODULO “TRADUCTOR Y CONTADOR DE VISITAS” se instalaron los MÓDULOS llamados TRADUCIR LA PAGINA Y VINAORA, lo cual se realizo como anteriormente se había explicado sobre la instalación de el TEMPLATE pero solo cambia en lo último, nos vamos a EXTENCIONES>>GESTOR DE EXTENCIONES, damos clic en SELECCIONAR ARCHIVO, se abrirá la ventana elegimos el archivo ZIP y damos clic en SUBIR E INSTALAR. Después nos vamos a EXTENCIONES>>GESTOR DE MODULOS.
24
A los cuales se les dio clic para abrirlos y configurarlos a el estilo de cada quien.
REDES SOCIALES.
El de REDES SOCIALES en casi todos los casos están instalados y en esta ocasión si estaba instalado. FORMULARIO DE ACCESO.
En este caso el TEMPLATE ya traía el FORMULARIO de ACCESO, solo se tuvo que colocar como PUBLICADO eso se hace entrando a el GESTOR DE MODULOS y buscar el MODULO, damos clic en el circulito donde dice ESTATUS.
25
VIDEO.
Para insertar el VIDEO, primero se busca el PLUG-IN “TINY-MCE” se le da clic en el estatus para publicar y se abre para configurarlo. Al abrirlo apareció una pantalla como la siguiente, en donde en la parte de OPCIONES BASICAS, aparece el campo FUNCIONALIDAD el cual es de opción múltiple para ellos se escoge la de “EXTENDIDA”.
26
Después se instalo un PLUG-IN llamado “ALL VIDEOS” e igualmente se da clic en el estatus para publicarlo. Enseguida se abre el ARTICULO donde se va a colocar el video y nos damos cuenta que las opciones del editor crecieron, damos clic en este botón saldrá una ventana así:
y nos
A la cual se le colocara la siguiente sintaxis: <center>{youtube} EZf3Xy2ifaU{/youtube}</center> EZf3Xy2ifaU= LA CLAVE DEL VIDEO. Damos clic en ACTUALIZAR. Y nos saldrá esa sintaxis en el articulo.
Damos clic en GUARDAR..
27