In-browser Editing con Business Catalyst - Adobe Muse

Acerca de In-browser Editing


Al diseñar sitios web para los propietarios de sitios, una de las principales peticiones consiste en configurar un sistema para que puedan actualizar su propio contenido del sitio. También es muy útil tener una forma de realizar cambios sobre la marcha cuando se encuentra fuera de la estación de trabajo y desea realizar revisiones a un sitio.


Muse ahora incluye una función llamada In-browser Editing, que le permite a usted, a los propietarios del sitio y a los miembros de su equipo cambiar el texto y el contenido de la imagen con la interfaz del administrador de Business Catalyst. Los editores con In-browser Editing no necesitan instalar Muse. Y es fácil de usar. Las personas sin experiencia previa en diseño web pueden hacer cambios porque la edición se realiza en un navegador web, una vez que se les ha concedido acceso de edición.


Con este artículo, aprenderá cómo se puede configurar un sitio de Muse para activar In-browser Editing a fin de que los usuarios invitados al sitio puedan actualizar un sitio de Muse. Obtendrá una descripción general de los pasos que se deben llevar a cabo para usar la interfaz de In-browser Editing, para que pueda ayudar a otros a aprender cómo utilizarlo para realizar cambios. Y por último, verá cómo sincronizar el archivo .muse vuelve con la versión actual después de que los cambios se hayan aplicado al sito activo con la interfaz de In-browser Editing.


La primera vez que visita un sitio en la interfaz de edición en línea, se muestra la página principal del sitio activo. Si desea editar otras páginas del sitio, haga clic en los iconos con forma de flecha y en los botones Seguir vínculo que aparecen cuando se pase el ratón sobre los enlaces para cargar la página vinculada. Mediante esta estrategia, puede desplazarse a cualquier página para realizar actualizaciones, haciendo clic en los vínculos del mismo modo en el que los visitantes navegan por el sitio web activo.

 

Configuración de In-browser Editing


El proceso de configuración de la función de In-browser Editing consta de dos partes. En primer lugar, hay que activar la configuración en Propiedades del sitio y publicar el sitio en los servidores de alojamiento de Adobe. A continuación, puede invitar a los nuevos usuarios al sitio, de manera que puedan iniciar sesión con cualquier navegador para realizar cambios.


Para utilizar In-browser Editing, el sitio web de prueba o activo debe estar alojado en los servidores de alojamiento de Adobe Business Catalyst.


Como se ha mencionado anteriormente, las imágenes de fondo no se pueden editar con In-browser Editing. Si el sitio contiene imágenes que son esenciales para el diseño que no desea que el propietario del sitio cambie, asegúrese de que se añaden como imágenes de fondo antes de activar In-browser Editing y conceder acceso de edición.


Parte 1. Activación de In-browser Editing en las Propiedades del sitio


Inicie Muse y abra el sitio que desea configurar.

  1. Elija Archivo > Propiedades del sitio. Haga clic en la ficha Contenido y verifique que la opción In-browser Editing esté activada.
 
Marque la casilla In-browser Editing en el cuadro de diálogo Propiedades del sitio.

Nota: esta opción se activa de forma predeterminada.

Nota: se puede crear un nuevo sitio de prueba o cargar un sitio activo que utilice un nombre de dominio personalizado. In-browser Editing funciona tanto para sitios de prueba como activos, siempre que éstos se alojen en el servidor web de Adobe.


  1. Haga clic en Aceptar para cerrar el cuadro de diálogo Propiedades del sitio.
  2. Haga clic en el botón Publicar. Seleccione las opciones que desee en el cuadro de diálogo Publicar y, a continuación, haga clic en Publicar para cargar todos los archivos del sitio a los servidores de alojamiento de Adobe Business Catalyst.
  1. Una vez finalizada la operación de publicación, el cuadro de diálogo Publicar se actualiza para preguntarle si desea añadir un usuario de In-browser Editing al sitio.
El cuadro de diálogo permite elegir entre hacer clic en un vínculo y hacer clic en Aceptar.

  1. Puede hacer clic en el vínculo para añadir usuarios de In-browser Editing o simplemente hacer clic en Aceptar para cerrar el cuadro de diálogo. Para este ejemplo, haga clic en Aceptar.

Si hace clic en el vínculo para añadir usuarios de In-browser Editing, verá la misma interfaz que se describe en la sección siguiente. En cualquier momento, puede seleccionar Archivo Añadir usuario de sitio de Adobe Business Catalyst para acceder a la misma configuración.


Parte 2. Invitación de usuarios a iniciar sesión en el sitio web para acceder a la interfaz de edición


Para permitir que otros usuarios (propietarios de sitios web y miembros de su equipo) editen el sitio activo, en primer lugar es necesario agregarlos como usuarios en el sitio web, para que puedan iniciar sesión y realizar cambios. Utilizará la interfaz de usuarios Admin para crear una cuenta para ellos.


  1. En Muse, haga clic en el vínculo descrito en la sección anterior o seleccione Archivo > Añadir usuario de sitio de Adobe Business Catalyst. La interfaz de usuarios Admin del sitio se abrirá en una nueva ventana del navegador.
Elija la opción para agregar un nuevo usuario a In-browser Editing.

Nota: también puede hacer clic en el botón Administrar una vez que haya publicado un sitio y, a continuación, invitar a un usuario Admin mientras realiza otras actualizaciones para administrar el sitio.

La interfaz de usuarios Admin del sitio se abrirá en una nueva ventana del navegador.


  1. Mientras que la opción de usuarios Admin está seleccionada en la sección Configuración del sitio de la barra lateral izquierda, haga clic en el botón Invitar usuario Admin.
Invite un nuevo usuario Admin en la interfaz de usuarios Admin para el sitio.


La sección de usuarios Admin se actualiza con una nueva interfaz.


  1. En los campos que aparecen, introduzca la dirección de correo electrónico del nuevo usuario, el nombre y el apellido. Opcionalmente, puede introducir su número de teléfono móvil. Configure el menú de funciones de usuario para los usuarios.
Introduzca el nombre y la dirección de correo electrónico de la persona en los campos correspondientes.

  1. Haga clic en Invitar para agregar al nuevo usuario al sitio.

Nota: después de enviar la información, el sistema envía automáticamente la información de inicio de sesión a la persona que ha invitado en un mensaje de correo electrónico. Recibirá el correo electrónico y, a continuación, hará clic en el vínculo para configurar la contraseña única que elija. Una vez que han creado una contraseña para su cuenta, pueden iniciar sesión en la función de edición del sitio con cualquier navegador web.


Actualización del sitio con In-browser Editing


Esta sección enumera los pasos que cualquier usuario puede seguir para actualizar un sitio de Muse, una vez que se les ha concedido acceso. Si desea enviarles una copia de los pasos, puede descargar estas instrucciones.


1. Use cualquier equipo para visitar la interfaz de edición del sitio en un navegador. La dirección tendrá este aspecto:

mi-sitio.businesscatalyst.com/admin (sitio de prueba)

o

mi-sitio.com/admin (sitio activo)

En las direcciones mencionadas anteriormente, reemplace "mi-sitio" con el nombre del sitio web.

2. Introduzca la dirección de correo electrónico y la contraseña para iniciar sesión en su cuenta y acceder a la herramienta de edición en línea.

 
Utilice cualquier navegador para iniciar sesión en su cuenta del sitio.

  1. Haga clic en el botón Editar para ver su sitio en la interfaz de edición.
Comience a editar el sitio haciendo clic en el botón Editar.

La página de inicio del sitio se carga en la interfaz de In-browser Editing. Si el sitio contiene diseños alternativos para dispositivos, utilice el menú Dispositivo para elegir el diseño que desea editar.

Seleccione el nombre del diseño que desea editar.

Edición de contenido de texto con In-browser Editing


Cuando se realizan cambios en un sitio, recuerde que está trabajando en una ventana del navegador. Es importante que se publiquen los cambios que se realicen antes de abandonar la página actual o cerrar la ventana del navegador, a menos que cambie de idea y decida descartar los cambios.


Siga estos pasos para editar el contenido del texto en la página principal de su sitio:

  1. Pase el cursor por encima del marco de texto. Una superposición azul muestra el botón Editar con un icono de lápiz. Haga clic en el botón Editar para abrir la ventana Editar contenido y poder editar el texto.
Desplácese por el texto que desea cambiar y haga clic en el botón Editar.

Los estilos de texto no se cargan en la ventana Editar contenido, por lo que el formato del sitio no se aplica. Como resultado, el texto es plano y probablemente la apariencia será muy diferente a la forma en la que se muestra en la página. Pero después de realizar los cambios, verá una vista previa de cómo aparece en la página con los estilos agregados al diseño del sitio.

  1. Edite el texto en la ventana Editar contenido como desee.
La ventana Editar contenido tiene dos botones: Actualizar y Cancelar.

  1. Haga clic en Actualizar para guardar los cambios en la interfaz de edición. Haga clic en Cancelar para cerrar la ventana Editar contenido sin guardar los cambios.

Una vez que haga clic en Actualizar y cierre la ventana Editar contenido, verá una vista previa precisa del texto con los estilos aplicados, tal como aparecerá si se publica la página.

  1. Cuando haya terminado de editar el texto, haga clic en Publicar.
Haga clic en el botón Publicar para introducir los cambios y activarlos.

Los cambios que realice en la interfaz de edición no se aplican al sitio web activo hasta que haga clic en el botón Publicar en la parte inferior de la página. Si decide no realizar cambios, haga clic en Descartar cambios o cierre la ventana del navegador.


Edición de imágenes que se colocan o pegan en una página


Mediante In-browser Editing, puede editar algunas de las imágenes del sitio, siempre y cuando se inserten como imágenes en primer plano. Si las imágenes de este sitio se establecen como una imagen de fondo, no se pueden editar. Si encuentra imágenes no editables que desea cambiar, póngase en contacto con la persona que ha diseñado el sitio.


  1. Coloque el puntero del ratón sobre cualquier imagen editable para que aparezca una superposición azul con el botón Editar.
Al pasar sobre una imagen editable se muestra el botón Editar.


Nota: al pasar el ratón por una imagen vinculada, aparece un botón Clic. Cuando pasa el ratón sobre el vínculo se aplica a un marco de texto completo, aparece el botón Seguir vínculo. En cualquier caso, si desea ir a la página o al contenido vinculado, haga clic en el botón Clic o el botón Seguir vínculo.


  1. Para cambiar la imagen, haga clic en el botón Editar. Aparece la ventana Editar imagen.
Utilice la interfaz Editar imagen para cambiar la imagen existente por una nueva.

  1. Puede elegir otra imagen que exista en el sitio (utilizando la opción De sitio) o puede sustituir la imagen con una imagen de su equipo (utilizando la opción De mi equipo).

Si elige la opción De mi equipo, la imagen seleccionada en el equipo se cargará en el sitio automáticamente.


  1. Haga clic en la opción De mi equipo en la barra lateral izquierda y, a continuación, arrastre un archivo de imagen a la ventana o haga clic en Examinar para cargar.
Haga clic en Examinar para cargar y seleccione el archivo que desee utilizar en el sitio.

  1. El archivo seleccionado se cargará a los mismos servidores web que alojan el sitio web.
  2. Si lo desea, puede introducir una descripción en el campo de información de imagen. Esta práctica es la más recomendable, ya que ayuda a mejorar la optimización de motores de búsqueda y también ayuda a que el sitio sea más accesible.

Cuando reemplace una imagen, la nueva imagen que seleccione se recortará para ajustarse si tiene una relación de aspecto diferente a la imagen original. Por este motivo, se recomienda que sólo se sustituya una imagen existente por otra imagen de las mismas dimensiones o una imagen más grande con la misma relación de anchura y altura.


Si planea cambiar una imagen concreta periódicamente, puede pedir a la persona que creó inicialmente el sitio cargar diferentes imágenes con el mismo tamaño, para que pueda elegir una imagen que ya exista en el sitio. Por ejemplo, el diseñador de la web podría cargar cuatro imágenes de las mismas dimensiones para primavera, verano, otoño o invierno. Con el transcurso del tiempo, podría elegir la opción De sitio y, a continuación, cambiar la imagen que refleje la temporada actual.


  1. Haga clic en Actualizar para actualizar la imagen de la vista previa de sitio y cerrar la ventana Editar imagen. Recuerde que los cambios que realice no se insertan en la página activa hasta que haga clic en el botón Publicar en la parte inferior de la ventana.

Edición de imágenes que se encuentran dentro de los marcos de texto


Si una imagen de la página se pega dentro de un marco de texto, aún se puede editar.


  1. Pase el cursor por todo el cuadro de texto. Aparece la ventana Editar contenido. Haga clic en la imagen que aparece en la ventana Editar contenido para abrir la ventana Editar imagen.
Edite el marco de texto y, a continuación, seleccione la imagen dentro de la ventana Editar contenido para que se abra en la ventana Editar imagen.

  1. Edite la imagen como desee en la ventana Editar imagen. Seleccione una de las opciones en la barra lateral izquierda para realizar cambios. Cuando haya terminado, haga clic en Actualizar dos veces para cerrar la ventana Editar imagen y la ventana de contenido de Edge.

Edición de contenido compartido


Parte del contenido del sitio se puede añadir a la página maestra creada cuando se diseñó el sitio. Cuando los elementos se añaden a la página maestra, se muestran en las demás páginas del sitio que están vinculadas a dicha página maestra. Esto significa que si se cambia un elemento en una página, actualizará las demás instancias de dicho contenido.

Cuando se selecciona un elemento que está compartido para editarlo, el elemento se muestra en la ventana de editar imágenes compartidas.

Edite el contenido que se comparte en todas las páginas en la ventana de editar imágenes compartidas.

Tenga cuidado cuando aparezca esta ventana porque significa que otras páginas del sitio web también pueden actualizarse automáticamente al realizar cambios. Lo mejor es actuar con cautela, haciendo clic en Cancelar. Visite el sitio activo en una nueva ventana del navegador y revise las páginas para ver dónde aparece el elemento. Confirme que desea cambiar todas las iteraciones del elemento antes de volver a la interfaz de In-browser Editing para actualizarlo.


Edición de hipervínculos


Seguimiento de vínculos de la página principal para editar otras páginas del sitio


La primera vez que inicie sesión en su cuenta, se presenta con una versión editable de la página principal del sitio. Una vez que haya terminado de realizar cambios en la página de inicio, puede visitar otras páginas vinculadas en el sitio que también puede editar.


  1. Si los vínculos aparecen fuera de un marco de texto, simplemente haga clic en el vínculo para ir a la página vinculada en el sitio. Los vínculos externos (a las páginas web que no se encuentran en el sitio actual) no se cargarán en la interfaz de edición porque no puede utilizar In-browser Editing para editar páginas en otros sitios web.
  2. Si los vínculos aparecen dentro de marcos de texto, pase el cursor sobre ellos para ver un botón Clic que aparece junto al botón Editar. Haga clic para ir a la página web vinculada.
Seleccione el botón Clic para acceder a la página vinculada o a la ubicación de la etiqueta de anclaje.

  1. Si un vínculo se aplica a un marco de texto completo, pase el cursor sobre él para ver los iconos de edición o clic que aparecen.
Coloque el puntero sobre un marco de texto vinculado y haga clic en Seguir vínculo para acceder a la página vinculada.

  1. Cuando haya terminado de editar cada página del sitio, asegúrese de hacer clic en Publicar si desea guardar los cambios. Cuando haya terminado de editar el sitio completo, cierre la ventana del navegador.

Sincronización del archivo .Muse para hacer coincidir el sitio activo editado


Una vez que se produce la edición en navegador, su archivo local de .muse ya no tiene el mismo contenido que el sitio activo. En esta sección podrá obtener información acerca de cómo aprobar o rechazar los cambios que han realizado para actualizar el archivo .Muse y que coincida con el diseño del sitio actual.


  1. Inicie Muse y abra el archivo .muse del sitio.
  2. Aparecerá un mensaje de alerta, en el que se indicará que el sitio publicado ha cambiado.

Además de ver un mensaje la primera vez que se abre un archivo .muse, también se muestra un mensaje cuando se comienza a publicar un archivo .muse que no está sincronizado con el sitio web activo, que le recuerda que revise los cambios antes de publicar el sitio nuevamente.


Nota: en cualquier momento, también puede elegir Archivo > Sincronizar con el sitio de Adobe Business Catalyst para ver una interfaz que le permita revisar las diferencias entre el archivo .muse y el sitio activo.


  1. Haga clic en Revisar para revisar los cambios. Aparece la ventana Revisar y combinar cambios.
  2. Utilice la interfaz para revisar cada cambio. Los cambios realizados en cada edición se resaltan. El contenido nuevo se resalta en verde, y los elementos que se han eliminado están marcados en rojo, por lo que podrá ver de un vistazo lo que ha agregado o eliminado.
  3. Utilice las opciones del menú desplegable (No combinar o Combinar en Muse) para rechazar o aceptar el cambio específico o todos los cambios.
Utilice el menú de opciones para combinar o descartar los cambios.


Nota: si no combina los cambios, sobrescribirá los cambios aplicados al sitio activo la próxima vez que publique el archivo .muse. Este comportamiento le ayuda a corregir errores tipográficos y otros problemas de sitio que pueden producirse cuando editan el sitio con In-browser Editing.


  1. Para comparar la versión activa del sitio web del texto y las imágenes con el archivo local .muse, active y desactive la vista previa en la casilla de verificación de la página.
Oculte y muestre los cambios recientes en la vista Diseño, seleccionando y anulando la selección de la casilla de verificación Vista previa de la página.


Una vez que haya terminado la sincronización y edición del archivo .muse, publíquelo para añadir los cambios a la página activa. El diseño actual del archivo .muse sobrescribe los elementos modificados marcados como No combinar al publicar de nuevo el sitio.


Guardado de iteraciones publicadas del sitio web


Puesto que otras personas pueden realizar cambios en el sitio activo mientras realiza cambios en el archivo .muse, se recomienda guardar copias del sitio después de sincronizar los cambios y publicar la versión más reciente.


Inmediatamente después de la publicación del sitio, elija Archivo > Guardar sitio como y guarde una copia de su archivo .muse. Si lo desea, puede incluir la fecha actual en el nombre de archivo al crear nuevas copias. Gracias a esta práctica, resulta más fácil encontrar el archivo .muse que ha publicado en una fecha concreta.


Por ejemplo, puede crear una carpeta que contenga la última copia de trabajo del archivo .muse y muchas otras versiones almacenadas previamente publicadas que contengan las iteraciones de diseño del sitio publicadas anteriormente. La lista de archivos de la carpeta puede tener el siguiente aspecto:

my-site.muse

my-site_2013-1-4.muse

my-site_2013-2-23.muse

my-site_2013-4-7.muse

Además de facilitar la recuperación de los diseños de sitio anteriores, esta práctica ayuda a Muse a determinar con precisión qué cambios (si los hay) se han realizado en el sitio web mediante In-browser Editing. Al guardar las versiones de copia de seguridad de un sitio, resulta también más fácil comprobar si el archivo actual .muse y su sitio web activo todavía se encuentran en sincronización.

Contenido editable frente a no editable

Contenido ¿Editable? Seguir vínculos
Texto horizontal No
Marcos de imagen
Texto vertical No No
Imagen - Relleno de fondo (rectángulos, marcos de imagen y widgets) No No
Contadores de proyecciones de diapositivas No No
Botones de envío de formularios No No
Etiquetas de menú dinámicas (widgets de menú no configurados como Manual) No No
Elementos de página rasterizados (se incluyen imágenes con esquinas redondeadas, bordes biselados, resplandor interior o rotación aplicada, marcos de texto con fuentes del sistema, y marcos de texto rotados con efectos aplicados) No No
Texto con hipervínculos
Etiquetas de texto - Widgets de acordeón
Etiquetas de texto - Widgets de panel en fichas
Etiquetas de texto - Widgets de menú manual

Botones - Widgets de proyecciones de diapositivas

 

Botones - Widgets de composición

Imágenes en miniatura de la proyección de diapositivas

Marcos de texto e imagen dentro de las áreas de "activación" de los widgets de composición


<a onclick=omegayalfa" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2015-12-19
  • Categorias: Noticias Tutorial Adobe Adobe Muse CC Software



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!