Utilice Dreamweaver con los servicios en línea de Adobe, incluidos BrowserLab y Business Catalyst InContext Editing.

Los servicios en línea de Adobe son aplicaciones web alojadas que trabajan de forma similar a las herramientas de escritorio tradicionales. No obstante, la ventaja de los servicios en línea radica en que siempre se encuentran actualizados debido a su alojamiento en la web, a diferencia del equipo.

Dreamweaver se integra directamente con Adobe® BrowserLab y Adobe® Business Catalyst InContext Editing. En las siguientes secciones de la Ayuda encontrará la información necesaria para trabajar con estos servicios.

Dreamweaver también se integra con los servicios en línea Adobe® CS Live (entre los que se incluye BrowserLab). Para más información sobre el trabajo con CS Live, consulte Uso de Adobe CS Live.

Para obtener información sobre la administración de servicios en línea de Adobe, consulte el sitio web de Adobe en www.adobe.com/go/learn_creativeservices_es.

BrowserLab

Adobe BrowserLab le permite obtener una vista previa del contenido Web local desde dentro de Dreamweaver, sin necesidad de publicarlo primero en un servidor de acceso público. Puede obtener una vista previa de los archivos del sitio local de Dreamweaver o de un servidor remoto o de prueba.

Para obtener información sobre el uso del servicio en línea BrowserLab, incluida información sobre el uso de BrowserLab con Dreamweaver, consulte www.adobe.com/go/lr_abl_es.

Business Catalyst InContext Editing

Business Catalyst InContext Editing

Adobe Business Catalyst InContext Editing es un componente de edición de Adobe Business Catalyst que permite a los usuarios realizar cambios de contenido sencillos desde un navegador Web. Para cambiar una página Web, los usuarios sólo tienen que navegar a la página, iniciar una sesión en InContext Editing y editar la página. Las opciones de edición son sencillas y elegantes y su uso no requiere conocimiento previo del código HTML o de la edición Web.

Utilice Dreamweaver para hacer que las páginas HTML puedan editarse antes de habilitar a los usuarios para realizar cambios dinámicos en la Web. Para ello, especifique las regiones de la página que desea permitir que los usuarios utilicen. Por ejemplo, puede tratarse de una página de noticias con titulares y extractos de artículos. Puede seleccionar este contenido y transformarlo en una región editable de InContext Editing para que, cuando el usuario inicie sesión en InContext Editing, pueda editar los titulares y los extractos directamente en un navegador.

En esta documentación se explica cómo trabajar con las regiones editables de InContext Editing en Dreamweaver, pero Adobe también ofrece otros recursos para ayudarle a trabajar con InContext Editing:

Para más información sobre Adobe Business Catalyst, visite www.businesscatalyst.com.

Nota:

Adobe AIR no es compatible con Adobe Business Catalyst InContext Editing. Si utiliza la extensión de AIR para Dreamweaver para exportar una aplicación que contiene regiones de InContext Editing, la funcionalidad de InContext Editing no estará disponible.

Creación de una región editable de InContext Editing

Una región editable de InContext Editing consiste en un par de etiquetas HTML que incluye el atributo ice:editable en la etiqueta de apertura. La región editable define el área de la página que el usuario puede editar directamente en un navegador.

Nota:

Si añade una región editable de InContext Editing a una página basada en una plantilla de Dreamweaver, la nueva región editable de InContext Editing deberá estar dentro de una región que ya sea editable.

  1. Siga uno de estos procedimientos:

    • Seleccione la etiqueta div, th o td que desee transformar en una región editable.

    • Coloque el punto de inserción donde desee insertar la nueva región editable en la página.

    • Seleccione exactamente una región editable en una plantilla de Dreamweaver (archivo DWT).

    • Seleccione el contenido de la página que desee convertir en editable (por ejemplo, un bloque de texto).

  2. Seleccione Insertar > InContext Editing > Crear región editable.

  3. Las opciones varían en función de la selección realizada.

    • Si ha seleccionado una etiqueta div, th o td, Dreamweaver transforma la etiqueta en una región editable sin necesidad de ejecutar ningún otro paso.

    • Si desea insertar una región editable nueva en blanco, realice una de las acciones siguientes:

      • Seleccione Insertar nueva región editable en el punto de inserción actual y haga clic en Aceptar. Dreamweaver inserta una etiqueta div en el código con el atributo ice:editable en la etiqueta de apertura.

      • Seleccione Transformar la etiqueta padre en una región si desea que Dreamweaver convierta la etiqueta padre de la selección en el elemento contenedor de la región editable. Sólo determinadas etiquetas HTML se pueden transformar: div, th y td.

    Nota:

    Esta segunda opción solo está disponible cuando el nodo padre cumple exactamente los criterios de transformación. Por ejemplo, debe ser una de las etiquetas transformables enumeradas y no debe estar sujeta a ninguno de los errores indicados en Mensajes de error de InContext Editing.

    • Si ha seleccionado una región editable de una plantilla de Dreamweaver, haga clic en Aceptar en el cuadro de diálogo Crear región editable. Dreamweaver envuelve la región editable de la plantilla con una etiqueta div que actúa a modo de contenedor para la nueva región editable de InContext Editing.
    • Si ha seleccionado otro contenido que desea hacer editable, realice una de las siguientes acciones:
    • Seleccione Envolver la selección actual con una etiqueta DIV y transformarla después si desea envolver la selección realizada con una etiqueta div y convertirla en una región editable. La etiqueta div con la que Dreamweaver envuelve el contenido actúa como contenedor de la región editable.

    Nota:

    La adición de etiquetas div a las páginas puede alterar la visualización de las páginas y los efectos de las reglas CSS. Por ejemplo, si tiene una regla CSS que aplica un borde rojo alrededor de las etiquetas div, verá un borde rojo alrededor de la selección actual cuando Dreamweaver la envuelva con una etiqueta div y la transforme. Si desea evitar este tipo de conflictos, puede reescribir las reglas CSS que afecten a la selección actual o deshacer la transformación (Edición > Deshacer) y luego seleccionar y transformar una etiqueta admitida que Dreamweaver no tenga que envolver con una etiqueta div.

    • Seleccione Transformar la etiqueta padre en una región editable si desea que Dreamweaver convierta la etiqueta padre de la selección en el elemento contenedor de la región editable. Solo determinadas etiquetas HTML se pueden transformar: div, th y td.
  4. En la vista de Diseño, haga clic en la etiqueta azul de la región editable para seleccionarla si no se hubiera seleccionado aún.

    Nota:

    Si está trabajando en una plantilla de Dreamweaver, asegúrese de que selecciona la región editable de InContext Editing (la región contenedora) y no la región editable de la plantilla de Dreamweaver.

  5. Seleccione las opciones que desee, o anule su selección, en el inspector de propiedades de regiones editables. Las opciones que seleccione estarán disponibles para el usuario cuando edite el contenido de la región editable en un navegador. Por ejemplo, si selecciona la opción Negrita, el usuario podrá convertir el texto en negrita; si selecciona la opción Lista con números y Lista con viñetas, el usuario podrá crear listas con números y viñetas; si selecciona la opción Vínculo, el usuario podrá crear vínculos; etc. Pase el puntero del ratón por el icono de cada una de las opciones para ver información sobre herramientas de lo que la opción habilita.

  6. Guarde la página.

    Si es la primera vez que añade la funcionalidad InContext Editing a una página, Dreamweaver le informa de que está añadiendo archivos de compatibilidad con InContext Editing en el sitio: ice.conf.js, ice.js e ide.html. Asegúrese de cargar los archivos en el servidor cuando cargue la página; de lo contrario, la funcionalidad InContext Editing no funcionará en el navegador.

Creación de una región repetida de InContext Editing

Una región repetida de InContext Editing consiste en un par de etiquetas HTML que incluye el atributo ice:repeating en la etiqueta de apertura. La región repetida define el área de la página que el usuario puede “repetir” y en la que puede añadir contenido si se edita en un navegador. Por ejemplo, si tiene un encabezado y un párrafo de texto que le sigue, puede transformar estos elementos en una región repetida que el usuario puede duplicar en otra página.

Regiones repetidas en una ventana de navegador editable de InContext Editing
Regiones repetidas tal y como se muestran en una ventana de navegador editable de InContext Editing. Se selecciona la región inferior y se puede duplicar de nuevo, eliminar o desplazar hacia arriba y abajo.

Además de añadir regiones repetidas basadas en la región original, también puede permitir al usuario eliminar regiones, añadir regiones completamente nuevas (no basadas en el contenido de la región original) y desplazar regiones hacia arriba o abajo.

Cuando crea una región repetida, Dreamweaver la envuelve en otro contenedor que se llama grupo de regiones repetidas. Este contenedor (etiqueta div con el atributo ice:repeatinggroup añadido a la etiqueta de apertura) actúa como contenedor de todas las regiones repetidas editables que el usuario puede añadir al grupo. No puede mover regiones repetidas fuera de sus contenedores de grupo de regiones repetidas. Además, no deberá añadir manualmente a la página etiquetas de grupo de regiones repetidas. Dreamweaver las añade automáticamente cuando son necesarias.

Nota:

Al crear una región repetida de una fila de tabla (etiqueta tr), Dreamweaver aplica el atributo de grupo de región repetida a la etiqueta padre (por ejemplo, la etiqueta table) y no inserta ninguna etiqueta div.

Si está trabajando en una página que ya contiene un grupo de regiones repetidas e intenta añadir una región repetida inmediatamente después del grupo existente, Dreamweaver detectará que hay un grupo de regiones repetidas que precede a la región que está intentando añadir y le ofrecerá la posibilidad de añadir la nueva región al grupo existente. Puede optar por añadir la nueva región repetida al grupo existente o crear un grupo de regiones repetidas totalmente nuevo.

Nota:

Si añade una región repetida de InContext Editing a una página basada en una plantilla de Dreamweaver, la nueva región repetida de InContext Editing deberá estar dentro de una región que ya sea editable.

Para crear una región editable en Dreamweaver, siga estos pasos.

  1. Siga uno de estos procedimientos:

    • Seleccione la etiqueta que desee transformar en una región repetida. La lista de etiquetas posibles es extensa: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul y var.

    Nota:

    Las etiquetas div son las únicas que pueden contener atributos de regiones editables y regiones repetidas simultáneamente.

    • Coloque el punto de inserción donde desee insertar la nueva región repetida en la página.
    • Seleccione exactamente una región repetida en una plantilla de Dreamweaver (archivo DWT).
    • Seleccione el contenido de la página que desee repetir (por ejemplo, un encabezado o un bloque de texto).
  2. Seleccione Insertar > InContext Editing > Crear región repetida.

  3. Las opciones varían en función de la selección realizada.

    • Si ha seleccionado una etiqueta transformable, Dreamweaver transformará la etiqueta en una región repetida sin necesidad de ejecutar ningún otro paso.

    • Si desea insertar una región repetida nueva en blanco, realice una de las acciones siguientes.

      • Seleccione Insertar nueva región repetida en el punto de inserción actual y haga clic en Aceptar.

      • Seleccione Transformar la etiqueta padre en una región repetida si desea que Dreamweaver convierta la etiqueta padre de la selección en el elemento contenedor de la región. Sólo algunas etiquetas HTML son transformables: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul y var.

    Nota:

    Esta segunda opción solo está disponible cuando el nodo padre cumple exactamente los criterios de transformación. Por ejemplo, debe ser una de las etiquetas transformables enumeradas y no debe estar sujeta a ninguno de los errores indicados en Mensajes de error de InContext Editing.

    • Si ha seleccionado una región repetida de una plantilla de Dreamweaver, haga clic en Aceptar en el cuadro de diálogo Crear región repetida. Dreamweaver envuelve la región repetida de la plantilla con una etiqueta div que actúa a modo de contenedor para la nueva región repetida de InContext Editing.
    • Si ha seleccionado otro contenido que desea repetir, realice una de las siguientes acciones:
      • Seleccione Envolver la selección actual con una etiqueta DIV y transformarla después si desea envolver la selección realizada con una etiqueta div y convertirla en una región repetida. La etiqueta div con la que Dreamweaver envuelve el contenido actúa como contenedor de la región repetida.
      • Seleccione Transformar la etiqueta padre en una región repetida si desea que Dreamweaver convierta la etiqueta padre de la selección en el elemento contenedor de la región repetida. Solo algunas etiquetas HTML son transformables: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul y var.
  4. En la vista de Diseño, haga clic en la etiqueta azul de la región repetida para seleccionarla si no se hubiera seleccionado aún. Fíjese en que Dreamweaver le obliga a seleccionar la etiqueta del grupo de regiones repetidas. El motivo es que todas las regiones repetidas existen dentro de un grupo de regiones repetidas y debe definir opciones para las regiones repetidas definiendo opciones para el grupo entero.

  5. Seleccione las opciones que desee, o anule su selección, en el inspector de propiedades del grupo de regiones repetidas. Hay dos opciones disponibles: Reordenar y Añadir/quitar. Cuando se selecciona Reordenar, los usuarios puede desplazar regiones repetidas hacia arriba o abajo en el navegador. Cuando se selecciona Añadir/quitar, los usuarios pueden añadir o quitar regiones repetidas en el navegador. Ambas opciones están seleccionadas de manera predeterminada y siempre debe haber al menos una seleccionada.

  6. Guarde la página.

    Si es la primera vez que añade la funcionalidad InContext Editing a una página, Dreamweaver le informa de que está añadiendo archivos de compatibilidad con InContext Editing en el sitio: ice.conf.js, ice.js e ide.html. Asegúrese de cargar los archivos en el servidor cuando cargue la página; de lo contrario, la funcionalidad InContext Editing no funcionará en el navegador.

Eliminación de una región

Para eliminar una región, lo mejor es utilizar el inspector de propiedades de la región. Al usar el inspector de propiedades de la región, se asegura de eliminar todo el código asociado a la región.

  1. Seleccione una región editable, una región repetida o un grupo de regiones repetidas.

  2. En el inspector de propiedades de la región, haga clic en el botón Quitar región.

Especificación de clases CSS para añadir formato

La función Administrar clases CSS disponibles de InContext Editing ha dejado de utilizarse a partir de Dreamweaver CS5.

Mensajes de error de InContext Editing

No puede aplicar InContext Editing a etiquetas que contengan etiquetas de script o bloque(s) de código del lado del servidor.

Si la selección contiene código del lado del servidor, Dreamweaver no permite transformarlo en una región editable o repetida. Este asunto tiene que ver con cómo InContext Editing guarda las páginas editables cuando el usuario trabaja en el navegador. Cuando el usuario guarda la página después de editarla, InContext Editing elimina el código del lado del servidor de la región.

La selección actual no se puede transformar ni ajustar con una etiqueta DIV porque el nodo padre no permite DIV como etiqueta hijo

Si la selección que desea transformar en la página no se puede transformar directamente, Dreamweaver tendrá que envolver la selección con etiquetas div que actuarán a modo de contenedor de la nueva región editable o repetida. Por este motivo, las etiquetas padre que desee transformar tienen que permitir las etiquetas div como hijos. Si la etiqueta padre de la etiqueta que intenta transformar no permite etiquetas div hijo, Dreamweaver no permite realizar la transformación.

La selección actual ya contiene o está dentro de una región editable. No se permiten regiones editables anidadas.

Si la selección se encuentra en el interior de una región editable, o si hay una región editable en la selección, Dreamweaver no permite realizar la transformación. InContext Editing no admite regiones editables anidadas.

Las regiones editables no deben contener regiones repetidas ni grupos de regiones repetidas

Las regiones editables de InContext Editing no pueden contener ninguna otra funcionalidad de InContext Editing. Si intenta añadir una región repetida o un grupo de regiones repetidas a una región editable, Dreamweaver no permite realizar la transformación.

Las regiones repetidas no deben estar dentro de regiones editables ni contener grupos de regiones repetidas

Las regiones editables de InContext Editing no pueden contener ninguna otra funcionalidad de InContext Editing. Si intenta añadir una región repetida o un grupo de regiones repetidas a una región editable, Dreamweaver no permite realizar la transformación. Dreamweaver tampoco transforma un elemento en una región editable o repetida si ya contiene un grupo de regiones repetidas.

La selección actual ya contiene o está dentro de una región repetida. No se permiten regiones repetidas anidadas.

Si la selección se encuentra en el interior de una región repetida, o si hay una región repetida en la selección, Dreamweaver no permite realizar la transformación. InContext Editing no admite regiones repetidas anidadas.

La selección debe contener exactamente una región editable/repetida de plantilla de Dreamweaver o estar dentro de alguna región editable de plantilla de Dreamweaver

Cuando se trabaja con archivos de plantilla de Dreamweaver (archivos .dwt), se deben seguir ciertas reglas. Para transformar una región editable/repetida de plantilla de Dreamweaver en una región editable/repetida de InContext Editing, debe seleccionar exactamente una región editable/repetida de plantilla de Dreamweaver en la página y, a continuación, transformarla. Para transformar otra selección de la página (por ejemplo, un bloque de texto), ésta se debe encontrar dentro de la región editable de plantilla de Dreamweaver.

Sólo es posible aplicar simultáneamente la funcionalidad de Región editable y de Región repetida a etiquetas DIV

Si la selección no es una etiqueta div y ya se le ha aplicado un atributo de región repetida, Dreamweaver no permite aplicar también el atributo de región editable a la etiqueta. Sólo se pueden aplicar atributos de región repetida y región editable simultáneamente a las etiquetas div.

Dreamweaver ha detectado que una etiqueta de grupo de regiones repetidas precede a la región repetida

Las regiones repetidas de InContext Editing deben incluirse todas en un grupo de regiones repetidas. Cuando se añade una región repetida nueva a una página, Dreamweaver averigua antes si ya existe un grupo de regiones repetidas. Si existe, Dreamweaver permite añadir la región repetida nueva en el grupo de regiones repetidas que ya existe o bien crear un grupo de regiones repetidas nuevo donde incluir la nueva región repetida.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea