managing
beautiful websites
with
Apache Cocoon
have fun!

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

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

graphics, XML, and
open source

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

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

SVG features
‣ vector shapes
‣ bitmap images
‣ text
‣ transformations, filters, clipping, masking
‣ CSS styles (internal / external)
‣ scripting - ECMAScript
‣ animation - SMIL
7

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

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

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

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

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

SMIL
overview
‣ synchronized multimedia integration language
‣ XML-based
‣ W3C recommendation since 1998
purpose
▹ position multimedia elements on screen
▹ synchronize elements
13

graphics in
cross media publishing
and
content management

cross media publishing
static publishing system
content
web
pages
dynamic
content
PDF
vector
images WAP
bitmap
images office
fonts video
colors
15

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

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

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

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

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

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

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

cross media publishing:
Apache Cocoon

the pipeline concept
XML generator transformer serializer HTML
document document
XSLT
stylesheet
24

a sitemap: multiple pipelines
request
/**.html g t s
XML HTML
/**.pdf g t t s
XML PDF
/**.jpg reader
25

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

cross media publishing
XHTML
stylesheet
/**.html t XHTML
serializer XHTML
document
XML g
document
/**.pdf t FO2PDF
serializer PDF
document
XSL-FO
stylesheet
27

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

SVG publishing
web pages
‣ deliver SVG to client
‣ transform to PNG
‣ inline SVG in XHTML
pdf
‣ inline SVG in XSL-FO
29

SVG publishing
XML
serializer
<svg>
... bee ... g
</svg> svg2png
serializer
30

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

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

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

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

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

the holy grail
XHTML
g XHTML
serializer document
svg2png
<svg> serializer
XHTML ... bee ... g
document </svg>
g xhtml2fo FO2PDF
serializer PDF
document
36

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

content management:
Apache Lenya

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

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

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

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

summary

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

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

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

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

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

use casees
tables+bitmaps
style-free stylesheets

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

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

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

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

style-free style sheets
source g
document
g
menu XSLT
stylesheet
g
tabs
aggregate t XHTML
serializer XHTML
document
XHTML g
template
54

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

thank you!