Galerías HTML personalizadas

El diseño y el aspecto de la galería HTML se denomina tema. Aunque Expression Media incluye varios temas predefinidos, se pueden crear galerías personalizadas o modificar las existentes para que los temas de la galería coincidan mejor con su creatividad o con los elementos multimedia. Para crear o modificar plantillas de temas se requieren conocimientos avanzados de HTML. Una plantilla es una página HTML básica que contiene una o más frases de campos, como (iView:Catalog). Expression Media sustituye esas frases con el contenido correspondiente real o la información del catálogo cuando exporta la página web. Las plantillas de tema de Microsoft Expression Media se crean con código HTML estándar y se pueden editar mediante cualquier editor HTML, como Microsoft Expression Web o cualquier herramienta de diseño web o editor de texto de terceros.

Si desea usar sus galerías personalizadas en Expression Media, las plantillas que componen un tema deben contener etiquetas HTML de Expression Media específicas. Estas etiquetas son marcadores de posición que se reemplazan por texto cuando se crea la galería. Las plantillas personalizadas aparecen en el menú Tema en el cuadro de diálogo Galerías HTML cuando se reinicia Expression Media. Un ejemplo de etiqueta HTML específica de Expression Media es (iView:Catalog), que se reemplaza por el nombre del catálogo durante el proceso de exportación. Esta sección proporciona información general e instrucciones para crear y modificar temas, plantillas y etiquetas.

Sugerencia:
La mejor forma de crear una plantilla consiste en hacer una copia de una plantilla existente, cambiar su nombre y modificar distintos campos o el diseño.

Temas en Expression Media

Expression Media usa los temas para organizar las plantillas de galerías HTML. Un tema se almacena en una carpeta que contiene plantillas HTML de índices y elementos multimedia. Al almacenar ambos tipos de plantillas en la misma carpeta, resulta mucho más sencillo compartir un nuevo diseño de galería con otros usuarios. Una carpeta de temas también contiene una carpeta de activos para los gráficos HTML relacionados y una imagen usada como vista previa del tema en el cuadro de diálogo Opciones de HTML. La vista previa es una imagen JPEG de 200 x 120 píxeles denominada About.jpg.

Expression Media almacena los temas personalizados en la carpeta Plug-ins definida por el usuario. En Macintosh OS X, los temas se pueden almacenar en tres ubicaciones:

• ~nombreDeUsuario/Library/Application Support/Expression Media 2/Plug-ins/HTML Templates

• /Library/Application Support/Expression Media 2/Plug-ins/HTML Templates

• Network/Library/Application Support/Expression Media 2/Plug-ins/HTML Templates

Plantillas en Expression Media

Expression Media usa plantillas para generar galerías HTML de los catálogos. Las etiquetas de Expression Media de una plantilla representan la parte de la plantilla que Expression Media reemplaza con el contenido del catálogo cuando genera la galería.

Expression Media puede generar dos tipos de páginas HTML: de índice y de elementos multimedia. La página de índice enumera todos los elementos multimedia, o un subconjunto de ellos, del catálogo, igual que en la Vista en miniatura. La página de elementos multimedia es específica de un solo elemento del catálogo y normalmente contiene una imagen más grande o información acerca de ese elemento del catálogo, como en la Vista de elementos multimedia. Para obtener acceso a la página de elementos multimedia, haga clic en una imagen en miniatura de la página de índice.

Puede crear plantillas para las páginas de índice y de elementos multimedia. Expression Media almacena ambos tipos de plantillas en la misma carpeta. El nombre de esta carpeta es el nombre del tema de la galería HTML que se muestra en el cuadro de diálogo Galería HTML.

Etiquetas en Expression Media

Las etiquetas en Expression Media controlan varias funciones, desde la representación multimedia y la estructura de las páginas, hasta la navegación, extracción y la readaptación de la información de los metadatos. La mayoría de las etiquetas multimedia se sustituyen por un único número o cadena de texto que Expression Media extrae de los datos del catálogo. Lo único que debe hacer es colocar una etiqueta en cualquier lugar de una página HTML. Se sustituirá con el contenido cuando se exporte la galería.

Por ejemplo, observe la etiqueta en el fragmento de código más adelante en este capítulo. Cuando Expression Media genera esta plantilla, se sustituye la etiqueta con el título real del archivo de catálogo de Expression Media.

La mayoría de etiquetas no tienen reglas de colocación. Puede incluirlas en cualquier parte de la página HTML. No obstante, existen algunas excepciones, tal y como se describe en la sección Etiquetas de Expression Media que deben colocarse dentro de las etiquetas HTML más adelante en este tema.

[!NOTA]

Para todas las etiquetas, se deben usar la sintaxis y la ortografía exactamente tal y como se describe en las tablas de etiqueta en Etiquetas de HTML Engine Directive.

Existen dos tipos de etiquetas especiales, como la de directiva de motor HTML y la de campos de tema. Estas etiquetas se denominan etiquetas variables. Controlan el tamaño de las imágenes en las páginas de índice y de elementos multimedia y también definen los valores que se mostrarán en un determinado campo de un cuadro de diálogo. Para obtener más información acerca de estos tipos de etiquetas, vea Etiquetas de HTML Engine Directive.

Ejemplos de plantillas personalizadas

Anteriormente se mencionó que la mejor manera de aprender a crear galerías HTML personalizadas consiste en copiar una plantilla existente y modificarla. Sin embargo, puede usar los ejemplos de código mostrados más adelante en este tema como ayuda para realizar otras pruebas.

Ejemplos de páginas de índice

Para crear una página de índice, se pueden utilizar frases de campo para marcar el principio y el final de las filas y las columnas que contienen miniaturas del contenido multimedia. Estas frases son (iView:IndexColStart), (iView:IndexColEnd), (iView:IndexRowStart) e (iView:IndexRowEnd).

A continuación se muestra un ejemplo sencillo en el que se usan frases de campo:

<html>
<head>
<title>(iView:Catalog)</title>
</head>

<!-- iView HTML Engine Directives
iView:InThumbSize 128
iView:InThumbColumns 3
iView:InThumbRows 2
-->

<body>
<p>(iView:Catalog)<br>(iView:Index)</p>
(iView:IndexRowStart)
(iView:IndexColStart) (iView:Preview) (iView:IndexColEnd) <br>
(iView:IndexRowEnd)
</body>
</html>

Cuando se usa con las directivas definidas de tres columnas y dos filas, esta plantilla puede producir como resultado la siguiente página de índice:

<html>
<head>
<title>Favorite Photos</title>
</head>

<!-- iView HTML Engine Directives
iView:InThumbSize 128
iView:InThumbColumns 3
iView:InThumbRows 2
-->

<body>

<p>Favorite Photos<br></p>
<a href="source/image1.htm"><img src="preview/image1.jpg" alt="image1"
width="96" height="128" border="0" /></a>
<a href="source/image2.htm"><img src="preview/image2.jpg" alt="image2"
width="96" height="128" border="0" /></a>
<a href="source/image3.htm"><img src="preview/image3.jpg" alt="image3"
width="96" height="128" border="0" /></a>
<br>
<a href="source/image4.htm"><img src="preview/image4.jpg" alt="image4"
width="128" height="96" border="0" /></a>
<a href="source/image5.htm"><img src="preview/image5.jpg" alt="image5"
width="128" height="96" border="0" /></a>
<a href="source/image6.htm"><img src="preview/image6.jpg" alt="image6"
width="96" height="128" border="0" /></a>
<br>
</body>
</html>

Ejemplos de páginas de elementos multimedia

La página de elementos multimedia puede incluir el elemento catalogado original mediante (iView:OriginalURL) o una imagen JPEG convertida a partir de un elemento catalogado mediante (iView:Media). Cuando se usa (iView:Media), el tamaño de la imagen generado para la página de elementos multimedia lo controlan las directivas (iView:InMediaWidth) e (iView:InMediaHeight), que deben residir en la plantilla de elementos multimedia. Sin embargo, estas directivas, pueden residir en cualquier parte de la página de elementos multimedia. A continuación, figura un ejemplo de código de directiva:

<!-- iView HTML Engine Directives
iView:InMediaWidth 800
iView:InMediaHeight 600
-->

Estas directivas escalarían proporcionalmente las imágenes para que la altura máxima de la imagen alcance los 800 píxeles y el ancho los 600 píxeles. Asimismo, toda plantilla con directivas de ancho y alto para elementos multimedia llenará los campos correspondientes en el cuadro de diálogo Opciones deHTML cuando se seleccione el tema en el que aparecerán las directivas. Por ejemplo, las directivas precedentes rellenarán los siguientes campos correspondientes:

Resultados del código de la directiva

Puede cambiar el tamaño final del cuadro de diálogo anterior sin necesidad de volver a la plantilla, pero tenga en cuenta que si lo hace, algunos aspectos del diseño de la página web podrían verse afectados.

A continuación, figura un ejemplo de una plantilla de elementos multimedia HTML simple:

<html>
<head>
<title>Catalog: (iView:Catalog)</title>
</head>

<!-- iView HTML Engine Directives
iView:InMediaWidth 800
iView:InMediaHeight 600
-->

<body>
<p>Simple Media Template</p>
<p>Image:</p>
<p>(iView:Media)</p>
<p>File Name:</p>
<p>(iView:Filename)</p>
</body>
</html>

El ejemplo anterior contiene tres etiquetas de Expression Media: (iView:Catalog), (iView:Media) e (iView:Filename). Durante la exportación, las tres etiquetas se reemplazan por el nombre del catálogo, la imagen multimedia y el nombre de archivo de la imagen, respectivamente.

[!NOTA]

La imagen multimedia es un archivo JPEG convertido para la galería HTML que se escala proporcionalmente para ajustarse a la configuración de (iView:InMediaWidth) e (iView:InMediaHeight).

A continuación, figura otro ejemplo de una página de elementos multimedia simple. La imagen usada aquí es idéntica a la del archivo original, con el mismo formato, el mismo tamaño, las mismas anotaciones y el mismo perfil ICC.

<html>
<head>
<title>Media page using an unconverted catalog image</title>
</head>
<body>
<p><img src="(iView:OriginalURL)" width="(iView:OriginalWidth)"
height="(iView:OriginalHeight)"></p>
</body>
</html>

Glosario de etiquetas de Expression Media

Esta sección contiene ejemplos de todas las etiquetas que se pueden usar para crear y modificar galerías HTML en Expression Media.

La mayoría de las etiquetas se pueden colocar en cualquier parte del código HTML, aunque algunas etiquetas especiales deben colocarse dentro de las etiquetas HTML. El primer conjunto de etiquetas siguiente está formado por esas etiquetas especiales. Las tablas siguientes describen el resto de las etiquetas e indican, si procede, si dichas etiquetas se usan para las páginas de elementos multimedia o las páginas de índice.

Etiquetas de Expression Media que deben colocarse dentro de las etiquetas HTML

[!NOTA]

Para que estas etiquetas sean eficaces, debe colocarlas dentro de etiquetas HTML.

• (iView:Running), (iView:Total)   Expression Media reemplaza estas etiquetas por números secuenciales del archivo que se muestra y el número total de elementos que ha exportado. Por ejemplo, Elemento: (iView:Running) de (iView:Total) generará una visualización parecida a "Elemento: 5 de 10", donde los números representan el archivo que está visualizando y el número total de archivos disponibles para la visualización.

• (iView:Date), (iView:Time)   Expression Media reemplaza estas etiquetas con la fecha y la hora de exportación de la galería. Por ejemplo:

  <b>Gallery Created:</b> (iView:Date), (iView:Time)
  

• (iView:Preview) (página de índice)   Expression Media reemplaza estas etiquetas con vistas en miniatura JPEG. En la plantilla de índice, esta etiqueta debe incluirse en una tabla de una fila por una columna. Por ejemplo:

  <table border="10"><tr><td><p>(iView:Preview)</p></td></tr></table>
  

  Expression Media amplía la tabla de acuerdo con el número de filas y columnas definido en la configuración de Tabla de índice del cuadro de diálogo Opciones de HTML o en función del número de filas y columnas definido por las directivas del motor HTML .

• (iView:Index) (página de índice)   El número de filas y columnas en cada página de índice lo define la configuración de Tabla de índice en el cuadro de diálogo Opciones de HTML. Si ha establecido una tabla de índice en 5 x 4 y el catálogo contiene 100 imágenes, Expression Media dividirá la página de índice en 5 páginas con 20 imágenes cada una. Esta etiqueta indica a Expression Media que genere una visualización compuesta y vínculos a varias páginas de índice. Por ejemplo, un vínculo será "1-20," el siguiente será "21-40", etc. Esta etiqueta contiene un valor en blanco si sólo se genera una página de índice. Esta etiqueta es opcional y se debe colocar fuera de la tabla que contiene (iView:Preview).

• (iView:Media)   Expression Media reemplaza esta etiqueta por el elemento multimedia, tal y como se muestra en la Vista de elementos multimedia del catálogo. Si se usa la plantilla predeterminada, esta etiqueta exportará el elemento multimedia real (imagen), así como cualquier campo visualizado en la Vista de elementos multimedia. Vea una página de elementos multimedia a modo de ejemplo.

• (iView:GoNext), (iView:GoPrevious)   Expression Media reemplaza esta etiqueta con el hipervínculo de la siguiente página HTML de elementos multimedia. Puede agregar esta etiqueta como vínculo dentro una etiqueta <a href>. Por ejemplo:

  <a href="(iView:GoNext)">Next</a>
  

• (iView:GoIndex)   Expression Media reemplaza esta etiqueta con el hipervínculo de la página HTML de índice de referencia. Puede agregar esta etiqueta como vínculo dentro una etiqueta <a href>. Por ejemplo:

  <a href="(iView:GoIndex)">Back to Index</a>
  

Vea también

Conceptos

Etiquetas de HTML Engine Directive