Acerca de esta App

Esta aplicación proporciona la funcionalidad para visualizar contenido en forma de slides, una imagen con un texto fijo. Se puede utilizar para mostrar distinto contenido como texto, imagenes, links, entre otros. Se puede utilizar en cualquier parte de la colección de sitios.

e-App: Slides

1.    Introducción

 

App Slider es una aplicación que ofrece la funcionalidad de:

  • Transición de imágenes con texto personalizado.
  • Carrusel de imágenes con vínculo y texto personalizado.
  • Galería de imágenes con vista previa, navegación y texto personalizado.

 

2.    Objetivo

 

Presentar imágenes e información de forma organizada y visualmente en forma de slider, carrusel y galería.

 

3.    Requerimientos

 

Navegador IE (8 o Superior), Firefox o Chrome.

 

4.    Acceso

 

En la parte superior derecha en el engranaje dar clic y seleccionar la opción "Contenidos del sitio":

 

Se despliega una página con los contenidos del sitio, entre esos contenidos está la app con el nombre "e-App: Slider", dar clic al título:

 

 

5.      Administración contenido app

 

Siguiendo los pasos del punto anterior una página da la bienvenida a la administración de contenido de la app Slider:

 

 

Gestión de imágenes: Gestionar las imágenes que se presentaran en el Slider/Carrusel/Galería.

 

Gestión de Activos: Gestionar recursos como imágenes, documentos, videos entre otros que se pueden cargar en una librería documental "Activos". Adicionalmente pre configuradas las carpetas CSS y Scripts para personalizar web part de la app.

 

Ayuda: Recursos para aprender el uso de la app y donde siempre estará la última versión de este manual.

 

 

  • Gestión de Imágenes - Paso a paso:

 

La librería de imágenes "ImagenesSlider" permite subir, modificar, eliminar y consultar una imagen y sus propiedades. Cada imagen consta de un campo  Caption (texto para la imagen), Url, orden, y activo.

 

 

Para crear una nueva carpeta seleccionar la opción archivos: "Nueva carpeta":

 

 

Para subir una nueva imagen en la carpeta recién creada seleccionar: "+ nuevo elemento":

 

 

 

Una vez cargada la imagen seleccionada, se presentará un formulario para ser diligenciado:

 

  1. URL (Solo aplica web part carrusel) - Página a la que se redirecciona cuando se da clic en la imagen.
  2. Caption - Texto que acompaña la imagen puede tener tablas, estilos, links entre otros.
  3. Orden - Orden en el que se muestra las imágenes.
  4. Activo -  La imagen se muestra o no en la webpart.

 

 

 

Para finalizar dar clic en guardar.

 

Modificar las propiedades de una imagen:

 

 

Eliminar una imagen:

 

 

6.    Administración web part app

 

Navegar a la página donde se requiere usar la app. En la parte superior derecha en el engranaje dar clic y seleccionar la opción "Editar página":

 

 

 

Seleccionar la opción en la página "Agregar elemento web":

 

 

 

  • Web Part Carrusel

 

Seleccionar Aplicaciones > e-Apps: Carrusel > Agregar:

 

 

 

Al agregar la web part e-Apps: Carrusel, seleccionarla en la parte superior derecha. En la pestaña superior "Elemento Web" dar clic en la opción "Propiedades de elemento web"

 

 

 

 

En la sección "Configuración personalizada" se presentará un formulario para ser diligenciado:

 

  1. Nombre de la carpeta donde están las imágenes (Si está vacía no cargará ninguna imagen).
  2. Alto de las imágenes - Alto máximo de las imágenes que se desplegarán en el carrusel.
  3. Alto del caption - Alto máximo del cuadro de texto que acompaña la imagen.
  4. Posición del caption en la parte superior - Posición del cuadro de texto en relación con la parte superior de la imagen.
  5. Posición del caption en la parte izquierda - Posición del cuadro de texto en relación con la parte izquierda de la imagen.
  6. Número de imágenes por defecto - Número de imágenes a mostrar en el carrusel.
  7. Número de imágenes móvil - Número de imágenes a mostrar cuando se ingrese desde un dispositivo móvil al carrusel.
  8. Tiempo de transición entre imágenes- Milisegundos para que el carrusel rote de imágenes.

 

 

 

Una vez aplicados los parámetros de la web part, las imágenes se despliegan en forma de carrusel:

 

 

  • Web Part Gallery

 

Seleccionar Aplicaciones > e-Apps: Gallery > Agregar:

 

 

 

Al agregar la web part e-Apps: Gallery, seleccionarla en la parte superior derecha. En la pestaña superior "Elemento Web" dar clic en la opción "Propiedades de elemento web"

 

 

 

En la sección "Configuración personalizada" se presentará un formulario para ser diligenciado:

 

  1. Nombre de la carpeta donde están las imágenes (Si está vacía no cargará ninguna imagen).
  2. Alto máximo de la imagen.
  3. Ancho máximo de la imagen.
  4. Alto del caption - Alto máximo del cuadro de texto que acompaña la imagen.
  5. Ancho del caption - Ancho máximo del cuadro de texto que acompaña la imagen.
  6. Posición del caption en la parte superior - Posición del cuadro de texto en relación con la parte superior de la imagen.
  7. Posición del caption en la parte izquierda - Posición del cuadro de texto en relación con la parte izquierda de la imagen.
  8. Número de imágenes móvil - Número de imágenes miniaturas a mostrar cuando se ingrese desde un dispositivo móvil.
  9. Tiempo de transición entre imágenes- Milisegundos para que la imagen cambie.

 

Una vez aplicados los parámetros de la web part, las imágenes se despliegan en forma de galería:

 

 

 

  • Web Part Slider

 

Seleccionar Aplicaciones > e-Apps: Slider > Agregar:

 

 

 

Al agregar la web part e-Apps: Slider, seleccionarla en la parte superior derecha. En la pestaña superior "Elemento Web" dar clic en la opción "Propiedades de elemento web"

 

 

 

En la sección "Configuración personalizada" se presentará un formulario para ser diligenciado:

 

  1. Nombre de la carpeta donde están las imágenes (Si está vacía no cargará ninguna imagen).
  2. Alto máximo de la imagen.
  3. Ancho máximo de la imagen.
  4. Alto del caption - Alto máximo del cuadro de texto que acompaña la imagen.
  5. Ancho del caption - Ancho máximo del cuadro de texto que acompaña la imagen.
  6. Posición del caption en la parte superior - Posición del cuadro de texto en relación con la parte superior de la imagen.
  7. Posición del caption en la parte izquierda - Posición del cuadro de texto en relación con la parte izquierda de la imagen.
  8. Tiempo de transición entre imágenes- Milisegundos para que la imagen cambie.

 

 

Una vez aplicados los parámetros de la web part, las imágenes se despliegan en forma de Slider:

 

 

7. Recomendaciones / Buenas prácticas:

 

  • Al insertar imágenes o tablas NO usar medidas fijas de ancho y alto como px o em.
  • No usar el mismo orden en dos elementos.
  • Si en la web part no se visualiza ningún contenido verificar que la carpeta coincida y estén activas las imágenes en la librería "ImagenesSlider"
  • Usar un alto y ancho máximo en proporción al alto y ancho de la imagen original.



Desarrollado por e-deas LTDA. 2014
info@e-deas.com.co