ISUU Cómo Funciona

ISUU Introducción: cómo funciona todo

Por: Carmen Lucia Zapata

Estas páginas de inicio le guiará a través de los conceptos básicos de la personalización de la interfaz del visor Issuu.

Funciona de la siguiente manera

Cuando alguien abre una publicación, Issuu lee un archivo de configuración llamado layout.xml . Este archivo contiene información sobre el fondo de usar, los botones para mostrar, dónde se encuentran, y así sucesivamente. Ahora Issuu sabe lo que desea mostrar y dónde conseguirlo. A continuación, obtiene todos los necesarios recursos de diseño a partir de un archivo de gráficos en algún lugar de la red.

.. Y aquí es donde entras tú

Su tarea es crear este archivo de gráficos, y luego modificar el layout.xml archivo para contar Issuu dónde colocar sus gráficos. El archivo de gráficos puede ser un archivo SWF de Flash o básicamente cualquier imagen en la web.

El diseño de su nueva interfaz (también llamado un tema) se puede utilizar con cualquier publicación Issuu incrustado en una página web o abrir en una nueva ventana .

Primeros pasos: Configuración

El primer paso en la personalización del espectador es configurar el entorno.

Subir archivos al sitio web

La manera más fácil de crear un tema nuevo es construirlo en la parte superior de uno de los temas básicos proporcionados por Issuu. Así que vamos a comenzar por descargar un tema básico que contiene todo lo necesario, y subir estos archivos a su propio sitio web. Tiene que ser accesible públicamente sitio web, de modo que el espectador puede acceder a ellos Issuu.

-Descargar el tema tutorial y descomprimir el archivo.

-Copie el crossdomain.xml archivo y la carpeta Issuu a la raíz de su sitio web.

El archivo subido debe situarse de este modo:

http://website.com/crossdomain.xml

http://website.com/issuu/basicBlue/crossdomain.xml

...

Ver que funciona

Copiar el enlace de abajo y péguelo en la barra de direcciones de su navegador web, sustituyendo el valor de la distribución del parámetro con la ruta de acceso al layout.xml archivo en su sitio web.

http://issuu.com/jesper/docs/gan_issuu?mode=embed&documentId=080311154822-183d3d833

4a544518a0d5e324f2543d4&layout=http://example.com/issuu/basicBlue/layout.xml

Al abrir esta URL en su navegador web, debe tener este aspecto: Si no se puede acceder a sus archivos, un tema gris por defecto se muestra.

Marca esta URL para más adelante.

¡Felicitaciones! Todos los archivos están trabajando. Siguiente: Conceptos básicos de IML

Introducción: Conceptos básicos IML

IML significa que ssuu M arkup L enguaje. Es un lenguaje muy similar a HTML sencillo que le dice al espectador Issuu dónde y qué botones y otros objetos para mostrar.

Entendiendo el archivo layout.xml

Antes de crear un nuevo tema, primero vamos a entender la estructura del tema de fondo que acaba de descargar.

Un tema se compone de dos archivos:

• layout.xml El archivo de formato describe el diseño del tema

• skins.swf La biblioteca piel proporciona los gráficos del tema (PNG, GIF o JPG también se puede utilizar).

Layout.xml

Vamos a abrir el archivo layout.xml para ver lo que hay dentro:

<? Xml

Vamos a examinar el código en detalle un poco más.

espectador

<Espectador xmlns = "http://www.issuu.com/viewer/1.0" BackgroundImage = "Background #" backgroundSize = "stretch" >

El espectador elemento especifica que se trata de un archivo IML para el espectador.

Los atributos de fondo, BackgroundImage y backgroundStretch , especifique el fondo para el Visor.# Background refiere a un gráfico que se utilizará como imagen de fondo, mientras que la extensiónespecifica cómo el tamaño de la imagen de fondo.

piel

<Piel fuente = "skins.swf" />

La piel elemento especifica una biblioteca de piel que se importe en el Visor. Los elementos gráficos contenidos en esta biblioteca se puede utilizar como pieles de varios objetos (botones, por ejemplo) en el visor.

botón

<button action="pagePrevious" horizontalCenter="-40" top="10"

upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down"

disabledState="#PreviousButton_disabled" />

El botón de elemento se utiliza para agregar un botón que se pulse el Viewer.

La acción atributo especifica qué acción tomar cuando se pulsa el botón, en este caso pagePrevious , que cambia el documento en la página anterior.

El horizontalCenter atributo especifica la posición horizontal del botón con respecto al centro del Visor.En este caso, el botón está posicionado 40 píxeles. a la izquierda. La parte superior atributo especifica la posición vertical del botón de la parte superior del visor. En este caso, el botón está posicionado 10 píxeles.desde la parte superior.

El upState, overState, Downstate, disabledState atributos se refieren a los distintos estados del botón. Los valores de estos atributos se refieren a los gráficos que se utilizarán como pieles para estos estados.

El código para los otros dos botones, el botón de índice y el botón pageNext, es similar.

DROPP

<DROPP izquierda = "0" top = "35" derecha = "0" fondo = "10" />

Por último, la DROPP elemento especifica el tamaño y la posición del documento real. Aquí, el documento está posicionado 35 píxeles. desde la parte superior, 10 px. desde la parte inferior, y px 0. desde los bordes izquierdo y derecho del visor.

Ahora que tiene una idea acerca de cómo el lenguaje en layout.xml archivo funciona, es hora de ser creativo y modificar los gráficos. Siguiente: Modificación de los gráficos

Introducción: La modificación de los gráficos

Los activos gráficos utilizados por el espectador se almacenan en un archivo SWF de Flash llamado skins.swf .

Nota: Esta sección de la guía se supone que está utilizando Flash para crear sus gráficos. Si por el contrario desea utilizar gráficos standart de mapa de bits, por favor continúe leyendo el tutorial Personalizar utilizando un archivo de mapa de bits .

¿Qué es el archivo

...