oscom 4: managing beautiful websites with cocoon
DESCRIPTION
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.TRANSCRIPT
managingbeautiful websites
withApache 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
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
graphics, XML, and
open source
publishing, W3C style
document formats ‣ XHTML ‣ XSL-FO
graphics formats ‣ SVG ‣ PNG
styling and interaction ‣ CSS ‣ SMIL
base technologies ‣ XML ‣ XSLT ‣ XPath ‣ XLink ‣ XML Schema ‣ URL, URI
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.“
7
SVG features
‣ vector shapes ‣ bitmap images ‣ text ‣ transformations, filters, clipping, masking ‣ CSS styles (internal / external) ‣ scripting - ECMAScript ‣ animation - SMIL
SVG tool support
browsers ‣ Adobe SVG viewer
plugin ‣ Apple Safari ‣ KDE Konqueror (ksvg) ‣ Mozilla (Croczilla) ‣ Amaya
web development ‣ Adobe GoLive
DTP & Office ‣ Adobe Illustrator ‣ Corel Draw ‣ OpenOffice Draw ‣ Sodipodi ‣ Inkscape
toolkits ‣ Apache Batik
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)
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
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)
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
13
SMIL
overview ‣ synchronized multimedia integration language ‣ XML-based ‣ W3C recommendation since 1998
purpose ▹ position multimedia elements on screen ▹ synchronize elements
graphics incross media publishing
andcontent management
15
cross media publishing
vectorimages
bitmapimages
staticcontent
dynamiccontent
fonts
colors
webpages
publishing system
WAP
office
video
16
one language to rule them all
vectorimages
bitmapimages
staticcontent
dynamiccontent
fonts
colors
webpages
publishing system
XML WAP
office
video
17
content management
cont
ent m
anag
men
t sys
tem
vectorimages
bitmapimages
staticcontent
dynamiccontent
fonts
colors
webpages
publ
ishi
ng s
yste
m
WAP
office
video
developer
designer
administrator
manager
author
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
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, ...)
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, ...)
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
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
cross media publishing:
Apache Cocoon
24
the pipeline concept
serializertransformergeneratorXMLdocument
HTMLdocument
XSLTstylesheet
25
a sitemap: multiple pipelines
stPDF
tg
stgHTMLXML
XML
request
reader
/**.html
/**.jpg
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>
27
cross media publishing
FO2PDFserializert
gXMLdocument
PDFdocument
XSL-FOstylesheet
XHTMLstylesheet
XHTMLserializert XHTML
document/**.html
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>
29
SVG publishing
web pages ‣ deliver SVG to client ‣ transform to PNG ‣ inline SVG in XHTML
pdf ‣ inline SVG in XSL-FO
30
SVG publishing
svg2pngserializer
XMLserializer
g<svg>... bee ...</svg>
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>
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>
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
34
embedded SVG
PDFdocument
g<svg>... bee ...</svg>
FO2PDFserializer
XIncludetransformergXSL-FO
document
XHTMLdocument
XHTMLserializer
XIncludetransformergXHTML
document
reference
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>
36
the holy grail
XHTMLdocumentXHTML
serializer
svg2pngserializer
PDFdocument
g<svg>... bee ...</svg>
FO2PDFserializerxhtml2fog
g
XHTMLdocument
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>
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
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)
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
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
summary
44
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
BXE, Xopus
Lenya docu-ment types
Lenya assetmgmt
XML + aggregation, XLink
45
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, ...)
SVG is XML: meta-data (dublin core)SVG resize for thumbnails
SVG transformations
SVG resize
SVG serializerconfiguration
46
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, ...)
Lenya asset mgmtXML - common meta data
BXE, Xopus
WebDAVSVG im- and export
47
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
Batik-based Cocoon componentsXSLT, custom Java transformers
XSPcustom Java generatorssitemap parameters
48
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
pipeline architecture
W3C standardsJava
use casees
tables+bitmapsstyle-free stylesheets
50
tables+bitmaps
problem: limited formatting options ‣ only client-side fonts ‣ no client-side vector images ‣ CSS limitations ‣ round corners ‣ transparency ‣ ...
work-around ‣ tables+bitmaps
Gallery
Gallery
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
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, ...)
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
54
style-free style sheets
XSLTstylesheet
XHTMLserializert XHTML
documentgXHTML
template
g
aggregate
tabs
gmenu
gsourcedocument
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>
thank you!