Omitir los comandos de cinta
Saltar al contenido principal
Ayuda

e-App: AYUDA

Contenido

1. Introducción

2. Gestión de imágenes

3. Gestión de videos

4. Gestión de activos

5. Elemento Web "e-Apps: Slider"

6. Elemento Web "e-Apps: Slider lista remota"

7. Elemento Web "e-Apps: Galería"

8. Elemento Web "e-Apps: Galería lista remota"

9. Elemento Web "e-Apps: Carrusel"

10. Elemento Web "e-Apps: Carrusel lista remota"

11. Elemento Web "e-Apps: Galería Videos"

12. Recomendaciones

 

Acerca de esta App

Esta aplicación (app) proporciona la funcionalidad para visualizar imágenes y videos en forma de galería, carrusel o slider. La galería de imágenes y el slider, contiene subtítulos (caption) y en el carrusel se puede disponer un enlace para que cada imagen pueda referenciar un sitio externo. La galería de videos permite visualizar en forma de galería los enlaces (URL) a videos ubicados de forma local o remota, ejemplo: vimeo, youtube, etc. 

Antes de iniciar con esta "app", se deben crear los diferentes imágenes requeridas, que están compuestos por un orden, subtítulos y enlaces. Después se puede hacer uso de cada elemento web visor que permite visualizar según algunos parámetros de configuración las imágenes o videos en galerías, carruseles o sliders.

e-App: Administración de Deslizadores (Sliders)

1.    Introducción

La app de slider, esta compuesta por la gestión de imágenes, videos y activos. También se tiene varios elementos web que se utilizan como visores de imágenes y videos en forma de galería, carrusel y slider.

Esta app y su contenido atienden a un comportamiento "Responsive" o adaptativo al tipo de pantalla. 

Al ingresar a esta app, se presenta un enlace rápido para acceder a la página inicial, una breve descripción de la aplicación y 4 controles para realizar la configuración de la aplicación.

A continuación se describe cada uno de sus componentes y su forma de uso.

 

2.    Gestión de imágenes

Antes de utilizar alguno de los visores de galería de imágenes de esta app, se requiere la carga de las imágenes. Cada imagen para esta app se debe organizar por carpetas, ya que, cada visor solo puede presentar el contenido de una sola carpeta. Es permitido el uso de subcarpetas para organizar el contenido, pero siempre se mostrará solo el contenido de la carpeta de referencia.  No existe ningún límite de carpetas y subcarpetas.

Pasos para crear nuevas imágenes agrupadas por carpeta:

A. Clic en el control "Gestión de Imágenes", que aparece en la página inicial

B. Se presentan todos los contenidos previamente creados y agrupados por "carpeta". También podemos ver otras columnas como orden y activo, que más adelante se detallan.

C. Clic en el enlace "nuevo elemento" y luego clic en la opción "Nueva carpeta"

D. Después de ingresar a la carpeta previamente creada, se deben cargar las imágenes. Es posible crear subcarpetas si se desea. Para cargar las imágenes siemplemente arrastre las imágenes hasta el punto donde dice "Arrastre archivos aquí para cargar" o puede presionar el botón "Cargar" para agregar las imágenes una por una.

 

Al cargar individualmente o editar alguna de las imágenes cargadas se presenta un formulario con la siguiente información:

Nombre: Titulo de la imagen.

Caption: Texto que se desplegara cuando se cargue la imagen. El texto tiene un formato HTML enriquecido y se recomienda usar las fuentes de estilos de encabezados.

URL: Enlace que aplica solamente para el visor de "Carrusel" y corresponde al enlace que se abre al dar clic en cada una de las imágenes. 

Orden: Número con el cuál se determinará que elemento va antes o después de otro.

Activo: Si un elemento no está activo no se mostrará en el visor. útil si se quiere conservar elementos para usar más adelante o tener como referencia.

E. Clic al botón "Guardar" para almacenar el contenido de la imagen.

F. Después de crear el contenido, se puede seguir editando o si se requiere eliminar utilizando los botones que se presentan para ello.

 

3.    Gestión de videos

Antes de utilizar el visor de videos de esta app, se requiere la creación del contenido con las referencias a cada video. El contenido para esta app se debe organizar por categorías, ya que, cada visor solo puede presentar el contenido de una sola categoría. El contenido en esta app se refiere a URL o enlaces a lo videos. Los videos deben estar previamente publicados.  No existe ningún límite de secciones o contenidos agrupados por la misma categoría.

Pasos para crear nuevo contenido agrupado por categoría:

A. Clic en el control "Gestión de Videos", que aparece en la página inicial

B. Se presentan todos los contenidos previamente creados y agrupados por "Categoría". También podemos ver otras columnas como orden y activo, que más adelante se detallan.

C. Clic en el enlace "nuevo elemento" para crear un nuevo contenido

D. Se presenta un formulario con todos los campos requeridos para crear un nuevo contenido agrupado por categoría

Título: Pegar aquí la URL (Embed) del video.  La referencia de los videos externos como vimeo sería https://player.vimeo.com/video/{codigodelvideo} o para youtube, es https://www.youtube.com/embed/{codigodelvideo}, para el caso de los videos locales, dar clic aquí

Es local?: Indique local sí el video está cargado en un sitio de esta herramienta.

URL imagen: Solo aplica sí es local y hace referencia a una imagen de carátula

Categoría: Palabra clave para agrupar contenidos y presentarlos en forma de galeria. El elemento web que sirve de VISOR, presenta todas las secciones que estén agrupadas por la misma categoría. Este campo tiene una ayuda de autocompletar para reutilizar alguna categoría existente. 

Orden: Número con el cuál se determinará que elemento va antes o después de otro.

Activo: Si un elemento no está activo no se mostrará en el visor de galeria de videos. útil si se quiere conservar elementos para usar más adelante o tener como referencia.

E. Clic al botón "Guardar" para almacenar el contenido agrupado por categoría.

F. Después de crear el contenido, se puede seguir editando o si se requiere eliminar utilizando los botones que se presentan para ello.

 

4.    Gestión de activos

No es necesario realizar alguna configuración de los activos, pero esta gestión es útil cuando se requiere realizar cambios en los estilos (css) originales de la visualización de la galeria, carrusel o slider, cuando se desea agregar un nuevo "Skin" o cuando se desea gestionar algunas imágenes utilizadas en el contenido de los sliders.

A. Clic en el control "Gestión de Activos", que aparece en la página inicial

B. Se presentan 3 carpetas: CSS, Videos e Images

C. En la carpeta CSS, los archivos: "VisorSlider.css", "VisorGallery.css", "VisorCarousel.css" representan el css de cada visor correspomndiente a slider, galeria o carrusel. Si el usuario desea puede realizar ajustes sobre la forma visual del visor. Esto afectara a todos los visores del sitio donde está instalada la app.  Los demás archivos son parte de los "Skin" o estilo de colores, cada visor puede ser configurado con un "skin" diferente y se puede agregar nuevos, solo se requiere crear un nuevo archivo con el nombre del "skin" y la extensión .css

D. En la carpeta Images, se pueden agregar nuevas imagenes requeridas en algun contenido de las caratulas de los videos locales.

E. En la carpeta Videos, se pueden agregar nuevos videos locales requeridos en la galeria de videos.

 

5.    Elemento Web "e-Apps: Slider"

Los elementos web, "web-parts" o "app-parts" son componentes que se pueden agregar en cualquier página del sitio principal. La app de slider, contiene un visor de deslizamiento llamado "e-Apps: Slider" que permite visualizar las imágenes por carpetas en forma rotador o deslizador, cada imagen puede presentar subtítulos o caption. Este contenido debe ser creado previamente según el punto 2.

Pasos para agregar el elemento web:

A. Crear o editar una página Web en el sitio donde se desea alojar el visor en forma de slider.

B. Sobre una sección de contenido de la página web, dar clic sobre el "Ribbons" o menú superior en la pestaña "Insertar". Presionar el botón "Elementos de aplicación" o "Elemento Web" y buscar en aplicaciones, el elemento web llamado "e-Apps: Slider".

C. Seleccionar el elemento web y presionar el botón "Agregar"

D. Sobre la pestaña que se encuentra en la parte superior derecha del elemento web agregado, desplegar el menú y presionar el botón "Editar elemento web"

E. En la parte derecha, aparece un recuadro para realizar la configuración del elemento web. Todos los elementos tiene los mismos elementos de configuración como "Apariencia", "Distribución", "Avanzado", pero está app en particular contiene elementos nuevos, desplegar para configurar

F. Cada campo tiene una descripción particular:

Configuración: Imagen

Nombre de la carpeta donde están las imágenes: Se permiten subcarpetas, ej: carpeta/subcarpeta. Se debe escribir el nombre de la carpeta que agrupa las imágenes creadas previamente. Todas las imágenes agrupadas por esta carpeta serán presentadas en el visor si están activas. Se presentan según el campo orden.

Ancho máximo de la imagen:
Se debe escribir el ancho máximo que puede tener la imagen. El ancho se controla de forma "Responsive" y se adapta al ancho de la pantalla si es menor a este máximo.

Alto máximo de la imagen:
 Se debe escribir el alto máximo que puede tener la imagen.

Configuración: Caption

Ancho del caption: Sí es 0, el caption se ubica debajo de la imagenSe debe escribir el ancho de la zona de subtítulos o caption. Cuando se encuentra en dispositivo móvil, solo se presentan los encabezados h1 y h2.

Alto del caption:
Sí es 0, el cuadro se adapta al texto. Se debe escribir el alto que puede tener la zona de subtítulos o caption.

Posición del caption en la parte superior: Se debe escribir la distancia con respecto a la parte superior que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Posición del caption en la parte izquierda:
Se debe escribir la distancia con respecto a la parte izquierda que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Skin: Se debe escribir el nombre de alguno de los estilos de colores que existen para el caption de la app. Ejemplo: darkblue | lightblue | teal | lightgreen | green | darkgreen | magenta | lightpurple | purple | darkpurple | transparent| darkgray | yellow | orange | darkorange | lightred | red | darkred

Configuración: Avanzado

Tiempo: (segundos) de transición entre imagénes al rotar.

URL:
Si se desea cargar las imágenes de la app instalada en el sitio, se debe dejar vacío, solo en caso de desear cargar las imágenes ubicadas en una app instalada en otro sitio, se puede agregar la url de dicha app. Solo se permiten sitios dentro de la misma colección.

 

G. Presionar el botón "Aceptar" y luego "Guardar" la página para visualizar el contenido

 

6.    Elemento Web "e-Apps: Slider lista remota"

Los elementos web, "web-parts" o "app-parts" son componentes que se pueden agregar en cualquier página del sitio principal. La app de slider, contiene un visor de deslizamiento llamado "e-Apps: Slider" que permite visualizar las imágenes por carpetas en forma rotador o deslizador, cada imagen puede presentar subtítulos o caption. Este elemento web en particular permite cargar como slider cualquier carpeta de imágenes (lista remota) que exista en el sitio.

Pasos para agregar el elemento web:

A. Crear o editar una página Web en el sitio donde se desea alojar el visor en forma de slider.

B. Sobre una sección de contenido de la página web, dar clic sobre el "Ribbons" o menú superior en la pestaña "Insertar". Presionar el botón "Elementos de aplicación" o "Elemento Web" y buscar en aplicaciones, el elemento web llamado "e-Apps: Slider lista remota".

C. Seleccionar el elemento web y presionar el botón "Agregar"

D. Sobre la pestaña que se encuentra en la parte superior derecha del elemento web agregado, desplegar el menú y presionar el botón "Editar elemento web"

E. En la parte derecha, aparece un recuadro para realizar la configuración del elemento web. Todos los elementos tiene los mismos elementos de configuración como "Apariencia", "Distribución", "Avanzado", pero está app en particular contiene elementos nuevos, desplegar para configurar

F. Cada campo tiene una descripción particular:

Configuración: Imagen

Nombre de la carpeta donde están las imágenes: Se permiten subcarpetas, ej: carpeta/subcarpeta. Se debe escribir el nombre de la carpeta que agrupa las imágenes creadas previamente. 

Ancho máximo de la imagen:
Se debe escribir el ancho máximo que puede tener la imagen. El ancho se controla de forma "Responsive" y se adapta al ancho de la pantalla si es menor a este máximo.

Alto máximo de la imagen:
 Se debe escribir el alto máximo que puede tener la imagen.

Configuración: Caption

Ancho del caption: Sí es 0, el caption se ubica debajo de la imagenSe debe escribir el ancho de la zona de subtítulos o caption. Cuando se encuentra en dispositivo móvil, solo se presentan los encabezados h1 y h2.

Alto del caption:
Sí es 0, el cuadro se adapta al texto. Se debe escribir el alto que puede tener la zona de subtítulos o caption.

Posición del caption en la parte superior: Se debe escribir la distancia con respecto a la parte superior que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Posición del caption en la parte izquierda:
Se debe escribir la distancia con respecto a la parte izquierda que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Skin: Se debe escribir el nombre de alguno de los estilos de colores que existen para el caption de la app. Ejemplo: darkblue | lightblue | teal | lightgreen | green | darkgreen | magenta | lightpurple | purple | darkpurple | transparent| darkgray | yellow | orange | darkorange | lightred | red | darkred

Configuración: Avanzado

Tiempo: (segundos) de transición entre imagénes al rotar.

URL: 
a diferencia del anterior visor, esta app, permite cargar elementos de cualquier librería remota, por lo cual, es necesario indicar la URL de la librería donde está contenida la carpeta. Incluir ruta completa hasta la librería. Ej: http://mycompany/sites/myplace/PublishingImages

G. Presionar el botón "Aceptar" y luego "Guardar" la página para visualizar el contenido

 

7.    Elemento Web "e-Apps: Galería"

Los elementos web, "web-parts" o "app-parts" son componentes que se pueden agregar en cualquier página del sitio principal. La app de galería, contiene un visor de presentación en forma de galería llamado "e-Apps: Galería" que permite visualizar las imágenes por carpetas en forma rotador o deslizador pero con formación de galería, la cual, incluye miniaturas, para agilizar la navegación, cada imagen puede presentar subtítulos o caption. Este contenido debe ser creado previamente según el punto 2.

Pasos para agregar el elemento web:

A. Crear o editar una página Web en el sitio donde se desea alojar el visor en forma de galería.

B. Sobre una sección de contenido de la página web, dar clic sobre el "Ribbons" o menú superior en la pestaña "Insertar". Presionar el botón "Elementos de aplicación" o "Elemento Web" y buscar en aplicaciones, el elemento web llamado "e-Apps: Galería".

C. Seleccionar el elemento web y presionar el botón "Agregar"

D. Sobre la pestaña que se encuentra en la parte superior derecha del elemento web agregado, desplegar el menú y presionar el botón "Editar elemento web"

E. En la parte derecha, aparece un recuadro para realizar la configuración del elemento web. Todos los elementos tiene los mismos elementos de configuración como "Apariencia", "Distribución", "Avanzado", pero está app en particular contiene elementos nuevos, desplegar para configurar

F. Cada campo tiene una descripción particular:

Configuración: Imagen

Nombre de la carpeta donde están las imágenes: Se permiten subcarpetas, ej: carpeta/subcarpeta. Se debe escribir el nombre de la carpeta que agrupa las imágenes creadas previamente. Todas las imágenes agrupadas por esta carpeta serán presentadas en el visor si están activas. Se presentan según el campo orden.

Ancho máximo de la imagen:
Se debe escribir el ancho máximo que puede tener la imagen. El ancho se controla de forma "Responsive" y se adapta al ancho de la pantalla si es menor a este máximo.

Alto máximo de la imagen:
 Se debe escribir el alto máximo que puede tener la imagen.

Configuración: Caption

Ancho del caption:  Se debe escribir el ancho de la zona de subtítulos o caption. Cuando se encuentra en dispositivo móvil, solo se presentan los encabezados h1 y h2.

Alto del caption:
Sí es 0, el cuadro se adapta al texto. Se debe escribir el alto que puede tener la zona de subtítulos o caption.

Posición del caption en la parte superior: Se debe escribir la distancia con respecto a la parte superior que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Posición del caption en la parte izquierda:
Se debe escribir la distancia con respecto a la parte izquierda que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Skin: Se debe escribir el nombre de alguno de los estilos de colores que existen para el caption de la app. Ejemplo: darkblue | lightblue | teal | lightgreen | green | darkgreen | magenta | lightpurple | purple | darkpurple | transparent| darkgray | yellow | orange | darkorange | lightred | red | darkred

Configuración: Avanzado

Número de imagénes móvil: Cantidad de imagénes miniatura que se presenta en móvil.

Tiempo: (segundos) de transición entre imagénes al rotar.

URL:
Si se desea cargar las imágenes de la app instalada en el sitio, se debe dejar vacío, solo en caso de desear cargar las imágenes ubicadas en una app instalada en otro sitio, se puede agregar la url de dicha app. Solo se permiten sitios dentro de la misma colección.

G. Presionar el botón "Aceptar" y luego "Guardar" la página para visualizar el contenido

 

8.    Elemento Web "e-Apps: Galería lista remota"

Los elementos web, "web-parts" o "app-parts" son componentes que se pueden agregar en cualquier página del sitio principal. La app de galería, contiene un visor de presentación en forma de galería llamado "e-Apps: Galería" que permite visualizar las imágenes por carpetas en forma rotador o deslizador pero con formación de galería, la cual, incluye miniaturas, para agilizar la navegación, cada imagen puede presentar subtítulos o caption. Este elemento web en particular permite cargar como galeria cualquier carpeta de imágenes (lista remota) que exista en el sitio.

Pasos para agregar el elemento web:

A. Crear o editar una página Web en el sitio donde se desea alojar el visor en forma de galería.

B. Sobre una sección de contenido de la página web, dar clic sobre el "Ribbons" o menú superior en la pestaña "Insertar". Presionar el botón "Elementos de aplicación" o "Elemento Web" y buscar en aplicaciones, el elemento web llamado "e-Apps: Galería lista remota".

C. Seleccionar el elemento web y presionar el botón "Agregar"

D. Sobre la pestaña que se encuentra en la parte superior derecha del elemento web agregado, desplegar el menú y presionar el botón "Editar elemento web"

E. En la parte derecha, aparece un recuadro para realizar la configuración del elemento web. Todos los elementos tiene los mismos elementos de configuración como "Apariencia", "Distribución", "Avanzado", pero está app en particular contiene elementos nuevos, desplegar para configurar

F. Cada campo tiene una descripción particular:

Configuración: Imagen

Nombre de la carpeta donde están las imágenes: Se permiten subcarpetas, ej: carpeta/subcarpeta. Se debe escribir el nombre de la carpeta que agrupa las imágenes creadas previamente. 

Ancho máximo de la imagen:
Se debe escribir el ancho máximo que puede tener la imagen. El ancho se controla de forma "Responsive" y se adapta al ancho de la pantalla si es menor a este máximo.

Alto máximo de la imagen:
 Se debe escribir el alto máximo que puede tener la imagen.

Configuración: Caption

Ancho del caption:  Se debe escribir el ancho de la zona de subtítulos o caption. Cuando se encuentra en dispositivo móvil, solo se presentan los encabezados h1 y h2.

Alto del caption:
Sí es 0, el cuadro se adapta al texto. Se debe escribir el alto que puede tener la zona de subtítulos o caption.

Posición del caption en la parte superior: Se debe escribir la distancia con respecto a la parte superior que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Posición del caption en la parte izquierda:
Se debe escribir la distancia con respecto a la parte izquierda que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Skin: Se debe escribir el nombre de alguno de los estilos de colores que existen para el caption de la app. Ejemplo: darkblue | lightblue | teal | lightgreen | green | darkgreen | magenta | lightpurple | purple | darkpurple | transparent| darkgray | yellow | orange | darkorange | lightred | red | darkred

Configuración: Avanzado

Número de imagénes móvil: Cantidad de imagénes miniatura que se presenta en móvil.

Tiempo: (segundos) de transición entre imagénes al rotar.

URL:
a diferencia del anterior visor, esta app, permite cargar elementos de cualquier librería remota, por lo cual, es necesario indicar la URL de la librería donde está contenida la carpeta. Incluir ruta completa hasta la librería. Ej: http://mycompany/sites/myplace/PublishingImages

G. Presionar el botón "Aceptar" y luego "Guardar" la página para visualizar el contenido

 

 

9.   Elemento Web "e-Apps: Carrusel"

Los elementos web, "web-parts" o "app-parts" son componentes que se pueden agregar en cualquier página del sitio principal. La app de carrusel, contiene un visor de presentación  llamado "e-Apps: Carrusel" que permite visualizar las imágenes por carpetas en forma rotador o deslizador sencillo en forma de carrusel, cada imagen puede presentar subtítulos o caption. Este contenido debe ser creado previamente según el punto 2.

Pasos para agregar el elemento web:

A. Crear o editar una página Web en el sitio donde se desea alojar el visor en forma de carrusel.

B. Sobre una sección de contenido de la página web, dar clic sobre el "Ribbons" o menú superior en la pestaña "Insertar". Presionar el botón "Elementos de aplicación" o "Elemento Web" y buscar en aplicaciones, el elemento web llamado "e-Apps: Carrusel".

C. Seleccionar el elemento web y presionar el botón "Agregar"

D. Sobre la pestaña que se encuentra en la parte superior derecha del elemento web agregado, desplegar el menú y presionar el botón "Editar elemento web"

E. En la parte derecha, aparece un recuadro para realizar la configuración del elemento web. Todos los elementos tiene los mismos elementos de configuración como "Apariencia", "Distribución", "Avanzado", pero está app en particular contiene elementos nuevos, desplegar para configurar

F. Cada campo tiene una descripción particular:

Configuración: Imagen

Nombre de la carpeta donde están las imágenes: Se permiten subcarpetas, ej: carpeta/subcarpeta. Se debe escribir el nombre de la carpeta que agrupa las imágenes creadas previamente. Todas las imágenes agrupadas por esta carpeta serán presentadas en el visor si están activas. Se presentan según el campo orden.

Alto de las imágenes:
 Se debe escribir el alto máximo que puede tener cada imagen.

Configuración: Caption

Alto del caption:
 Se debe escribir el alto que puede tener la zona de subtítulos o caption.

Posición del caption en la parte superior: Se debe escribir la distancia con respecto a la parte superior que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Posición del caption en la parte izquierda:
Se debe escribir la distancia con respecto a la parte izquierda que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Número de imágenes por defecto: Cantidad de imagénes presentadas al mismo tiempo antes de rotar.

Skin: Se debe escribir el nombre de alguno de los estilos de colores que existen para el caption de la app. Ejemplo: darkblue | lightblue | teal | lightgreen | green | darkgreen | magenta | lightpurple | purple | darkpurple | transparent| darkgray | yellow | orange | darkorange | lightred | red | darkred

Configuración: Avanzado

Número de imagénes móvil: Cantidad de imagénes que se presentan en móvil.

Tiempo: (segundos) de transición entre imagénes al rotar.

URL:
Si se desea cargar las imágenes de la app instalada en el sitio, se debe dejar vacío, solo en caso de desear cargar las imágenes ubicadas en una app instalada en otro sitio, se puede agregar la url de dicha app. Solo se permiten sitios dentro de la misma colección.

G. Presionar el botón "Aceptar" y luego "Guardar" la página para visualizar el contenido

 

10.    Elemento Web "e-Apps: Carrusel lista remota"

Los elementos web, "web-parts" o "app-parts" son componentes que se pueden agregar en cualquier página del sitio principal. La app de carrusel, contiene un visor de presentación  llamado "e-Apps: Carrusel" que permite visualizar las imágenes por carpetas en forma rotador o deslizador sencillo en forma de carrusel, cada imagen puede presentar subtítulos o caption. Este elemento web en particular permite cargar como galeria cualquier carpeta de imágenes (lista remota) que exista en el sitio.

Pasos para agregar el elemento web:

A. Crear o editar una página Web en el sitio donde se desea alojar el visor en forma de carrusel.

B. Sobre una sección de contenido de la página web, dar clic sobre el "Ribbons" o menú superior en la pestaña "Insertar". Presionar el botón "Elementos de aplicación" o "Elemento Web" y buscar en aplicaciones, el elemento web llamado "e-Apps: Carrusel lista remota".

C. Seleccionar el elemento web y presionar el botón "Agregar"

D. Sobre la pestaña que se encuentra en la parte superior derecha del elemento web agregado, desplegar el menú y presionar el botón "Editar elemento web"

E. En la parte derecha, aparece un recuadro para realizar la configuración del elemento web. Todos los elementos tiene los mismos elementos de configuración como "Apariencia", "Distribución", "Avanzado", pero está app en particular contiene elementos nuevos, desplegar para configurar

F. Cada campo tiene una descripción particular:

Configuración: Imagen

Nombre de la carpeta donde están las imágenes: Se permiten subcarpetas, ej: carpeta/subcarpeta. Se debe escribir el nombre de la carpeta que agrupa las imágenes creadas previamente. 

Alto de las imágenes:
 Se debe escribir el alto máximo que puede tener cada imagen.

Configuración: Caption

Alto del caption:
 Se debe escribir el alto que puede tener la zona de subtítulos o caption.

Posición del caption en la parte superior: Se debe escribir la distancia con respecto a la parte superior que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Posición del caption en la parte izquierda:
Se debe escribir la distancia con respecto a la parte izquierda que va tener la zona de subtítulos o caption. Cuando el caption se ubica debajo de la imagen, este parámetro no aplica.

Número de imágenes por defecto: Cantidad de imagénes presentadas al mismo tiempo antes de rotar.

Skin: Se debe escribir el nombre de alguno de los estilos de colores que existen para el caption de la app. Ejemplo: darkblue | lightblue | teal | lightgreen | green | darkgreen | magenta | lightpurple | purple | darkpurple | transparent| darkgray | yellow | orange | darkorange | lightred | red | darkred

Configuración: Avanzado

Número de imagénes móvil: Cantidad de imagénes que se presentan en móvil.

Tiempo: (segundos) de transición entre imagénes al rotar.

URL:
a diferencia del anterior visor, esta app, permite cargar elementos de cualquier librería remota, por lo cual, es necesario indicar la URL de la librería donde está contenida la carpeta. Incluir ruta completa hasta la librería. Ej: http://mycompany/sites/myplace/PublishingImages

G. Presionar el botón "Aceptar" y luego "Guardar" la página para visualizar el contenido

 

 

11.    Elemento Web "e-Apps: Galería Videos"

Los elementos web, "web-parts" o "app-parts" son componentes que se pueden agregar en cualquier página del sitio principal. La app de galería de videos, contiene un visor de videos llamado "e-Apps: Galería Videos" que permite visualizar el contenido de videos por secciones en forma de galería sobre una categoría en específico. Este contenido debe ser creado previamente según el punto 3.

Pasos para agregar el elemento web:

A. Crear o editar una página Web en el sitio donde se desea alojar el visor en forma de galería de videos.

B. Sobre una sección de contenido de la página web, dar clic sobre el "Ribbons" o menú superior en la pestaña "Insertar". Presionar el botón "Elementos de aplicación" o "Elemento Web" y buscar en aplicaciones, el elemento web llamado "e-Apps: Galería Videos".

C. Seleccionar el elemento web y presionar el botón "Agregar"

D. Sobre la pestaña que se encuentra en la parte superior derecha del elemento web agregado, desplegar el menú y presionar el botón "Editar elemento web"

E. En la parte derecha, aparece un recuadro para realizar la configuración del elemento web. Todos los elementos tiene los mismos elementos de configuración como "Apariencia", "Distribución", "Avanzado", pero está app en particular contiene elementos nuevos, desplegar para configurar

F. Cada campo tiene una descripción particular:

Configuración: Video

Nombre de la categoría: Se debe escribir el nombre de la categoría que agrupa el contenido creado previamente. Todas las secciones o contenidos agrupados por esta categoría serín presentados en el visor si están activos. Se presentan según el campo orden..

Ancho máximo del video:
Se debe escribir el ancho máximo que puede tener el video. El ancho se controla de forma "Responsive" y se adapta al ancho de la pantalla si es menor a este máximo.

Alto máximo del video: Se debe escribir el alto máximo que puede tener el video.

Configuración: Avanzado

Tiempo: (segundos) de transición entre imagénes al rotar.

URL:
Si se desea cargar las categorías de la app instalada en el sitio, se debe dejar vacío, solo en caso de desear cargar las categorías ubicadas en una app instalada en otro sitio, se puede agregar la url de dicha app. Solo se permiten sitios dentro de la misma colección.

G. Presionar el botón "Aceptar" y luego "Guardar" la página para visualizar el contenido

 

12.    Recomendaciones

  • No usar subtítulos muy extensos.
  • Si los caption del slider se definen debajo de la imagen, generalizar para que todas las imágenes tengan caption y no se vea extraño el rotador
  • Al agregar la clase "mas" sobre un enlace para los captio, éste se convierte en un botón
  • Organizar los subtítulos o caption utilizando los encabezados de la fuente, ejemplo: h1, h2, h3
  • No usar el mismo orden en dos elementos.
  • Para el slider, es necesario que la zona este sin margenes cuando se desea crear un slider fullscreen
  • Para el carrusel, se requiere que el fondo de la zona donde se ubica el visor para visualizar las fechas de desaplazamiento
  • Para los videos locales, crear carátulas y agregar el título del video en ellas para ayudar al usuari
  • Para los videos es importante utilizar los códigos o URL correctos para realizar el embebido, el cual, corresponde a la URL del iframe que disponen las compañías de streaming
  • Si en el elemento web no se visualiza ningún contenido verificar que la categoría o carpeta coincida con una que se encuentre creada
  • En el contenido mantener la estructura "Responsive". Ver http://getbootstrap.com
  • Modificar algunos estilos para personalizar la visualización de tipo de letra, tamaño, etc. 

 

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