Expandir Minimizar
Personas que lo han encontrado útil: 2 de 5 - Valorar este tema

Creación de diseños SmartArt personalizados con Office Open XML para Office 2007 y Office 2010 (traducción automática)

Office 2010

Resumen:  examine los componentes del diseño de un elemento gráfico SmartArt, aprenda a personalizar los diseños SmartArt en XML y a crear sus propios diseños personalizados. Además, aprenda a personalizar las galerías Estilos y Colores SmartArt y repase el marcado de un diseño personalizado completo.

Se aplica a:  Microsoft Excel 2010 | Microsoft PowerPoint 2010 | Microsoft Word 2010 | Microsoft Excel para Mac 2011 | Microsoft PowerPoint para Mac 2011 | Microsoft Word para Mac 2011

Publicado:  febrero de 2011

Proporcionado por:  Stephanie Krieger | Acerca de la autora

Contenido

Hacer clic para obtener código Captar el código de ejemplo

Hacer clic para obtener código Descargar los archivos de plantilla SmartArt

Información general

Los usuarios de Microsoft Office crean diagramas en casi cualquier tipo de documento o presentación, con el fin de ilustrar la información importante y llamar la atención sobre ella. Sin embargo, esto no siempre ha sido tan fácil. La introducción de gráficos SmartArt en Microsoft Office 2007 supuso un gran paso adelante para los gráficos empresariales, al permitir que los usuarios creasen diagramas atractivos y de gran calidad de manera virtual, con solo introducir una lista con viñetas.

En Microsoft Office 2010 (y Microsoft Office para Mac 2011), hay más de 100 diseños SmartArt integrados para los distintos tipos de diagramas que los usuarios pueden crear. De todas formas, su empresa podría tener requisitos de marca que exijan algo distinto a las opciones de diseño proporcionadas, o bien los usuarios podrían necesitar un tipo de diagrama que no se encuentra entre los diseños integrados. Por suerte, los gráficos SmartArt se pueden ampliar, por lo que puede ayudar a los usuarios a crear el contenido preciso que necesiten. Use Office Open XML para personalizar cualquiera de los diseños SmartArt integrados o para crear diseños totalmente personalizados para sus usuarios.

En este artículo, analice la creación de un diagrama SmartArt a partir de front-end y back-end, y examine los aspectos básicos de la creación de un diseño SmartArt personalizado desde cero.

Gg583880.note(es-es,office.14).gifNota:

En este artículo, se presupone que ya conoce los aspectos básicos del funcionamiento de Office Formatos Office Open XML, incluida la creación de un paquete de documentos básico de Office Open XML y cómo acceder a los elementos de un paquete. Los desarrolladores que no conozcan Office Open XML, deben consultar el artículo Essentials of the Open Packaging Conventions. Los usuarios nuevos de Office Open XML que no tengan experiencia como desarrolladores, deben consultar el curso de formación gratuito en línea Office Open XML I: Exploring the Office Open XML Formats. Tenga en cuenta que ambos recursos, así como otros vínculos proporcionados en este artículo, se crearon en un principio para Microsoft Office 2007, pero se pueden aplicar también a Office 2010.

Creación de un diseño SmartArt

Un diagrama SmartArt es básicamente una representación gráfica de una lista con viñetas de varios niveles. Los usuarios agregan párrafos y cambian el nivel de sangría en el panel de texto, como se ve en la Ilustración 1, para agregar formas y configurar el diagrama. Hay más de 100 diseños integrados disponibles en Office 2010, que cubren diversas categorías de diagramas, como diagramas de ciclo, lista, proceso y jerarquía.



Ilustración 1. Los usuarios crean diagramas SmartArt agregando viñetas y cambiando los niveles en el panel de texto.

Los usuarios crean diagramas SmartArt

Como desarrollador, los dos puntos principales que se deben tener en cuenta sobre SmartArt desde el punto de vista del usuario, son las categorías de diagramas disponibles y cómo se crea el diagrama a medida que el usuario escribe.

La mayoría de los diagramas siguen una estructura o un modelo que les ayuda a mostrar visualmente la información con más eficacia que el texto solo. Por ejemplo, como se ve en la Ilustración Figure 2, un organigrama sigue un modelo jerárquico para mostrar visualmente la estructura de notificaciones de una empresa. Del mismo modo, un diagrama de ciclo muestra visualmente la relación cíclica entre los pasos de un proceso. Estos modelos o estructuras son tipos de lógica de diagramas.



Ilustración 2. Ejemplos de un organigrama SmartArt sencillo y un diagrama de ciclo básico.

Ejemplos de un organigrama SmartArt simple

SmartArt es compatible con muchos tipos de lógica de diagramas. Por ejemplo, un diagrama podría ser lineal, cíclico o jerárquico. Podría curvarse y cambiar de dirección al final del lienzo. Sea cual sea el tipo de diagrama, cada diseño SmartArt debe seguir, al menos, un modelo lógico.



Ilustración 3. Ejemplo de las relaciones entre lo que escribe el usuario en el panel de texto y lo que dibuja el diagrama.

Ejemplo de relaciones

Al crear un diseño, puede aparecer texto de segundo nivel en la forma principal, bajo el texto de primer nivel o en su propia forma, o puede no estar permitido. Es probable que disponga de formas a las que los usuarios puedan agregar imágenes, en lugar de texto o formas puramente decorativas, sin contenido, solo con fines estéticos.

Formato de un diseño SmartArt

Al insertar un diseño SmartArt en un documento, el formato predeterminado suele ser el primer color de énfasis del tema del documento aplicado y un relleno simple sin efectos de formato gráfico adicionales. A continuación, un usuario puede formatear con facilidad el diagrama seleccionando opciones en las galerías Estilos SmartArt y Colores SmartArt.

El formato SmartArt está asociado al tema del documento activo. Así, por ejemplo, si trabaja para una empresa que utiliza directrices de marca específicas en sus documentos, podrá crear un tema personalizado que incluya preferencias de formato gráfico y colores de marca. (Para informarse sobre estos temas y consultar una introducción para desarrolladores sobre cómo crear sus propios temas personalizados, vea el artículo Creating Document Themes with the Office Open XML Formats.)

En la pestaña Diseño de herramientas de SmartArt de Office 2010 (o en la pestaña SmartArt de Office para Mac 2011) se encuentran las galerías Estilos SmartArt y Colores SmartArt.

  • La galería Estilos SmartArt que se muestra en la Ilustración 4 contiene estilos de efecto de formato gráfico, cuya fila superior usa el efecto especificado en el tema del documento aplicado.

  • La galería Colores SmartArt que se muestra en la Ilustración 4 contiene una gama de combinaciones de colores creada a partir de los colores del tema del documento aplicado.

Microsoft Office rellena automáticamente las opciones de estas galerías utilizando la configuración del tema activo. No puede editar las opciones integradas que se ven aquí, pero puede agregar sus propias entradas personalizadas a estas galerías si los usuarios tienen requisitos que no cumplen las opciones integradas. Aprenda a crear su propio color personalizado y archivos de estilo rápido más adelante, en este mismo artículo.



Ilustración 4. Galerías Estilos y Colores SmartArt

Galerías Estilos y Colores de SmartArt

Archivos de diagrama SmartArt

Los archivos de diagrama SmartArt están a disposición de los desarrolladores, que pueden trabajar con ellos de dos maneras:

  • Los elementos de diagramas SmartArt se encuentran en el paquete ZIP de un archivo de PowerPoint, Word o Excel en el que un usuario ha insertado los diagramas. Si desea personalizar las opciones de un diagrama que ya existe en un documento de usuario, como una diapositiva de ejemplo de una plantilla de PowerPoint personalizada, estos son los archivos que debe usar.

  • Los archivos de diseño SmartArt son archivos de Office Open XML con la extensión .glox. Se trata de archivos que rellenan la UI de SmartArt en PowerPoint, Word y Excel. Al crear un diseño SmartArt personalizado, este es el tipo de archivo que tiene que crear.

    Gg583880.note(es-es,office.14).gifNota:

    (El uso del término UI de SmartArt en este artículo se refiere al cuadro de diálogo SmartArt y a la galería Diseños SmartArt de Office 2010 y las galerías Insertar gráfico SmartArt de Office para Macintosh 2011.)

Además de estas dos metodologías principales para trabajar con Office Open XML para gráficos SmartArt, también puede crear archivos de color personalizado (.gcsx) y de estilo rápido (.gqsx) para agregar entradas personalizadas a las galerías Estilos y Colores SmartArt.

Los archivos .glox, .gcsx y .gqsx para estilos y diseños SmartArt integrados no se muestran cuando está instalado Microsoft Office. Sin embargo, los archivos .glox de todos los diseños SmartArt integrados se pueden descargar desde el apartado Recursos adicionales al final de este artículo. Más adelante, verá también los pasos para crear sus propios archivos a partir de los elementos de diagramas en un paquete de documentos de Office 2010 (u Office para Mac 2011).

Análisis de los elementos XML de un diagrama

Un diagrama SmartArt de un archivo de documento de Microsoft Office consta de cinco elementos, como se ve en la Ilustración 5.



Ilustración 5. Paquete de presentación de PowerPoint ampliado para mostrar elementos de diagrama.

Paquete de presentación de PowerPoint

Es importante comprender qué contiene cada elemento y, en consecuencia, qué es lo que se puede personalizar para el usuario. Sin embargo, como desarrollador, el elemento de diseño corresponde directamente a los diseños SmartArt personalizados que cree.

  • El archivo data#.xml contiene información sobre los datos del marcador de posición (como el elemento “[Text]” predeterminado que se ve en las formas de ejemplo cuando se genera un nuevo diagrama), además de contenido que el usuario ha agregado al diagrama. Es decir, en este archivo se almacena todo lo que procede del panel de texto de SmartArt para el diagrama.

  • El archivodrawing#.xml describe todos los aspectos de la apariencia visual del diagrama, como las formas que contiene y el diseño de dichas formas.

  • El archivo layout#.xml es el elemento que contiene la información del archivo.glox original de SmartArt que corresponde con el diseño que ha seleccionado el usuario en la UI de SmartArt para crear su diagrama. Este archivo determina el tipo de diagrama y cómo se compila.

  • El archivo colors#.xml contiene las definiciones de color que se usan en esta instancia del diagrama, en función de la selección activa en la galería Colores SmartArt. Esta información incluye las definiciones de color de cada etiqueta de estilo SmartArt disponible.

    Una etiqueta de estilo es un atributo que se aplica a cada uno de los nodos del diseño para especificar información sobre su formato. (Obtendrá más información sobre las etiquetas de estilo SmartArt más adelante, en este mismo capítulo.)

  • El archivo quickStyle#.xml contiene las definiciones de estilo rápido que se usan en esta instancia del diagrama, en función de la selección activa en la galería Estilos de SmartArt. Al igual que el archivo de colores, incluye definiciones que se pueden editar para cada una de las etiquetas de estilo disponibles.

Observe que la lista con viñetas anterior utiliza el signo de número para reemplazar el número 1 de los nombres de archivos. Esto se debe a que el número mostrado en los nombres de archivos de la Ilustración 5 indica que se refiere al primer diagrama del documento. Si hay varios diagramas, los elementos de todos ellos aparecerán en la subcarpeta de diagramas y tendrán números consecutivos.

En el apartado siguiente, analice los ejemplos de interacción con el diseño, los colores y los archivos de estilo rápido para adecuar el contenido de SmartArt a los usuarios en documentos o plantillas. A continuación, aprenda a extraer y editar los tres archivos como puntos de partida para sus propios diseños personalizados y a agregar entradas personalizadas a las galerías Colores y Estilos rápidos.

Análisis de componentes de un archivo .glox

Un archivo de diseño SmartArt (.glox) es una versión simplificada de los paquetes de documentos de Office Open XML que quizás ya conozca. Como puede ver en la Ilustración 6, contiene un archivo [tipos_contenido].xml, una carpeta _rels y una carpeta de diagramas que contiene los elementos principales del diagrama.



Ilustración 6. Componentes de un archivo .glox

Componentes de un archivo .glox

Al igual que en el caso de un paquete de documentos de Office Open XML, el archivo[tipos_contenido].xml contiene una definición para cada uno de los elementos principales del documento y una definición para cada extensión de tipo de archivo incluidas en el paquete. En un paquete .glox, este archivo contiene solo una definición del nombre del elemento, para el archivo layout1.xml, y dos definiciones de extensiones para los archivos XML y de relaciones, como puede ver aquí.

<?xml version="1.0" encoding="utf-8"?>
<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
  <Default Extension="xml" ContentType="application/vnd.openxmlformats-officedocument.drawingml.diagramLayoutHeader+xml" />
  <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml" />
  <Override PartName="/diagrams/layout1.xml" ContentType="application/vnd.openxmlformats-officedocument.drawingml.diagramLayout+xml" />
</Types>

Además, como puede ver en cualquier paquete de Office Open XML, dispone de la carpeta requerida _rels (relación) que contiene un archivo .rels que describe las relaciones entre los elementos del paquete. En un archivo .glox, el archivo .rels contiene relaciones para el archivo de diseño y el encabezado de diseño, como puede ver aquí.

<?xml version="1.0" encoding="utf-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/diagramLayoutHeader" Target="/diagrams/layoutHeader1.xml" Id="rId1" />
<Relationship Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/diagramLayout" Target="/diagrams/layout1.xml" Id="rId2" />
</Relationships>

El archivo layoutheader1.xml contiene un identificador único, así como información sobre el diseño para la UI de SmartArt, como puede ver en el marcado siguiente. El identificador debe ser único para cada uno de los diseños que cree o no se podrá cargar. El título y la descripción se utilizan en la vista previa que se obtiene en el cuadro de diálogo de SmartArt en Office 2010, como se ve en la Ilustración 7.

Recuerde que el marcado del encabezado incluye una etiqueta cat para la categoría en la que aparece el diseño. Puede agregar varias etiquetas de categoría en la etiqueta catLstpara visualizar el diseño en varias categorías. Observe también el atributo pri (prioridad) de la etiqueta Categoría, que indica si el gráfico aparece en el cuadro de diálogo y en la galería Diseños. Los números más bajos colocan el diagrama más cerca del principio de la lista. Como puede ver en la Ilustración 4, el valor 100 coloca este diagrama al principio de la categoría Lista.

<?xml version="1.0" encoding="utf-8"?>
<layoutDefHdr uniqueId="Simple Snip Corner List_10_2010" xmlns="http://schemas.openxmlformats.org/drawingml/2006/diagram">
    <title val="Snip Corner List" />
    <desc val="Simple custom list layout with a single node and no connectors. This linear layout adds shapes from left to right, reducing the size of all shapes as more are added." />
    <catLst>
        <cat type="list" pri="100" />
    </catLst>
</layoutDefHdr>


Ilustración 7. Vista previa del diagrama en el cuadro de diálogo SmartArt box.

Vista previa de diagrama

El archivo layout1.xml es el elemento que contiene las instrucciones completas para su diseño. Busque en el archivo layout1.xml la lista personalizada simple que se muestra en la Ilustración 7, más adelante en este mismo artículo.

Gg583880.note(es-es,office.14).gifNota:

Nota: si usa la herramienta Open XML Package Editor Power Tool para Visual Studio 2010, puede abrir un archivo .glox en Visual Studio para ver y administrar de manera más clara las relaciones entre paquetes, como se ve en la Ilustración 8. Esta herramienta le puede ahorrar mucho trabajo si está creando y editando un paquete de formato de Office Open XML. Obtenga más información y descargue la herramienta aquí.



Ilustración 8. Componentes de un archivo .glox mostrados en el editor OPC de Visual Studio 2010

Componentes que aparecen en el editor OPC

Personalización de gráficos SmartArt con Office Open XML

Cuando se haya familiarizado con el marcado que se encuentra detrás de los diagramas SmartArt, podrá personalizar casi cualquier elemento del diagrama que exista en un documento de Microsoft Office, ya sean estilos y formatos o el tipo y el comportamiento de las formas.

Las tareas de personalización de ejemplo seleccionadas para esta sección pretenden mostrar los conceptos que se aplican cuando se personaliza un diagrama existente o cuando se crean sus propios archivos .glox, .gcsx y .gqsx.

Cambio de formas

Uno de los cambios más sencillos y más solicitados con respecto a los diagramas SmartArt es el tipo de forma utilizada. Por ejemplo, a los usuarios les pueden resultar especialmente útiles los diseños de gráficos, pero la empresa presenta requisitos específicos que no permiten los márgenes cuadrados (como un rectángulo estándar) para los gráficos.

Un usuario puede seleccionar todas las formas de un gráfico existente y, a continuación, usar el comando Cambiar forma de la pestaña Formato de herramientas de SmartArt para cambiarlas según sea necesario. Si luego se agregan nuevas formas al diagrama, volverán a las formas indicadas en el diseño. Por lo tanto, para cambiar todas las formas actuales y futuras en el diagrama, realice el cambio en el archivo layout#.xml.

Gg583880.note(es-es,office.14).gifNota:

La mayoría de los diseños de organigramas integrados usan un rectángulo normal como forma principal. Podría parecer que la mayoría de los diseños integrados en la categoría Jerarquía que se muestra en la Ilustración 9 son organigramas, pero muchos no lo son. Los diseños que incluyen la palabra hierarchy en su nombre tienen un comportamiento similar al de un organigrama, pero no tienen las funciones propias de un organigrama, incluida la opción para agregar formas Asistente o para cambiar el diseño de las bifurcaciones. Por lo tanto, podría resultar útil para los usuarios personalizar las formas de un organigrama, incluso aunque ya exista un diseño de jerarquía integrado que utilice las formas requeridas.



Ilustración 9. Categoría Jerarquía de los diseños SmartArt integrados

Categoría Jerarquía de los diseños SmartArt integrados
  1. Si no sabe el nombre del tipo de forma que desea para la nueva forma, puede buscarlo en la documentación del formato de archivo (vea el sitio del estándar ECMA 376 en ecma-international.org), o bien insertar una forma del tipo que necesite en una diapositiva en blanco de una presentación de PowerPoint y, a continuación, examinar el marcado de dicha diapositiva para encontrar el tipo de forma.

    Si inserta la forma en una diapositiva para encontrar el nombre del tipo de forma drawingML, busque en el elemento correspondiente del documento de diapositivas la etiqueta a:prstGeom para encontrar el nombre de tipo.

  2. En el archivo layout#.xml del diagrama que desee personalizar, para encontrar el nombre del tipo de forma que va a reemplazar, busque las etiquetas shape y encuentre la etiqueta que contenga el atributo type. Por ejemplo, observe el tipo de forma “roundRect” en el marcado siguiente, que se refiere a un rectángulo redondeado.

    <dgm:shape type="roundRect" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:blip="">
                <dgm:adjLst>
                  <dgm:adj idx="1" val="0.1667"/>
                </dgm:adjLst>
              </dgm:shape>
    
  3. Utilice el comando Reemplazar del editor para reemplazar el nombre de la forma existente por el nombre de la forma nueva que prefiera. El número de instancias del nombre de tipo de forma puede variar en función del tipo de diagrama.

    Si el tipo de diagrama contiene más de un nodo para las formas (como una forma para el contenido de nivel uno y una forma independiente para el contenido de nivel dos) y solo desea reemplazar las formas de un nodo específico, observe que la etiqueta de forma que contiene el atributo de tipo está anidada en una etiqueta layoutNode. En esta etiqueta layoutNode es donde aparecen los atributos de la etiqueta de nombre y estilo de un nodo, que le ayudarán a determinar el nodo que está editando.

    Por ejemplo, en el siguiente marcado de ejemplo, vea las etiquetas layoutNode y styleLbl en la primera línea de marcado. El nombre está explícito en este caso, pero si no ha obtenido suficiente información sobre el nodo a partir del nombre, podrá deducir de qué nodo se trata a partir de la etiqueta de estilo. En el apartado siguiente, obtendrá más información sobre las etiquetas de estilo.

    <dgm:layoutNode name="firstChild" styleLbl="bgAccFollowNode1">
                <dgm:alg type="sp"/>
                <dgm:shape type="rect" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:blip="">
                  <dgm:adjLst/>
                </dgm:shape>
                <dgm:presOf axis="ch desOrSelf" ptType="node node" cnt="1 0"/>
                <dgm:constrLst/>
                <dgm:ruleLst/>
              </dgm:layoutNode>
    

Cambio de colores

Es evidente que un usuario puede seleccionar una forma en un diagrama para cambiar su color, pero si agrega nuevas formas al diagrama, los colores de las nuevas formas usarán el estilo de color SmartArt aplicado (es decir, la selección efectuada en la galería Colores SmartArt). Del mismo modo al cambio de formas en un diseño, si desea que los colores del diagrama tomen como valor predeterminado uno distinto a los disponibles en la galería Colores SmartArt, cambie los colores en el archivo XML.

Como se ha mencionado antes, cada opción de la galería Colores SmartArt contiene un conjunto de definiciones sobre cómo aparecen las formas con cada etiqueta de estilo. Por ejemplo, si utiliza el diseño Venn básico integrado para crear un diagrama de Venn, el relleno de la forma será semitransparente. El relleno transparente lo proporciona la etiqueta de estilo vennNode1. Por lo tanto, si necesitase crear un diseño de Venn que no utilice el relleno transparente, solo podrá reemplazar el valor del nombre de la etiqueta de estilo en la etiqueta layoutNode correspondiente.

Gg583880.note(es-es,office.14).gifNota:

Si crea sus propios diseños personalizados y no aplica etiquetas de estilo, se utilizarán etiquetas predeterminadas para determinar el color y el estilo rápido. Las etiquetas de estilo predeterminadas varían según el tipo de forma. Por ejemplo, en un diagrama de lista de un solo nivel, como el diseño Lista de bloques básica (que aparece en la parte superior de la categoría de lista en el cuadro de diálogo SmartArt de forma predeterminada), la etiqueta de estilo predeterminada sería node1. Este estilo permite que cambien los colores de las formas nuevas si se selecciona una opción de la galería Colores SmartArt que utiliza distintos rellenos.

Vea la tabla Etiquetas de estilo en SmartArt Developer Reference para obtener la lista completa de etiquetas de estilo con descripciones, ejemplos visuales y el uso esperado. Por ejemplo, dicha tabla mostrará que la etiqueta de estilo a la que se hace referencia en el ejemplo de marcado anterior, "bgAccFollowNode1", indica una forma secundaria, como una usada para mostrar texto secundario.

Una de las solicitudes más frecuentes entre los usuarios es la capacidad para mostrar el color de énfasis 1 del tema automáticamente como primera forma en un diagrama que usa varios colores de énfasis del tema. Lo normal es que el primer color de énfasis de un tema que usa una marca corporativa represente el color principal de la marca de la empresa.

De manera predeterminada, hay muchos diseños que no muestran el color de énfasis 1 si hay una opción multicolor seleccionada en la galería Colores SmartArt. Esto se debe a que dicho color se reserva para determinados casos en los que debe ser siempre el primer color, como la forma principal de un organigrama o la forma central de un diagrama radial. node0 es la etiqueta de estilo que se usa normalmente en estos casos y el color no varía con esta etiqueta de estilo. Sin embargo, puede editar el elemento colors#.xml del diagrama para hacer efectivo este cambio, de manera que la rotación de las formas de énfasis empiecen con el énfasis 1.



Ilustración 10. El diagrama Lista de bloques básica con la primera opción Multicolor en la galería Colores SmartArt empieza por el énfasis 2.

Diagrama Lista de bloques básica

Para seguir con este ejemplo, inserte un diagrama Lista de bloques básica en una diapositiva y aplique la primera opción Multicolor de la galería Colores SmartArt, como se muestra en la Ilustración 10. A continuación, cierre el archivo y abra el paquete ZIP de documentos para editar el archivo XML.

Gg583880.note(es-es,office.14).gifNota:

En la descarga de ejemplo se incluyen una presentación que contiene un diagrama Lista de bloques básica y los otros diseños integrados a los que se hace referencia como ejemplos en este artículo.

  1. Abra el archivo colors#.xml asociado al diagrama Lista de bloques básica que acaba de crear.

  2. Desplácese hacia abajo o busque la pestaña styleLbl del estilo node1 (es el segundo estilo del archivo). El contenido de dicha etiqueta styleLbl incluye información del color de la línea y el relleno, además de las etiquetas disponibles para agregar información de color (como color de relleno de texto), como se muestra aquí.

    <dgm:styleLbl name="node1">
        <dgm:fillClrLst meth="repeat">
          <a:schemeClr val="accent2"/>
          <a:schemeClr val="accent3"/>
          <a:schemeClr val="accent4"/>
          <a:schemeClr val="accent5"/>
          <a:schemeClr val="accent6"/>
        </dgm:fillClrLst>
        <dgm:linClrLst meth="repeat">
          <a:schemeClr val="lt1"/>
        </dgm:linClrLst>
        <dgm:effectClrLst/>
        <dgm:txLinClrLst/>
        <dgm:txFillClrLst/>
        <dgm:txEffectClrLst/>
    </dgm:styleLbl>
    
    Observe el atributo meth (método) de fillClrLst con el valor repeat. Esto significa que las formas siguientes tomarán el siguiente color de énfasis de la lista y luego volverán a empezar por la parte superior de la lista, después de llegar al final. También verá las definiciones de las etiquetas de estilo que usan el método span. Este método crea una gama de colores utilizando sombras de los colores de énfasis de la lista (algo parecido a una rueda de colores).

  3. Tenga en cuenta que la etiqueta de lista de colores de relleno (dgm:fillClrLst) del marcado anterior empieza con el color de énfasis 2 del tema. Agregue una nueva línea sobre la etiqueta de color de énfasis 2 del esquema para el énfasis 1.

    <a:schemeClr val="accent1"/>
    
    Después de hacerlo, debería haber seis etiquetas schemeClr anidadas en la etiqueta de lista de colores de relleno. Esto implica que la primera forma del diagrama usará el relleno de énfasis 1 y las formas del diagrama repetirán la gama de los seis colores de énfasis del tema a medida que se agregan formas.

  4. Dado que node1 es la etiqueta de estilo predeterminada que se usa con este diagrama, esto es todo lo que tiene que hacer para volver a abrir la presentación en PowerPoint y ver el cambio en el diagrama. Del mismo modo, si edita los colores de un diagrama distinto, puede ver el archivo layout#.xml para determinar las etiquetas de estilo que se usan y modificar los colores de dichos estilos.

    Sin embargo, si el usuario pudiese cambiar el diseño del diagrama activo por un diseño SmartArt distinto que utilizase distintas etiquetas de estilo, es posible que prefiera examinar detenidamente la lista de todas las etiquetas de estilo del archivo de colores y agregarles el énfasis 1, siempre que haya una lista de colores repetida.

    Si lo hace, tenga en cuenta que la etiqueta schemeClr de algunas etiquetas de estilo es una etiqueta anidada que contiene atributos. Por ejemplo, el estilo vennNode1 incluye un atributo de transparencia para cada color particular, especificado por la etiqueta alpha aquí mostrada. Cuando agregue una etiqueta para el color de énfasis 1, asegúrese de agregar también los atributos requeridos, para mantener la coherencia.

          <a:schemeClr val="accent2">
            <a:alpha val="50000"/>
          </a:schemeClr>
    

Cuando vuelva a abrir la presentación en PowerPoint, verá los colores modificados en el diagrama existente. Sin embargo, tenga en cuenta que la galería Colores SmartArt no presenta cambios. Para agregar opciones a la galería que los usuarios puedan aplicar a cualquier diagrama SmartArt de un documento, cree un archivo .gcsx personalizado, siguiendo las indicaciones que encontrará más adelante, en este mismo artículo.

Cambio de comportamiento

En el archivo layout#.xml aparecen reglas y restricciones que rigen los parámetros de formas y relaciones del diseño, como márgenes, espacio entre formas, tamaño de fuente máximo y mínimo, y alto o ancho de la forma.

Por ejemplo, inserte un nuevo gráfico en una presentación utilizando el diseño Lista de ancho variable (De forma predeterminada, en Office 2010, este diseño es la octava entrada de la categoría Lista en el cuadro de diálogo SmartArt). Esta sencilla lista vertical permite que el ancho de cada forma sea independiente.

Si analiza el elemento layout#.xml en busca de un diagrama Lista de ancho variable, encontrará varios apartados en el marcado que proporcionan restricciones y reglas. En un diseño, las restricciones y las reglas aparecerán en relación con el nodo al que pertenecen.

El primer conjunto de restricciones que puede ver define varios parámetros del diagrama completo (el nodo de diseño raíz). Observe la tercera restricción de la lista, que indica el tamaño de fuente máximo (en puntos) permitido en el diagrama, como se muestra aquí. El tamaño de fuente en los diagramas SmartArt es dinámico de forma predeterminada, se basa en la cantidad de contenido que agrega un usuario. El valor de este ejemplo evita que el tamaño de la fuente supere automáticamente los 65 puntos mientras el usuario edita el texto.

(Recuerde que este valor no evita que el usuario aplique manualmente un tamaño de fuente más grande. Si un usuario aplica de forma manual un tamaño de fuente, dicha instancia del diagrama dejará de contar con el cambio de tamaño automático.)

    <dgm:constr type="primFontSz" for="ch" forName="text" op="equ" val="65"/>

Un poco más abajo, en el mismo archivo, verá las restricciones y las reglas que afectan a las formas principales del diagrama. En especial, observe las reglas y las restricciones sobre márgenes que se muestran aquí.

<dgm:constrLst>
    <dgm:constr type="tMarg" refType="primFontSz" fact="0.2"/>
    <dgm:constr type="bMarg" refType="primFontSz" fact="0.2"/>
    <dgm:constr type="lMarg" refType="primFontSz" fact="0.2"/>
    <dgm:constr type="rMarg" refType="primFontSz" fact="0.2"/>
</dgm:constrLst>
<dgm:ruleLst>
    <dgm:rule type="w" val="INF" fact="NaN" max="NaN"/>
    <dgm:rule type="primFontSz" val="5" fact="NaN" max="NaN"/>
</dgm:ruleLst>

Después de probar las tareas de esta sección para personalizar un diagrama en XML, es posible que conozca los componentes XML del diagrama. Mientras analiza los apartados restantes, recuerde que el contenido de los elementos del diagrama que edite para una instancia existente del diagrama es básicamente el mismo que aquel con el que trabaja cuando está creando sus propios diseños o modificando las galerías Colores y Estilos SmartArt. Por lo tanto, ya sabe prácticamente todo lo que necesita para iniciar los pasos siguientes.

Creación de un archivo .glox, .gcsx o .gqsx a partir de un diagrama existente

Si desea crear un diseño personalizado que se parezca a un diseño existente, pero no tiene acceso al archivo .glox, se puede ahorrar algún tiempo creando un archivo .glox que utilice el elemento layout#.xml para una instancia existente del diagrama que desee copiar. Del mismo modo, puede usar los elementos de estilos rápidos y colores de un diagrama existente para ahorrar tiempo a la hora de crear sus propios archivos .gcsx y .gqsx.

Creación de un archivo .glox

El primero de los dos procedimientos siguientes analiza la creación del paquete .glox. Sin embargo, debe seguir los pasos del segundo procedimiento para editar el archivo layout1.xml antes de poder utilizar el nuevo archivo .glox como diseño.

Observe que el ejemplo del segundo procedimiento utiliza el archivo layout#.xml para la Lista de bloques básica.

Vuelva a consultar el apartado sobre los componentes de un archivo .glox para ver los archivos y las carpetas que tiene que crear. En dicho apartado, encontrará también el marcado que necesita para el archivo [tipos_contenido].xml, el archivo .rels y el archivo layoutHeader1.xml de los pasos siguientes.

Para crear un paquete .glox

  1. Cree el archivo [tipos_contenido].xml con el marcado que se ha proporcionado antes.

  2. Cree carpetas denominadas _rels y diagrams.

    • En la carpeta _rels, agregue el archivo .rels con el marcado proporcionado antes.

    • En la carpeta diagrams, agregue el archivo layoutHeader1.xml con el marcado proporcionado antes.

  3. En el archivo layoutHeader1.xml , edite el marcado para asegurarse de haber especificado un identificador único y para darle al nuevo diseño un título y una descripción. Es posible que también necesite editar la lista de categorías y las prioridades, según sea necesario en el tipo de diagrama que esté creando.

  4. Extraiga el elemento layout#.xml del diseño que desee copiar desde el documento Microsoft Office en el que ha insertado una instancia del diagrama. Si el diagrama no era el primero del documento del que ha extraído el elemento, cambie el nombre del archivo a layout1.xml.

  5. Agregue el archivo layout1.xml a la carpeta diagrams que ha creado en el paso 2. El procedimiento siguiente de este apartado le mostrará los cambios necesarios que debe realizar en este archivo para que el nuevo paquete .glox funcione como diseño SmartArt.

  6. Seleccione el archivo de tipos de contenido y las dos carpetas que ha creado y comprímalos en una carpeta ZIP. A continuación, cambie la extensión del archivo del paquete zip por .glox.

Para editar un archivo layout1.xml que utilizar en un archivo .glox

  1. Con el archivo layout1.xml abierto para su edición, busque el prefijo dgm: y reemplácelo globalmente por nada. Así, por ejemplo, la etiqueta <dgm:layoutDef… se convertirá en <layoutDef….

  2. Edite la etiqueta de definición del diseño (la primera línea bajo la referencia a la versión XML en la parte superior del archivo) para que incluya solo la definición del espacio de nombres de un diagrama, y sin la referencia al elemento :dgm. La línea editada debe resultar parecida al marcado siguiente.

    <layoutDef xmlns ="http://schemas.openxmlformats.org/drawingml/2006/diagram">
    
    Gg583880.note(es-es,office.14).gifNota:

    Los pasos anteriores son los únicos que debe seguir para poder utilizar el archivo .glox. Sin embargo, se recomienda seguir los pasos restantes para obtener un mejor resultado y que resulte más sencillo realizar ediciones o conseguir el comportamiento esperado al personalizar el diseño.

  3. Si las etiquetas de título, descripción y categoría aparecen directamente bajo la etiqueta de definición del diseño, elimínelas. Dejarlas no evitará que el archivo funcione, pero esta información aparece en el elemento layoutHeader1.xml del paquete .glox.

  4. Es posible que desee reemplazar las etiquetas de datos de ejemplo (sampData), datos de estilo (styleData) y datos de color (clrData) con su propio contenido, pero no es necesario hacerlo en este momento.

  5. Técnicamente, estas etiquetas son opcionales (es decir, el archivo .glox se cargará sin ellas), pero son necesarias porque permiten que aparezcan vistas previas en el cuadro de diálogo SmartArt, la galería Estilos SmartArt y la galería Colores SmartArt, respectivamente. Los datos de ejemplo habilitan también las formas de inicio, que aparecen la primera vez que el usuario inserta el diagrama. Por lo tanto, es posible que prefiera editar estas etiquetas más adelante, si lo que ve en las vistas previas y los marcadores de posición habilitados por estas etiquetas no son lo que quiere después de personalizar el diseño. En el apartado del tutorial obtendrá más información sobre estas etiquetas de estilo, color y datos de ejemplo.

  6. Aunque llegados a este punto el archivo .glox funcionará en la mayoría de los casos, sigue siendo recomendable realizar algunos cambios para limpiar el archivo de diseño y hacer que resulte más sencillo editarlo. En concreto, observe lo siguiente:

    • Las etiquetas de formas incluyen información de relaciones que se aplica a la instancia del diagrama en un documento, no en un diseño. El mejor procedimiento consiste en examinar ahora el marcado y limpiar el archivo de diseño eliminando la información innecesaria. Por ejemplo, la etiqueta aquí mostrada, que contiene los atributos de señalización visual y espacio de nombres, es el comienzo de una etiqueta emparejada, porque no contiene una barra diagonal al final de la etiqueta.

      <shape xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:blip="">
      
      Edite la etiqueta aquí mostrada para convertirla en <shape> en el archivo de diseño. Si la etiqueta de forma original no está emparejada (es decir, si la barra diagonal aparece al final de esta etiqueta y no hay etiqueta final en el archivo), asegúrese de dejar la barra diagonal cuando quite los atributos innecesarios de esta etiqueta. No quite las etiquetas anidadas en una etiqueta de forma, aunque estén vacías. Es posible que algunas sean necesarias.

    • Si hay una etiqueta de forma que incluye el tipo de forma, pero no una etiqueta de estilo, es buena idea agregarle una. Como se ha indicado antes, las formas usarán las etiquetas de estilo adecuadas si no se ha especificado ninguna. Sin embargo, especificar etiquetas de estilo le permite tener mucho más control sobre el aspecto del diagrama. Para hacerlo, busque las etiquetas layoutNode de los nodos de forma y agregue el atributo styleLbl a dicha etiqueta.

      Por ejemplo, si está usando el archivo de diseño Lista de bloques básica como ejemplo, la etiqueta que debería contener una etiqueta de estilo es <layoutNode name="node">. Para asignar la etiqueta de estilo node1 a las formas de este nodo, edite la etiqueta como se indica aquí.

      <layoutNode name="node" styleLbl="node1">
      

Para poder empezar a personalizar su nuevo archivo .glox, guárdelo en la carpeta de usuario predeterminada SmartArt y, a continuación, abra el cuadro de diálogo SmartArt en un programa de Office 2010 para ver si se carga correctamente en el cuadro de diálogo y si se puede insertar en un documento.

  • La ubicación predeterminada de la carpeta SmartArt para Office 2010 cuando se ejecuta en Microsoft Windows 7 o Windows Vista es C:\Users\[nombre_usuario]\AppData\Roaming\Microsoft\Templates\SmartArt Graphics.

  • Si el nuevo archivo también se va a utilizar en Office para Mac 2011 (todos los diseños de SmartArt son compatibles con varias plataformas), la ruta de acceso para el contenido personalizado de SmartArt en Mac OS es /Users/[nombre_usuario]/Library/Application Support/Microsoft/Office/SmartArt Graphics.

Creación de archivos .gcsx y .gqsx

El proceso para crear archivos .gcsx y .gqsx es similar al proceso de creación de un archivo .glox. Los dos procedimientos siguientes muestran los pasos de un paquete .gcsx y explican las diferencias que podría haber en el caso de un paquete .gqsx.

Aunque los pasos y la estructura de archivos y carpetas del paquete son prácticamente los mismos que al crear un archivo .glox, los repetimos aquí porque existen diferencias en algunas estructuras y nombres de archivos en cada paso.

Para crear un paquete .gcsx y .gqsx

  1. Cree el archivo [tipos_contenido].xml . La estructura es similar a la del archivo .glox, pero hace referencia al archivo correcto en lo que respecta al nombre de elemento y al tipo de contenido correcto en lo que respecta a colores y efectos en la extensión XML y la información del nombre del elemento. La estructura aquí mostrada es para un archivo de colores, como puede ver por las referencias a diagramColorsHeader y diagramColors.

    <?xml version="1.0" encoding="utf-8"?>
    <Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
      <Default Extension="xml" ContentType="application/vnd.openxmlformats-officedocument.drawingml.diagramColorsHeader+xml" />
      <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml" />
      <Override PartName="/diagrams/colors1.xml" ContentType="application/vnd.openxmlformats-officedocument.drawingml.diagramColors+xml" />
    </Types>
    

    Si va a crear un archivo .gqsx, reemplace diagramColors por diagramStyles (y diagramColorsHeader por diagramStylesHeader). Reemplace también el nombre de archivo colors1.xml de la ruta de acceso de definiciones de nombre de elemento por quickstyle1.xml. Observe que colors aparece en plural en los nombres de los archivos, pero no quickstyle.

  2. Cree carpetas denominadas _rels y diagrams.

    • En la carpeta _rels , agregue el archivo .rels con el marcado aquí mostrado. Si va a crear un archivo de estilo rápido en lugar de un archivo de colores, realice los mismos cambios necesarios en el archivo de tipos de contenido.

      <?xml version="1.0" encoding="utf-8"?>
      <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
        <Relationship Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/diagramColorsHeader" Target="/diagrams/colorsHeader1.xml" Id="rId1" />
        <Relationship Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/diagramColors" Target="/diagrams/colors1.xml" Id="rId2" />
      </Relationships>
      
    • En la carpeta diagrams, agregue el archivo colorsHeader1.xml con el marcado siguiente.

      <?xml version="1.0" encoding="utf-8"?>
      <colorsDefHdr xmlns="http://schemas.openxmlformats.org/drawingml/2006/diagram" uniqueId="new unique ID">
          <title val="Colorful - Start with Accent 1" />
          <desc val="" />
          <catLst>
              <cat type="colorful" pri="100" />
          </catLst>
      </colorsDefHdr>
      
      En el archivo de encabezado, edite el marcado para asegurarse de que ha especificado un identificador único para cada archivo .gcsx o .gqsx que cree, y para dar un nombre al color o el estilo. Edite también la categoría y la prioridad según sea necesario.

      Si va a crear un archivo de estilo rápido, la etiqueta colorsDefHdr de este marcado de ejemplo se denominará styleDefHdr (asegúrese de cambiar la etiqueta inicial y la final).

      Para los archivos de encabezado de color y estilo, es importante recordar que los nombres de categorías que se van a agregar al archivo de encabezado no coinciden con precisión con lo que se ve en la UI. La lista de los nombres de categoría que se pueden utilizar en el archivo de encabezado se muestra en la Tabla 1. Al igual que en el caso de cualquier marcado XML, recuerde que la terminología debe ser precisa y es necesario respetar las mayúsculas y minúsculas.

    Tabla 1. Nombres de categoría de color y estilo para archivos .gcsx y .gqsx

    Categorías de la galería Color

    Categorías de la galería Estilo

    mainScheme

    colorful

    accent1

    accent2

    accent3

    accent4

    accent5

    accent6

    simple

    3D

  3. Cree una nueva presentación de PowerPoint que contenga un gráfico de SmartArt y aplique el estilo de color más cercano a los colores personalizados que quiera. (Si va a crear un archivo de estilo rápido, aplique el estilo SmartArt más cercano al estilo rápido personalizado que quiera).

  4. Extraiga el elemento colors#.xml (o el elemento quickStyle#.xml) del diagrama correspondiente del paquete ZIP del archivo que acaba de crear. Si el diagrama no era el primero del documento del que ha extraído el elemento, cambie el nombre del archivo para que sea colors1.xml (o quickStyle1.xml).

  5. Agregue el archivo que acaba de extraer a la carpeta diagrams que ha creado en el paso 2. El procedimiento siguiente de esta sección mostrará las modificaciones necesarias que se deben realizar en este archivo para que el nuevo paquete funcione como archivo de color o estilo rápido de SmartArt.

  6. Seleccione el archivo de tipos de contenido y das dos carpetas que ha creado y comprímalas en una carpeta ZIP. A continuación, cambie la extensión de nombre de archivo del paquete zip a .gcsx (o .gqsx si es un archivo de estilo rápido).

Para editar el archivo colors1.xml (quickstyle1.xml) de manera que se pueda usar en un archivo .gcsx o .gqsx

  1. Con el archivo colors1.xml (quickstyle1.xml) abierto para su edición, busque el prefijo dgm: y reemplácelo globalmente por nada. Así, por ejemplo, la etiqueta <dgm:colorsDef… se convertirá en <colorsDef….

  2. Edite la etiqueta de definición de colores (o estilos) (la primera línea bajo la referencia de la versión XML en la parte superior del archivo) para que incluya las dos definiciones de espacio de nombres que se verán de manera predeterminada, pero no el identificador único (ya que se encuentra en el archivo de encabezado del paquete), y quite la referencia del elemento :dgm del prefijo del espacio de nombres del diagrama (de modo que solo quede xmlns=). La línea editada debe resultar parecida al marcado siguiente. En un archivo de estilo rápido, esta línea de marcado tiene el mismo aspecto, pero el nombre de la etiqueta es styleDef.

    <colorsDef xmlns="http://schemas.openxmlformats.org/drawingml/2006/diagram" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
    

Ahora está preparado para realizar los cambios de formato que desee en las definiciones de la etiqueta de estilo del archivo colors1.xml o quickStyle1.xml de su nuevo paquete. Hágalo igual que lo haría para volver a colorear las definiciones de la etiqueta de estilo de un diagrama existente, como se ha visto antes.

Para cargar el nuevo archivo de color o estilo, guárdelo en la ruta de acceso correspondiente de los archivos .glox personalizados proporcionados en el apartado anterior. Recuerde que los archivos .gcsx y .gqsx files son compatibles con varias plataformas y se cargarán en las galerías Colores y Estilos SmartArt de Office 2010 y Office para Mac 2011.

Tutorial: layout1.xml

Como ya ha podido comprobar, el archivo layout1.xml almacena la definición completa de un diseño de diagrama SmartArt. En esta sección se muestra un archivo layout1.xml para la lista lineal simple personalizada vista antes.

Para crear su propio diseño, totalmente personalizado, a partir de cero, puede crear un paquete .glox, como se ha explicado en la sección anterior, y crear un nuevo archivo layout1.xml en lugar de copiarlo de un diagrama existente.

Un archivo de diseño consta de lo siguiente:

  • Datos de ejemplo o de marcador de posición para crear vistas previas en la UI de SmartArt, además de las galerías Colores y Estilos SmartArt.

  • La definición del nodo de diseño raíz (el diagrama en su totalidad) y todos sus nodos, incluidas las formas (puntos) del diagrama, el texto y las imágenes de las formas, y las relaciones entre las formas y los elementos de texto. Las definiciones incluyen parámetros y restricciones relacionados con el aspecto y reglas de comportamiento del diseño del diagrama y su contenido.

Incluso en un diagrama sencillo, como el que se ve aquí, verá varios algoritmos en funcionamiento, como los que pertenecen al comportamiento del diagrama (flujo lineal y compuesto, en este caso), el texto (al que se hace referencia como tx en el marcado) y el espaciado entre formas (al que se hace referencia como sp en el marcado). También verá las instrucciones Para cada de este marcado de ejemplo, para administrar la propagación de formas y del espacio entre formas.

Otros diseños, más complejos, contienen elementos que no se ven aquí, como instrucciones condicionales para gestionar las opciones a disposición del usuario en el tipo de algoritmo (como en un diagrama de jerarquías, por ejemplo) o el uso de conectores entre formas (como en la imagen del diagrama que se ve en la Ilustración 1). De todas maneras, este diseño le ofrece el conjunto principal de aspectos básicos para empezar a trabajar con sus propios diseños, que puede crear utilizando los recursos adicionales que se proporcionan más adelante.

Para ver el marcado completo del archivo layout1.xml mostrado en los ejemplos siguientes, consulte el archivo Simple Snip Corner List.glox de las descargas de ejemplo de este artículo.

Datos, colores y estilos de ejemplo

Inmediatamente después de la etiqueta de definición del diseño, se encuentran las etiquetas de datos de ejemplo, datos de color y datos de estilo, que se usan para crear el contenido del marcador de posición, la miniatura de la galería de color y la miniatura de la galería de estilo, respectivamente. El contenido del marcador de posición creado a partir del marcado de datos de ejemplo determina las formas predeterminadas que aparecen cuando el usuario inserta un nuevo diagrama basado en el diseño, además de la vista previa que aparece en el UI de SmartArt.

Es habitual que se muestren las tres formas de nivel superior, como se ve en el marcado, pero puede personalizar estos datos para que se muestran más o menos formas en sus vistas previas y en el contenido predeterminado que se crea cuando el usuario inserta un nuevo diagrama basado en el diseño.

Este ejemplo muestra los datos de ejemplo. Inmediatamente después, en el marcado, se encuentran las etiquetas styleData y clrData, que contienen el mismo modelo de datos, la misma lista de puntos y las mismas etiquetas de la lista de conexiones anidadas. En el diseño de ejemplo aquí utilizado, como es habitual, los modelos styleData y clrData son idénticos al modelo de datos de ejemplo. Sin embargo, no tienen por qué serlo.

<sampData>
<dataModel>
    <ptLst>
        <pt modelId="0" type="doc" />
        <pt modelId="10" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="20" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="30" type="node">
            <prSet phldr="1" />
        </pt>
    </ptLst>
    <cxnLst>
        <cxn modelId="40" type="parOf" srcId="0" destId="10" srcOrd="0" destOrd="0" presId="" />
        <cxn modelId="50" type="parOf" srcId="0" destId="20" srcOrd="1" destOrd="0" presId="" />
        <cxn modelId="60" type="parOf" srcId="0" destId="30" srcOrd="2" destOrd="0" presId="" />
    </cxnLst>
</dataModel>
</sampData>
  • Observe en este marcado que la lista de puntos establece tres formas, definidas como marcadores de posición. Puede replicar las etiquetas de puntos para crear formas de marcadores de posición adicionales si quiere (o quitarlas para incluir menos formas). Si lo hace, recuerde actualizar los identificadores para que sigan siendo únicos.

  • Si cambia los identificadores, recuerde que se hace referencia a los números de identificadores de los puntos en el atributo destID (id. de destino) de la lista de conexiones correspondiente. El identificador de las conexiones se deriva de manera consecutiva de los identificadores utilizados para los puntos.

Si el diagrama es más complejo, puede anidar los puntos para crear los datos de marcadores de posición correspondientes, como se indica aquí.

<sampData>
<dataModel>
    <ptLst>
        <pt modelId="0" type="doc" />
        <pt modelId="10" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="11" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="20" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="21" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="30" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="31" type="node">
            <prSet phldr="1" />
        </pt>
    </ptLst>
    <cxnLst>
        <cxn modelId="40" type="parOf" srcId="0" destId="10" srcOrd="0" destOrd="0" presId="" />
        <cxn modelId="12" type="parOf" srcId="10" destId="11" srcOrd="0" destOrd="0" presId="" />
        <cxn modelId="50" type="parOf" srcId="0" destId="20" srcOrd="1" destOrd="0" presId="" />
        <cxn modelId="22" type="parOf" srcId="20" destId="21" srcOrd="0" destOrd="0" presId="" />
        <cxn modelId="60" type="parOf" srcId="0" destId="30" srcOrd="2" destOrd="0" presId="" />
        <cxn modelId="32" type="parOf" srcId="30" destId="31" srcOrd="0" destOrd="0" presId="" />
    </cxnLst>
</dataModel>
</sampData>

Tenga en cuenta que los datos del ejemplo anterior saben qué formas son secundarias, porque están relacionados con las formas principales de la lista de conexiones (atributo srcID).

Si no le preocupa especialmente la estructura de las vistas previas o el contenido predeterminado y se quiere asegurar de que aparece algo, puede usar los datos predeterminados más sencillos, de los cuales se ve una muestra en el ejemplo siguiente.

<sampData useDef="1">
    <dataModel>
        <ptLst/>
        <bg/>
        <whole/>
    </dataModel>
</sampData>

El atributo useDef (usar valor predeterminado) es un valor booleano. Si su valor es true, como en este ejemplo, se omiten las etiquetas clrData y styleData y se usan en su lugar los valores predeterminados. (Tenga en cuenta que, de forma predeterminada, se muestran tres formas.) Así, puede omitir las etiquetas de datos de estilo y color, pero las vistas previas seguirán apareciendo en las galerías. Si se pasa por alto el atributo useDef (si su valor es false de forma predeterminada), se deberá especificar información en la lista de puntos y la lista de conexiones para que aparezcan los datos de ejemplo.

Nodo de diseño raíz

Inmediatamente después de los datos de ejemplo, se encuentra la definición del nodo de diseño raíz, que proporciona la definición (incluido el algoritmo, los parámetros, las restricciones y las reglas) de todo el diagrama.

Los nodos de puntos (los que describen un elemento de forma habitual en el diagrama al que agrega contenido el usuario), así como los nodos de soporte (los que definen el espacio entre formas), están anidados en la etiqueta del nodo de diseño raíz. Aquí, se han dividido en varios encabezados para que el resultado sea legible.

<layoutNode>
    <alg type="lin" />
    <shape />
    <constrLst>
        <!--Font size constraint-->
        <constr op="equ" type="primFontSz" for="des" ptType="node" val="40" />
        <!--Constraints for composite-->
        <constr type="w" for="ch" forName="composite" refType="w" />
        <constr type="h" for="ch" forName="composite" refType="h" />
        <!--Space between rows/columns-->
        <constr op="equ" type="sp" refType="w" refFor="ch" refForName="composite" fact="0.1" />
        <!--Constraints for sibTrans-->
        <constr op="equ" type="w" for="ch" forName="sibTrans" refType="w" refFor="ch" refForName="composite" fact="0.1" />
        <constr op="equ" type="h" for="ch" forName="sibTrans" refType="w" refFor="ch" refForName="sibTrans" />
    </constrLst>
    <forEach name="nodesForEach" axis="ch" ptType="node">
        <!--composite-->
        <layoutNode name="composite">
        <alg type="composite">
            <param type="ar" val="1.6667" />
        </alg>
        <shape />
  • El tipo de algoritmo principal de este diagrama es linear flow. En este caso, se trata de una lista lineal horizontal a la que se agregan formas de izquierda a derecha, en una única línea. Las formas reducirán automáticamente su tamaño a medida que se agregan otras nuevas, a fin de mantener un tamaño y una distancia entre formas coherentes.

  • font size constraint, en este caso, define el tamaño máximo de las fuentes del diagrama en 40 puntos.

  • El atributo constraints for composite se refiere al algoritmo compuesto, que se encuentra en su propio nodo en la parte inferior de este ejemplo. Este algoritmo especifica el tamaño y la posición de los nodos secundarios, pero, como puede ver aquí, también define parámetros para todo el diagrama. Fíjese en la etiqueta param anidada en la etiqueta de algoritmo compuesto de la parte inferior del marcado, que define la relación de aspecto del diseño. Si se cambia esta relación de aspecto, cambiarán también las proporciones de forma. Por ejemplo, una relación de aspecto de 1 haría que los rectángulos recortados de este diagrama pareciesen cuadrados recortados.

  • La instrucción forEach de este ejemplo propaga los puntos subsiguientes (formas) a medida que el usuario crea el diagrama. Sin esta instrucción, solo aparecerá una instancia del rectángulo recortado en el diagrama, y cada elemento de nivel superior será un párrafo con viñetas en la forma.

  • Las restricciones de sibTrans (transición del mismo nivel) se refieren al marcado siguiente, que aparece al final de este archivo de diseño (anidado en el nodo de diseño raíz). Este contenido define el espaciado entre elementos del mismo nivel.

    <forEach name="sibTransForEach" axis="followSib" ptType="sibTrans" cnt="1">
        <!--sibTrans-->
        <layoutNode name="sibTrans">
            <alg type="sp" />
            <shape />
        </layoutNode>
    </forEach>
    
  • Observe que hay otra instrucción forEach aquí, que propaga otra instancia de espacio para cada instancia nueva de una forma en este diseño.

  • Observe también que este nodo sibTrans usa otro algoritmo, sp (espacio).

    Gg583880.Tip(es-es,office.14).gifSugerencia:

    Si desea crear formas superpuestas en el diseño, puede definir la restricción de ancho máximo para la forma del algoritmo de espacio en un valor negativo.

Nodo de elemento principal

Este diseño de ejemplo contiene un elemento de forma o puntos principal (el rectángulo recortado), cuya definición se muestra aquí.

<!--Main-->
<layoutNode name="Main" styleLbl="node1">
    <alg type="tx">
<param type="parTxLTRAlign" val="l" />
    </alg>
    <shape type="snipRoundRect">
<adjLst>
    <adj idx="1" val="0.1667" />
    <adj idx="2" val="0.1667" />
</adjLst>
    </shape>
    <presOf axis="desOrSelf" ptType="node" st="1" cnt="0" />
    <constrLst>
<constr type="lMarg" refType="primFontSz" fact="0.15" />
<constr type="rMarg" refType="primFontSz" fact="0.15" />
<constr type="tMarg" refType="primFontSz" fact="0.15" />
<constr type="bMarg" refType="primFontSz" fact="0.15" />
    </constrLst>
    <ruleLst>
<rule type="primFontSz" val="10" />
    </ruleLst>
</layoutNode>

He puesto el nombre Main a este nodo porque es el único elemento de forma del diagrama. Defina para un atributo Name cualquier valor que le resulte sencillo de recordar. Recuerde lo siguiente:

  • Como se ha explicado antes en este mismo artículo, aparece una etiqueta de estilo en la etiqueta layoutNode para definir el formato de las formas de este nodo.

  • El algoritmo tx (texto) define los parámetros adicionales del texto de estas formas. En este caso, la alineación horizontal (de izquierda a derecha) del texto del párrafo se ha especificado en la izquierda. El valor predeterminado si se pasa por alto este parámetro sería "centrado".

  • La etiqueta adjLst anidada en la etiqueta de forma del rectángulo recortado especifica los valores del controlador de ajuste. Estos valores le permiten definir la posición de los controladores de ajuste con forma de diamante amarillo que ve en la mayoría de las formas de Office Art. Si desea una forma parecida, puede que le resulte más sencillo insertar una forma en una diapositiva, definir los controladores de ajuste según la forma que desee que aparezca y, a continuación, extraer los valores de ajuste del marcado para la forma de dicha diapositiva.

  • La etiqueta presOf (presentación de) se refiere al texto secundario del nodo. Si esta línea no está presente, no se permitirá texto bajo el nivel uno. El valor del eje desOrSelf se refiere al nivel activo o a todos los descendientes. Las referencias que vea a ch (secundario) se refieren al siguiente nivel inferior. Las referencias a des (descendientes) se refieren a todos los niveles subsiguientes.

  • Como se ha visto antes, en este mismo artículo, las restricciones adicionales mostradas en el este ejemplo de marcado definen los márgenes como factor del tamaño de fuente principal activa y la regla aquí proporcionada define el tamaño de fuente mínimo del texto de este nodo.

Otros diseños, más complejos, contendrán elementos adicionales, pero este ejemplo contiene todos los elementos básicos que necesita para crear un diseño funcional de SmartArt desde cero.

Pasos siguientes

Cuando se haya familiarizado con la creación de un diseño personalizado básico, como el que se analiza en este artículo, recuerde que puede copiar y personalizar los diseños integrados, a fin de explorar las estructuras de diseños más complejos.

Visite los vínculos de SmartArt Developer Reference proporcionados en los Recursos adicionales, donde podrá obtener más información sobre todos los algoritmos y las técnicas disponibles de SmartArt, como la adición de configuración de animación a sus diseños. Las notas para el implementador citadas en los Recursos adicionales son un recurso genial, en el que se pueden realizar búsquedas, para acceder a la documentación completa sobre definiciones de diagramas en el formato de archivo.

Recursos adicionales

Acerca de la autora

Colaborador MVPStephanie Krieger es MVP de Microsoft Office y autora de dos libros: Advanced Microsoft Office Documents 2007 Edition Inside Out y Microsoft Office Document Designer. Como asesora de documentación profesional, ha ayudado a muchas empresas globales a desarrollar soluciones empresariales para Microsoft Office en ambas plataformas. Su nuevo libro para Office 2010 y Office para Mac 2011 saldrá a la venta en la primavera de 2011. Obtenga más información sobre las próximas publicaciones y póngase en contacto con Stephanie a través de su blog en arouet.net.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft. Reservados todos los derechos.