En términos de Dynamic Media Classic, una plantilla es un documento que se puede cambiar dinámicamente mediante la dirección URL después de publicar la plantilla. Dynamic Media Classic ofrece plantillas básicas, plantillas basadas en imágenes llamadas desde el servidor de imágenes y que consisten en imágenes y texto procesado.
Uno de los aspectos más potentes de las plantillas es que tienen puntos de integración directos que le permiten vincularlos a su base de datos. Por lo tanto, no solo puede mostrar una imagen y cambiar su tamaño, sino que también puede consultar la base de datos para buscar elementos nuevos o de venta y hacer que aparezca como una superposición en la imagen. Puede solicitar una descripción del elemento y hacer que aparezca como una etiqueta en la fuente que elija y el diseño. Las posibilidades son ilimitadas.
Las plantillas básicas se pueden implementar de muchas maneras diferentes, desde simples a complejas. Por ejemplo:
Es importante comprender que Dynamic Media Classic solo proporciona la parte visual de estas aplicaciones basadas en plantillas. Las empresas de Dynamic Media Classic o sus socios de integración deben proporcionar las reglas comerciales, la base de datos y las habilidades de desarrollo para crear las aplicaciones. No hay ninguna aplicación de plantilla "integrada"; los diseñadores configuran la plantilla en Dynamic Media Classic y los desarrolladores utilizan las llamadas URL para cambiar las variables de la plantilla.
Al final de esta sección del tutorial, sabrá cómo:
Todas las direcciones URL de este capítulo tienen fines ilustrativos únicamente; no son vínculos en directo.
La definición de una plantilla básica (o simplemente "plantilla", para abreviar) es una imagen en capas direccionable por URL. El resultado final es una imagen, pero una que se puede modificar con la dirección URL. Puede consistir en fotos, texto o gráficos, cualquier combinación de recursos de TIFF P en Dynamic Media Classic.
Las plantillas son más similares a los archivos PSD de Photoshop, ya que tienen un flujo de trabajo similar y funciones similares.
Sin embargo, a diferencia de los PSD de Photoshop, las capas pueden ser completamente dinámicas y controladas mediante una URL en el servidor de imágenes.
Solo es necesario añadir un marcador de posición para cada capa que variará, en lugar de colocar todas las capas en un solo archivo como lo hace en Photoshop, y mostrarlas y ocultarlas (aunque también puede hacerlo, si lo prefiere).
Con un marcador de posición, puede intercambiar dinámicamente el contenido de una capa con otro recurso publicado, y automáticamente tomará las mismas propiedades (como tamaño y rotación) de la capa que reemplazó.
Dado que las plantillas básicas generalmente están diseñadas en Photoshop pero se implementan mediante una URL, un proyecto de plantilla requiere una combinación de habilidades técnicas y de diseño. Generalmente asumimos que la persona que hace el trabajo de plantilla creativa es un diseñador de Photoshop, y que la persona que implementa la plantilla es un desarrollador web. Los equipos creativos y de desarrollo deben colaborar estrechamente para que la plantilla tenga éxito.
Los proyectos de plantilla pueden ser relativamente sencillos o extremadamente complejos según las reglas comerciales y las necesidades de la aplicación. Las plantillas básicas se llaman desde el servidor de imágenes, pero debido a la flexibilidad del entorno de Dynamic Media Classic, puede incluso anidar plantillas dentro de otras plantillas, lo que le permite crear imágenes bastante complejas que se pueden vincular con variables con nombres comunes.
Cuando se trabaja con una plantilla básica, normalmente se siguen los pasos del flujo de trabajo en el diagrama siguiente. Los pasos marcados con líneas de puntos son opcionales si utiliza capas de texto dinámicas y se indican en las instrucciones siguientes como "Flujo de trabajo de texto". Si no utiliza texto, siga la ruta principal solamente.
Flujo de trabajo Plantilla básica .
Antes de cargar los recursos de las plantillas en Dynamic Media Classic, deberá realizar algunos pasos preparatorios.
Antes de cargar el archivo Photoshop en Dynamic Media Classic, simplifique las capas de Photoshop para que sea más fácil trabajar con y tener buena compatibilidad con el servidor de imágenes. El archivo PSD a menudo consta de muchos elementos que Dynamic Media Classic no reconoce y también puede terminar con muchos pequeños elementos que son difíciles de administrar. Asegúrese de guardar una copia de seguridad del PSD maestro en caso de que necesite editar posteriormente el original. La copia simplificada se cargará, y no la copia maestra.
Simplifique la estructura de la capa fusionando/aplanando las capas relacionadas que necesitan activarse/desactivarse juntas en una sola capa. Por ejemplo, la etiqueta "NEW" y el banner azul se combinan en una sola capa para que pueda mostrarlos u ocultarlos con un solo clic.
Dynamic Media Classic o Image Server no admiten algunos tipos de capas y efectos de capa y deben rasterizarse antes de la carga. De lo contrario, se podrían ignorar los efectos o se descartarían las capas. Rasterizar una capa significa convertir si se puede editar en no editable. Para rasterizar efectos de capa o capas de texto, cree una capa vacía, seleccione y fusile utilizando Capas > Combinar capas o CTRL + E/CMD + E.
También cargará y publicará las fuentes si necesita generar texto dinámico. La única fuente incluida con Dynamic Media Classic es Arial.
Cada empresa tiene la responsabilidad de obtener una licencia para utilizar una fuente en la web: simplemente tener una fuente instalada en su computadora no le da el derecho de utilizarla comercialmente en la web, y su empresa podría enfrentar acciones legales del editor de fuentes si se usa sin permiso. Además, los términos de licencia varían: es posible que necesite licencias independientes para imprimir frente a la visualización de pantalla, por ejemplo.
Dynamic Media Classic admite fuentes estándar de OpenType (OTF), TrueType (TTF) y Type 1 Postscript. Mac: no son compatibles las fuentes de maleta, los archivos de colección de tipos, las fuentes del sistema Windows y las fuentes de máquina propietarias (como las fuentes utilizadas por las máquinas de grabado o bordado); tendrá que convertirlas a uno de los formatos de fuente estándar o sustituirlas por una fuente similar en Dynamic Media Classic y en Image Server.
Después de cargar las fuentes en Dynamic Media Classic, como cualquier otro recurso, también deben publicarse en el servidor de imágenes. Un error de plantilla muy común es olvidar publicar las fuentes, lo que resultará en un error de imagen — Image Server no sustituirá otra fuente en su lugar. Además, si desea usar la variable Extraer texto al cargar, debe cargar los archivos de fuente antes de cargar el PSD que usa esas fuentes. La variable Extraer texto intentará recrear el texto como una capa de texto editable y colocarlo dentro de una plantilla de Dynamic Media Classic. Esto se analiza en el tema siguiente, Opciones del PSD.
Tenga en cuenta que las fuentes tienen varios nombres internos que a menudo difieren de sus nombres de archivo externos. Puede ver todos sus nombres diferentes en la página Detalles de ese recurso en Dynamic Media Classic. Estos son los nombres de la fuente Adobe Caslon Pro Semibold, que se enumeran en la pestaña Metadatos de Dynamic Media Classic:
Ficha Metadatos de la página Detalles de una fuente en Dynamic Media Classic.
Dynamic Media Classic utiliza el nombre de archivo de esta fuente (ACaslonPro-Semibold) como su ID de recurso, pero ese no es el nombre que utiliza la plantilla. La plantilla utiliza el nombre Formato de texto enriquecido (RTF), que aparece en la parte inferior. RTF es el "idioma" nativo del motor de texto del servidor de imágenes.
Si necesita cambiar las fuentes a través de la URL, debe llamar al nombre RTF de la fuente (no al ID del recurso) o verá un error. En este caso, el nombre adecuado para esta fuente sería "Adobe Caslon Pro". Discutiremos más sobre las fuentes y RTF en el tema RTF y Parámetros de texto, a continuación.
Los formatos de archivo de fuente más comunes que se encuentran en los sistemas Windows y Mac son OpenType y TrueType. OpenType tiene una extensión .OTF, mientras que TrueType es .TTF. Ambos formatos funcionan igual de bien en Dynamic Media Classic.
No es necesario cargar un archivo Photoshop (PSD) para crear una plantilla; se puede crear una plantilla a partir de cualquier recurso de imagen en Dynamic Media Classic. Sin embargo, cargar un PSD puede facilitar la creación, ya que normalmente estos recursos ya están en un PSD en capas. Además, Dynamic Media Classic generará automáticamente una plantilla al cargar un PSD en capas.
Aunque Dynamic Media Classic puede crear automáticamente una plantilla a partir de un PSD en capas, debe saber cómo crearla manualmente. Como se ha explicado anteriormente, en determinadas ocasiones no se desea utilizar la plantilla creada por Dynamic Media Classic.
Primero familiaricémonos con la interfaz de edición.
En el centro izquierdo se encuentra el área de trabajo que muestra una previsualización de la plantilla final. A la derecha están los paneles Capas y Propiedades de capa. Estas áreas son donde usted está haciendo más trabajo.
Generar base de plantilla .
Estos son los pasos del flujo de trabajo para iniciar la plantilla básica:
En Dynamic Media Classic, vaya a Generar > Conceptos básicos de plantillas. Puede no tener nada seleccionado o empezar por seleccionar una imagen, que se convierte en la primera capa de la plantilla.
Elija un tamaño y pulse OK. Este tamaño debe coincidir con el tamaño que haya diseñado en Photoshop. Se cargará el editor de plantillas.
Si no ha seleccionado una imagen en el paso 1, busque o busque una imagen en el panel de recursos de la izquierda y arrástrela al área de trabajo.
Cambie el tamaño o la posición de la capa directamente en el área de trabajo o ajustando la configuración del panel Propiedades de la capa.
Arrastre las capas de imagen adicionales según sea necesario. Añada efectos de capas si lo desea. Consulte el tema Adición de efectos de capa, más abajo.
Haga clic en Guardar, elija una ubicación y asígnele un nombre. Puede obtener una vista previa, pero en este momento la plantilla se verá exactamente igual que una imagen de Photoshop plana; aún no se puede cambiar.
Image Server soporta algunos efectos de capa programáticos, efectos especiales que cambian el aspecto del contenido de una capa. Funcionan de manera similar a los efectos de capa en Photoshop. Están unidos a una capa pero controlados independientemente de la capa. Puede ajustarlos o eliminarlos sin realizar un cambio permanente en la capa misma.
Una capa con y sin una sombra paralela
Para añadir un efecto, haga clic en Añadir efecto y elija un efecto en el menú. Al igual que las capas normales, puede seleccionar un efecto en el panel Capas y utilizar el panel Propiedades de la capa para ajustar su configuración.
Los efectos de sombra se desplazan horizontal o verticalmente fuera de la capa, mientras que los efectos de resplandor se aplican uniformemente en todas las direcciones. Los efectos interiores actúan sobre las partes opacas de la capa, mientras que los efectos exteriores solo afectan a las áreas transparentes.
Más información sobreAdición de efectos de capa.
Si todo lo que hace es combinar capas y guardarlas, el resultado neto no es diferente de una imagen Photoshop plana. Lo que hace que las plantillas sean especiales es la capacidad de agregar parámetros a las propiedades de cada capa para que se puedan cambiar dinámicamente a través de la dirección URL.
En términos de Dynamic Media Classic, un parámetro es una variable que puede vincularse a una propiedad de plantilla para que se pueda manipular mediante una dirección URL. Cuando agrega un parámetro a una capa, Dynamic Media Classic expone esa propiedad en la dirección URL marcando como prefijo el nombre del parámetro con un signo de dólar ($); por ejemplo, si crea un parámetro llamado "size" para cambiar el tamaño de una capa, Dynamic Media Classic cambiará el nombre del parámetro $size.
Si no agrega un parámetro para una propiedad, esa propiedad permanece oculta en la base de datos de Dynamic Media Classic y no aparece en la dirección URL.
Sin parámetros, las direcciones URL suelen ser mucho más largas, especialmente si también utiliza texto dinámico. El texto agrega decenas de caracteres adicionales a cada URL.
Finalmente, el conjunto inicial de parámetros se convierte en los valores predeterminados de las propiedades en la plantilla. Si crea la plantilla, agrega parámetros y luego llama a la URL sin sus parámetros, el Servidor de imágenes creará la imagen con todos los valores predeterminados que guardó en la plantilla. Los parámetros solo son necesarios si desea cambiar una propiedad. Si no es necesario cambiar una propiedad, no es necesario establecer un parámetro.
Este es el flujo de trabajo para crear parámetros:
Haga clic en el Parámetros situado junto al nombre de la capa para la que desea crear parámetros. Se abre la pantalla Parámetros. Enumera cada propiedad de la capa y su valor.
Seleccione el Activado junto al nombre de cada propiedad que desea convertir en un parámetro. Aparecerá un nombre de parámetro predeterminado. Solo puede agregar parámetros a propiedades que han cambiado de su estado predeterminado.
Cambie el nombre de los parámetros predeterminados por otro que sea más fácil de identificar en la dirección URL. Por ejemplo, si desea agregar un parámetro para cambiar la capa del banner sobre una imagen, cambie el nombre predeterminado de "layer_2_src" a "banner".
Press Cerrar para salir de la pantalla Parámetros.
Repita este proceso para otras capas haciendo clic en el botón Parámetros y agregar y cambiar el nombre de los parámetros.
Guarde los cambios cuando termine.
Cambie el nombre de los parámetros por otro que sea significativo y desarrolle una convención de nombres para estandarizar esos nombres. Asegúrese de que los equipos de diseño y desarrollo acuerden de antemano la convención de nomenclatura.
¿No puede agregar un parámetro porque no ve la propiedad? Simplemente cambie la propiedad de la capa de su valor predeterminado (moviendo, cambiando el tamaño, ocultando, etc.). Ahora debería ver esa propiedad expuesta.
Más información sobre Parámetros de plantilla.
Ahora aprenderá a crear una plantilla básica que incluya capas de texto.
Ahora sabe cómo crear una plantilla básica usando capas de imagen. Para muchas aplicaciones esto es todo lo que necesita. Como se ha visto en el ejercicio anterior, las capas que tienen texto simple (como "Venta" y "Nuevo") pueden rasterizarse y tratarse como imágenes porque su texto no necesita cambiar.
Sin embargo, ¿qué sucede si es necesario:
En ese caso, desearía añadir algunas capas de texto dinámicas con parámetros para controlar el texto o el formato.
Para crear texto, debe cargar algunas fuentes; de lo contrario, Dynamic Media Classic pasará a Arial de forma predeterminada. Las fuentes también deben publicarse en el Image Server o generarán un error en el momento en que intente procesar cualquier texto que utilice esa fuente.
Para agregar variables al texto con la herramienta Conceptos básicos de plantilla , debe comprender cómo se representa el texto. El servidor de imágenes genera texto utilizando el motor de texto de Adobe, el mismo motor utilizado por Photoshop y Illustrator, y lo compone como una capa en la imagen final. Para comunicarse con el motor, el servidor de imágenes utiliza el formato de texto enriquecido o RTF.
RTF es una especificación de formato de archivo desarrollada por Microsoft para especificar el formato de los documentos. Es un lenguaje de marcado estándar utilizado por la mayoría de los programas de procesamiento de textos y correo electrónico. Si escribió en una URL &text=\b1 Hola, Image Server generaría una imagen con la palabra "Hello" en negrita, porque \b1 es el comando RTF para poner el texto en negrita.
La buena noticia es que Dynamic Media Classic genera el RTF por usted. Siempre que escriba texto en una plantilla y añada formato, Dynamic Media Classic escribirá discretamente el código RTF en la plantilla automáticamente. La razón por la que lo mencionamos es porque está agregando parámetros directamente al propio RTF, por lo que es importante que esté un poco familiarizado con él.
Puede crear capas de texto en una plantilla en Dynamic Media Classic de las dos formas siguientes:
El texto se introduce mediante el Editor de texto. El Editor de texto es una interfaz WYSIWYG que permite introducir y dar formato al texto utilizando controles de formato similares a los de Photoshop o Illustrator.
Editor de texto de funciones básicas de plantilla.
Hará la mayor parte de su trabajo en la Vista previa , que permite introducir texto y verlo mostrado como se verá en la plantilla. También hay un Fuente , que se utiliza para editar manualmente el RTF, si es necesario.
El flujo de trabajo general es utilizar la variable Vista previa para escribir texto.
A continuación, seleccione el texto y elija algún formato, como color de fuente, tamaño de fuente o justificación, utilizando los controles de la parte superior. Una vez que el texto tenga el estilo que desee, haga clic en Aplicar para verlo actualizado en la vista previa del área de trabajo. A continuación, cierre el Editor de texto para volver a la ventana principal Conceptos básicos de plantilla .
Estos son los pasos del flujo de trabajo para agregar texto dentro de la página de compilación Conceptos básicos de plantilla :
Haga clic en el Texto botón de herramienta en la parte superior de la página de compilación.
Arrastre un cuadro de texto donde desee que aparezca el texto. Se abrirá la ventana Editor de texto en una ventana modal. En segundo plano, verá la plantilla, aunque no se podrá editar hasta que termine de editar el texto.
Escriba el texto de ejemplo que desea que aparezca cuando la plantilla se cargue por primera vez. Por ejemplo, si está creando un cuadro de texto para una imagen de correo electrónico personalizada, su texto podría indicar "Nombre de alta. ¡Ahora es el momento de ahorrar!" Posteriormente, agregaría un parámetro de texto para reemplazar Nombre por un valor que enviara en la dirección URL. El texto no aparecerá en la plantilla situada debajo de la ventana hasta que haga clic en Aplicar.
Para dar formato al texto, selecciónelo arrastrando con el ratón y elija un control de formato en la interfaz de usuario.
Haga clic en Aplicar para ver que los cambios surten efecto en la ventana del área de trabajo. Debe hacer clic en Aplicar, o si no, se pierden las ediciones.
Cuando haya terminado, haga clic en Cerrar. Si desea volver al modo de edición, haga doble clic en la capa de texto para volver a abrir el Editor de texto.
El editor de texto previsualiza exactamente el tamaño de la fuente si la tiene instalada localmente en el sistema.
Ahora seguimos un proceso similar para añadir parámetros de texto, como hicimos con los parámetros de capa. Las capas de texto también pueden utilizar parámetros de capa para el tamaño, la posición, etc. sin embargo, pueden tomar parámetros adicionales que le permiten controlar cualquier aspecto de RTF.
A diferencia de los parámetros de capa, solo se selecciona el valor que se desea cambiar y se agrega un parámetro a él en lugar de agregarlo a toda la propiedad.
Ejemplo de RTF:
Al examinar el RTF, debe averiguar dónde está cada configuración que desea cambiar. En el RTF de arriba, parte de esto puede tener sentido y puede ver de dónde viene el formato.
Pueden ver la frase Sandal de la Casa de la Moneda de Chocolate — ese es el texto en sí.
Tiene suficiente información para crear los parámetros, pero hay una referencia completa de todos los comandos RTF en la documentación de Image Serving. Visite la Documentación de servicio de imágenes.
A continuación se indican los pasos para añadir parámetros a las capas de texto.
Para agregar parámetros al color del texto, agregue por separado parámetros para rojo, verde y azul. Por ejemplo, si el RTF es \red56\green53\blue46
, agregaría parámetros rojos, verdes y azules independientes para los valores 56, 53 y 46. En la URL, cambiaría el color llamando a las tres: &$red=56&$green=53&$blue=46
.
Obtenga información sobre cómo Crear parámetros de texto dinámico.
La creación de un ajuste preestablecido para la plantilla no es un paso necesario. Se recomienda hacerlo como práctica recomendada, de modo que siempre se llame a la plantilla con un tamaño de 1:1 y también para añadir nitidez a cualquier capa de imagen grande que se cambie de tamaño para ajustarse a la plantilla. Si llama a una imagen sin un ajuste preestablecido, el servidor de imágenes puede cambiar arbitrariamente el tamaño de la imagen al tamaño predeterminado (unos 400 píxeles) y no aplicará el enfoque predeterminado.
No hay nada especial en un ajuste preestablecido de imagen para una plantilla. Si ya tiene un ajuste preestablecido para una imagen estática del mismo tamaño, puede utilizarlo en su lugar.
Deberá ejecutar una publicación para ver los cambios insertados en el servidor de imágenes. Tenga en cuenta lo que debe publicarse: las distintas capas de recursos de imagen, las fuentes para el texto dinámico y la propia plantilla. Al igual que otros recursos de medios enriquecidos de Dynamic Media Classic, como Conjuntos de imágenes y Conjuntos de giros, una plantilla básica es una construcción artificial, es un elemento de línea en la base de datos que hace referencia a las imágenes y fuentes utilizando una serie de comandos de servicio de imágenes. Por lo tanto, cuando publica la plantilla, todo lo que hace es actualizar los datos en el servidor de imágenes.
Más información sobre Publicación de la plantilla.
Una plantilla básica tiene la misma sintaxis de URL esencial que una llamada de imagen normal, tal como se explicó anteriormente. Una plantilla suele tener más modificadores (comandos separados por un signo &)), como parámetros con valores. Sin embargo, la diferencia principal es que llama a la plantilla como imagen principal, en lugar de llamar a una imagen estática.
A diferencia de los ajustes preestablecidos de imagen, que tienen un signo de dólar ($) a cada lado del nombre del ajuste preestablecido, los parámetros tienen un único signo de dólar al principio. La colocación de esos signos de dólar es importante.
Correcto:
$text=46-inch LCD HDTV
Incorrecto:
$text$=46-inch LCD HDTV
$text=46-inch LCD HDTV$
text=46-inch LCD HDTV
Como se ha señalado anteriormente, se utilizan parámetros para cambiar la plantilla. Si llama a la plantilla sin parámetros, volverá a su configuración predeterminada, tal y como se ha diseñado en la herramienta de creación Conceptos básicos de plantilla . Si no es necesario cambiar una propiedad, no es necesario establecer un parámetro.
Ejemplos de una plantilla sin configurar parámetros (arriba) y con parámetros (abajo).