--- title: "Procesamiento de la API de Groupon – Parte 3" date: "2011-08-23" categories: - "xpath" tags: - "altova-xmlspy" - "code-generation" - "data-integration" - "data-mapping" - "mapforce" - "missionkit" - "stylevision" - "xpath" - "xslt" description: Este artículo explica detalladamente cómo transformar datos XML provenientes de la API de Groupon a formato HTML utilizando MapForce y StyleVision, incluyendo técnicas de automatización para futuras actualizaciones. --- Status: #blog Tags: #altova-xmlspy #code-generation #data-integration #data-mapping #mapforce #missionkit #stylevision #xpath #xslt Categories: [xpath+xquery](/blog/es/category/xpathxquery.md) # Procesamiento de la API de Groupon – Parte 3 Para concluir esta serie de artículos, en esta publicación aplicaremos una hoja de estilo para transformar los datos XML generados a partir de la correspondencia que establecimos con la API de Groupon, convirtiéndolos en HTML. Aquí hay un ejemplo de la salida XML que obtuvimos de la correspondencia de datos que creamos la última vez: [![XML generado por MapForce a partir de la API de Groupon](https://lh3.ggpht.com/-h0F6UNg0mYE/TkrQemSqO1I/AAAAAAAAAfU/9P9AGv4m8A0/clip_image001_thumb.png?imgmax=800 "XML produced by MapForce from the Groupon API")](http://lh5.ggpht.com/-XL3rbj8xibk/Tkqn-_a3EnI/AAAAAAAAAfQ/4zpv56LY3n0/s1600-h/clip_image0013.png) **Asignar una hoja de estilos para transformar XML** El cuadro de diálogo de configuración del componente, correspondiente al componente de salida del mapeo de MapForce, nos permite asignar una hoja de estilos creada con [Altova StyleVision](https://www.altova.com/es/stylevision.html). [![Asignar una hoja de estilos StyleVision a un componente de MapForce](https://lh5.ggpht.com/-pEOLdoTlHi8/TkrQgawhHbI/AAAAAAAAAfc/oMOs9DkhVQg/clip_image002_thumb.png?imgmax=800 "Assigning a StyleVision Stylesheet to a MapForce component")](http://lh6.ggpht.com/-jkc4oqy44F8/TkrQfV8KTuI/AAAAAAAAAfY/SnuxbQJpTZA/s1600-h/clip_image0023.png) Asignar una hoja de estilo al componente de salida del mapeo de datos integra las funciones de MapForce y StyleVision, y una nueva serie de botones aparece en la parte inferior de la ventana de mapeo de MapForce para los formatos HTML, RTF, PDF y Microsoft Word. (Deben estar instalados tanto MapForce como StyleVision en su ordenador) [![Formatos de salida de MapForce disponibles a través de una hoja de estilos](https://lh6.ggpht.com/--s7AXIp_w0s/TkvWFVa96cI/AAAAAAAAAfk/7itaFHSma0c/clip_image003_thumb.png?imgmax=800 "MapForce ouput formats available through a stylesheet")](http://lh4.ggpht.com/-GfSEJ5Q-sTI/TkrQhetcQgI/AAAAAAAAAfg/HkruS5kOnHo/s1600-h/clip_image0033.png) Cuando se hace clic en cualquiera de estos botones de formato de salida, MapForce ejecuta el mapeo de datos exactamente como vimos en la publicación anterior. MapForce transfiere sin problemas la salida XML a StyleVision, donde se transforma al formato seleccionado. Luego, MapForce muestra el documento formateado en la ventana de salida. Aquí se muestra la ventana de salida de MapForce para HTML, basada en la hoja de estilos Power de StyleVision asignada anteriormente: [![Salida HTML generada por MapForce a partir de la API de Groupon](https://lh6.ggpht.com/-jDCDPWVxHqw/TkvWGgysN5I/AAAAAAAAAfs/QDZMscS7T_Y/clip_image004_thumb.png?imgmax=800 "HTML output produced by MapForce from the Groupon API")](http://lh6.ggpht.com/-tjJnbT8WLrY/TkvWGE62H3I/AAAAAAAAAfo/iy0l9HADNAA/s1600-h/clip_image0043.png) El menú "Salida" de MapForce le permite guardar la salida del mapeo de datos XML o el documento HTML formateado según la hoja de estilo. **Cómo crear una hoja de estilos** Diseñamos una hoja de estilos para la asignación de datos de la API de Groupon utilizando Altova StyleVision, basándonos en el esquema XML para el componente de salida de MapForce. La interfaz intuitiva de StyleVision y sus potentes funciones de acceso y manipulación de datos facilitan la creación de documentos atractivos en formatos HTML, RTF, PDF y Microsoft Word a partir de archivos XML. La captura de pantalla que se muestra a continuación muestra la vista de diseño de StyleVision para la hoja de estilos "Extreme Groupon". Los círculos azules numerados indican la ubicación de cada elemento de diseño que se describe a continuación de la imagen. [![Hoja de estilo StyleVision para el mapeo de la API de Groupon en MapForce ](https://lh6.ggpht.com/-pnx-fT078tc/TkvWHLUifZI/AAAAAAAAAf0/66UAjZTag7I/clip_image005_thumb.png?imgmax=800 "StyleVision stylesheet for the MapForce Groupon API mapping ")](http://lh3.ggpht.com/-udSLWXUrC48/TkvWG3rY1rI/AAAAAAAAAfw/m_acYhFa4oY/s1600-h/clip_image0053.png) **Características del archivo SPS** 1. La etiqueta meta de la ventana gráfica (viewport) para dispositivos móviles se define mediante código HTML personalizado. Esto nos permite diseñar una única hoja de estilos para generar un único archivo HTML que se adapte tanto a ordenadores como a dispositivos móviles 2. Título del documento con fuente, tamaño y color personalizados 3. Un elemento de autocalculo utiliza la función XPath "count" para contar el número de transacciones en el documento XML de entrada e inserta el total 4. La marca de tiempo (timestamp) se coloca en la parte superior del documento, aunque el elemento de fecha aparece al final del archivo de datos de entrada XML 5. Las imágenes de los sitios web de Altova y Groupon se muestran mediante hipervínculos, no como datos de imagen incrustados 6. Las líneas horizontales separan cada una de las ofertas individuales. En los documentos HTML, estas líneas se ajustan automáticamente al ancho de la ventana del navegador 7. Fuentes y tamaños personalizados asignados a diferentes elementos 8. Una tabla de dos columnas organiza la descripción de cada oferta 9. Las URL en el archivo XML se asignan dinámicamente como hipervínculos para imágenes incrustadas, texto fijo y datos dinámicos Las hojas de estilo Power de StyleVision pueden combinar múltiples archivos .xsd, hojas de estilo .css existentes, esquemas de bases de datos, taxonomías XBRL y más, para generar informes con un formato enriquecido que incluso pueden incluir gráficos generados automáticamente en diversos estilos. También puede utilizar StyleVision para definir formularios electrónicos con campos de entrada de datos, menús desplegables, botones de opción y otras funciones avanzadas. **Previsualización de las transformaciones de las hojas de estilo** StyleVision le permite asignar un archivo XML de trabajo para previsualizar el resultado a medida que diseña la hoja de estilo, y los botones en la parte inferior de la ventana de diseño facilitan la visualización del archivo de trabajo formateado a medida que refina su diseño. Guardamos la salida XML del mapeo de MapForce y la asignamos como nuestro documento de trabajo. Una vez que la hoja de estilo estuvo completa, la vista previa HTML en StyleVision era idéntica a la ventana de salida HTML de MapForce que se muestra arriba. Para ver el documento en un dispositivo móvil, puede ya sea implementar el HTML como una página en un sitio web o enviarlo por correo electrónico como un archivo adjunto. [![Versión HTML de los datos mapeados en MapForce, visualizable en un dispositivo móvil](https://lh4.ggpht.com/-Xd-xWOlrDcA/TkvWIWhzLVI/AAAAAAAAAf8/Nx5x5yHOlaU/clip_image006_thumb.png?imgmax=800 "HTML version of the MapForce mapped data on a mobile device")](http://lh5.ggpht.com/-iQk8CUjKs9s/TkvWH5NOz2I/AAAAAAAAAf4/Ko9ZkvHYH1o/s1600-h/clip_image0063.png) Además de la hoja de estilo en sí y las versiones formateadas del documento de trabajo, StyleVision le permite guardar los archivos XSLT generados para transformar otros archivos XML utilizando el diseño de su hoja de estilo, incluso fuera de la aplicación StyleVision. **Automatización, la próxima vez** En el futuro, cuando desee volver a ejecutar un proceso de mapeo de datos y actualizar el documento HTML con información actualizada, existen dos formas de automatizar este proceso: - Puede ejecutar MapForce desde la [línea de comandos](https://www.altova.com/es/mapforce/mapforce-api.html#MF_ed_comp_5), especificando parámetros para indicar el nombre del archivo de definición de la transformación, e incluso puede invocar StyleVision para generar resultados con formato - Puede [generar código sin regalías](https://www.altova.com/es/mapforce/code-generation.html) para la transformación en XSLT, Java, C++ o C#, que puede combinar con el código XSLT de StyleVision para crear su propia aplicación completa XMLSpy, MapForce y StyleVision están disponibles juntos en el Altova MissionKit, que se ofrece a un precio especial. Descubra usted mismo lo fácil que es utilizar MissionKit para convertir datos provenientes de una API web [¡Descargue una prueba gratuita de 30 días!](https://www.altova.com/es/download/missionkit/software_development_tools_enterprise.html) **Nota del editor:** Nuestra serie original sobre la gestión de datos de la API de Groupon se publicó en tres partes, que puede consultar haciendo clic en los siguientes enlaces: La primera parte, titulada "[Gestión de la API de Groupon con Altova MapForce](https://www.altova.com/blog/2011/08/processing-groupon-api-with-altova.html)", describe cómo crear entradas dinámicas mediante la recopilación de datos de múltiples URLs. La segunda parte, "[Gestión de la API de Groupon con MapForce – Parte 2](https://www.altova.com/blog/2011/08/processing-groupon-api-with-mapforce.html)", explica cómo filtramos los datos de la API y definimos la salida para extraer únicamente los detalles más relevantes. La tercera parte, "[Gestión de la API de Groupon – Parte 3](https://www.altova.com/blog/2011/08/processing-groupon-api-part-3.html)", describe cómo formatear la salida como un único documento HTML optimizado para dispositivos de escritorio y móviles, y analiza diferentes métodos para automatizar la ejecución repetida.