360 Ideas
TUTORIALES ABC

Usar “Incontext Editing” para gestionar contenido desde el navegador

InContext Editing es una interfaz que permite, a través de tu navegador de Internet habitual, editar y actualizar las regiones editables de tus páginas web. Es una herramienta integrada en tu Consola de Administración que puedes usar sin la necesidad de instalar ningún software. Lo mejor de todo, es que puedes introducir texto de manera regular y tener así los contenidos de tu web actualizados sin necesidad de saber lenguajes de programación.

Puedes usar InContext Editing para actualizar o añadir imágenes a tu web. Puedes subir las fotografías que se encuentren en tu ordenador de una manera muy simple seleccionándolas a través del explorador de archivos y usando la herramienta para subirlas. Puedes, además, seleccionar aquellas imágenes que estén ya subidas en la web o en cualquier sitio de la red y editarlas y modificar el contenido directamente desde esta interfaz.

Para acceder a InContext Editing pulse el acceso directo del menú principal:


En este manual aprenderéis como trabajar con esta herramienta para subir contenido a vuestro sitio web usando tu navegador habitual.

Empezando a usar InContext Editing:

Sigue los siguientes pasos:

  1. Inicie sesión con tu cuenta en la Consola de Administración de tu sitio web:
  2. Pulse en el acceso directo a la herramienta:

    Aparecerá una ventana emergente con un link a la versión en inglés de este manual. Pulse “Start Editing”:

    Nota: Si el usuario no quisiera volver a ver esa ventana en conexiones futuras a la herramienta deberá pulsar el cuadro “Don’t show this dialog again”:

    Después de pulsar este botón la ventana desaparece y la interfaz te muestra la página de inicio de tu sitio web. Las líneas discontinuas en algunas áreas representan las zonas editables de tu sitio web que puedes cambiar. La opción de editar texto es la que está seleccionada por defecto. Si quisieras editar una página diferente de tu sitio web sólo tienes pulsar sobre la pestaña de dicha página como si estuvieras navegando la web.

    Para editar una página a la que no se acceda desde ningún link de la página de inicio puedes introducir el nombre de la página en la casilla de dirección de tu navegador. Por ejemplo:

    - Esta es la URL que aparecería en la home de una página cuando se está editando con ICE:

    http://mi-sitio.com/Admin/Editing.aspx#page=%2Fhome

    - Cambie la URL (después del signo de igual) para acceder a la página de contacto:

    http://mi-sitio.com/Admin/Editing.aspx#page=contact.html

Aclarado este punto sigamos con el manual. Haga clic en el cuadro de texto de su página de inicio. Las líneas discontinuas deberían volverse continuas.

Utilice el cursor para seleccionar parte del texto existente o haga clic en el área en la que quiere introducir nuevo texto y comience a teclear contenido.

Como estás editando un cuadro de texto, en la parte superior de la pantalla aparecen las herramientas relacionadas a texto. Por ejemplo, puedes usar el menú de estilo para elegir cual de la lista de estilos habilitados en tu CSS quieres aplicar; también puedes cambiar el tipo de fuente, su tamaño y el tipo de alineación del texto. Los últimos cuatro botones de la derecha te permiten crear distintos tipos de listas, justificar los bloques de texto y añadir guiones a la derecha o a la izquierda.

Consejo: Use los estilos que le aparezcan por defecto en cada uno de los cuadros de texto para mantener la unidad de su sitio web.

Si pasa el cursor por encima de uno de lo botones de las herramientas verá una pista de lo que hace:

Además de esos botones de formato existe otro, “More”, a la derecha del menú. Pulse para ver las opciones avanzadas para la edición de texto.

Con esta herramienta puedes:

  • Dar formato de párrafo a los textos y cabeceras.
  • Aplicar distintos colores a la fuente del texto y elegir el color que aparecerá de fondo cuando este sea seleccionado.
  • Corregir los errores en caso de cometer un cambio en el formato que no quieres aplicar. Esto se hace a través del botón “Clear all formatting”. Otra opción sería hacer clic el botón de “Deshacer”, a la izquierda.

Subir imágenes a través de InContext Editing

Ahora vamos a ver cómo insertar y editar imágenes. Sigue los siguientes pasos:

En la izquierda, selecciona el icono de la imagen (“Insert and manage images”) para cambiar al modo de edición de imagen.

Nótese que la barra superior de herramientas cambia para mostrarle las propias de imagen.


Puede añadir la imagen a la página web siguiendo uno de los siguientes métodos:

  1. Seleccione “The Internet” e introduzca el link de la imagen en el cuadro URL.
  2. Seleccione “My Computer” para elegir la imagen directamente de su disco duro a través del explorador de archivos.
  3. Seleccione “My Site” y entonces navegue hasta la página de du sitio web en la que se encuentre la imagen que desee colocar.


Cuando eliges una imagen de las que ya se encuentran en página, en la parte superior las herramientas del InContent Editing cambian a las de edición de imágenes. Si quisieras intercambiar una imagen por otra, selecciona la imagen que deseas cambiar, busque la nueva por cualquiera de los tres métodos explicados previamente y pulse el botón de “Change” para completar la operación.

Mientes tengamos una imagen seleccionada podemos borrarla directamente. Pulse el botón “Delete” y la imagen desaparecerá de la web. (Si se borrase por error siempre puedes usar la flecha azul para deshacer el borrado).

Las ultimas dos casillas de la derecha sirven para determinar el tamaño en píxeles de la imagen. La herramienta del candado sirve para mantener las proporciones de altura y anchura cuando se cambie uno de esos dos valores. Para efectuar el cambio simplemente añada un valor numero en el espacio correspondiente.

Consejo: Siempre es recomendable restringir las proporciones con el candado ya que si no se hiciera se corre el riesgo de que la imagen aparezca distorsionada. Por otro lado, siempre es posible desbloquear el candado y cambiar uno de los valores.

Tal y como podéis ver en este manual, todas las herramientas que necesitas para insertar y manipular imágenes en tu sitio web están a tu alcance en InContext Editing. Con esta herramienta no se necesita recurrir a algún otro programa de edición de imágenes para prepararlas antes de incorporarlas a tu sitio web.

Insertar y configurar los links con InContext Editing

n esta sección aprenderás el funcionamiento de las herramientas de la interfaz para añadir y configurar links en tu sitio web. Para ello siga los siguientes pasos:

  1. En la esquina superior izquierda de la pantalla, pulse el icono de la cadena para activar las herramientas de a función. Tal y como ocurrió en los casos anterior la interfaz superior se actualizará con los nuevos botones.
  2. Ahora pulse en el menú desplegable “Link To” para ver las distintas opciones que InContext Editing proporciona. Cuando tienes una imagen o un elemento de texto seleccionado puedes aplicarle un link para que lo re direccione a: una página web externa; un documento (que no sea una página HTML) que se encuentre alojado en tu sitio web; o a otras de las páginas web de tu sitio.

    También, y dentro de este menú, tenemos la posibilidad de añadir un link a una dirección de correo electrónico. Cuando eliges esta opción los visitantes que pulsen en este hipervínculo serás redirigidos a su gestor de correo electrónico habitual, concretamente, a un mensaje nuevo con esa dirección como destinatario.
  3. Elige la opción que más se ajuste a tus necesidades y configúrela:
    • Si eliges “External Web Page”: introduzca las URL de dicho sitio web.
    • Si eliges “Document from My Site”: elige el archivo en la ventana que aparecerá (cuyo funcionamiento es igual al de cualquier explorador de archivos).
    • Si eliges “Page in My Site”: elige la página web correspondiente en la ventana que aparecerá.
    • Si eliges “E-mail Address”: introduce la dirección de correo electrónico en el formulario correspondiente.

Si quisieras borrar un determinado link simplemente tendrías que elegir el texto o imagen que hacen las veces de hipervínculo y pulsar el botón “Remove Link”.

Cuando tienes un link seleccionado el botón “More” te proporciona algunas funcionalidades extra: Puedes añadir una descripción emergente (que aparecería cuando el usuario pasa el ratón sobre el vínculo); y elegir si queremos que el vínculo se abra en la misma ventana del navegador o en otra nueva.

Consejo: En diseño web lo habitual en casos de vínculos es fijar que aquellos que redirijan a partes del propio sitio web se mantengan en la misma ventana y que aquellas que estén referenciadas a cosas que no tengan que ver con tu sitio se abran en una nueva ventana del navegador. Usar esta técnica ayuda a los visitantes a saber cuándo están abandonando tu sitio web. Además ayuda a los usuarios a mantenerse en nuestra web ya que, cuando terminan de leer la información y cierran la ventana, siguen teniendo una ventana en tu sitio sobre la que continuar navegando.

Modificar el contenido de los módulos de tu página web

Aparte de actualizar el texto, gestionar las imágenes y manejar los links, con InContext Editing puedes editar el contenido de los módulos que están insertados en tu página (si la página está configurada para permitir la edición de módulos, estos se encuentra en una región editable, y tu cuenta tiene los permisos necesarios).

Por ejemplo: si pasas el ratón sobre un menú dinámico verás una caja de color gris con un link para añadir o editar los elementos del menú:

Si pulsas este vínculo serás redirigido al apartado Site Manager> Dynamic Menus de la Consola de Administración de tu sitio web (en Business Catalyst), para que puedas editarlas.

Puedes también actualizar otro tipo de módulos, por ejemplo, el de noticias: Pase el ratón por encima de la lista de noticas que ya existan en tu página web y aparecerá nuevamente la caja gris con los vínculos. Si lo pulsaras serías dirigido a Modules> News, en la Consola de Administración de tu web, para que pudieras añadir uno nuevo.

Consejo: A pesar de que todos los módulos pueden ser editados desde la Consola de Administración es más fácil usar las herramientas de InContext Editing. Estas pop-ups que aparecen (las cajas grises) incluyen los vínculos que dirigen directamente al usuario a la sección correspondiente de la Consola de Administración. Esta funcionalidad ayuda a ahorrar mucho tiempo al usuario que, además, te hace habituarte a la Consola de Administración de cara a futuras ediciones.

Otro ejemplo: si tuvieras los permisos necesarios para editar newsletters (y estos se encuentran en una región editable de la página) puedes hacer clic en la opción “Edit List” del pop-up gris para actualizar tus formularios.

Cuando pulsas en “Edit List” se abrirá una nueva ventana en tu navegador con los detalles de dicho boletín, en la Consola de Administrador:

La Consola de Administración te permite importar una nueva lista de contactos o añadir manualmente algún contacto nuevo.

Actualizar la página de confirmación del sistema para un formulario web:

Si tienes los permisos necesarios para editar los mensajes del sistema y los emails que se envían automáticamente desde tu sitio web cuando el usuario rellena un formulario (y estos se encuentran en una región editable de tu página web), puedes usar InContext Editing para editarlos.

Por ejemplo, si el contenedor del formulario es editable, el sitio está configurado para permitir al usuario editar los módulos y el usuario tiene los permisos necesarios para editarlos: puedes editar el formulario, los recuadros y el mail de confirmación que se envía después de que rellenen el formulario.

Pulse en el vínculo “Edit Confirmation Page”, dentro de la caja gris, para cambiar el texto de confirmación que proporciona el sistema cuando el usuario completa el formulario.

Nuevamente el enlace nos reconduce a la Consola de Administración, concretamente a los detalles de dicho mensaje de confirmación para que pudieras editarlo.

Para editarlo simplemente utilice las herramientas de edición de texto habituales.

Cómo deshacer y rehacer cambios recientes

Tal y como he mencionado anteriormente, puedes usar las flechas azules que aparecen a la derecha de los botones de Texto, Imagen y Links para deshacer y rehacer los cambios que hayas aplicado recientemente.

Pulse en el botón de la fecha que apunta a la izquierda para deshacer el cambio que acabas de hacer. Si, por el contrario, pulsas la flecha azul que apunta a la derecha podrás rehacer la edición que hayas deshecho con el comando anterior.

Guardar los cambios y subirlos a nuestro sitio web.

Después de hayas terminado de actualizar el texto, las imágenes y los links de tu página tienes que elegir entre las opciones que te da la interfaz. Estas tres opciones son las siguientes:

Si quieres que los cambios que has hecho se guarden, pero no están terminados del todo como para subirlos a tu página web, pulse “Save”. Esta opción crea una copia de trabajo de tu página de manera que puedas continuar trabajando en ella después. Esta copia no actualiza los datos de tu sitio web. Cuando eliges esta opción el “Page Status” cambia a “Working Copy”.

Si estás completamente satisfecho con los cambios y quieres subirlos a la red, pulse el botón “Save and Publish”. Eso actualiza la web al instante, de manera que los usuarios pasarían a ver la nueva versión.

Si hubieras hecho algunos cambios en la página web pero no quisieras ni guardarlos ni aplicarlos, entonces pulse “Discard”. Esta opción descarta todos los cambios que hayas hecho en la página usando InContext Editing. Sería el mismo efecto que pulsar el botón de “Deshacer” tantas veces como fuera necesario para devolver la página a su estado original.

Espero que este pequeño manual de InContext Editing te anime a probar las funcionalidades que incorpora ya que hace que editar contenido en tu sitio online sea verdaderamente sencillo.