Contenido

1. Introducción

2. Activar y desactivar receptor "Bootstrap"

3. Agregar "Grids"

4. Agregar "Components"

5. Recomendaciones

 

Acerca de esta App

Esta aplicación (app) proporciona la funcionalidad para agregar elementos "bootstrap" a campos enriquecidos. Por medio de botones en el "Ribbons" de los campos enriquecidos se pueden agregar diferentes contenidos de "bootstrap" con objetivos "responsive" para mejorar el contenido enriquecido y lograr su visualización en diferentes dispositivos (teléfono, tableta, escritorio o pantalla amplia). La app mantiene el enfoque de "Bootstrap" a nivel de sus "Grids" de 12 columnas y sus componentes. 

e-App: Bootstrap

1.    Introducción

La app de bootstrap, está compuesta por botones que se agregan en el "Ribbons" de las páginas que contienen campos enriquecidos. Los botones son agregados en la pestaña de "Insertar" y contienen diferentes funcionalidades para agregar "Grids" y "Components" en el contenido del campo. Cada botón despliega una ventana emergente donde por medio de un ayudante gráfico se puede seleccionar o personalizar el elemento y agregarlo sobre el texto del campo enriquecido.

Esta app y su contenido atienden a un comportamiento "Responsive" o adaptativo al tipo de pantalla. Cada componente que se agrega al campo enriquecido contiene características "Responsive" basadas en la libería de "Bootstrap". Ver http://getbootstrap.com/

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 un indicador de la correcta instalación de un receptor de mensajes. Este receptor permite la comunicación efectiva entre la app y los campos enriquecidos.

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

 

2.    Activar y desactivar receptor Bootstrap

Antes de iniciar con la funcionalidad de la app sobre las páginas de contenido, es necesario activar el receptor de mensajes para "Bootstrap" y antes de desinstalar la aplicación es importante desactivar dicho receptor para limpiar el sitio "host" de todo contenido relacionado con la app.

El receptor de mensajes "Bootstrap" es quien permite la correcta comunicación entre las páginas de contenido y la app, de forma que cada campo pueda recibir el contenido personalizado en la app para ser pintado en los campos de texto enriquecido.

 

Activar

Para activar el receptor, es tan simple como abrir la aplicación "e-App: Bootstrap" y esperar unos pocos segundos para que la funcionalidad de la app realice la instalación de algunos elementos sobre el sitio "host".  

Después de la activación se presentan un mensaje en la página inicial de la app y se despliega el botón para "Desactivar", funcionalidad que se usa antes de desinstalar la app.

Es OBLIGATORIO que el sitio "host" contenga la librería documental "Activos del sitio" (SiteAssets) para que se pueda dar una correcta instalación.

 

Desactivar

Debido a que esta app agrega elementos en el sitio "host", es importante ofrecer la opción de desactivar y eliminar ese contenido antes de una desinstalación de la app, por ello, se tiene un botón que permite realizar la desactivación del receptor de mensajes "Bootstrap" y así garantizar una desinstalación completa de la app.

 
 

3.    Agregar "Grids"

En cada página de contenido se tiene disponible un nuevo botón "Grids Bootstrap" que permite desplegar una ventana con la funcionalidad de un ayudante para generar "grids". Cada "grid" tiene las características principales de "Bootstrap" para organizarse según las necesidades "responsive" deseadas y además se cuenta con un visor según el tipo de dispositivo "Teléfono, Tableta o Escritorio".

El botón para "Grids" se encuentra en el "Ribbons" sobre la pestaña "Insertar" y en la sección "Tabla" y aparece cuando se tiene el cursor sobre el campo enriquecido. 

 

Pasos para agregar un "grid" en un campo enriquecido:

A. Clic en el control "Grids Bootstrap", que aparece en la pestaña "Insertar", sección "Tabla" del "Ribbons" de la página.

 

 

B. Se presentan una ventana emergente con la funcionalidad para agregar "Grids". Por defecto se tiene una fila y una columna. El ayudante también contiene diferentes botones para agregar nuevas filas, nuevas columnas, clases CSS y un visor por dispositivo.

 

C. Sobre cada columna se presentan las 4 características de "Bootstrap" para determinar el comportamiento "responsive" en los dispositvos, cada característica permite configurar su distribución según la técnica de 12 columnas (ver detalle). 

 

.col-xs-: Configuración para dispositivo "Teléfono" ( menor a 768px )  

.col-sm-: Configuración para dispositivo "Tableta" (  mayor o igual a 768px )  

.col-md-: Configuración para dispositivo "Pantalla de Escritorio" ( menor o igual a 992px )  

.col-lg-: Configuración para dispositivo "Pantalla de Escritorio amplia" ( mayor o igual a 1200px )  
 

D. Sobre cada columna existen los botones para agregar una nueva columna, eliminar una existente o agregar clases CSS. La primera columna de cada fila nunca puede ser eliminada.

 

E. Sobre cada fila existen los botones para agregar un nueva fila, eliminar una existente o agregar clases CSS. La primera fila nunca puede ser eliminada.

 

F. En cualquier momento se puede utilizar el visor por dispositivo para completar efectivamente la configuración. En la parte superior de la ventana se disponen 3 botones: teléfono, tableta o escritorio, al presionar cada botón, la ventana toma la forma de uno de los dispositivos y podemos configurar de una forma clara cada una de las caraterísticas definidas en el punto C.

 

G. Al terminar la configuración del "Grid", se debe dar clic en el botón "Aceptar" que se encuentra en la parte superior de la ventana, luego el contenido del "grid" será agregado en el campo enriquecido y por medio del "receptor de mensajes" se carga el "grid" con un ayudante visual EN EDICIÓN para terminar la edicón del contenido.

 

 

4.    Agregar "Components"

En cada página de contenido se tiene disponible un nuevo botón "Components Bootstrap" que permite desplegar una ventana con la funcionalidad para agregar "components". Cada componente esta categorizado y tiene diferentes elementos con las características principales de "Bootstrap". Un componente es un elemento "bootstrap" nativo con unas propiedades ya definidas, con el objetivo de completar rápidamente un contenido base sobre los "grids" o campos enriquecidos.

Este botón se encuentra en el "Ribbons" sobre la pestaña "Insertar" y en la sección "Tabla" y aparece cuando se tiene el cursor sobre el campo enriquecido. 

 

Pasos para agregar un "componente" en un campo enriquecido:

A. Clic en el control "Components Bootstrap", que aparece en la pestaña "Insertar", sección "Tabla" del "Ribbons" de la página.

 

 

B. Se presentan una ventana emergente con la funcionalidad para agregar "Componentes".

 

C. Seleccionar la categoría y un elemento disponible. 

 

D. Dar clic en el botón "Aceptar" que se encuentra en la parte superior de la ventana, luego el contenido del "componente" será agregado en el campo enriquecido.

 

 

 

5.    Recomendaciones

  • Completar cada columna con el esquema de 12 columnas en todos los dispositivos
  • Revisar en cada dispositivo la formación de las columnas para lograr una correcta visualización
  • Conocer un poco el esquema de "grids" definido por "Bootstrap" Ver http://getbootstrap.com
  • Agregar nuevas clases a cada columna para ampliar su funcionalidad "responsive"
  • En el contenido mantener la estructura "Responsive". Ver http://getbootstrap.com

 

Desarrollado por e-deas 2016 
info@e-deas.com.co