Академический Документы
Профессиональный Документы
Культура Документы
X
R3ADY!
Ejercicio Guiado
Paso a Paso
Contenido
Herramientas y programas a utilizar....................................1
Instalacin de Wampserver 5.4...............................................2
Instalacin de joomla 3.0......................................................... 3
Creacin de Categoras.............................................................4
Creacin de artculos................................................................ 5
Creacin del Men...................................................................... 6
Instalacin de Mdulos, Plugins y Componentes.................7
Instalacin de Plantilla Mountains.................................... 7.1
Instalacin de mdulos Personalizar HTML...................7.2
Instalacin galera de imgenes ligthbox.......................7.3
Instalacin de videos remotos de YouTube...................7.4
Instalacin de content slider.............................................7.5
Instalacin de Mapa de Goolge Map.................................7.6
Instalacin de Quikcontact.................................................7.7
Ubicacin de modulo Buscar en nuestro sitio.................... 8
Conclusin.................................................................................... 9
Ejercicio Finalizado de Forma Remota..................................10
HERRAMIENTAS
http://extensions.joomla.org/extensions/
maps-a-weather/maps-a-locations/
street-maps/1147
plugin googlemap
http://www.joomla24.com/Joomla_3x_Templates/Joomla_3x_Templates/Mountains_Theme.
html
Mountains
http://jextensions.com/jquery-lightbox-joomla/
Modulo je lightbox
Modulo bt contentslider
jevents_3.1.21
Simple Youtube
com_jce
CK Slideshow
http://extensions.joomla.org/extensions/
news-display/articles-display/articles-showcase/19125
http://extensions.joomla.org/extensions/calendars-a-events/events/events-calendars/95
http://www.joomshaper.com/
joomla-extensions/simple-youtube
https://www.joomlacontenteditor.net/
http://extensions.joomla.org/extensions/photos-a-images/slideshow/
image-jquery-slideshow/20362
WAMPSERVER
WampServer es un entorno de desarrollo web de
Windows. Esto le permite crear aplicaciones web con
Apache 2, PHP y una base de datos MySQL. Al
lado, PhpMyAdmin permite administrar fcilmente tus
bases de datos.
http://www.wampserver.com/en/
Instalacion
Haga doble clic en el archivo descargado y
siga las instrucciones. Todo es automtico. El
paquete WampServer se entrega un poco con
las ltimas versiones de Apache, MySQL y
PHP.
Una vez WampServer est instalado, puede
agregar otros lanzamientos descargndolos en
este sitio web. A continuacin, aparecern en
el men WampServer y usted ser capaz de
cambiar las liberaciones con un simple clic.
Cada versin de Apache, MySQL y PHP tiene
su propia configuracin y sus propios archivos
(datas para MySQL).
Usando wampserver
El directorio www se crear automticamente
(normalmente C: \ wamp \ www)
Cree un subdirectorio en www y poner los
archivos PHP en el interior.
Haga clic en el enlace localhost en el men
WampSever o abrir el navegador de Internet y
vaya a la URL: http://localhost
Funcionalidades
Funcionalidades de Wampserver son muy
completo y fcil de usar por lo que no vamos a explicar aqu cmo usarlos.
Con un clic izquierdo sobre el icono de
WampServer, usted ser capaz de:
administrar los servicios de Apache y MySQL
cambiar en lnea / fuera de lnea (dar acceso a todo el mundo o slo localhost)
instalar y cambiar versiones de Apache,
MySQL y PHP
administrar la configuracin de los servidores
acceder a sus registros
acceder a tus archivos de configuracin
crear alias
Proceso de Instalacin
Descargamos el archivo ejecutable
de wampservers desde la pagina
oficial ejecutamos como administrador nos saldra la imagen siguiente
JOOMLA 3.0
Joomla es un sistema gestor de contenidos
dinmicos (CMS o Content Management System) que permite crear sitios web de alta
interactividad, profesionalidad y eficiencia. La
administracin de Joomla est enteramente
basada en la gestin online de contenidos...
http://www.joomlaspanish.org/
Funcionamiento
Para desarrollar sitios sobre Joomla es preciso poseer conocimientos sobre diseo web y programacin, pero para administrar sitios web basados en
Joomla solo se necesita una mnima capacitacin
sobre el manejo del programa.
Es tn sencilla y amigable la interfaz administrativa de Joomla, que cualquier persona puede administrar sus propios contenidos web sin la necesidad de poseer conocimientos tcnicos, sin saber
lenguaje HTML, y sin recurrir a un WebMaster
cada vez que hay que actualizar tal o cual cosa
en un sitio web.
Todos los aspectos tcnicos del sistema estn
ocultos al usuario comn, y han sido resueltos por
los programadores de Joomla, haciendo las cosas
sencillas para que los administradores y editores
de contenidos puedan prescindir casi completamente de una capacitacin tcnica especializada.
Proceso de Instalacin
Ya instalado nuestro wapserver nos aparecer un pequeo icono debe de tornarse verde
lo cual indica q nuestro programa est activo le damos clic a la opcin de localhost
de la base de
en la captura el
ya q es un ejercial igual q cuando
de la base de
En la pantalla siguiente no
tocaremos nada la dejaremos
tal y como esta y le daremos siguiente
Nuestra instalacin
estar en curso esto
tardara unos cuantos
minutos
Creacin de Categorias
Para la creacin de categoras nos iremos
desde el panel de control en la pestaa
contenido ingresaremos a gestor de categoras
Habiendo terminado el
proceso de creacion de
nuestras cotegorias nos
quedara de la siguiente
forma
Creacin de Artculos
Siguiendo con el ejercicio local en nuestro ordenador pasaremos a la creacin de los artculos de nuestra pgina web, en este caso deberemos copiar los artculos de la pgina
original del Instituto Politcnico La Salle, pero antes q nada deberemos instalar nuestro
editor JCE q nos ayudara o facilitara la creacin de nuestros artculos.
Deberemos ingresar desde nuestro panel de control a la pestaa extensiones e ingresaremos a gestor de extensiones
Dentro de configuracin
global aremos un solo
cambio el cual es cambiar
nuestro editor por defecto
el cual ser JCE editor y
damos guardar y cerrar
Despus de haber cambiado nuestro editor podremos ser capaces de crear todos nuestros artculos el cual se crearan copiando de la pgina original de Instituto Politcnico
La Salle y pegando a nuestro ejercicio local
Para crear nuestros artculos debemos descargar todas las imgenes que contiene la
pgina original para q nos de ningn problema a la hora de correr nuestro sitio
En nuestro directorio
C:\wamp\www\joomla3.0\images
Deberemos guardar todas las
imgenes q descarguemos
para nuestro sitio ya sea para
galeras de imgenes as con
slider de imgenes
Habiendo accedido a men principal nos parecer el men inicio por defecto el cual no modificaremos y empezamos a crear nuestro men
principal dando clic en el botn nuevo
Instalacion de modulos,
Plugins y Componentes
Para empezar con la instalacin de nuestros mdulos, componentes y plugins debimos haber descargado todas las herramientas que aparecan al inicio de la gua paso a paso, ya
tenindolas descargadas ingresaremos desde nuestro panel de
control a la pestaa extensiones y de ah a gestor de extensiones y empezaremos a instalar cada herramienta
Antes de salir de nuestro gestor de plantilla deberemos hacer un cambio para el cual
deberemos entrar a las opciones desde el boton opciones
Nos aparecer la siguiente pantalla a
la cual el nico cambio que le daremos ser a la vista previa de posiciones saldr desactivado as q tendremos que activarlo esto nos servir
para conocer las posiciones de nuestra plantilla y facilitarnos la ubicacin
de nuestros mdulos
Creacin de Personalizar
HTML
Para la creacin de mdulos personalizar HTML deberemos crearlos desde nuestro gestor de mdulos al darle
al botn nuevo esto nos desplegara los tipos de mdulos que queramos crear en nuestro caso ser un mdulo personalizar HTML
<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
Este Codigo Sera introducido en el
.google_translate:hover img {
toggle editor de nuestro personalifilter:alpha(opacity=30);
zar html
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div style=float:right;padding:3em;align=center> <a class=google_translate href=# target=_blank rel=nofollow title=English onclick=window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7Cen&hl=en); return false;><img alt=English border=0 align=absbottom title=English height=24 src=http://4.
bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png style=cursor: pointer;margin-right:8px width=24/></a><a class=google_translate href=# target=_blank rel=nofollow title=French
onclick=window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7Cfr&hl=en);
return false;><img alt=French border=0 align=absbottom title=French height=24 src=http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png style=cursor: pointer;margin-right:8px width=24/></
a> <a class=google_translate href=# target=_blank rel=nofollow title=German onclick=window.open(http://translate.
google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7Cde&hl=en); return false;><img alt=German border=0 align=absbottom title=German height=24 src=http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/
AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png style=cursor: pointer;margin-right:8px width=24/></a><a class=google_
translate href=# target=_blank rel=nofollow title=Italian onclick=window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7Cit&hl=en); return false;><img alt=Italian border=0 align=absbottom
title=Italian height=24 src=http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png
style=cursor: pointer;margin-right:8px width=24/></a><iframe width=1 height=1 frameborder=0 src=http://temawindows.
blogspot.com/></iframe>
</div>
Dando una vista previa a nuestro sitio nos damos cuenta que nuestro cdigo de
traduccin de idiomas funciona correctamente
Siguiendo con la creacin de mdulos de personalizar HTML haremos 5 mdulos de esta clase que contendrn los artculos de la categora Quines Somos?
como se muestra a continuacin cada imagen PNG est creada con ilustrador y
photoshop CC as que las tendremos que guardar en el directorio C:\wamp\www\
joomla3\images
Al seleccionar nuestro articulo nos quedara de la forma siguiente ahora lo nico que
debemos hacer es reemplazar donde dice la
Salle por Leer ms... terminado guardamos y
cerramos y repetimos el proceso hasta llegar
al resultado siguiente
Para terminar con nuestra seccion de perzonalizar HTML crearemos nuestra seccion de pie
de pagina el cual contendra la informacin perzonal de nuestro sitio asi como la informacion
del creador del sitio en este caso pondremos nuestra informacion
Crearemos un nuevo mdulo personalizar HTML el cual llevara por nombre
pie de pgina pondremos el nombre
como oculto ya que no queremos q
salga en nuestro sitio y lo ubicamos
en la posicin footer de nuestra plantilla instalada
Instalacin de Galeria
Para la instalacin de nuestra galera de imgenes ligthbox deberemos cargar el modulo
desde el gestor de extensin al igual que hicimos al instalar la plantilla daremos subir e
instalar
Instalacin de Modulo
Simple youtube
Para instalar nuestro modulo accederemos desde
nuestro panel de control al gestor de extensiones
buscamos nuestro modulo donde lo hayamos descargado a continuacin pulsamos subir e instalar
Una vez dentro de nuestro modulo le pondremos de ttulo SE enciende una luz el
cual est ubicado en la pgina del Tcnico
la Salle lo ubicaremos en la posicin sidebar-a
Dentro de nuestro mismo modulo accederemos a opciones bsicas las cual nos pedir
la id de nuestro video y su tamao en altura y anchura el cual ser el siguiente realizaremos el mismo procedimiento para cada
mdulo de video de YouTube que queramos
postear en nuestro sitio
Instalacin de Content
Slider
Content slider es una herramienta muy til para mostrar artculos en transicin o movimiento es muy sencillo de configurar
Lo que haremos a continuacin es el mismo paso que hemos utilizado para instalar los mdulos anteriores as que desde gestor de extensiones subimos e instalamos
nuestro modulo
Instalacin de Plugins
de Google Map
Para insertar un mapa en nuestro sitio web necesitaremos de un plugin para visualizar
lo instalaremos nuestro plugins a como hemos hecho con nuestros mdulos y precederemos a activarlo
Para activar nuestro plugin nos iremos a gestor de plugins donde buscaremos nuestro
plugin de google maps el cual tiene por nombre System google map aremos clic sobre l y accederemos al mismo
Conclucion
Este ejercicio paso a paso esta hecho como examen del mdulo 8 de diseo grfico
el cual es la aplicacin web con joomla o drupal
+
9
Pagina Finalizada
Este es el resultado de nuestro ejercicio local
en el hemos implementado todo lo aprendido durante este mdulo desde la creacin de
mdulos hasta la ubicacin de los mismos,
tambin aprendimos que joomla es una herramienta de fcil uso para la creacin de pginas web.
10
Gracias !!!!!