Guía de integración de IWeb SP2302 29.05.2009 Historial Fecha Versión doc. Descripción Autor 29.05.2009 1.0 Creado por Albert Mata 29.03.2011 1.1 Última actualización J.J.Rodríguez Imaxel lab SL, 2005-2010 2 Guía de integración de IWeb SP2302 29.05.2009 TABLA DE CONTENIDO ÍNDICE ÍNDICE 3 Cómo integrar IWeb en mi página Web? 4 Introducción..................................................................................................................................... 4 Método del enlace (Link) directo .................................................................................................... 4 Método de la nueva ventana .......................................................................................................... 4 Método IFrame ................................................................................................................................ 5 Parámetros de llamada a la aplicación IWeb 5 Forzar el idioma de la aplicación IWeb ........................................................................................... 5 Empezar a trabajar en una carpeta inicial ....................................................................................... 6 Empezar a trabajar con un código de producto .............................................................................. 7 Empezar a trabajar con un nombre de producto ............................................................................ 8 Limitar la navegación a una carpeta o producto ............................................................................. 9 Restringir la navegación a un producto ........................................................................................... 9 Redirigir a una página Web al finalizar un pedido......................................................................... 10 Filtrar puntos de recogida ............................................................................................................. 10 Identificar códigos de cliente o afiliados ....................................................................................... 10 Personalizar logo de Iweb.............................................................................................................. 11 Limitar la navegación a una determinada carpeta ........................................................................ 12 Empezar a trabajar en Iweb con una imagen predeterminada .................................................... 13 Llamada a IWeb mediante método Post Imaxel lab SL, 2005-2010 14 3 Guía de integración de IWeb SP2302 29.05.2009 Cómo integrar IWeb en mi página Web? Introducción Existen varias formas de integrar el programa IWeb en su página Web. En este documento, valoraremos varios de ellos, destacando los puntos a favor y los puntos en contra de cada uno. Método del enlace (Link) directo La manera más obvia consiste en proporcionar un link desde su página Web a la aplicación IWeb . Ejemplo: <a href=”[imaxel provided link]” target=”_self” >Click here to order albums</a> Ventajas: Simple. No hay problemas de bloqueo por Pop. Inconvenientes: Pérdida del contexto de la Web del cliente (podría evitarse especificando el target=”_blank” para abrir el link en nueva ventana) y puede haber problemas con el usuario si hace click en el botón atrás del navegador ya que la aplicación se cerrará. Método de la nueva ventana Este es el método recomendado por Imaxel. La medida recomendada es de 1024x768, y la medida mínima aceptada es de 998x629, pero hay que hacer la ventana con medida variable para que los usuarios con pantallas más grandes puedan maximizar la ventana. Ejemplo: Ponga este código debajo de su sección <head></head>: <script type="text/javascript"> <!-function openNewWindow(theURL,winName,features) { window.open(theURL,winName,features); } //--> </script> … y este código en el link que va a proporcionar: <a href="javascript:void()" onclick="openNewWindow ('[imaxel provided link]','ImageWeb','resizable=yes,width=1024,height=768')">Click here to order albums</a> Consejo: Puede detectar el tamaño de la ventana y maximizarla de acuerdo al tamaño de la pantalla del usuario. Vea este enlace para más información: http://www.javascriptkit.com/howto/newtech3.shtml Ventajas: No se pierde el contexto de la Web del cliente. Evita que el usuario haga click en el botón atrás. Disponemos de más espacio para mostrar la aplicación (no se ven los botones del Explorador, la barra de URL, favoritos, etc…) Inconvenientes: Problemas de bloqueo por Popups (es necesario informar al usuario de que la aplicación se iniciará en una nueva ventana) Imaxel lab SL, 2005-2010 4 Guía de integración de IWeb SP2302 29.05.2009 Método IFrame Utilice este método cuando quiera incluir la aplicación IWeb en su página Web. Recuerde que el tamaño mínimo para la aplicación es de 998x629 Ejemplo: <iframe src ="[imaxel provided link]" width="1024" height="768"> <p>Your browser does not support iframes.</p> </iframe> Ventajas: No se pierde el contexto de la Web del cliente Inconvenientes: Dependiendo del diseño de la Web, el usuario puede ver muy reducido el espacio de trabajo disponible para la aplicación IWeb . Parámetros de llamada a la aplicación IWeb Este link es un ejemplo que vamos a utilizar para repasar los distintos parámetros de llamadas que podemos utilizar en la aplicación IWeb . Puede utilizarse para comprobar en el navegador cada uno de los ejemplos que a continuación se detallan. http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47 Para añadir parámetros de llamadas utilizaremos siempre el símbolo & al final del link de nuestro programa IWeb y cada vez que utilicemos un parámetro distinto. Forzar el idioma de la aplicación IWeb lang: Se utiliza este parámetro para forzar el idioma a utilizar en el programa IWeb . El formato a utilizar debe ser “es-ES”, “en-EN”, etc… Si no se especifica ninguno, se le preguntará al usuario qué idioma desea al principio de la misma. Utilizaremos el parámetro lang=en-EN o es_ES al final del link de nuestro programa IWeb. Por ejemplo para forzar el idioma por defecto en inglés utilizaríamos en siguiente link: http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=en-EN Imaxel lab SL, 2005-2010 5 Guía de integración de IWeb SP2302 29.05.2009 Empezar a trabajar en una carpeta inicial fnm: (Initial folder Name). Nombre de Carpeta Inicial . Cuando se especifica este parámetro, IWeb enseñará de inicio esta carpeta. Deberá especificar el nombre original de la carpeta no el nombre traducido utilizado en el apartado idiomas. En este ejemplo vemos la estructura de carpetas creadas para la navegación en este IWeb Fnm = Photobooks Fnm = Photo%20Layouts Fnm = Photo%20Calendars Fnm = Original%20Ideas Fnm = Posters Fnm = Greeting%20Cards Fnm = CARDS%20%26%20SIGNAGE Vamos a utilizar la carpeta inicial por defecto “Photobooks” y el Idioma por defecto Inglés. http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=enEN&fnm=Photobooks Nota: Si el nombre de la carpeta contiene caracteres no ASCII, como “ü”, “” o “ñ”, estos deben escribirse en la cadena de búsqueda con sus caracteres substitutos. En esta Web http://www.motobit.com/util/url-encoder.asp encontrará una utilidad interesante para encontrar los caracteres de substitución. Deberá especificar UTF-8 como el juego de caracteres de destino. Imaxel lab SL, 2005-2010 6 Guía de integración de IWeb SP2302 29.05.2009 Además debes de tener presente que siempre que tengas que utilizar un espacio en blanco para el nombre de carpeta o de producto debes de sustituir este espacio en blanco por el carácter %20 o el símbolo + En este otro ejemplo la carpeta que queremos mostrar se llama ÁLBUMES Y REVISTAS y cómo podemos observar en el link de ejemplo hemos tenido que sustituir la letra (Á) por el carácter sustituto en formato UTF-8 %C3%81 http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&fnm=%C3%81LBU MES+Y+REVISTAS Empezar a trabajar con un código de producto pc: (Initial product code). Código de producto inicial. Si se especifica un “pc”, IWeb cargará al principio el producto que concuerda con ese código. En nuestro ejemplo vamos a utilizar el parámetro para que IWeb cargue inicialmente un producto que este dado de alta en el sistema con el código 87700 http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=enEN&pc=87700 Imaxel lab SL, 2005-2010 7 Guía de integración de IWeb SP2302 29.05.2009 Empezar a trabajar con un nombre de producto pnm: (Initial product name) Nombre de producto inicial. Si se especifica el “pnm”, IWeb cargará inicialmente el producto que coincida con el nombre. Deberá especificar el nombre del producto original, no el nombre de la traducción de idioma. Por ejemplo vamos a utilizar el nombre del producto del ejemplo anterior en este caso el nombre PHOTOBOOKLET A4 Siempre que tengamos que utilizar un espacio en blanco para el nombre de carpeta o de producto sustituiremos este espacio en blanco por el carácter %20 Por ejemplo utilizar el nombre de producto PHOTOBOOKLET A4 tendremos que ponerlo de la siguiente manera PHOTOBOOKLET%20 A4 El link que deberemos de utilizar para mostrar el producto utilizando el nombre será el siguiente: http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=enEN&pnm=PHOTOBOOKLET%20A4 Imaxel lab SL, 2005-2010 8 Guía de integración de IWeb SP2302 29.05.2009 Limitar la navegación a una carpeta o producto lmtcat: (“true” o “false”) Verdadero o Falso. Limita la navegación al nombre de la carpeta inicial o al código de producto, este parámetro solo tiene sentido cuando se utilice con los siguientes parámetros: fnm , pc o pnm. IWeb mostrara inicialmente la carpeta o producto especificados con sus parámetros y sólo podrán abrirse los productos que estén incluidos en la misma o en sus subcarpetas, pero no aquellos productos que no el resto de productos que estén fuera. En nuestro ejemplo utilizaríamos el siguiente link para restringir la navegación a la carpeta la carpeta Photobook http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=enEN&fnm=Photobooks&lmtcat=true Restringir la navegación a un producto Lmtpr: (“true” o “false”) Verdadero o Falso. Limita la navegación y el cliente sólo podrá pedir ese producto. Tiene sentido cuando se utilice con los siguientes parámetros: pc o pnm. La finalidad de este parámetro es la de limitar el poder añadir un nuevo trabajo (producto) al pedido. Por ejemplo en este link estamos limitando el pedido al código de producto http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=enEN&pc=87700&lmtpr=true Imaxel lab SL, 2005-2010 9 Guía de integración de IWeb SP2302 29.05.2009 Redirigir a una página Web al finalizar un pedido endurl: Url donde se accederá después de elegir la opción “Fin de pedido”. Si dispone de diferentes páginas Web de entrada (landing pages), quizás desee volver a la página inicial, una vez se haya completado el pedido. Para ello, puede llamar al IWeb con el parámetro “endurl ”. Por ejemplo en el siguiente link tras finalizar un pedido el parámetro endurl abrirá la página Web de Imaxel www.imaxel.com en la misma ventana del navegador. http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&endurl=http://ww w.imaxel.com Filtrar puntos de recogida ppak: (Pick point activation key). Código de activación de Punto de Recogida. Este parámetro permite filtrar los puntos de recogida. Al utilizar este parámetro Iweb restringe la recogida del pedido en tienda al punto o puntos de recogida asignados a este código de activación. Los demás puntos de recogida no serán visibles para el cliente. El campo código de activación queda registrado en el sistema lo que permite agrupar los pedidos realizados con este código y controlar los distintos datos referentes al mismo. Por ejemplo en el siguiente link solo se mostraran los puntos de recogida asociados al código de activación 3567 http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=enEN&ppak=3567 Identificar códigos de cliente o afiliados Ref: ref=nombre cliente, código etc. El parámetro “ref” sirve para identificar que desde que afiliado se accedió al Iweb y que permitirá saber a quién se ha de comisionar o de donde viene el pedido. El valor del parámetro ref queda registrado en el campo código de activación del pedido lo que permite agrupar los pedidos realizados con este código y controlar los distintos datos referentes al mismo. Es importante saber que este campo no filtra los puntos de recogida en el programa. Cuando se utiliza este parámetro se utiliza una cookie que se almacena durante 30 días en el navegador del cliente. http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=enEN&ref=3567 Imaxel lab SL, 2005-2010 10 Guía de integración de IWeb SP2302 29.05.2009 Personalizar logo de Iweb lg: Logo imagen URL (png o jpeg tamaño a 228x46 pixeles) Al usar el parámetro “lg”, el iWeb se personalizará con el logo de la Compañía especificada en el link. La imagen a utilizar como logo debe de tener siempre 228x46 pixeles en formato jpg o png. Para cargar imágenes desde un dominio diferente, el flash necesita encontrar un fichero crossdomain.xml en ese dominio, este fichero tiene que estar en un nivel superior a la carpeta donde dejaremos estas imágenes de logos personalizados. Ejemplo: Si http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47 intenta cargar la imagen desde http://www.midominio.com/imagenes/logos/logo1.jpg ,el siguiente link debe estar accesible http://www.midominio.com/crossdomain.xml y debe contener un archivo crossdomain.xml. Puede pedir un fichero crossdomain.xml a Imaxel http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lg=http://demosite s.imaxmanager.es:8080/Almacen_owm/RemoteManager/Demo/Laboratorio%20Xerox/Demo%20Xero x/ImageWeb/IMAGES/logoold.jpg Imaxel lab SL, 2005-2010 11 Guía de integración de IWeb SP2302 29.05.2009 Limitar la navegación a una determinada carpeta lmtcatfnm: El parámetro “lmtcatfnm” en el iWeb no permitirá al usuario final acceder a una carpeta que se encuentre fuera de la carpeta especificada. Este parámetro se utilizara cuando estemos interesados en ofrecer un número específico de productos a una empresa donde además podemos personalizar su logo, debemos crear una carpeta debajo de la raíz y con el parámetro “lmtcatfnm” el iWeb no permitirá al usuario final acceder a una carpeta que se encuentre fuera de la carpeta especificada. Vea el siguiente ejemplo: Imagine que tiene esta estructura de carpeta y quiere permitir al usuario final que pueda ir a la carpeta “Booklets”, pero Ud. no quiere que pueda ir a una carpeta fuera de “Photobooks”. http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lg=http://demosite s.imaxmanager.es:8080/Almacen_owm/RemoteManager/Demo/Laboratorio%20Xerox/Demo%20Xero x/ImageWeb/IMAGES/logoold.jpg&fnm=Booklets&lmtcatfnm=Photobooks Imaxel lab SL, 2005-2010 12 Guía de integración de IWeb SP2302 29.05.2009 Empezar a trabajar en Iweb con una imagen predeterminada imgUrls: Cuando se utilice el parámetro “imgUrls”, la aplicación Iweb comenzará con una imagen cargada por defecto. Puede que necesite añadir algunas imágenes predefinidas en el iWeb desde un servidor Web externo. Una vez que los usuarios finales han seleccionado un producto, irán a la pantalla de edición donde habrán cargado esa imagen para poder hacer un pedido. Por ejemplo, esta imagen que tenemos en un servidor: http://demosites.imaxmanager.es:8094/Files/JoomlaFiles/dmdocuments/img/30398729.jpg http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&imgUrls=http://de mosites.imaxmanager.es:8094/Files/JoomlaFiles/dmdocuments/img/30398729.jpg Imaxel lab SL, 2005-2010 13 Guía de integración de IWeb SP2302 29.05.2009 Llamada a IWeb mediante método Post Como puede leer en este documento, existen varios parámetros para llamar a la aplicación IWeb . Si Ud. es un desarrollador Web, le recomendamos que utilice el método POST para llamar a esos parámetros. La razón es que cada vez que añada un nuevo parámetro de llamada, está haciendo más largo el texto del link, y puede darle problemas con determinadas versiones de Internet Explorer. Para nuestro ejemplo vamos a forzar el idioma de IWeb al inglés, empezar el pedido con el código de producto 87700 limitándolo a este único producto y al finalizar el pedido hacemos que vuelva a la página Web de Imaxel. Como podemos observar el link resultante es extremadamente largo: http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx?dlrid=47&lang=enEN&pc=87700&lmtpr=true&endurl=http://www.imaxel.com Aquí puede ver un ejemplo de método de POST estático ( examplePOST.html ) utilizando la llamada del anterior link. <html> <head> </head> <body> <form action="http://demosites.imaxmanager.es:8080/WebCounter/WebCounter.aspx " method="POST"> <input type="hidden" name="dlrid" value="47" /> <input type="hidden" name="lang" value="en-EN" /> <input type="hidden" name="pc" value="87700" /> <input type="hidden" name="lmtpr" value="true" /> <input type="hidden" name="endUrl" value="http://www.imaxel.com" /> <input type="submit" value="Jump to IWEB " /> </form> </body> </html> Imaxel lab SL, 2005-2010 14