Skip To Content

Apariencia de la interfaz de usuario

En este tema

Personalizar la apariencia de la interfaz de usuario

Una forma fácil de personalizar su geoportal es cambiarle el texto, los gráficos y el esquema de los colores. Las instrucciones están en las secciones a continuación:

Personalizar el texto de la interfaz del Geoportal

La mayoría de texto en la interfaz del geoportal se administra en el archivo gpt.properties en la carpeta \\geoportal\WEB-INF\classes\gpt\resources. El texto que se ve en la interfaz está asociado con un "bean" identificador único que lo representa en texto en el archivo gpt.properties. Es importante revisar el texto en el archivo gpt.properties y actualizarlo de acuerdo con la implementación del Geoportal de su organización. Para averiguar qué texto en la interfaz representa a qué cadena de caracteres de texto en el archivo gpt.properties, haga lo siguiente:

  1. En un editor de texto, abra el archivo body.jsp asociado a la página Web que quiere cambiar. Estos archivos se guardan en la carpeta \\geoportal\catalog\content. En este ejemplo, abriremos el archivo aboutBody.jsp y modificaremos el texto en la página Acerca de.
  2. Observe en dónde está localizado el texto bean. A menudo se indica por medio de una cadena de caracteres 'value="#{gptMsg' precedente. En nuestro archivo aboutBody.jsp, se hace referencia a dos beans. En este ejemplo, se actualizará el segundo. Este bean, catalog.content.about.statement, contiene texto que se visualizará en la página Acerca de que describe la implementación del Geoportal en su organización.
  3. Navegue a la carpeta \\geoportal\WEB-INF\classes\gpt\resources y abra el archivo gpt.properties en un editor de texto.
  4. Busque el bean catalog.content.about.statement. Debe ver una entrada como la siguiente:
    catalog.content.about.statement = \
    <p>\
    customize this text to describe your organization's Geoportal implementation
    </p>
    
  5. Cambie el texto después del símbolo = para incluir el texto correspondiente para el geoportal de su organización.
  6. Guarde el archivo gpt.properties.
  7. Actualice la página Web, haga clic en el vínculo Acerca de en la parte superior y vea que se haya actualizado la página. Si otras páginas jsp hicieron referencia al bean catalog.content.about.statement, esas páginas también se actualizarían con su nuevo texto en la interfaz del geoportal. Las referencias de beans son útiles para actualizar rápidamente el texto que se usa en la interfaz del geoportal.
  8. Verifique que haya actualizado el texto asociado con las páginas Privacidad y Exención de responsabilidad. Estas páginas son fáciles de pasar por alto.

Nota:

Observará que todas los beans en el archivo gpt.properties comienzan con la palabra 'catálogo'. Si agrega nuevos beans al archivo gpt.properties, asegúrese de que también tengan el prefijo 'catálogo'; si no es así, entonces la cadena de caracteres de texto asociada con el bean no se visualizará en la interfaz del geoportal.

Cambiar el tema de color predeterminado a uno predefinido

El directorio \\geoportal\catalog\skins\themes contiene 2 subcarpetas: azul y roja. Se hace referencia al tema de color activo en el archivo \\geoportal\catalog\skins\lookAndFeel.jsp. Por defecto, el tema activo es el tema rojo. La personalización más simple es cambiar de un tema de color predefinido a otro; por ejemplo, del tema rojo al azul.

  1. Navegue a la carpeta \\geoportal\catalog\skins.
  2. Abra el archivo lookAndFeel.jsp en un editor de texto.
  3. Observe que hay tres etiquetas <link rel="stylesheet" …>.
    • La primera (...\tundra.css) define la referencia de la hoja de estilo para la pestaña Examinar y algunas otras funcionalidades dentro de la aplicación Web de geoportal. No hay necesidad de modificar esta ubicación \tundra.css
    • La segunda etiqueta <link rel="stylesheet" …> establece la ubicación de main.css, que define el esquema de color de la interfaz del geoportal.
    • La tercera etiqueta <link rel="stylesheet" …> establece la ubicación de preview.css, que define el esquema de color de la funcionalidad Vista previa.
  4. De manera predeterminada, las hojas de estilo principal y vista previa se establecen para hacer referencia a las hojas de estilo en la carpeta del tema rojo. Cuando las cambia para hacer referencia a la carpeta azul, la interfaz del geoportal y la función Vista previa se visualizarán de acuerdo con los estilos en la carpeta del tema azul. Cambie estas referencias para que apunten a la carpeta azul, como se muestra a continuación:
    <link rel="stylesheet" type="text/css"
    href="<%=request.getContextPath()%>/catalog/skins/themes/blue/main.css"/>
    
    <link rel="stylesheet" type="text/css"
    href="<%=request.getContextPath()%>/catalog/skins/themes/blue/preview.css"/>
    
  5. Guarde el archivo lookAndFeel.jsp.
  6. Reinicie la aplicación Web del geoportal para que sus cambios tengan efecto.

Crear un tema personalizado

La forma más simple de crear su propio tema de color es usar uno de los temas predefinidos como base y editarlo. Haga una copia de uno de los temas predefinidos que están disponibles para uso inmediato y modifique sus imágenes y definiciones de clases, según se describe en los pasos a continuación.

  1. Navegue a la carpeta \\geoportal\catalog\skins\themes.
  2. Copie la carpeta roja en el mismo directorio, dándole un nuevo nombre (por ejemplo, "verde")
  3. En la carpeta que nombró recientemente, abra el archivo main.css y modifíquelo para definir un nuevo estilo.
  4. Abra preview.css y modifíquelo también para definir el estilo. Este archivo preview.css define estilos para la página de vista previa de los servicios en vivo del geoportal.
  5. Abra el directorio de imágenes en su nueva carpeta y reemplace cualquiera de las imágenes con las suyas.
    Sugerencia:

    Para cambiar el encabezado, puede hacer lo siguiente:

    • Nombrar la imagen de su encabezado "banner.jpg" y copiarla en esta carpeta de imágenes, sobrescribiendo así el archivo banner.jpg predeterminado.
    • Si la imagen de su encabezado tiene un nombre diferente, puede buscar la referencia al archivo banner.jpg en el archivo main.css y cambiarlo para que coincida con el nombre de la imagen de su encabezado.

  6. Siga los pasos en el tema anterior Cambiar el tema de color predeterminado a otro predefinido para hacer referencia a su nuevo tema en el archivolookAndFeel.jsp.

Cambiar el icono de favoritos predeterminado

Un icono de favoritos permite a los usuarios distinguir rápidamente la página Web del geoportal de otras páginas Web en una lista de favoritos o pestañas que puedan tener abiertas en un explorador. La mayoría de exploradores Web usarán un icono de favoritos y su visualización puede variar dependiendo del explorador.

De manera predeterminada, el geoportal usa un icono de favoritos que se ve como el logotipo del globo de ESRI. Probablemente, su organización querrá implementar su propio icono de favoritos. Los pasos para cambiar el icono de favoritos a uno que se adapte mejor a su organización, se describen a continuación.

  1. Navegue al directorio \\geoportal\catalog\skins y abra lookAndFeel.jsp en un editor de texto.
  2. Existen dos parámetros que definen el icono de favoritos en este archivo, ambos se muestran a continuación. No necesita alterar estas líneas, pero tenga en cuenta que el geoportal busca un icono de favoritos llamado favicon.ico. Si la imagen de su nuevo icono de favoritos tiene un nombre diferente, puede cambiar el nombre de su imagen a favicon.ico o modificar lookAndFeel.jsp con el nombre de su imagen.
    <link rel="icon" type="image/x-icon"   href="<%=request.getContextPath()%>/catalog/images/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="<%=request.getContextPath()%>/catalog/images/favicon.ico" />
    
  3. Navegue a la carpeta \\geoportal\catalog\images.
  4. Reemplace el archivo favicon.ico en esta carpeta con su imagen.
  5. Reinicie su aplicación Web del geoportal.
  6. La mayoría de exploradores guardan los iconos de favoritos en una memoria caché. Los usuarios tendrán que borrar la memoria caché de su explorador para ver el nuevo icono de favoritos.