Tutorial joomla ipls by jimmy salazar

Tutorial De cómo crear una página similar a la del Instituto Politécnico La Salle en Joomla 2.5

Dixon Javier y Keyla Somarriba

Primero instalaremos Joomla 2.5 en un Web Hosting, en este tutorial utilizare el de www.000webhost.com, para esto necesitaremos el instalador de Joomla 2.5 y crear una cuenta en este servidor y también será necesario tener un correo electrónico para poder crear dicha cuenta (yo recomiendo el de gmail, ya que lo ocuparemos más adelante).

1. Creando la Cuenta de Gmail. (Este paso es por si no tienen correo). Para esto entramos a www.google.com, en la parte superior derecha de la pantalla hacer Clic en INICIAR SESION.

Ahora hacer clic en CREAR CUENTA, en la misma parte superior de la página.

Dixon Javier y Keyla Somarriba

Rellenar todos los campos requeridos con la información necesaria y al final dar clic al botón SIGUIENTE PASO – PASO SIGUIENTE -- Y Luego en Empezar.

1 2

Dixon Javier y Keyla Somarriba

Y por último al botón EMPEZAR y en la barra principal de google dar clic a GMAIL para entrar al correo.

2. Crear cuenta en www.000webhost.com. 000webhost es una página web que nos brinda la facilidad de poder subir nuestro sitioa la web, para ello tenemos que ser miembros y crear una cuenta en donde podremos administrar nuestro sitio. Primero tendremos que ir a la web www.000webhost.com, estando ahí le damos clic al botón sign up.

Dixon Javier y Keyla Somarriba

Nos mandara a una página en donde introduciremos el nombre de la página web, nuestro nombre, correo electrónico, la contraseña para poder entrar a nuestra cuenta y un pequeño Re-captcha para seguridad *(Importante- escribir el nombre del sitio en la parte del subdominio ya que es gratis, la contraseña tiene que tener letras y números).

Cuando tengamos listo todo le damos clic en CreateMyAccount. Si todo esta correcto les aparecerá la siguiente ventana:

Dixon Javier y Keyla Somarriba

Ahora tendremos que revisar nuestro correo para poder activar la cuenta que acabamos de abrir, para esto nos vamos a nuestro gmail y en la bandeja de entrada buscamos el siguiente mensaje:

Le damos clic para ver el mensaje de confirmaci贸n y en el mensaje nos aparece un enlace al cual tendremos que dar clic para activar la cuenta:

Dixon Javier y Keyla Somarriba

Nos mandara a la pรกgina de 000webhost donde solo daremos clic a Refresh status y nuestra cuenta estarรก activa.

Ahora podremos entrar al servidor dando clic en donde dice Cpanel:

Dixon Javier y Keyla Somarriba

Nos aparecerá la siguiente ventana en donde nos brindaran un variado menú de herramientas que ocuparemos luego, y en la parte derecha un recuadro donde nos brinda la información de la cuenta: dirección IP, nombre de usuario… etc. con lo cual podremos subir nuestra página de Joomla a la web.

Dixon Javier y Keyla Somarriba

3. Subir Joomla 2.5 al servidor. Con los datos proporcionados en la cuenta podremos subir todos los archivos para que Joomla trabaje en la web, para esto necesitaremos el paquete de Joomla 2.5, el programa Filezilla para subir los archivos vía ftp y los datos de la cuenta (dirección IP, nombre de usuario, contraseña). -

Primero crearemos una carpeta llamada Joomla 2.5, en la cual pondremos el archivo comprimido de Joomla, le damos clic derecho y en el menú desplegable dar clic en extrachere como aparece en la imagen, y esperamos a que se descomprima todo:

Dixon Javier y Keyla Somarriba

Ahora abrimos el programa Filezilla y en la parte superior tendremos que digitar los datos proporcionados por 000webhost.com, que son necesarios para poder conectarnos al servidor de esta manera:

Dixon Javier y Keyla Somarriba

Luego damos clic a Conexiรณn Rรกpida y ya estamos conectados al servidor:

Ahora buscamos en la parte izquierda de la ventana, el directorio donde estรก la carpeta donde hemos descomprimido el archivo de Joomla.zip y seleccionamos todos los archivos y los movemos dentro de la carpeta public_htmlen la parte derecha:

Dixon Javier y Keyla Somarriba

Si les aparece el siguiente mensaje, solo seleccione sobrescribir y active la casilla “Usar siempre esta acción”.

4. Instalación de Joomla en servidor. Entramos a nuestra cuenta de www.000webhost.com:

Dixon Javier y Keyla Somarriba

Nos mostrara los nombres de los subdominios que hayamos creado, en este caso solo se mostrara el del ejemplo que estamos realizando, y para iniciar la instalación solo daremos clic a la dirección de nuestro subdominio:

Al dar clic, nos mandara a la página donde subimos Joomla y por ende manda a cargar la carpeta de instalación, seleccionamos el idioma: Español (Formal Internacional) y le damos clic a

Dixon Javier y Keyla Somarriba

“Siguiente”:

Ahora nos mostrara las opciones que están activas y desactivadas en nuestro servidor y un poco de información necesaria, en esta parte solo daremos clic a “Siguiente”:

Ahora nos mostrara información acerca de la licencia del programa Joomla, la cual es gratuita, aquí

Dixon Javier y Keyla Somarriba

también solo le damos clic a “Siguiente”:

Ahora entramos a la parte de la Base de Datos, la cual tendremos que crear desde la cuenta en www.000webhost.com :

Dixon Javier y Keyla Somarriba

Nos vamos a la lista de subdominios y damos clic a “GotoCpanel”:

Nos mostrara un Menú de herramientas que nos proporciona el Webhosting, el que utilizaremos será el que lleva el nombre de MySQL:

Dixon Javier y Keyla Somarriba

Ahora nos pedirá que creemos la base de datos, para lo cual nos pide nombre de base de datos, nombre de usuario de base de datos y la contraseña y luego damos clic a “CreateDatabase”, estos datos son los que pondremos en la instalación de Joomla:

Esta es la información que necesitamos:

Dixon Javier y Keyla Somarriba

Ahora regresamos a la parte de la instalación de Joomla e ingresamos la información de la base de datos que hemos creado de esta manera (es necesario que pongamos los datos correctamente):

Ahora pasamos a la parte Ftp, pero aquí no pondremos nada y solo damos clic a “Siguiente”:

Dixon Javier y Keyla Somarriba

Ahora nos pide la configuración principal del Sitio Web, como lo es el nombre del sitio, nuestro correo, nombre de usuario y contraseña para poder entrar a la parte del administrador del sitio (backend), y le damos clic a “Siguiente” – (no tocar la parte de instalar datos de ejemplo para hacer una instalación limpia):

Ahora para finalizar la instalación, damos clic al botón donde dice “Eliminar la carpeta de

Dixon Javier y Keyla Somarriba

instalación” para que nos pueda dejar entrar a la área de administración y al Sitio:

Después de haber hecho eso, podremos entrar al sitio ó a la parte administrativa:

Dixon Javier y Keyla Somarriba

5. Parte administrativa del Sitio: Para poder entrar a la parte administrativa ingresamos los datos de usuario que ingresamos a la hora de la instalaci贸n de Joomla y entramos:

Dixon Javier y Keyla Somarriba

6. Instalación de complementos necesarios para iniciar a trabajar: Ahora que tenemos instalado Joomla en el servidor necesitaremos instalar una serie de paquetes para poder dejar similar la página, estos son: el editor de texto JCEditor, el paquete de Media Widgetkit y la plantilla Enterprise de Yootheme (la que utiliza el técnico en su sitio web). Procedemos a instalar el editor de texto JCEditor: Primero descargamos el paquete desde http://extensions.joomla.org/extensions/edition/editors/88 Y damos clic en Download

Nos mandara a la siguiente página, en la cual daremos clic donde dice Joomla 2.5:

Dixon Javier y Keyla Somarriba

Les Abrira la siguiente ventana en donde solo daran clic al siguiente boton que dice download y tendran el archivo .rar:

Lo buscan en la carpeta de descargas y luego crean una nueva carpeta llamada extensiones donde puedan encontrar facilmente todas sus extensiones y plantillas a la hora de instalarlas y pasan el archivo hacia esa carpeta:

Dixon Javier y Keyla Somarriba

Ahora desde el administrador nos iremos a la parte de Extensiones->Gestor de Extenciones:

Nos abrira la siguiente ventana en la cual le daremos clic a la opcion “Seleccionar Archivo”, nos abrira una ventana del explorador de windows en la cual buscaremos el archivo en la carpeta de extensiones antes creada y le damos clic en “abrir”:

Dixon Javier y Keyla Somarriba

Luego solo daremos clic en “Subir e Instalar”:

Ahora lo activaremos en Sitio -> Configuración Global:

Dixon Javier y Keyla Somarriba

Ahora en la parte que dice editor por defecto seleccionamos el que acabamos de instalar, el JCEditor y luego damos clic en Cerrar y Guardar:

Dixon Javier y Keyla Somarriba

Instalando Widgetkit: Para esto necesitaremos descargar el paquete de esta extensi贸n en la siguiente p谩gina, en la cual solo daremos clic al bot贸n verde que dice Download: http://www.mediafire.com/download/p10f7p3oj9gsglb/Widgetkit_1.2.1_J2.5_J1.5+joomlanew.co m.7z

Se van a la carpeta de descargas y pasan el archivo a la carpeta de extensiones que antes creamos lo descomprimen y seleccionamos el archivo llamado widgetkit_j25.zip que est谩 en la carpeta y repiten los procedimientos antes hechos con el JCEditor:

Dixon Javier y Keyla Somarriba

Ahora necesitamos saber cuál es la plantilla que utiliza el sitio web del IPLS, para eso entramos a su web desde el navegador de internet Chrome, luego damos clic derecho en la parte vacía del lado derecho o izquierdo y nos aparecerá el siguiente menú, y daremos clic en la opción inspeccionar elemento:

Nos aparecerá el HTML5 de la web, en donde buscaremos la plantilla con la que está hecha esta página:

Dixon Javier y Keyla Somarriba

Como vimos se llama yoo_enterprise, ahora tendremos que descargarla desde la siguiente web http://joonew.blogspot.com/2013/01/yt-enterprise-5512-yootheme-joomla-25.html y le damos clic en descargar:

Nos mandara a esta pagina donde esperamos 3 segundos y damos clic en saltar publicidad:

Dixon Javier y Keyla Somarriba

AutomĂĄticamente se iniciara la descarga:

Luego buscan en la carpeta de descargas y pasan el archivo a la carpeta de extensiones antes creada y la descomprimen ahĂ:

Dixon Javier y Keyla Somarriba

Dentro de la carpeta estĂĄn 2 archivos, el de la plantilla es el que tiene por nombre yoo_enterprisej25:

Para instalarla solo nos vamos a la parte administrativa de Joomla -->Gestor de extensionesď&#x192; ,

Dixon Javier y Keyla Somarriba

seleccionar archivo ď&#x192; y buscamos la plantilla y le damos abrir y la instalamos:

Subir e Instalar:

Dixon Javier y Keyla Somarriba

Ahora vamos al Gestor de Plantillas para activarla:

Dixon Javier y Keyla Somarriba

Ahora le damos clic en la la estrella para dejarla por defecto y luego damos clic en donde dice ver sitio para ver el cambio:

Como podemos observar la plantilla esta activa:

Dixon Javier y Keyla Somarriba

Para poder observar las posiciones nos vamos al Gestor de Plantillas  Plantillas  Opciones  Activar ver vista previa:

Dixon Javier y Keyla Somarriba

Ahora solo buscamos la plantilla y le damos clic en vista previa:

Dixon Javier y Keyla Somarriba

Ahora necesitamos estructurar el sitio de la manera más semejante a la original, esta es la Estructura que tendremos: Categorías

Inicio

La Salle

Carreras

Admisión 2013 Proyectos Hermanamiento

Enlaces

Menú-top

Dixon Javier y Keyla Somarriba

                                      

Artículos y Enlaces Congreso Educativo. Inauguración de centro de investigación. Estudiantes Obtienen Primer Lugar. Infraestructura Física y Tecnológica. Video IPLS. Que es la Salle? Misión. Visión. Breve Historia. Ideario Lasallista. Valores Lasallistas. Pastoral Educativa. Servicios Estudiantiles. Bachillerato Científico. Electricidad Industrial. Electrónica Industrial. Mecánica Industrial. Mecánica Automotriz. Operador de Computadoras. Programación. Diseño Gráfico. Contabilidad con Computación. Mantenimiento y Reparación de PC Admitidos 2013 Programa de Becas. Sistema Fotovoltaico. Parque Eólico. Hermanamiento HTL-IPLS Casa Generalicia. Distrito de Centroamérica. ULSA – León. IPLS – Managua. ULSAC – México. Cursos Libres. Galería. Contáctenos. Comentarios. Ubicación. Reconocimientos.

Empezaremos creando las Categorías, para eso nos vamos a Contenido  Gestor de Categorías:

Luego damos clic al botón Nuevo:

Dixon Javier y Keyla Somarriba

Creamos cada una de las categorías con los siguientes datos: Titulo de categoría, alias, estatus publicado y creado por súper usuario y luego damos guardar y cerrar:

Este sería el resultado de la primer categoria:

Dixon Javier y Keyla Somarriba

Al final deberán tener todas estas categorías creadas:

Como ya tenemos las categorías crearemos cada uno de los artículos, tomando la información de la página web del IPLS, pero antes deberán descargar todas las imágenes que estén en la web y

Dixon Javier y Keyla Somarriba

colocarlas en una carpeta la cual deberán subir al servidor de la página de ejemplo:

En fin todas las imágenes que estén en la web, incluyendo las que aparecen en cada uno de los artículos:

Creamos una carpeta llamada imágenes y ahí descargamos todas las imágenes dando clic derecho

Dixon Javier y Keyla Somarriba

sobre la imagen y luego donde dice “Guardar imagen como…” y la guardamos en la carpeta especificada:

Y para descargar los iconos del menú lo hacemos de la siguiente manera: damos clic derecho en un espacio vacíoy luego damos clic donde dice “Inspeccionar Elemento”:

Dixon Javier y Keyla Somarriba

Damos clic donde dice “Resources” y damos clic en la carpeta “images” aparecerán todas las imágenes que están en la página en la que estamos y buscamos los iconos del menú dando clic a cada archivo:

Dixon Javier y Keyla Somarriba

Seleccionamos la imagen y aparecerá en la parte central, damos clic derecho a la imagen y seleccionamos “open image in new tab” se abrirá una nueva pestaña y ahora si podremos descargar la imagen con clic derecho – “Guardar imagen como…”:

Hay que dar el clic derecho sobre el icono que aparece en la esquina superior izquierda de la

Dixon Javier y Keyla Somarriba

pantalla:

Y así con cada una de las imágenes hasta tenerlas todas en la carpeta y luego subirlas vía ftp:

Dixon Javier y Keyla Somarriba

Para subir la carpeta imágenes IPLSabriremos el programa Filezilla y colocamos los datos que nos dieron en 000webhost anteriormente para poder entrar al servidor y la enviamos a la carpeta Images en el servidor:

Ahora empezaremos a darle vida a la página de inicio creando los Módulos para colocar las imágenes que aparecen en ella y los módulos que están en la parte izquierda de la página, para eso iremos a ExtensionesGestor de Modulos y crearemos uno Nuevo, y seleccionamos PERSONALIZAR HTML:

Dixon Javier y Keyla Somarriba

Empezaremos por la imagen de Juan Bautista que est谩 en la esquina superior izquierda, le pondremos de nombre absolute, en la opci贸n MOSTRAR TITULO seleccionamos OCULTO y seleccionamos la posici贸n seguidamente llamada absolute como nos muestra la plantilla:

Dixon Javier y Keyla Somarriba

Ahora nos iremos al editor de texto y mandamos a cargar la imagen, luego Guardamos y cerramos:

Dixon Javier y Keyla Somarriba

Ahora vamos al sitio para ver el resultado:

Ese mismo procedimiento lo haremos con las imรกgenes restantes, guiรกndonos por las posiciones correspondientes:

Dixon Javier y Keyla Somarriba

Realizando los mismos pasos y teniendo los módulos creados, tendrán como resultado esto:

Ahora necesitamos asignar el menú principal y el estilo de la plantilla para que al poner los módulos siguientes sean del estilo de la página del técnico, para eso nos iremos al gestor de

Dixon Javier y Keyla Somarriba

plantillas y damos clic a la plantilla que tenemos activa:

En la siguiente ventana seleccionamos el estilo de color blue/orange y activamos la casilla donde dice inicio:

Dixon Javier y Keyla Somarriba

Guardamos y cerramos. Pero hay un problema, ya que hay un espacio que no debería haber en la parte superior y también el contenedor del logo, para eso tendremos que editar el código HTML de la plantilla para ajustarla a nuestras necesidades. Para esto nos iremos a Gestor de Plantillas:

Ahora damos clic en donde dice Yoo_enterprise:

Dixon Javier y Keyla Somarriba

Luego seleccionamos donde dice â&#x20AC;&#x153;Editar css/layout.cssâ&#x20AC;? para editar los valores #absolute ,#toolbar , #headerbar y #logo con los valores:

#absolute { position: absolute; z-index: 10; top: -9px; left: 0px; width: 100%; }

#toolbar { height: 28px; overflow: hidden; line-height: 25px; font-size: 10px; }

#headerbar { min-height: 110px; padding: 0px 0px 0px 300px; overflow: hidden; }

#logo { position: absolute; top: 16px; left: 15px; }

Dixon Javier y Keyla Somarriba

Pero para hacer esto r谩pido les dejo todo el c贸digo para que lo copien y lo peguen en esa parte sustituyendo todo el c贸digo que estaba antes por este: /* Copyright (C) YOOthemeGmbH, YOOthemeProprietary Use License (http://www.yootheme.com/license) */

body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 150%; color: #323232; }

.wrapper { margin: auto; } #header {

Dixon Javier y Keyla Somarriba

position: relative; z-index: 10; padding-bottom: 10px; clear: both; } #top { overflow: hidden; clear: both; } #middle { clear: both; min-height: 300px; } #bottom { overflow: hidden; clear: both; } #footer { position: relative; padding: 20px 0px 25px 0px; clear: both; text-align: center; font-size: 10px; }

#middle { width: 100%; overflow: hidden; position: relative; } #middle-expand { width: 200%; }

#main { position: relative; left: 50%; width: 50%; float: left; } #main-shift { position: relative; left: -100%;

Dixon Javier y Keyla Somarriba

overflow: hidden; }

#left { position: relative; left: -50%; float: left; overflow:hidden; }

#right {

float: left; overflow:hidden; }

div#maintop, div#contenttop { margin: 0px 0px 0px 0px; overflow: hidden; } div#contentbottom, div#mainbottom { margin: 0px 0px 0px 0px; overflow: hidden; }

#mainmiddle { width: 100%; overflow: hidden; position: relative; } #mainmiddle-expand { width: 200%; }

#content { position: relative; left: 50%; width: 50%; float: left;

Dixon Javier y Keyla Somarriba

} #content-shift { position: relative; left: -100%;

overflow: hidden; }

#contentleft { position: relative; left: -50%; float: left; overflow:hidden; }

#contentright {

float: left; overflow:hidden; }

.floatbox { overflow:hidden; } .float-left { float: left; overflow: hidden; } .float-right { float: right; overflow: hidden; } .width15 { width: 15%; } .width18 { width: 18%; } .width20 { width: 20%; } .width23 { width: 23%; } .width25 { width: 25%; } .width33 { width: 33%; } .width34 { width: 34%; } .width35 { width: 35%; } .width40 { width: 40%; } .width46 { width: 46%; } .width50 { width: 50%; } .width54 { width: 54%; } .width65 { width: 65%; } .width75 { width: 75%; } .width100 { width: 100%; }

body.yoopage { background: #F0F1F2; } #page-body {}

Dixon Javier y Keyla Somarriba

#absolute { position: absolute; z-index: 10; top: -9px; left: 0px; width: 100%; }

#breadcrumbs { padding-bottom: 10px; background: url(../images/breadcrumbs_bg.png) 0 0 no-repeat; overflow: hidden; clear: both; font-size: 10px; line-height: 22px; text-shadow: 0 1px 0 rgba(255,255,255,1); } div.breadcrumbs-1 { padding: 0px 10px 0px 10px; background: url(../images/breadcrumbs_bg.png) 100% -60px no-repeat; } div.breadcrumbs-2 { padding: 14px 5px 14px 5px; height: 22px; overflow: hidden; background: url(../images/breadcrumbs_bg.png) 0 -120px repeat-x; } #breadcrumbs a, #breadcrumbs span { display: block; float: left; } #breadcrumbs a, #breadcrumbs span.separator { color: #646464; } #breadcrumbs a:hover, #breadcrumbs span.current { color: #ffffff; text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.5); text-decoration: none; } #breadcrumbs .box-1 { margin-right: 10px; background: url(../images/breadcrumbs.png) 0 0 no-repeat; }

Dixon Javier y Keyla Somarriba

#breadcrumbs .box-2 { padding: 0px 10px 0px 15px; background: url(../images/breadcrumbs.png) 100% -32px no-repeat; } #breadcrumbs .box-3 { height: 22px; padding-left: 5px; background: url(../images/breadcrumbs.png) 0 -64px repeat-x; } #breadcrumbs #breadcrumbs #breadcrumbs #breadcrumbs #breadcrumbs #breadcrumbs

a:hover { background-position: 0 -96px; } span.current { background-position: 0 -192px; } a:hover .box-2, span.current .box-2 { background-position: 100% -128px; } a:hover .box-3, span.current .box-3 { background-position: 0 -160px; }

#date { margin: 0px 5px 0px 0px; float: right; }

#toolbar { height: 35px; overflow: hidden; line-height: 25px; font-size: 10px; } #headerbar { min-height: 110px; padding: 0px 0px 0px 300px; overflow: hidden; }

#logo { position: absolute; top: 29px; left: 15px; } #menu { position: absolute; bottom: 15px; left: 7px; z-index: 11; }

Dixon Javier y Keyla Somarriba

#search { position: absolute; bottom: 27px; right: 15px; z-index: 12; } #banner { position: absolute; top: 15px; right: -15px; width: 0px; z-index: 3; }

#footer a.anchor { position: absolute; right: 3px; top: 2px; width: 19px; height: 19px; background: url(../images/footer_anchor.png) 0 0 no-repeat; display: block; text-decoration: none; } #footer a.anchor:hover { background-position: 0 -30px; }

div.header-1 { background: url(../images/header_edges.png) 0 0 repeat-y; } div.header-2 { padding: 0px 5px 0px 5px; background: url(../images/header_edges.png) 100% 0 repeat-y; } div.header-3 { padding: 5px 10px 10px 10px; overflow: hidden; background: #ffffff; } div.header-b1 {

background: url(../images/header_corners.png) 0 0 no-repeat; }

div.header-b2 { padding: 0px 7px 0px 7px; background: url(../images/header_corners.png) 100% -60px no-repeat; } div.header-b3 { height: 50px;

Dixon Javier y Keyla Somarriba

overflow: hidden; background: url(../images/header_corners.png) 0 -120px repeat-x; }

div.wrapper-t1 { background: url(../images/module_box_corners.png) 0 0 norepeat; } div.wrapper-t2 { padding: 0px 7px 0px 7px; background: url(../images/module_box_corners.png) 100% -17px no-repeat; } div.wrapper-t3 { height: 7px; background: url(../images/module_box_corners.png) 0 -34px repeat-x; overflow: hidden; } div.wrapper-1 { background: url(../images/module_box_edges.png) 0 0 repeat-y; } div.wrapper-2 { padding: 0px 5px 0px 5px; background: url(../images/module_box_edges.png) 100% 0 repeat-y; } div.wrapper-3 { padding: 10px; background: #ffffff; overflow: hidden; } div.wrapper-b1 { background: url(../images/module_box_corners.png) 0 -51px norepeat; } div.wrapper-b2 { padding: 0px 7px 0px 7px; background: url(../images/module_box_corners.png) 100% -68px no-repeat; } div.wrapper-b3 { height: 7px; background: url(../images/module_box_corners.png) 0 -85px repeat-x; overflow: hidden; }

Guardamos los cambios

Dixon Javier y Keyla Somarriba

Y tendremos esto:

Pero tendremos que configurar el menú principal para que funcione bien, para esta parte nos iremos a Gestor de Menú y seleccionamos el menú principal:

Dixon Javier y Keyla Somarriba

Ahora activamos las opciones: No mostrar título, Mostrar elementos secundarios “SI”, La posición “Menú”:

Dixon Javier y Keyla Somarriba

Ahora damos clic en opciones avanzadas y colocamos los siguientes valores: header-b3 / menumenu-dropdown y guardamos:

Y vemos el resultado:

Dixon Javier y Keyla Somarriba

Ahora crearemos la galería de imágenes con el widgetkit, pero antes necesitamos tener las imágenes, para esto necesitamos usar el capturado de pantalla con el botón “imprpant”

Cuando las tengamos todas la subimos al servidor dentro de la carpeta images, dentro de una

Dixon Javier y Keyla Somarriba

carpeta llamada slider:

Ahora entramos a Componentes ď&#x192; Widgetkit, seleccionamos Gallery y damos clic al botĂłn

Dixon Javier y Keyla Somarriba

createfirstgallery:

Ahora ingresaremos el nombre, el tipo de slider y el tama単o y seleccionamos la carpeta slider que

Dixon Javier y Keyla Somarriba

subimos antes v铆a ftp dando clic donde dice AddtoPhotoGallery y luego bajamos y editamos el efecto y desactivamos los botones de navegaci贸n y luego guardamos :

Dixon Javier y Keyla Somarriba

Ahora nos vamos a gestor de m贸dulos y creamos uno de Widgetkit:

Damos clic donde dice nuevo y seleccionamos Widgetkit:

Ahora ingresamos el nombre del modulo, lo ponemos oculto, designamos la posici贸n,

Dixon Javier y Keyla Somarriba

seleccionamos el widget y lo aplicamos solo para la página de inicio “Solo paginas seleccionadas” y luego guardamos:

El resultado es este:

Dixon Javier y Keyla Somarriba

Ahora crearemos los enlaces de twitter y facebook que est谩n en la parte superior derecha:

Para eso nos vamos al Gestor de M贸dulos y creamos un nuevo Personalizar HTML:

Dixon Javier y Keyla Somarriba

Ahora ingresamos los siguientes datos:

Dixon Javier y Keyla Somarriba

Y en la parte del editor de texto mandamos a cargar las imรกgenes y las enlazamos:

Dixon Javier y Keyla Somarriba

Guardamos y tendremos esto:

Dixon Javier y Keyla Somarriba

Ahora crearemos los módulos que están en la parte izquierda, comenzamos con la galería de imágenes, para esto necesitaremos descargar todas las imágenes y crear un álbum desde nuestro correo de gmail, para esto nos posicionaremos sobre la galería de imágenes que está en la página principal y damos clic:

Nos mandara a la siguiente página, en donde descargaremos el álbum completo dando clic al siguiente icono y seleccionamos descargar álbum:

Dixon Javier y Keyla Somarriba

Esperamos que se guarde el รกlbum, y luego creamos el nuestro desde gmail:

Cuando este descargado el รกlbum, lo descomprimimos y luego creamos nuestro propio รกlbum en gmail, para luego enlazarlo a la pagina:

Dixon Javier y Keyla Somarriba

Ahora cargamos las imágenes desde “Álbumes”, dando clic donde dice subir fotos:

Damos clic donde dice “Haz clic aquí para abrir el explorador de Windows” y buscamos las imágenes y las seleccionamos todas y damos clic al botón “abrir” y luego a “Listo”:

Dixon Javier y Keyla Somarriba

En el buscador de Google, buscamos la página para que nos aparezca los álbumes de Picassa, si nos re-direcciona a los álbumes de gmail, damos clic donde dice “volver a álbum de Picassa”:

Dixon Javier y Keyla Somarriba

Entramos al รกlbum que queremos mostrar dando clic sobre el:

Dixon Javier y Keyla Somarriba

Ahora damos clic donde dice: “Enlazar este álbum” y luego donde dice “Incrustar Proyección de Diapositivas”:

Ahora copiamos el código proporcionado:

Dixon Javier y Keyla Somarriba

Ahora desde Joomla crearemos un nuevo módulo tipo: “Personalizar HTML”, le damos la posición left y pegamos el código:

Para pegar el código daremos clic donde está el icono de editar HTML, pegamos y luego volvemos a dar clic sobre el icono para que conserve el cambio y luego guardamos:

Dixon Javier y Keyla Somarriba

En esta parte podremos editar el ancho y el alto buscando el With y el Height:

Dixon Javier y Keyla Somarriba

Por ultimo definimos que solo queremos que aparezca en la pรกgina principal:

Dixon Javier y Keyla Somarriba

Ahora guardamos y veremos el resultado:

Ahora crearemos el calendario de Actividades, tambiĂŠn desde gmail, para eso damos clic desde

Dixon Javier y Keyla Somarriba

nuestro correo donde dice Calendar:

Nos mandara a la siguiente página, en la cual daremos clic donde dice “Mis calendarios”, luego clic en el icono desplegable del calendario y seleccionamos “Configuración de Calendario”:

Dixon Javier y Keyla Somarriba

Ahora daremos clic donde dice “Personaliza el color, el tamaño y otras opciones”:

Insertamos los siguientes valores y copiamos el código, para luego crear un módulo “Personalizar HTML” y pegar el código:

Dixon Javier y Keyla Somarriba

Utilizamos las mismas configuraciones del módulo anterior de galería de imágenes de Picassa, para crear un sub índice en el titulo solo agregar las dos barras horizontales “||”:

Pero a la hora de pegar el codigo desactivamos el editor dando clic donde dice “Toggle Editor” y creamos la etiqueta “<p></p>”, y pegamos el codigo dentro de ella:

Dixon Javier y Keyla Somarriba

Y tendremos el calendario:

Dixon Javier y Keyla Somarriba

Ahora insertaremos el botón “me gusta de Facebook “en el módulo “Hazte Fanz” (para esto la web tendrá que estar en línea, si están trabajando remoto, no cargara…); Primero entraremos a la web de plugins sociales de Facebook:

Al entrar a la web, seleccionamos el de “LIKE BUTTON”:

Dixon Javier y Keyla Somarriba

Bajamos hasta la parte de configuración y tendremos que escribir la URL de nuestra web online y luego le damos los siguientes valores:

Luego le damos clic al botón “GetCode”:

Dixon Javier y Keyla Somarriba

Ahora necesitamos insertar el c贸digo javascript dentro del html, justamente despu茅s de abrir la etiqueta BODY:

Para eso entraremos a nuestra cuenta de 000webhost y entrar a la opci贸n File Manager:

Dixon Javier y Keyla Somarriba

Insertan la contraseña…

Ahora entramos a la siguiente árbol de directorio:/public_html/templates/yoo_enterprise/layouts y le damos clic a edit del Template.php:

Dixon Javier y Keyla Somarriba

100

Ahora copiamos el c贸digo de Facebook:

Y lo pegamos dentro del BODY y damos clic al icono guardar:

Dixon Javier y Keyla Somarriba

101

Ahora podremos crear un nuevo modulo â&#x20AC;&#x153;Personalizar HTMLâ&#x20AC;? e insertar el segundo codigo que nos han dado:

Dixon Javier y Keyla Somarriba

102

麓 Copiamos el c贸digo:

Abrimos el editor de HTML y pegamos el c贸digo y damos clic en el icono de nuevo:

Dixon Javier y Keyla Somarriba

103

Designamos el modulo solo para la pรกgina principal y guardamos:

Dixon Javier y Keyla Somarriba

104

El resultado es este:

Ahora crearemos una encuesta, para lo que necesitaremos instalar el componente Jvotesystem desde el gestor de extensiones:

Dixon Javier y Keyla Somarriba

105

Ahora crearemos la encuesta, para eso nos iremos a Componentes y ahora nos deber谩 aparecer la opci贸n JvoteSystem, damos clic en ella:

Dixon Javier y Keyla Somarriba

106

Ahora damos clic en “New Category”:

Y solo le ponemos el nombre y es estatus público:

Dixon Javier y Keyla Somarriba

107

Ahora damos clic a Vista Global y luego al botón “Polls”:

Dixon Javier y Keyla Somarriba

108

Escribimos el Titulo, pregunta, categoría y respuestas a la pregunta, luego guardamos y cerramos:

Ahora iremos al gestor de módulos y activaremos el de JvoteSystem y le daremos la posición “left”:

Dixon Javier y Keyla Somarriba

109

Ahora le pondremos los siguientes datos:

Guardamos, cerramos y tendremos esta encuesta, no es la misma pero funciona de la misma manera:

Dixon Javier y Keyla Somarriba

110

Para la siguiente galerĂa seguimos los pasos de la creada anteriormente:

Dixon Javier y Keyla Somarriba

111

Dixon Javier y Keyla Somarriba

112

Dixon Javier y Keyla Somarriba

113

Dixon Javier y Keyla Somarriba

114

Dixon Javier y Keyla Somarriba

115

Dixon Javier y Keyla Somarriba

116

Ahora crearemos el Modulo que contiene el pie de página, o la información del Instituto, para esto crearemos un nuevo módulo “Personalizar HTML” y solo le daremos la posición y le ingresamos la información en el editor de texto y luego la designamos en todas las páginas:

Dixon Javier y Keyla Somarriba

117

Ahora guardamos y vemos el resultado:

Dixon Javier y Keyla Somarriba

118

Ahora crearemos cada uno de los ítems del menú de la parte superior:

Para eso iremos al gestor de Menús y crearemos uno nuevo llamado Menutop:

Dixon Javier y Keyla Somarriba

119

Ahora que esta creado le daremos las configuraciones correspondientes, para esto le daremos clic donde dice “Añadir modulo para este tipo de menú”:

Dixon Javier y Keyla Somarriba

120

Le asignamos los valore y luego guardamos:

Ahora tendremos que crear cada ítem de menú, el primero es “Cursos Libres” el cual es un archivo Pdf, para crearlo debemos descargar el archivo Pdf y guardarlo en la carpeta “Images” dentro del

Dixon Javier y Keyla Somarriba

121

servidor para luego crear un artĂculo y enlazar el archivo Pdf (para ahorrar tiempo descarguen todos los Pdf de la web y sĂşbanlos de una vez en la carpeta pdf):

Ahora abrimos el programa Filezilla y entramos al servidor con los datos de 000webhost y subimos la carpeta Pdf dentro de la carpeta Images:

Dixon Javier y Keyla Somarriba

122

Ahora debería aparecer la carpeta Pdf y los archivos:

Ahora crearemos un artículo con la categoría “menutop” y cargamos el Pdf con el siguiente código HTML <p><embed src="images/pdf/CursosEnero2013.pdf" type="application/pdf" width="940px" height="600px"></embed>&nbsp;</p>

Dixon Javier y Keyla Somarriba

123

Ahora crearemos el ítem de menú “Cursos Libres”desde el gestor de Menú y entramos al menútop, dando clic sobre el nombre:

Ahora daremos clic en “Nuevo”:

Dixon Javier y Keyla Somarriba

124

Seleccionamos el tipo de elemento: Articulo Simple, Titulo: Cursos Libres, seleccionamos el menĂş y en el lado derecho seleccionamos el artĂculo:

Guardamos y tendremos esto:

Dixon Javier y Keyla Somarriba

125

Le damos clic y nos mostrara el Pdf:

Dixon Javier y Keyla Somarriba

126

Ahora crearemos el de Galería, este solo es un enlace a la galería de imágenes de google, así que entramos al gestor de menú y creamos un nuevo ítem al menú top, ahora seleccionamos el tipo “URL Externa” e insertamos la url de la galería:

Dixon Javier y Keyla Somarriba

127

Guardamos y tendremos el enlace a la galerĂa de imĂĄgenes de google:

Dixon Javier y Keyla Somarriba

128

Ahora crearemos el ítem de “Contáctenos”:

Para eso nos iremos a Componentes  Contactos  Categorías:

Dixon Javier y Keyla Somarriba

129

Damos clic en “Nuevo” y le pondremos el Titulo y creado por “Superuser” y guardamos:

Dixon Javier y Keyla Somarriba

130

Ahora damos clic donde dice “Contactos”:

Damos clic en el botón nuevo y empezamos a configurar y rellenar los datos de contacto y luego guardamos:

Dixon Javier y Keyla Somarriba

131

Ahora nos iremos al gestor de menú y crearemos un nuevo ítem de menú:

Al configurar el ítem de menú seleccionamos el tipo “Contacto Unico”:

Dixon Javier y Keyla Somarriba

132

Luego solo le pondremos el tĂtulo y seleccionamos el contacto y guardamos:

Dixon Javier y Keyla Somarriba

133

Tendremos el contacto listo, solo nos faltaría la imagen que está por encima de la información:

Para insertar la imagen necesitamos crear un módulo “Personalizar HTML” y solo cargamos la imagen en el editor de texto y definimos que solo queremos que aparezca en el formulario de contacto, nos vamos a Gestor de Módulos y creamos el modulo:

Dixon Javier y Keyla Somarriba

134

Dixon Javier y Keyla Somarriba

135

Ahora guardamos y tendremos el módulo de la imagen de contacto:

Ahora crearemos el Ítem que contiene los “Comentarios” para eso entramos a la web de social plugins de facebook, ahí seleccionamos la opción “comments” y luego ingresamos la dirección de la web en las opciones de configuración:

Dixon Javier y Keyla Somarriba

136

Introducimos la url y luego damos clic en “Get Code”:

Dixon Javier y Keyla Somarriba

137

Anteriormente habíamos insertado el primer código en el html de la web al insertar el plugin del botón like, ahora solo copiaremos el segundo código y creamos un artículo y lo pegamos en forma de código HTML:

Dixon Javier y Keyla Somarriba

138

Nos vamos al gestor de artículos y lo creamos en la categoría topmenu e insertamos el código:

Guardamos y ahora creamos el ítem de menú “Articulo simple” y cargamos el artículo comentarios:

Dixon Javier y Keyla Somarriba

139

Le pondremos las configuraciones y guardamos:

Ahora vemos el resultado:

Dixon Javier y Keyla Somarriba

140

Ahora crearemos el ítem de menú de ubicación, para eso entramos primero al widgetkit que está en componentes:

Ahora seleccionamos la opción “Map” y damos clic donde dice “Create your first Map”:

Dixon Javier y Keyla Somarriba

141

Ahora le pondremos el título, nombre y en la parte derecha le pondremos 900 de alto, luego damos clic donde dice set location para buscar la posición:

Al entrar al set location pondremos en el buscador “Instituto Politécnico La Salle” y nos saldrá una

Dixon Javier y Keyla Somarriba

142

ubicación debajo del buscador al cual daremos clic:

Ahora nos mostrara la ubicación y damos clic en “set location”:

Dixon Javier y Keyla Somarriba

143

Ahora damos clic en “Save”

Ahora nos iremos al gestor de articulos y creamos uno que se llamara Ubicación y en el Editor de texto Solo Pondremos un punto “.”:

Dixon Javier y Keyla Somarriba

144

Ahora crearemos el item de menu “Articulo Simple” y cargamos el articulos ubicación:

Y ahora nos iremos desde ahí al gestor de modulos y creamos un nuevo modulo Widgetkit:

Dixon Javier y Keyla Somarriba

145

En esa parte le pondremos el Titulo al modulo, que estara oculto, seleccionamos el widget que en este caso es el mapa, y en la parte inferior seleccionamos solo la pagina que queremos que salga:

Dixon Javier y Keyla Somarriba

146

Y tendremos esto:

Ahora crearemos el item de menu de “Reconocimientos”, para esto iremos al gestor de Articulos, creamos un articulo llamado Reconocimientos y en la parte de editor de texto cargamos o insertamos la imagen que aparece en el articulo, guardamos y luego solo creamos un item de menu “Articulo Simple” guardamos y listo:

Dixon Javier y Keyla Somarriba

147

Resultado:

Dixon Javier y Keyla Somarriba

148

Vamos a estructurar el ítem de nuestro menú principal, para ello comenzaremos a crear las categorías que contendrá. Nos vamos al gestor de categorías y le damos click allí

Ahora procederemos a crear nuestras categorías. Crearemos siete categorías:

Dixon Javier y Keyla Somarriba

149

-Inicio -Perfil -Noticias -Carreras -Admision -Proyectos -Hermanamiento 1-Comenzaremos por la primera categoría a la que llamaremos inicio. Seleccionamos la opción nuevo.

2-Luego nos aparecerá una ventana así como la siguiente imagen y allí la rellenaremos con los siguientes datos, luego damos guardar y cerrar.

Dixon Javier y Keyla Somarriba

150

Nota: (Estos pasos lo haremos para todas las categorĂas)

Dixon Javier y Keyla Somarriba

151

Ahora crearemos nuestros artículos, nos vamos al gestor de artículos:

En los artículos va toda la información que conllevará cada parte, toda esta información la obtendremos de la página original (www.ipls-lasalle.org) aquí les dejamos las capturas de imágenes para que se guíen y vean cómo y con qué información rellenar los campos, hay que tener claro que para poder realizar los artículos primero tienen que realizar las categorías, hay que tener en cuenta que el “Alias” es algo opcional es un campo no tan necesario ;)

Dixon Javier y Keyla Somarriba

152

Dixon Javier y Keyla Somarriba

153

{youtube}Sp4lx4L3r0w{/youtube}

Dixon Javier y Keyla Somarriba

154

Dixon Javier y Keyla Somarriba

155

Dixon Javier y Keyla Somarriba

156

Dixon Javier y Keyla Somarriba

157

Dixon Javier y Keyla Somarriba

158

Dixon Javier y Keyla Somarriba

159

Dixon Javier y Keyla Somarriba

160

Dixon Javier y Keyla Somarriba

161

Dixon Javier y Keyla Somarriba

162

Dixon Javier y Keyla Somarriba

163

Dixon Javier y Keyla Somarriba

164

Dixon Javier y Keyla Somarriba

165

Dixon Javier y Keyla Somarriba

166

Dixon Javier y Keyla Somarriba

167

Dixon Javier y Keyla Somarriba

168

Así nos aparecerá nuestro gestor de artículos luego de haber creado todos los artículos, hay que tener en cuenta que todos los artículos su estatus deben de ser púbico, si en dado caso el estatus aparece de con un icono rojo, significa que esta des-publicado, es decir no se hará visible, para hacerlo visible hay que seleccionar el artículo y luego dar click en publicar.

Ahora personalizaremos nuestro gestor de menús:

Dixon Javier y Keyla Somarriba

169

Lo que haremos es crear nuestros sub-menĂşs, que finalizado nos quedarĂĄ como se ve en la captura de pantalla.

Primero comenzaremos con el Inicio:

Dixon Javier y Keyla Somarriba

170

Luego crearemos el siguiente elemento de menú, procederemos con “La Salle”:

Dixon Javier y Keyla Somarriba

171

Este menú tendrá varios sub-menús y se visualizará de esta forma:

Estos serán los sub-menús:

Dixon Javier y Keyla Somarriba

172

Dixon Javier y Keyla Somarriba

173

Dixon Javier y Keyla Somarriba

174

Dixon Javier y Keyla Somarriba

175

Dixon Javier y Keyla Somarriba

176

Dixon Javier y Keyla Somarriba

177

Lo mismo haremos para el siguiente submenĂş de las carreras:

Comenzaremos por el principal que en este caso serĂĄ llamado Carreras:

Dixon Javier y Keyla Somarriba

178

Luego seguiremos a crear los sub-menús, realizaremos el mismo procedimiento que en los anteriores solo que hay que tener en cuenta que los sub-menús su “Elemento Padre” ya no será “Elemento Raíz del Menú” sino que será el elemento dentro del que estarán ubicados en este caso los sub-menús del menú carrera, pertenecerán al “Elemento Padre”-Carreras.

Estos procedimientos se realizaran para todos los elementos del menú y para los sub-menús. Nota:(Los iconos que aparecen en los sub-menús, se introducirán desde tipos de opciones para los

Dixon Javier y Keyla Somarriba

179

enlaces)

Esperamos que este tutorial les haiga sido de provecho: Para cualquier consulta sobre el sitio, puedes visitarnos a: -goodfeeling028@gmail.com -keyla9063@gmail.com

Dixon Javier y Keyla Somarriba

180