CWCM Webmaster Training. Denis Bacquelaine, Technical Consultant I.R.I.S. Solutions & Experts S.A.

Transcription

1 CWCM Webmaster Training Denis Bacquelaine, Technical Consultant I.R.I.S. Solutions & Experts S.A.

2 Prerequisite: Content Contributors course of CWCM V3 Webmaster basic Knowledge

3 Training organisation Time schedule 09:00 11:00 11:15 12:30 14:00 15:30 15:45 17:00 Topics presentation Introduction Teacher s demonstration Student s practice Demo Practice

4 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

5 Goals of PST The PST Language should be used to create the layout templates and fragments. PST uses a declarative approach combined with configuration to describe the layout. PST layout templates are easier solutions to create and manage the websites than XSL approach. PST provides more structure and standardization to the sites using it.

6 Goals of PST A rich set of predefined CSS classes are provided by the components like media screen (player, gallery, tab..) and media print. The look and feel can be catered for custom needs through user-defined CSS class. PST separates the page layout from the content layout. PST provides a rich set of features with flexibility that can be improved further.

7 Advantages of PST No need to learn XSL You Know HTML, you know PST. All the existing XSL components are available in PST as well Menu, linkgroup, dynamic calendar, e- voting. XSL components are improved Media gallery, paging Smart loading of components (multi-instance, more options,... ) New components introduced Tabs..,

8 Advantages of PST For each component: several presentation styles for the same content : list, box, comma Develop the layout once, use it many times Unobtrusive JavaScript with many components support. Cross-browser support Provides the facility to connect to the social network from the pre-defined tools.

9 PST guarantees Basic presentation Default layout templates and skins (out of the box). All content types are supported. Component styles IPG compliant W3C HTML 4.1. compliant W3C CSS 2.1 framework provides a new corporate print version The PST was specially developed to fit the European Commission needs. Since all is centralized and standardized, all evolutions of the PST are immediately available for all users.

10 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

11 No XSL, No DQL XSL programming DQL development

12 Layout Vs Content The Layout - Menu - Header - Footer - Link groups - Feeds -... The Content

13 Separate page layout from content Page layout is often the same for several pages Page layout should be created and treated independently from the content It should be possible to easily change or adapt the page layout of one or several pages

14 Site configuration Exploit the site hierarchical structure to create different views of a single layout i.e. Sub site specific configurations Layout Template Similar to CSS: changing small details in lower levels Link group Link group 33344

15 Backwards compatible Existing XSL sites still work Users have the choice: PST or XSL PST not mandatory but recommended!

16 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

17 How to insert content? Content XML

18 Layout templates layout template used by content XML content XML separate document content XML

19 What is a layout template? Same as an HTML page! It makes the layout template Easy to create Easy to read Easy to modify People with knowledge of HTML can easily work with layout templates

20 Layout template: an example

21

22 Layout templates Page layout or layout template separate XML file recommendation: use the prefix pst. in parallel structure associated to documents Standard layout templates available Basic column view Providing standards Reuse Standard layout templates located in: In FTP: /presentations/templates/ In CWCM: /Site Manager/Presentations/Editor/templates

23 Root sub sites site = collection of documents with same layout template / The layout template: to be placed in top level sub site of the site Root sub site Layout template placed here Site = 1 or more layout templates

24 Template Language Layout templates written in Template Language Template language XHTML Custom elements (XML) Engine Copies XHTML Interprets custom elements and generates XHTML <span> <wcm:translate label="legal_notice" /> </span> <span> lookup of the label «legal_notice» Legal notice </span>

25 Elements of the language Typically: 1 XML element -> 1 type of component Attributes = configuration of component <html xmlns:wcm=" <body>... <wcm:linkgroup lg_id="33344"/>... </body> </html>

26 Aspects Notation follows XML content Lower case No space use underscore instead XML namespace (prefix) wcm: Flexibility Boolean: y, n, yes, no, true Non-fatal errors do not stop the transformation Non-existing configuration Wrong label Make debug information available through a report _

27 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

28 Transformation process of a document Layout Template PST

29 Content transformation XSL: content XML -> XHTML fragment(s) XHTML fragment(s) is (are) inserted in layout to create HTML page fragment layout Content XML Content XSL fragment fragment

30 Content markers Markers in the layout template bind content fragments to specific locations rel_links Layout Template <wcm:content ref="related_links"/> <wcm:content ref="body"/> body Content XSL

31 Content XSL Creates a fixed list of fragments Fragment bound in the layout template Standard set System-defined: not editable Currently: 1 content XSL provided Root of parallel structure Users choose one content XSL

32 Transformation process of a document Layout Template XML MERGE Content XML Content XSL

33 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

34 Purpose: site configuration Creates different views of a single layout template Configures attributes of the layout template Any attribute can be configurable Defines variable for configurable attribute $placeholder

35 Configurable attributes <wcm:links lg_id= $myvar"/> a dynamic value a named value For document index_en.xml it should have the value For all the documents in subsite A it should have the value 55577

36 Configuration Gives real values to one or several variables Use of the sub site hierarchy! Levels: Page configuration: document & all translations Local configuration: only at subsite level Regular configuration: subsite hierarchy Precedence: page, local, subsite Examples: Page: for index page Configurations Properties files in parallel structure Simple text files Contain one or more name-value pairs: name = value

37 Configuration files Naming convention Page: <doc>_zz.properties for document <doc_zz>.xml <doc>.properties for document <doc>.xml <doc>.script files <doc>.xml Local: pst.local.properties Regular: *.properties Recommendation: prefix pst.

38 Hierarchy and overriding myvar= Layout Template Overriding <wcm:links lg_id= $myvar"/> myvar= myvar= Link group Link group 12345

39 Default values <wcm:links lg_id= $myvar?44000"/> The value to look for in the properties files The fallback value if the lookup of the name myvar failed.

40 Typical use Change the link group ID Activate or deactivate parts of the layout Change the ID of an HTML element Change the CSS class name...

41 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

42 Purpose: site configuration An external, reusable portion of a layout If important layout variation XML files located in the parallel structure Also created using the Template Language <wcm:fragment xmlns:wcm=" <div> <h1>my fragment</h1>... </div> </wcm:fragment>

43 Referencing layout fragment Layout templates contain markers that indicate where a specific fragment should be included Layout fragments cannot contain markers to other fragments Note: using the combination of the relative path starting with./ (e.g../fragment.xml ) and an absolute path (e.g. /internet/ec.europa.eu/my-website/default_fragment.xml ) is a best practice to obtain good performance for the transformation from XML to HTML. Layout Template fragment.xml <wcm:translate label= my_title /> <wcm:area ref=./fragment.xml"/>

44 References Fragments can be referenced by Absolute path /internet/ec.europa.eu/shared/home.xml Local path./local/home.xml Only scans the folder of the document being regenerated Relative path home.xml Scans the sub site structure

45 Overriding additional.xml <h1>my fragment</h1> Layout Template <h1>video List</h1> Overriding additional.xml <h1>video Details</h1> <h1>video Details</h1>

46 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

47 XML dictionaries Label translations are now stored in dictionaries : they are XML files with a language extension (located in the parallel structure) 1 file for each language Name: dictionary_[lang].xml Example: dictionary_nl.xml, dictionary_en.xml <?xml version="1.0" encoding="utf-8"?> <labels lang="en"> <label key="lb_lg_select">language selection</label> <label key="edited">edited</label> </labels>

48 Custom label translations Global dictionaries are stored at the root of the parallel structure and on each domain. Default dictionaries exist in the root ( /presentations ) They contain the general translations found on any website: contact, , print... If you need translations that are not yet supported by the global dictionaries, you should first contact the CWCM helpdesk. Site specific label translations can be declared using wcm:translate tag or as attribute in other tags. They are declared in custom XML dictionaries (which can also override label translations declared in the system XML dictionaries) If the system cannot find translation of a label, the PST engine displays the following text: UNKNOWN LABEL

49 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

50 Resolution rules How the PST looks for external objects Fragments Configurations Dictionaries A regeneration always happens within the context of a document The document on which the layout template is applied

51 Root sub sites Determined by layout template associated to document Root subsites may differ for documents in same subsite! best practice: put layout templates in the same subsite! Location of layout template determines Which documents can be associated to it Which configurations can influence them Layout template placed here /

52 Resolution rules Fragment, configuration files and CSS are searched until the layout template of a document is found The search will never go higher Custom dictionaries are only searched at 2 levels: System The location of the layout template myvar=33344 Layout Template

53 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

54 What defines the HTML page for a document? Layout Template Content Chosen XML + configuration = Location in the sub site Content HTML Rendition Content XSL

55 Binding rules Binding rules describe for a document The layout template to use The configurations to use The content XSL to use Binding rules can also indicate if a document should use the XSL approach For each sub site a set of binding rules can be declared Document name pattern Basename of the configuration files The binding name.index_zz.xml = pst.my_layout.xml,pst.basic,pst.cnt.default.xsl Rule by document name The condition Layout template The content XSL

56 Possibilities Bindings PST [condition] = [layout template],[configuration],[content XSL] Standard (XSL approach) [condition] = standard Example: name.homepage_en.xml = standard Conditions By name By type type.short_content = [binding] Default rule default = [binding]

57 Applying the binding rules All the binding rules along the absolute path of a document are considered The system will always evaluate the rules from top to down The system uses the binding of the first rule for which the condition matches The following binding rule is declared at the highest level default=standard By default documents use the standard XSL approach

58 Binding rules files Binding rules are currently stored in properties files located in the parallel structure Fixed name: binding.properties Only 1 binding rules document can exist at a specific level. Local binding: only at subsite level Fixed name: localbinding.properties Local binding properties can contain the same sort of rules as regular binding properties. Used to declare binding rules that only apply at a specific level and do not affect lower levels Contain one or more rules

59 Multiple layout templates A sub site can use more than 1 layout template Using the binding properties, documents of 1 sub site can be associated to different layout templates

60 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

61 Default classes produced by the PST Style master eulist eubox eubuttons euslideshow eumediagallery eudynamicpanel eutabs Repeating items euitem eunbr_x eusqnr_x ( linkgroup only ) eufirst eulast euzebra euimg

62 What is style?

63 Other structures

64 Automatic CSS linking Generate HTML link statements Collect all CSS with specific name until root subsite Collect local CSS Advantages: Facilitates site configuration Special class which is put automatically on the body tag For example <body class= eushortcontent > for a short_content document, <body class= eueventcontent > for an event document The advantage of the class on the body tag is that with one CSS rule you can influence the presentation of all web pages of one the document type (short content, event..)

65 Customization levels HTML structure definition Default PST classes User-defined classes Presentation style For PST components (tabs, calendar ) E.g. list, boxes, buttons Produces HTML structure + CSS classes

66 Customization levels The <wcm:library> element will include all the necessary files for the chosen version, which is specified in the <wcm:layout> element. All files depend on which version of the template is used: 2012: Is the default used by wcm:library element, when the version attributes on wcm:layout are not defined or wcm:layout is not present). The following files are included: 1. /wel/template-2012/stylesheets/ec.css 2. /wel/template-2012/stylesheets/ ec-ie.css 3. /wel/template-2012/stylesheets/ ec-lite.css 2011 V02: The following files are included: 1. /wel/template-2011/v02/stylesheets/ec.css 2. /wel/template-2011/v02/stylesheets/ec-ie.css User-defined presentation can be added.

67 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

68 Analysis of site requirements Define site structure Define layouts: global & variations Define graphical chart Validate against PST

69 Implementation steps Create site structure Define default layout template pst.default.xml Define configuration pst.default.properties Contains ishomepage=false, At Homepage level it is set to True. According to the IPG rules, you should use H1 in the banner for the home page. For the other pages you should use <p> in the banner. Define binding in root subsite binding.properties Contains default=pst.default.xml,pst.default,pst.cnt.default.xsl Customize look and feel Define skin: CSS Create your dictionaries Reiterate for additional bindings and configurations

70 Agenda Benefits of the PST system General ideas and concepts of the PST Layout templates Content transformation Configurations Layout Fragments Label & Dictionaries Object resolution rules PST associations Customize look & feel Exercise : Create a website More information

71 More information Europa Management Helpdesk European Commission DG COMM Unit A MADO 06/098 B-1049 Brussels/Belgium europamanagement@ec.europa.eu Web:

72 Questions & Answers