Mejores prácticas para configurar su portal

3 Kudos

Introducción

Brian Baldwin (de Patterns & Practices Esri Inc) publicó un blog con instrucciones para configurar la página inicial del portal (ArcGIS Online) y organizar el contenido de una manera estructurada, con el fin de ofrecer el contenido relevante (datos y aplicaciones) a cada persona en una organización en 3 clics o menos.

El blog original en inglés se puede encontrar acá:

/blogs/baldy/2017/07/24/beautify-that-homepage-creating-a-unique-look-and-feel

Con base en el blog de Brian configuramos el portal de Servicio Públicos de Esri Colombia y queremos compartir como lo hicimos y agregar información adicional de buenas prácticas para organizar los grupos y el contenido usando aplicaciones de galería.

El concepto

La página principal contiene el Banner contenido destacado y la descripción de la organización. La descripción de la organización contiene la definición de los botones. Cada botón abre una aplicación de galería. La aplicación de galería muestra el contenido de un grupo.

Abajo se muestra el portal geográfico de servicios públicos con botones para acceder al contenido de los sectores y otros temas afines:

Al hacer clic sobre por ejemplo el botón de “Aseo” esto abre una aplicación de galería de Aseo:

La galería puede consistir de un listado de aplicaciones de galería en ese caso se requiere crear una jerarquía más elaborada.

Observe abajo el ejemplo de Westerville creado por Brian Baldwin . La página principal muestra 3 áreas principales para una empresa de energía: distribución, transmisión y generación:

Al hacer clic sobre el botón Distribution (distribución) se abre una aplicación de galería con más aplicaciones de galerías. Cada aplicación de galería representa un área específica o un grupo de personas con el mismo rol:

Al hacer clic sobre el elemento “Operaciones” se obtiene el listado de aplicaciones relevantes para el personal de operaciones:

Este es el concepto que se aplica para llegar al contenido relevante en 3 clics o menos.

Modelar su organización

Primero que todo se debe contar con la jerarquía de la organización. Tomando el ejemplo de Westerville Power & Light y solamente mirando la parte de distribución podemos observar la siguiente jerarquía y áreas de trabajo:

Cada área de trabajo contiene una serie de productos (apps) específicos que apoyan los flujos de trabajo del personal de cada área. El personal de cada área pertenece a un grupo en ArcGIS Online, donde se están compartiendo los productos de información para esta área.

Habilitar los usuarios nombrados

Las personas son lo más importante en cada organización. Para conseguir una mayor eficiencia en los flujos de trabajo las personas deben poder tener acceso a la información y aplicaciones que apoyen sus flujos de trabajo.

Los usuarios son el centro de la organización y cada uno ellos tiene un rol en la empresa (Niveles, roles y privilegios—Ayuda de ArcGIS Online | ArcGIS ), pertenecen a uno o múltiples áreas específicas (Administrar grupos—Ayuda de ArcGIS Online | ArcGIS ), requieren acceso a datos y aplicaciones relevantes (Compartir elementos—Ayuda de ArcGIS Online | ArcGIS y Aplicaciones—Ayuda de ArcGIS Online | ArcGIS) en la oficina y el campo desde cualquier dispositivo:

Los usuarios son los dueños de contenido y pertenecen a grupos y los grupos son usados para compartir contenido con usuarios específicos:

Se puede conectar con el directorio activo para habilitar el single sign on (Configurar inicios de sesión corporativos—Ayuda de ArcGIS Online | ArcGIS) para asegurar que cuando una persona salga de la empresa no tenga acceso a los datos de la organización.

Aplicaciones de galería

La forma de ofrecer el contenido de un grupo es a través de una aplicación de galería.

En un blog recientemente publicado por Esri, mencionaron que la aplicación de galería “Public Gallery” se iba pasar a la fase madura y que ya no va recibir actualizaciones ni mejoras: Configurable Apps Announcement – Public Gallery Template Moving to Mature Support Phase with Septemb...

Esri publicó una aplicación de galería más novedosa “Maps and Apps Gallery” que puede ser usada para tal fin. Una aplicación de galería es una aplicación que muestra el contenido de un grupo determinado. En caso de que configuramos el grupo “atención al cliente” la aplicación mostrará una galería de todo el contenido.

La configuración es bastante sencilla. Primero se selecciona el grupo con el contenido que se va mostrar en la galería:

Luego se define los colores y opcionalmente el logo:

Y por último las opciones:

La opción “Show tag cloud for filtering gallery items” genera una nube de las etiquetas y nos permite filtrar el contenido de la galería por una o varias etiquetas:

De esta manera podemos llegar rápidamente al ítem deseado a pesar de tener una gran cantidad de elementos en la galería.

Configurar la página inicial

La página inicial de una organización debe proporcionar un acceso fácil a la información que requieren sus usuarios.

Para esta configuración haremos unos ajustes en la configuración de nuestro portal:

Implementar los botones que dan acceso al contenido de las áreas

En la parte “GENERAL se encuentra la descripción de la organización. Es ahí que se configuran los botones que dan acceso a la información de las áreas de la empresa:

Cuando se hace el cambio en el editor a código HTML se puede ver mejor el contenido. Hacer clic sobre el botón “Ver fuente HTML”:

Código HTML usado:

<style>
    .drp-section {         
           margin-bottom: 35px;         
           color: #444;
     }
     .drp-section p{  
           font-size: 16px; 
      }  
     #homeRotate {  
           margin-bottom: 
           0px !important; 
      }  
     #bottomContent .content .drp-section h2 {
           font-size: 21px;
           line-height: normal;     
      }
     .groupItems {
           text-align: center;
           margin: 30px 0;
           }
     .groupItems, .groupItem, .groupItems, .groupItem:visited, .groupItems, 
     .groupItem:hover {
           display: inline-block;
           margin: 0 10px 0 10px;
           padding: 0;
           text-align: center;
           font-size: 11px;
           line-height: 14px;
           text-decoration: none;
           color: #444 !important;
           cursor: pointer;
           }
     .groupItems, .groupItem img {         
          margin: 0 3px 0 3px;         
          overflow: hidden;     
          }          
     .groupItem img {  
          background-color: rgba(58,93,178,.7);  
          -webkit-border-radius: 5px 5px 5px 5px;         
          border-radius: 5px 5px 5px 5px;  
          padding: 8px; 
          }  
     .groupItem:hover img {         
          background-color: rgba(210,224,255,.4);  
          opacity: .95;    
          }          
     .groupItems, .groupItem b {         
          display: block;         
          margin: 6px 0;     
          }          
</style>
<div class="drp-section">
  <p class="groupItems">
    <a class="groupItem" href="http://wpl.maps.arcgis.com/apps/PublicGallery/index.html?appid=95ca5f5fd028484eba8d95ec1062b80f" target="_blank" title="Energía">       
       <img alt="Energía" src="http://geoportal.esri.co/SP/imagenes/but_Energia.png" width="130" />       
     </a>    
     <a class="groupItem" href="http://wpl.maps.arcgis.com/apps/PublicGallery/index.html?appid=5063315db9064bfbbfc0eb333cd6d359" target="_blank" title="Gas">       
       <img alt="Gas" src="http://geoportal.esri.co/SP/imagenes/but_Gas.png" width="130" />    
     </a>    
     <a class="groupItem" href="http://wpl.maps.arcgis.com/apps/PublicGallery/index.html?appid=eb6a2dc8fb8246768fbb76b3a67abebb" target="_blank" title="Agua">       
       <img alt="Agua" src="http://geoportal.esri.co/SP/imagenes/but_Agua.png" width="130" />    
     </a>    
     <a class="groupItem" href="http://utility-esri-co.maps.arcgis.com/apps/MapAndAppGallery/index.html?appid=686a8d77e95a4cd295f50bb7e5175bb3" target="_blank" title="Aseo">       
       <img alt="Aseo" src="http://geoportal.esri.co/SP/imagenes/but_Aseo.png" width="130" />    
     </a>    
     <a class="groupItem" href="http://utility-esri-co.maps.arcgis.com/apps/MapAndAppGallery/index.html?appid=686a8d77e95a4cd295f50bb7e5175bb3" target="_blank" title="Aseo">       
       <img alt="Aseo" src="http://geoportal.esri.co/SP/Imagenes/Banner/Telco.png" width="130" />    
     </a>
  </p>   
</div>   
<div class="drp-section">       
   <p class="groupItems">          
     <a class="groupItem" href="http://wpl.maps.arcgis.com/apps/PublicGallery/index.html?appid=9bac084128284a1a84ad7410727fa17f" target="_blank" title="Regulación">       
        <img alt="Regulación" src="http://geoportal.esri.co/SP/Imagenes/Banner/Regulacion1.png" />    
      </a>         
      <a class="groupItem" href="http://wpl.maps.arcgis.com/apps/PublicGallery/index.html?appid=07f053d9969645eaacd78de8c61560ec" target="_blank" title="Gerencia">       
        <img alt="Gerencia" src="http://geoportal.esri.co/SP/Imagenes/Banner/Gerencia2.png" />       
      </a>          
      <a class="groupItem" href="http://wpl.maps.arcgis.com/apps/PublicGallery/index.html?appid=0505e6a9588646f5b4ff7a0fd01f7fa2&amp;group=8d686a537b94440fade06e7fc4022fce" target="_blank" title="Ambiental">       
        <img alt="Ambiental" src="http://geoportal.esri.co/SP/Imagenes/Banner/Ambiental1.png" />    
      </a>          
      <a class="groupItem" href="http://wpl.maps.arcgis.com/apps/PublicGallery/index.html?appid=848cb61d9c1e402b9117bc12dcd272c4&amp;group=da7ccc7d4c614e66bc825fb26dbe2579" target="_blank" title="Social">       
        <img alt="Social" src="http://geoportal.esri.co/SP/Imagenes/Banner/Social2.png" />    
      </a>         
      <a class="groupItem" href="http://lp.esri.com/utilities/electric/apps/catalog/?appid=b7e5b6022ea74ee592d42424a831689f" target="_blank" title="Seguridad">       
        <img alt="Seguridad" src="http://geoportal.esri.co/SP/Imagenes/Banner/Seguridad2.png" />    
      </a>    
  </p>   
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

La primera parte define los estilos (ver “<style>” hasta “</style>”.) En este parte solamente hicimos dos cambios referentes al color de fondo:

background-color: rgba(58,93,178,.7); Para los botones
background-color: rgba(210,224,255,.4); Al moverse con el mouse sobre el botón

Ejemplo del efecto:

Botón normal Botón con mouse por encima

En la segunda parte hay un listado de botones de los negocios (ver el primer <div class="drp-section">). Cada botón contiene un hipervínculo que tiene el enlace hacia la App de galería relacionada y contiene una imagen del botón. Para que todos los botones cupieran agregamos un atributo width="130" para reducir el tamaño de la imagen.

La tercer parte es nuevamente un listado de botones, pero esta vez de las otras áreas relevantes. Acá también cada botón es un enlace a una App de galería con el contenido correspondiente.

Es necesario contar con un servidor web para alojar las imágenes de los botones.

Configurar el fondo de la página

Para el fondo de la página, podemos usar una imagen que cubra toda la pantalla. Recomendamos que sea una imagen atractiva que represente la empresa. Algo como la imagen abajo para una empresa de multi servicios:

O como el ejemplo abajo que usaron para Westerville:

Para configurar la imagen en la página de inicio, entrar a Organización, Editar Ajustes, Página de Inicio. En la parte de “Imagen de fondo” seleccionar la opción “Sin fondo”:

El fondo se configura en la parte “Encabezado”:

Al activar la opción de ver el código fuente HTML:

Se observa el siguiente código HTML:

<div><style>
#header, #webmap-header {
    background-color: #111;
}

.galleryNode .galleryLabelContainer {
color: #fff !important;
display: none;
}

.prevButton {
display: none;
height: 0;
}

.nextButton {
display: none;
height: 0;
}

.galleryBackground {
     height: 160px;
}

#matrixLayout {
    box-shadow: none;
}

#featuredMaps {
    background: none;
    box-shadow: none;
    border-bottom: none;
     /* height: 0 !important; */
     /* display: none !important; */
}

#featuredMaps #fHeader {
    background: none;
    box-shadow: none;
    border-bottom: none;
    h2.galleryTitle: ' ';
    height: 0px;
}

#featuredMaps #fHeader h2 {
    font-size: 0px;
}

.esriItemLinks a, .esriItemLinks a:link, .esriItemLinks a:hover, .esriItemLinks a:active, .esriItemLinks a:visited {
    color: #111;
}


#bottomContent  {
    background: none;
    box-shadow: none;
    border-bottom: none;
}

#bottomContent #organizationSection .top-nav {
    border-bottom: none !important;
}

.top-nav{
     border-bottom: 0 !important;
}

.top-nav-link {
     color: #999 !important;
}

.esri .footer, .esri .center .footer {
    border-top: none !important;
}

#topBanner {
     background: url(http://geoportal.esri.co/SP/Imagenes/Banner/PortalSPX02.png); 
     border-radius: 0px 0px 10px 10px; 
     width: 960px; 
     height: 200px; 
     margin-top: 0px; 
     -moz-border-radius: 0 0 10px 10px; 
     -webkit-border-radius: 0 0 10px 10px; 
     -o-border-radius: 0 0 10px 10px;
}

#resetBack {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-image: url(http://geoportal.esri.co/SP/Imagenes/Banner/propuestaBanner.png);
    background-size: cover;
    z-index: 0-100;
}
</style>
<div id="topBanner"></div>
<div id="resetBack"></div></div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

En este código Fuente HTML se está haciendo referencia a dos imágenes:

Una en el “#topBanner” que se coloca por encima de la imagen de fondo. Debe ser parcialmente transparente para obtener el efecto deseado:

La segunda en el “#resetBack” que es la imagen que coubre todo el fondo.

Al sobreponer los dos se obtiene el siguiente resultado:

El resto del código es para el fondo negro con el menú en la parte superior de la pantalla:

Contenido Destacado

Con el contenido destacado queremos atraer la atención a unos productos de información que merecen ser destacadas. Es un contenido que debe ser dinámico (se recomienda cambiar el contenido regularmente para ofrecer un contenido actual e interesante).

Cree el grupo y comparta el contenido destacado con este grupo:

Para habilitar y configurar el contenido destacado, entrar a Organización, Editar Ajustes, Página de Inicio. En la parte inferior se puede elegir un grupo que contenga los elementos que se quieren mostrar como contenido destacado en la página inicial del portal.

El resultado es que el contenido destacado será mostrado en la página inicial:

Recursos:

Esperemos que nos compartan los portales que han creado.

Para terminar este documento un último ejemplo de nuestro portal de servicios públicos de Esri Colombia:

ArcGIS Online‌

Mejores prácticas para configurar su portal