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.

1. managing
beautiful websites
with
Apache Cocoon
have fun!

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. 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. graphics, XML, and
open source

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. 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. SVG features
‣ vector shapes
‣ bitmap images
‣ text
‣ transformations, filters, clipping, masking
‣ CSS styles (internal / external)
‣ scripting - ECMAScript
‣ animation - SMIL
7

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. 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. 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. 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. 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. SMIL
overview
‣ synchronized multimedia integration language
‣ XML-based
‣ W3C recommendation since 1998
purpose
▹ position multimedia elements on screen
▹ synchronize elements
13

14. graphics in
cross media publishing
and
content management

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

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. 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. 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. 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. 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. 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. 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. cross media publishing:
Apache Cocoon

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

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

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. 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. 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. SVG publishing
web pages
‣ deliver SVG to client
‣ transform to PNG
‣ inline SVG in XHTML
pdf
‣ inline SVG in XSL-FO
29

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

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. 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. 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. 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. 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. the holy grail
XHTML
g XHTML
serializer document
svg2png
<svg> serializer
XHTML ... bee ... g
document </svg>
g xhtml2fo FO2PDF
serializer PDF
document
36

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. content management:
Apache Lenya

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. 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. 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. 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. summary

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. 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. 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. 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. 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. use casees
tables+bitmaps
style-free stylesheets

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. 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. 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. 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. style-free style sheets
source g
document
g
menu XSLT
stylesheet
g
tabs
aggregate t XHTML
serializer XHTML
document
XHTML g
template
54

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. thank you!