**MANUAL DE USUARIO DEL SITIO WEB**
===================================

*CREACION DE UN SITIO WEB EMPRESARIAL*
--------------------------------------

*CICLO DE GRADO SUPERIOR: DESARROLLO DE DISEÑO DE APLICACIONES WEB*
-------------------------------------------------------------------

*2º CURSO PROYECTO FINAL FCT*
-----------------------------

*VAL CEBRIAN CARLOS*
--------------------
  
**INDICE**
==========

*Analisis de la BBDD*
---------------------

*Diseño del Sitio Web*
----------------------

*Boceto Inicial*
++++++++++++++++

*Boceto Final*
++++++++++++++

*Boceto Version Movil*
++++++++++++++++++++++

*Plantillas Utilizadas como Opcion al Proyecto*
-----------------------------------------------

*GENIUS*
++++++++

*PROTOSTAR*
+++++++++++

*LIBERTY*
+++++++++

*TARGET*
++++++++

*Pagina Web sobre el Boceto Inicial*
------------------------------------

*Pagina Web sobre el Boceto Final*
----------------------------------

*Plugins Utilizados en la Programacion*
---------------------------------------

*JCE Editor*
++++++++++++

*Artof Editor*
++++++++++++++

*MoonImage CK*
++++++++++++++

*SigPlus*
+++++++++

*Simple Image Galery*
+++++++++++++++++++++

*Social Share Buttons*
++++++++++++++++++++++

*Princiaples Modulos Utilizados en la Programacion*
---------------------------------------------------

*SliderShow CK*
+++++++++++++++

*LofArticlesliderShow*
++++++++++++++++++++++

*BT Content Slider*
+++++++++++++++++++

*SP Simple Map*
+++++++++++++++

*CoalaWeb Contact*
++++++++++++++++++

*Responsive Contact Form*
+++++++++++++++++++++++++

*JM News Pro*
+++++++++++++

*Bibliografia*
--------------

*Analisis de la BBDD*
---------------------

La BBDD del Sitio Web está desarrollada íntegramente por Joomla. Todos los datos y campos necesarios en cada modulo y plugin están dentro de 168 tablas,
predefinidas por Joomla. El programador del Sitio Web, no debe estar pendiente de la creación de las mismas, ni de las relaciones que se producen 
cada vez que programamos un modulo o plugin. Por ejemplo, algunas de las tablas son:

.. figure:: IMAGENES/BBDD/bbdd.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

.. figure:: IMAGENES/BBDD/bbdd2.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

Las plantillas que vayas a usar si las estás modificando, si has tenido
que desarrollar algún plugin, módulos... 

*Diseño del Sitio Web*
----------------------

El diseño del Sitio Web va a ser el siguiente. Siguiendo las instrucciones del cliente, plasmándolo en los estos bocetos:

*Boceto Inicial*
++++++++++++++++

==> Boceto con una cabecera con logo de la empresa. Y un párrafo de información introductora a la Web, mas iconos de RRSS asociados.
==> Menú con 4 botones. Slider con imágenes relacionadas con la actividad de la empresa.
==> 3 Módulos Principales: Servicios, Información Técnica y Comunicación.
==>  Enlace a Revista editada, más un modulo de Ultimas Noticias publicadas.
==> Footer con Google Maps de la sede de la empresa en Zaragoza, con CopyRight final.

.. figure:: IMAGENES/Balsamiq/Boceto1.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*Boceto Final*
++++++++++++++

==> Boceto con una cabecera con logo de la empresa. Y un párrafo de información introductora a la Web, mas iconos de RRSS asociados.
==> Menú con 4 botones. Slider con imágenes relacionadas con la actividad de la empresa.
==> 3 Módulos Principales: Servicios, Información Técnica y Comunicación.
==> Un único modulo de Ultimas Noticias publicadas.
==> Footer con 3 partes diferenciadas. La primera, un modulo de Login de Usuarios. La segunda, un banner de la Revista Mensual de la empresa.
Y tercero un pequeño formulario de Contacto. Con el CopyRight al final del todo.

.. figure:: IMAGENES/Balsamiq/Boceto2.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
*Boceto Version Movil*
++++++++++++++++++++++

==> Boceto del Sitio Web vista por un Móvil o Tableta.
==> Diseño Responsivo de cada modulo.
==> Menú Bootstrap en formato Mobile.

.. figure:: IMAGENES/Balsamiq/BocetoMovil.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

.. figure:: IMAGENES/Balsamiq/BocetoMovil2.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

.. figure:: IMAGENES/Balsamiq/BocetoMovil3.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

.. figure:: IMAGENES/Balsamiq/BocetoMovil4.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*Plantillas Utilizadas como Opcion al Proyecto*
-----------------------------------------------

*GENIUS*
++++++++

GENIUS: http://joomlathemes.co/demo3x/genius 

Plantilla elegida en segundo lugar como la mejor para adaptarse a los requerimientos del cliente. Por diseño, posiciones, flexibilidad y aceptación de los módulos.

.. figure:: IMAGENES/Plantillas/genius.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
*PROTOSTAR*
+++++++++++

PROTOSTAR: http://ajoomlatemplates.com/demo25/005

Plantilla elegida en principio por su estilo, pero desechada por problemas en el menú y algunas posiciones, debido a que al ser de pago, algunas cosas están capadas.

.. figure:: IMAGENES/Plantillas/protostar.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
*LIBERTY*
+++++++++

LIBERTY: http://joomlathemes.co/demo3x/liberty

Plantilla elegida por su diseño y colorido implícito, pero rápidamente desechada por opciones mejores y más adaptables a los requisitos. 

.. figure:: IMAGENES/Plantillas/liberty.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
*TARGET*
++++++++

TARGET: http://joomlathemes.co/demo3x/target

Plantilla elegida para realizar la pagina Web principal. Se adapta a todos los requisitos plantados por el cliente, y tiene su visto bueno. 
Gran diseño y posicionalidad.

.. figure:: IMAGENES/Plantillas/target.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*Pagina Web sobre el Boceto Inicial*
------------------------------------

.. figure:: IMAGENES/Boceto Web 1/1.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
.. figure:: IMAGENES/Boceto Web 1/2.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
.. figure:: IMAGENES/Boceto Web 1/3.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
*Pagina Web sobre el Boceto Final*
----------------------------------

.. figure:: IMAGENES/Boceto_Web_3/foto1.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
.. figure:: IMAGENES/Boceto_Web_3/foto2.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
.. figure:: IMAGENES/Boceto_Web_3/foto3.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera
   
.. figure:: IMAGENES/Boceto_Web_3/foto4.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*Plugins Utilizados en la Programacion*
---------------------------------------

*JCE Editor*
++++++++++++

==> JCE Editor: Plugin de editor HTML personalizado en Joomla.
http://extensions.joomla.org/extensions/edition/editors/88?qh=YToyOntpOjA7czozOiJqY2UiO2k6MTtzOjU6ImpjZSdzIjt9

.. figure:: IMAGENES/Modulos y Plugins/32963.png
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*Artof Editor*
++++++++++++++

==> Artof Editor: Plugin de editor HTML personalizado en Joomla.
http://extensions.joomla.org/extensions/edition/editors/13675?qh=YTo3OntpOjA7czo1OiJhcnRvZiI7aToxO3M6NjoiZWRpdG9yIjtpOjI7czo3OiJlZGl0b3JzIjtpOjM7czo4OiJlZGl0b3IncyI7aTo0O3M6MTM6ImVkaXRvcidzcGlja3MiO2k6NTtzOjg6ImVkaXRvcnMnIjtpOjY7czoxMjoiYXJ0b2YgZWRpdG9yIjt9

*MoonImage CK*
++++++++++++++

==> MoonImage CK: Plugin de Galería de imágenes en Joomla.
http://extensions.joomla.org/extensions/photos-a-images/images/image-effects/13220?qh=YToxOntpOjA7czo4OiJtb29pbWFnZSI7fQ%3D%3D


*SigPlus*
+++++++++

==> SigPlus: Plugin de Efectos de imagen en Joomla.
http://extensions.joomla.org/extensions/photos-a-images/galleries/content-photo-gallery/11426?qh=YToxOntpOjA7czo3OiJzaWdwbHVzIjt9

*Simple Image Galery*
+++++++++++++++++++++

==> Simple Image Galery: Plugin de Galería de imágenes en Joomla.
http://extensions.joomla.org/extensions/photos-a-images/galleries/content-photo-gallery/1468

*Social Share Buttons*
++++++++++++++++++++++

==> Social Share Buttons: Plugin de Botones de RRSS en Artículos Joomla.
http://extensions.joomla.org/extensions/social-web/social-share/social-multi-share/19509

*Princiaples Modulos Utilizados en la Programacion*
---------------------------------------------------

*SliderShow CK*
+++++++++++++++

==> SliderShow CK: Modulo de creación de un Slider de Imágenes Joomla.

.. figure:: IMAGENES/Modulos y Plugins/2014-06-17_113139.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*LofArticlesliderShow*
++++++++++++++++++++++

==> LofArticlesliderShow : Modulo de Últimos Artículos Publicados.

.. figure:: IMAGENES/Modulos y Plugins/2014-06-17_113424.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*BT Content Slider*
+++++++++++++++++++

==> BT Content Slider : Modulo de Últimos Artículos Publicados.

.. figure:: IMAGENES/Modulos y Plugins/2014-06-17_113732.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*SP Simple Map*
+++++++++++++++

==> SP Simple Map: Modulo de Mapa de Google Maps.

.. figure:: IMAGENES/Modulos y Plugins/2014-06-17_114206.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*CoalaWeb Contact*
++++++++++++++++++

==> CoalaWeb Contact: Modulo de Creación de Formulario de Contacto.

.. figure:: IMAGENES/Modulos y Plugins/2014-06-17_114530.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*Responsive Contact Form*
+++++++++++++++++++++++++

==> Responsive Contact Form: Modulo de Creación de Formulario de Contacto.

.. figure:: IMAGENES/Modulos y Plugins/2014-06-17_114737.jpg
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*JM News Pro*
+++++++++++++

==> JM News Pro: Modulo de Creación de Módulos Principales con Imágenes.

.. figure:: IMAGENES/Modulos y Plugins/Sin título.png
   :width: 100%
   :height: 100
   :scale: 50
   :alt: cabecera

*Bibliografia*
--------------

Tutorial Joomla 2.5.pdf

Tutorial Joomla 3.pdf

Tutorial manual-joomla-instalacion-y-configuracion-de-una-pagina-web.pdf

Tutorial primerospasosenjoomla.pdf

http://extensions.joomla.org/extensions/

http://www.webempresa.com/blog/item/1102-las-10-mejores-plantillas-gratuitas-responsive-para-joomla-3x.html

http://joomlatemplates.me/

http://ajoomlatemplates.com/

http://librosweb.es/bootstrap_3/capitulo_2/tipos_de_rejillas.html











