managing
beautiful websites
       with
 Apache Cocoon


    have fun!
goals

    ‣ get an overview about graphics-related XML based
      technologies
    ‣ learn about design-related challeng...
outline

    part 1: overview
    graphics, XML and open source
    graphics in cross media publishing and content ma-
   ...
graphics, XML, and

   open source
publishing, W3C style

document formats          base technologies
 ‣ XHTML                   ‣ XML
 ‣ XSL-FO             ...
SVG - what‘s that?

    SVG - scalable vector graphics
     ‣ XML language
     ‣ open standard
     ‣ W3C recommendation ...
SVG features

    ‣   vector shapes
    ‣   bitmap images
    ‣   text
    ‣   transformations, filters, clipping, masking...
SVG tool support

browsers                  DTP & Office
 ‣ Adobe SVG viewer        ‣ Adobe Illustrator
   plugin         ...
what SVG is good for

    ‣   graphic design
    ‣   web and print publishing
    ‣   visualization systems (maps, medical...
SVG in web applications

     SVG for web graphics
        ‣ embedding in XHTML possible
        ‣ less bandwidth
        ...
Apache Batik

     modules
        ▹ SVG parser
        ▹ SVG to bitmap rasterizer
        ▹ TTF to SVG font converter
   ...
fonts in SVG

     embedded
      ‣ e.g. Adobe Illustrator
     ☺ simple
     ☹ changing font requires re-generation of fi...
SMIL

     overview
      ‣ synchronized multimedia integration language
      ‣ XML-based
      ‣ W3C recommendation sinc...
graphics in
cross media publishing
         and
 content management
cross media publishing

         static   publishing system
        content
                                       web
   ...
one language to rule them all

            static   publishing system
           content
                                 ...
content management




                               content managment system


                                         ...
author‘s wish list

     ‣ WYSIWYG editing of content
     ‣ choose and configure templates
        ▹ XHTML (normal, print...
author‘s wish list

     ‣ browse and search images and other assets
        ▹ meta data
        ▹ thumbnails
     ‣ confi...
designer‘s wish list

     ‣ editing, workflow, concurrency, versioning for
        ▹ templates (XHTML, XSL-FO)
        ▹ ...
developer‘s wish list

     technology to
      ‣ generate graphics
         ▹ automatically
         ▹ on demand
        ...
developer‘s wish list

     ‣ compliance to open standards
        ▹ compatibility
        ▹ reusability
        ▹ (open s...
cross media publishing:

   Apache Cocoon
the pipeline concept



     XML          generator   transformer   serializer   HTML
     document                       ...
a sitemap: multiple pipelines

     request


      /**.html         g        t   s
                 XML                  ...
the pipeline concept
     <map:match pattern=“**.html“>
       <map:generate src=“content/{1}.xml“/>
       <map:transform...
cross media publishing

                                XHTML
                                stylesheet


     /**.html  ...
cross media publishing
     <map:match pattern=“**.xml“>
       <map:generate src=“content/{1}.xml“/>
       <map:transfor...
SVG publishing

     web pages
      ‣ deliver SVG to client
      ‣ transform to PNG
      ‣ inline SVG in XHTML
     pdf...
SVG publishing


                           XML
                           serializer
     <svg>
     ... bee ...     g
  ...
SVG publishing
     <map:match pattern=“**.xml“>
       <map:generate src=“images/{1}.svg“/>
       <map:transform src=“xs...
inline SVG in XHTML

     tool support
      ‣ Mozilla+SVG (Croczilla)
      ‣ Amaya

     <div style=“text-align: center“...
inline SVG in XSL-FO
     <fo:block text-align=“center“>
       <fo:instream-foreign-object height=“50“ width=“100“>
     ...
embedded SVG


                     g      XInclude      XHTML
     XHTML                  transformer   serializer   XHTM...
the holy grail

     source document
     <img src=“butterfly.svg“ alt=“Butterfly“/>


     XHTML
     <img src=“butterfly.pn...
the holy grail

                                                     XHTML
                  g                     XHTML
 ...
SVG serializer

      ‣ parse SVG document
      ‣ serialize to JPEG, PNG, TIFF
     <map:serializer name=“svg2jpeg“ mime-...
content management:

   Apache Lenya
introduction

     ‣ content management framework
     ‣ implemented using the Cocoon framework
        ▹ all existing Coc...
rendering, editing, asset mgmt

     ‣ no restrictions for document rendering
       (arbitrary Cocoon pipelines)
     ‣ s...
use & manage layout parameters

     use
      ‣ define XML structure
      ‣ add aggregation entry in pipeline
      ‣ ad...
manage layout information

     ‣ define appropriate XML format
        <layout
            background-color=“#FFCCCC“
   ...
summary
author‘s wish list

     ‣ WYSIWYG editing of content     BXE, Xopus
     ‣ choose and configure templates
               ...
author‘s wish list

     ‣ browse and search images and other assets
        ▹ meta data      SVG is XML: meta-data (dubli...
designer‘s wish list

     ‣ editing, workflow, concurrency, versioning for
        ▹ templates (XHTML, XSL-FO)
        ▹ ...
developer‘s wish list

     technology to
      ‣ generate graphics XSP
         ▹ automatically    custom Java generators...
developer‘s wish list

     ‣ compliance to open standards
        ▹ compatibility                 W3C standards
        ▹...
use casees

   tables+bitmaps
style-free stylesheets
tables+bitmaps

     problem: limited formatting options
      ‣ only client-side fonts
      ‣ no client-side vector imag...
tables+bitmaps

     problems with tables+bitmaps
      ‣ complex HTML structures (hard to maintain)
      ‣ changes to bi...
tables+bitmaps

     tables+bitmaps using SVG
      ‣ create source image / set of source images
         ▹ Illustrator (u...
style-free stylesheets

     problem
      ‣ XSLT mixes presentation and logic
      ‣ mixed markup:
         ▹ complex
  ...
style-free style sheets

     source       g
     document

                  g
     menu                       XSLT
     ...
style-free style sheets
     <html xmlns=“http://www.w3.org/1999/xhtml“>
       ...
       <body>
         <div class=“tem...
thank you!
Upcoming SlideShare
Loading in …5
×

OSCOM 4: Managing Beautiful Websites with Cocoon

2,603 views

Published on

The intention of the tutorial is to show the advantages of
XML-based creation and management of web design elements.
It gives some examples how to use XML technologies to define
and implement layout guidelines (e.g., corporate identities)
and manage layout parameters for multi-channel-publishing.

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

OSCOM 4: Managing Beautiful Websites with Cocoon

  1. 1. managing beautiful websites with Apache Cocoon have fun!
  2. 2. goals ‣ get an overview about graphics-related XML based technologies ‣ learn about design-related challenges in ▹ cross media publishing ▹ content management ‣ learn basic concepts to solve these problems ‣ see some examples for solving design-related pro- blems using Apache Cocoon and Lenya 2
  3. 3. outline part 1: overview graphics, XML and open source graphics in cross media publishing and content ma- nagement part 2: development cross media publishing: Apache Cocoon content management: Apache Lenya 3
  4. 4. graphics, XML, and open source
  5. 5. publishing, W3C style document formats base technologies ‣ XHTML ‣ XML ‣ XSL-FO ‣ XSLT graphics formats ‣ XPath ‣ XLink ‣ SVG ‣ XML Schema ‣ PNG ‣ URL, URI styling and interaction ‣ CSS ‣ SMIL
  6. 6. SVG - what‘s that? SVG - scalable vector graphics ‣ XML language ‣ open standard ‣ W3C recommendation since 2001 SVG is Switzerland (Paul Prescod) ‣ „SVG is the neutral ground where multimedia format combatants can declare a truce and try to solve the interoperability problems that plague their custo- mers.“ 6
  7. 7. SVG features ‣ vector shapes ‣ bitmap images ‣ text ‣ transformations, filters, clipping, masking ‣ CSS styles (internal / external) ‣ scripting - ECMAScript ‣ animation - SMIL 7
  8. 8. SVG tool support browsers DTP & Office ‣ Adobe SVG viewer ‣ Adobe Illustrator plugin ‣ Corel Draw ‣ Apple Safari ‣ OpenOffice Draw ‣ KDE Konqueror (ksvg) ‣ Sodipodi ‣ Mozilla (Croczilla) ‣ Inkscape ‣ Amaya toolkits web development ‣ Apache Batik ‣ Adobe GoLive
  9. 9. what SVG is good for ‣ graphic design ‣ web and print publishing ‣ visualization systems (maps, medical, ...) ‣ reporting tools ‣ interactive web applications ‣ e-learning (visualization, animations) ‣ desktop application GUIs (scalable icons, ...) ‣ XForms implementation (RCC in SVG 1.2) 9
  10. 10. SVG in web applications SVG for web graphics ‣ embedding in XHTML possible ‣ less bandwidth ‣ scalable ‣ client-side processing, scripting, animation server-side SVG ‣ generating bitmap images ‣ dynamic, parameterizable ‣ data visualization ‣ recycle existing graphics-intense documents for the web 10
  11. 11. Apache Batik modules ▹ SVG parser ▹ SVG to bitmap rasterizer ▹ TTF to SVG font converter ▹ SVG DOM API ▹ JSVGCanvas (Swing component) used by ▹ Apache Cocoon (serialize SVG as bitmap) ▹ Apache FOP (embed SVG in XSL-FO) 11
  12. 12. fonts in SVG embedded ‣ e.g. Adobe Illustrator ☺ simple ☹ changing font requires re-generation of file referenced ‣ e.g. Batik ttf2svg ☺ re-usable SVG font ☹ manual embedding necessary 12
  13. 13. SMIL overview ‣ synchronized multimedia integration language ‣ XML-based ‣ W3C recommendation since 1998 purpose ▹ position multimedia elements on screen ▹ synchronize elements 13
  14. 14. graphics in cross media publishing and content management
  15. 15. cross media publishing static publishing system content web pages dynamic content PDF vector images WAP bitmap images office fonts video colors 15
  16. 16. one language to rule them all static publishing system content web pages dynamic content PDF vector images XML WAP bitmap images office fonts video colors 16
  17. 17. content management content managment system publishing system static content author web pages dynamic content developer PDF vector images WAP designer bitmap images office administrator fonts video manager colors 17
  18. 18. author‘s wish list ‣ WYSIWYG editing of content ‣ choose and configure templates ▹ XHTML (normal, print view) ▹ XSL-FO ‣ embed graphics in documents ‣ reuse in multiple media: graphics, fonts, parameters 18
  19. 19. author‘s wish list ‣ browse and search images and other assets ▹ meta data ▹ thumbnails ‣ configure images ▹ resize with server-side recalculation ▹ change JPEG quality (bandwidth) ▹ apply transformations (rotate, filter, ...) 19
  20. 20. designer‘s wish list ‣ editing, workflow, concurrency, versioning for ▹ templates (XHTML, XSL-FO) ▹ stylesheets (XSLT) ▹ resources (images, fonts, ...) ▹ parameters (colors, ...) ‣ WYSIWYG editing of templates (XHTML) ‣ support for conventional tools (DreamWeaver, GoLive, Freehand, Illustrator, ...) 20
  21. 21. developer‘s wish list technology to ‣ generate graphics ▹ automatically ▹ on demand ▹ parameterizable ▹ data-driven (charts, reports, statistics, ...) ‣ convert graphics ▹ change formats ▹ change resolution (size, bandwidth) ▹ apply filters and transformations 21
  22. 22. developer‘s wish list ‣ compliance to open standards ▹ compatibility ▹ reusability ▹ (open source) tools, APIs, components ▹ low learning costs ‣ auto update (on demand generation) of ▹ embedded media ▹ templates ▹ layout parameters 22
  23. 23. cross media publishing: Apache Cocoon
  24. 24. the pipeline concept XML generator transformer serializer HTML document document XSLT stylesheet 24
  25. 25. a sitemap: multiple pipelines request /**.html g t s XML HTML /**.pdf g t t s XML PDF /**.jpg reader 25
  26. 26. the pipeline concept <map:match pattern=“**.html“> <map:generate src=“content/{1}.xml“/> <map:transform src=“xslt/xml2xhtml.xsl“/> <map:serialize type=“xhtml“/> </map:match> <map:match pattern=“**.pdf“> <map:generate src=“content/{1}.xml“/> <map:transform src=“xslt/add-toc.xsl“/> <map:transform src=“xslt/xml2xslfo.xsl“/> <map:serialize type=“fo2pdf“/> </map:match> <map:match pattern=“**.jpg“> <map:read src=“images/{1}.jpg“ mime-type=“img/jpeg“/> </map:match> 26
  27. 27. cross media publishing XHTML stylesheet /**.html t XHTML serializer XHTML document XML g document /**.pdf t FO2PDF serializer PDF document XSL-FO stylesheet 27
  28. 28. cross media publishing <map:match pattern=“**.xml“> <map:generate src=“content/{1}.xml“/> <map:transform src=“xslt/add-toc.xsl“/> <map:serialize type=“xml“/> </map:match> <map:match pattern=“**.html“> <map:generate src=“cocoon://{1}.xml“/> <map:transform src=“xslt/xml2xhtml.xsl“/> <map:serialize type=“xhtml“/> </map:match> <map:match pattern=“**.pdf“> <map:generate src=“cocoon://{1}.xml“/> <map:transform src=“xslt/xml2xslfo.xsl“/> <map:serialize type=“fo2pdf“/> </map:match> 28
  29. 29. SVG publishing web pages ‣ deliver SVG to client ‣ transform to PNG ‣ inline SVG in XHTML pdf ‣ inline SVG in XSL-FO 29
  30. 30. SVG publishing XML serializer <svg> ... bee ... g </svg> svg2png serializer 30
  31. 31. SVG publishing <map:match pattern=“**.xml“> <map:generate src=“images/{1}.svg“/> <map:transform src=“xslt/svg/rotate.xsl“> <map:parameter name=“angle“ value=“45“/> </map:transform> <map:serialize type=“xml“/> </map:match> <map:match pattern=“**.svg“> <map:generate src=“cocoon://{1}.xml“/> <map:serialize type=“svgxml“/> </map:match> <map:match pattern=“**.png“> <map:generate src=“cocoon://{1}.xml“/> <map:serialize type=“svg2png“/> </map:match> 31
  32. 32. inline SVG in XHTML tool support ‣ Mozilla+SVG (Croczilla) ‣ Amaya <div style=“text-align: center“> <svg xmlns=“http://www.w3.org/2000/svg“ style=“width: 100px; height: 10px“> ... </svg> </div> 32
  33. 33. inline SVG in XSL-FO <fo:block text-align=“center“> <fo:instream-foreign-object height=“50“ width=“100“> <svg xmlns=“http://www.w3.org/2000/svg“ width=“100“ height=“50“> .... </svg> </fo:instream-foreign-object> </fo:block> problems ‣ external namespaces apparently not supported 33
  34. 34. embedded SVG g XInclude XHTML XHTML transformer serializer XHTML document document <svg> reference ... bee ... g </svg> g XInclude FO2PDF XSL-FO transformer serializer PDF document document 34
  35. 35. the holy grail source document <img src=“butterfly.svg“ alt=“Butterfly“/> XHTML <img src=“butterfly.png“ alt=“Butterfly“/> XSL-FO / PDF <svg width=“100“ height=“100“> ... </svg> 35
  36. 36. the holy grail XHTML g XHTML serializer document svg2png <svg> serializer XHTML ... bee ... g document </svg> g xhtml2fo FO2PDF serializer PDF document 36
  37. 37. SVG serializer ‣ parse SVG document ‣ serialize to JPEG, PNG, TIFF <map:serializer name=“svg2jpeg“ mime-type=“image/jpeg“ src=“o.a.cocoon.serialization.SVGSerializer“> <parameter name=“background_color“ type=“color“ value=“#00FF00“/> <parameter name=“quality“ type=“float“ value=“0.9“/> </map:serializer> 37
  38. 38. content management: Apache Lenya
  39. 39. introduction ‣ content management framework ‣ implemented using the Cocoon framework ▹ all existing Cocoon components supported ▹ easy to customize+extend with Cocoon know- ledge ‣ focus ▹ flexibility (framework approach) ▹ standards compliance ▹ usability for end users of created CMS 39
  40. 40. rendering, editing, asset mgmt ‣ no restrictions for document rendering (arbitrary Cocoon pipelines) ‣ supports WYSIWYG inline editors ▹ BXE XML + CSS ▹ Xopus XML + client-side XSLT, IE only ▹ Kupu XHTML ‣ asset management ▹ assets assigned to documents ▹ asset upload (images and documents) 40
  41. 41. use & manage layout parameters use ‣ define XML structure ‣ add aggregation entry in pipeline ‣ add references in XSLT manage ‣ add menu item „Layout preferences“ ‣ configure editor 41
  42. 42. manage layout information ‣ define appropriate XML format <layout background-color=“#FFCCCC“ color=“FF0000“ border=“1px solid blue“/> ‣ allow editing ▹ WYSIWYG (BXE) ▹ forms editor ▹ proprietary editor 42
  43. 43. summary
  44. 44. author‘s wish list ‣ WYSIWYG editing of content BXE, Xopus ‣ choose and configure templates Lenya docu- ▹ XHTML (normal, print view) ment types ▹ XSL-FO ‣ embed graphics in documents Lenya asset ‣ reuse in multiple media: mgmt graphics, fonts, parameters XML + aggregation, XLink 44
  45. 45. author‘s wish list ‣ browse and search images and other assets ▹ meta data SVG is XML: meta-data (dublin core) ▹ thumbnails SVG resize for thumbnails ‣ configure images ▹ resize with server-side recalculation SVG resize ▹ change JPEG quality (bandwidth) SVG serializer ▹ apply transformations (rotate, filter, ...) configuration SVG transformations 45
  46. 46. designer‘s wish list ‣ editing, workflow, concurrency, versioning for ▹ templates (XHTML, XSL-FO) ▹ stylesheets (XSLT) Lenya asset mgmt ▹ resources (images, fonts, XML - common meta data ...) ▹ parameters (colors, ...) ‣ WYSIWYG editing of templates (XHTML) BXE, Xopus ‣ support for conventional tools (DreamWeaver, GoLive, Freehand, Illustrator, ...) WebDAV SVG im- and export 46
  47. 47. developer‘s wish list technology to ‣ generate graphics XSP ▹ automatically custom Java generators ▹ on demand sitemap parameters ▹ parameterizable ▹ data-driven (charts, reports, statistics, ...) ‣ convert graphics Batik-based Cocoon components ▹ change formats XSLT, custom Java transformers ▹ change resolution (size, bandwidth) ▹ apply filters and transformations 47
  48. 48. developer‘s wish list ‣ compliance to open standards ▹ compatibility W3C standards ▹ reusability Java ▹ (open source) tools, APIs, components ▹ low learning costs ‣ auto update (on demand generation) of ▹ embedded media ▹ templates pipeline architecture ▹ layout parameters 48
  49. 49. use casees tables+bitmaps style-free stylesheets
  50. 50. tables+bitmaps problem: limited formatting options ‣ only client-side fonts ‣ no client-side vector images ‣ CSS limitations Gallery ‣ round corners ‣ transparency ‣ ... work-around Gallery ‣ tables+bitmaps 50
  51. 51. tables+bitmaps problems with tables+bitmaps ‣ complex HTML structures (hard to maintain) ‣ changes to bitmaps (e.g. new color set): ▹ usually multiple bitmaps involved ▹ complex workflow ▹ requires image processing skills ‣ automatic generation and manipulation requires pro- prietary technologies 51
  52. 52. tables+bitmaps tables+bitmaps using SVG ‣ create source image / set of source images ▹ Illustrator (unit and raster settings!) ▹ by hand ‣ save as SVG in web application ‣ define clipping transformation: corner-clip-{x}_{y}_{width}_{height}.png ‣ serialize as bitmap ‣ use bitmap URLs for table background images ‣ optional: parameters (colors, resize, ...) 52
  53. 53. style-free stylesheets problem ‣ XSLT mixes presentation and logic ‣ mixed markup: ▹ complex ▹ requires XSLT skills ▹ no WYSIWYG editing possible ▹ not supported by conventional tools solution ‣ style-free stylesheets: separate XSLT and HTML code 53
  54. 54. style-free style sheets source g document g menu XSLT stylesheet g tabs aggregate t XHTML serializer XHTML document XHTML g template 54
  55. 55. style-free style sheets <html xmlns=“http://www.w3.org/1999/xhtml“> ... <body> <div class=“template“>tabs</div> <div class=“main“> <div class=“template“>menu</div> <div class=“template“>document</div> </div> <div class=“template“>footer</div> </body> </html> 55
  56. 56. thank you!

×