CWCM. Migrating to XSL template Version /04/ of 18

Transcription

1 CWCM Migrating to XSL template 2013 Version /04/ of 18

2 DOCUMENT HISTORY Version Date Author Description Action (*) Confidentiality Pages /04/2013 Acsone Creation C Normal 17 (*) Action: C= Creation, I=Insert, U=Update, R=Replace, D=Delete 2 of 18

3 TABLE OF CONTENTS 1. Purpose of this document Note for XSL template-2007 migration Warning Wizard Migrating from template Migrating from template Migration steps Create all new title translation images Doctype Call all necessary files Adapt the layout Call the new header template Search form Update title in your style sheets Update your included files Tools for the Web masters Easy view mode targeting in CSS Is Mobile? Lazy loader scripts Responsive CSS Hints and tips Improving performance Further performance improvements Social tools of 18

4 1. PURPOSE OF THIS DOCUMENT The present document describes how to migrate from the XSL template 2011 or XSL template 2012 to XSL template For each version of the XSL template a specific migration procedure needs to be followed. These procedures are explained in the next chapter. As each procedure contains common steps, the detailed steps are explained in the third chapter. The document UM.xsl.template.2013.doc provides more information about the XSL template 2013 and explains the whole template in detail. 1.1 Note for XSL template-2007 migration There is no migration path for the XSL template The Responsive Web Design rules cannot be ensured with this template. 1.2 Warning Even though the 2013 Template has been developed to meet the needs for a Responsive Web site, the same cannot be said of the content formatted by the Web masters. It is the responsibility of the Web masters to adapt the content of the page using their own style sheets. The 2013 Template ensures a minimum presentation for the global layout, the header and the footer, and for the navigation menu. 4 of 18

5 2. WIZARD In this chapter we explain how to migrate from the XSL Commission template (ec.europa.eu) 2011 and 2012 to XSL template Each section indicates the steps from the third chapter to perform. 2.1 Migrating from template-2011 In order to migrate from XSL template 2011, follow the steps below: Create all new images title translations (see section 3.1 Create all new title translation on page 6) 2.2 Change banner title and image in your style sheets (see section 3.6 Search form The search form used an XML as parameter. This XML contain only one kind of node collection. The rest is used as attributes. Remark: To have a restricted search area, you need to send a request to the Data-Center to create a Topic sets for your area. If you want to restrict the search to a specific sub-site that does not exist, you need to make a requested to the Data-Center Attributes/node Type/possible values action This value is used to send to the Query servlet the request Default value: result This value is the template used to retrieve the result produced by the server Default value: /result_{$eu_language}.jsp max This value define the limit number of document retrieved for a request Default value: 200 show This value defines the number of document presented in the result page Default value: 10 advanced_url Optional value as url to display the Advanced search link below the field search. 5 of 18

6 mode This option defines in which mode the search is executed. Default value: 2 Possible value: 1 : All words in the document (AND) 2 : The exact phrase in the document (LIKE) 3 : Any of the words in the document (OR) collection This value is the name of the collection. Default value: <collection>europafull</collection> <collection>europasl</collection> <collection>europapr</collection> Possible value: EuropaFull EuropaSL (scadplus) EuropaPR (rapid) fulleuropa EuropaCd (guide) Note: This parameter is not an attribute but an xml node! Update title in your style sheets on page 11) Update your included files (see section 3.8 Update your included files on page 13) 2.3 Migrating from template-2012 In order to migrate from XSL template 2012, follow the steps below: Update your included files (see section 3.8 Update your included files on page 13) 6 of 18

7 3. MIGRATION STEPS 3.1 Create all new title translation images You can find all necessary PSD files for the title on the IPG site: You need to create your images containing the titles in all languages for your site. 3.2 Doctype The new template 2013 needs a specific doctype. If the init XSL template is invoked, then replace the statement <xsl:call-template name="init"/> by this statement <xsl:call-template name="doctype"/> Otherwise, you need to add a call-template statement like in the following code snippet: This rule must be placed before the root <html> tag. 3.3 Call all necessary files You should invoke the library XSL template and put the invocation before the </head> tag. It will create all necessary references to CSS and JavaScript files required for the banner design and the layout. <xsl:call-template name="library"/> By putting the invocation at this position all previous CSS rules in your main style sheets are overwritten. Using your main style sheets or the insertion position you can remove or adapt some of the CSS rules. Be aware that the following rules are mandatory: body font size is set to 64.5% and the div.layout is set to 120%. It is better to group your CSS and JS after the declaring rule like in example below. In that case some elements in the banner may unfortunately be broken by referenced old files (CSS or JS of 2007). <xsl:call-template name="library"/> <link rel="stylesheet" href="/my-site/stylesheets/my-site.css" type="text/css"/> <script type="text/javascript" src="/my-site/scripts/my-site.js" language="javascript"/> 7 of 18

8 3.4 Adapt the layout If you start a new Web site, you can find examples of template files in the CWCM repository in the folder /xslcommon/ec.europa.eu/template-2013/v01/templates. If you are upgrading an existing Web site, you have to update your existing layout. Inside the <body> tags, you must at least have a structure like in the following one which is the bare minimum: However, an HTML structure similar to the following one would be more adaptive: 8 of 18

9 9 of 18

10 3.5 Call the new header template Edit your XSL template which generates the header, and call the new template header from it while adapting for the new parameters. Name Mandator y Type / possible values is_homepage N Forces the usage of a specific HTML tag to structure the header title text Possible values: if value is $YES, uses <H1> tags; if value is $NO, uses <P> tags. title N It s the alternative text of the header image title. It s always a string. Default values: European commission or European union depending on the used corporate template. Remark: site_name is deprecated but supported in older versions subtitle N It is alternative text of the header image subtitle and is always a string. search N This value must be setting as an XML. See chapter 3.6 for all parameters. Default value is store in global variable ($DEFAULT_SIMPLE_SEARCH_FORM) <search result="/result_{$eu_language}.jsp" max="200" items_by_page="10" 10 of 18

11 ui_lang="{$eu_language}" mode="2" action=" <collection>europafull</collection> <collection>europasl</collection> <collection>europapr</collection> </search> services N Lists the elements to display in the services area of the page. A service is a link to an other Web page whose purpose is to offer some general help to the reader like About and FAQ pages. It is an XML structure whose root element services contains only service children elements. Allowed attributes for service elements are: Name, type / name of the service [MANDATORY] url, target URL label, will be displayed directly after translation from dictionary accesskey, contents follows the HTML specification Possible values for the name attribute: custom, for custom services atoz, to seek in the index sitemap, to access the map of the domain about, to read notes about the Web site faq, to find out frequently asked question s answers print, shortcut to print current document , to send the current document s URL by news, shortcut to reach the news page of the Web site legal, for legal notices cookie, for legal notices about cookie and privacy concerns contact, to help contacting a responsible of the Web site search, to proceed to an advanced search A default XML structure is available, stored in the DEFAULT_SERVICES global XSL variable. You ll find below the contents of that default structure as well as examples showing how to overwrite an existing service and how to create a custom service. <services> <service name="legal" /> <service name="cookie" /> <service name="contact"/> <service name="search"/> /services> Illustration 1 Services default structure. 11 of 18

12 <services> <service name="legal" /> <service name="contact" url= /my-site/my-contact_{$eu_language}.htm /> <service name="search"/> </services> Illustration 2 How to overwrite an existing service. <services> <service name="legal" /> <service name="custom" label= My custom label url= /my-site/my-customurl.htm /> <service name="contact"/> <service name="search"/> </services> Illustration 3 How to create a custom service. validate N For each crumbs in the breadcrumbs trail, checks that a document named index_zz exists in the related subsite and in the language of the current document. Possible values: $YES: enabled $NO: disabled (default) max_depth N Maximum number of breadcrumbs in the trail. Must be a number. Default value: 4. max_length N Maximum length of the breadcrumbs trail in characters. Must be a number. Default value: 100. home N URL of the Web site s homepage. 3.6 Search form The search form used an XML as parameter. This XML contain only one kind of node collection. The rest is used as attributes. Remark: To have a restricted search area, you need to send a request to the Data-Center to create a Topic sets for your area. If you want to restrict the search to a specific sub-site that does not exist, you need to make a requested to the Data-Center 12 of 18

13 Attributes/node Type/possible values action This value is used to send to the Query servlet the request Default value: result This value is the template used to retrieve the result produced by the server Default value: /result_{$eu_language}.jsp max This value define the limit number of document retrieved for a request Default value: 200 show This value defines the number of document presented in the result page Default value: 10 advanced_url Optional value as url to display the Advanced search link below the field search. mode This option defines in which mode the search is executed. Default value: 2 Possible value: 1 : All words in the document (AND) 2 : The exact phrase in the document (LIKE) 3 : Any of the words in the document (OR) collection This value is the name of the collection. Default value: <collection>europafull</collection> <collection>europasl</collection> <collection>europapr</collection> Possible value: EuropaFull EuropaSL (scadplus) EuropaPR (rapid) 13 of 18

14 fulleuropa EuropaCd (guide) Note: This parameter is not an attribute but an xml node! 3.7 Update title in your style sheets Edit your style sheets and change references as needed given the new selectors for banner images: #banner-image-right: defines the background image of the right of the banner (optional). In respect with the IPG rules, this selector is only available for the European Commissioners Web sites..title-xx: defines the background image for titles, where XX is the language code of the current document. 3.8 Update your included files In your included files, replace this line: <xsl:include href="wcmcom/ec.europa.eu/template-2011/v01/includes.xsl"/> Or <xsl:include href="wcmcom/ec.europa.eu/template-2012/v01/includes.xsl"/> By <xsl:include href="wcmcom/ec.europa.eu/template-2013/v01/includes.xsl"/> 14 of 18

15 4. TOOLS FOR THE WEB MASTERS Here are some new JavaScript and CSS features to help the Web masters. 4.1 Easy view mode targeting in CSS To ease targeting the view mode in style sheets without having to use the media queries once again, a specific class is automatically added on the body tag. This feature is available if and only if JavaScript support is enabled. - mobile when mobile device viewport has been detected; - desktop when desktop viewport has been detected. 4.2 Is Mobile? The Web masters may now use the flag components.ismobile, which is true when the Web page is viewed on a mobile device and false when on a desktop computer. Example if( components.ismobile ){ } // do a processing specific to mobile devices 4.3 Lazy loader scripts To ease the management of the presentation layer, a new feature has been implemented using JavaScript to dynamically load CSS and JavaScript files relevant to the rendering media in use. Syntax The components.settings associative array can be initialized with, currently, 2 supported entries: desktop and mobile. Each one contains the lazy loading rules relevant for the associated rendering mode (i.e. desktop or mobile). The very same structure is reused inside both entries. Each entry is itself an associative array which allows the following subentries to be specified: - css or js [exactly one is mandatory] is the URL of the resource to load lazily; - callback [optional] is a callback function to be called when the resource has been loaded successfully. Example components.settings = { "desktop" : { /* rules for desktop mode only */ "anameforreadability" : { /* loads a CSS and specify a callback function */ 15 of 18

16 "css" : "/my-path/my-big-css-for-js.css", "callback" : function(){ alert( Isn t it prettier now? ); } }, "adescription" : { /* loading a JS without specifying a callback */ "js" : "/my-path/my-big-js.js", "callback" : function(){ alert( new functions are available! ); } } }, "mobile" : { /* rules for mobile mode only. */ } }; 4.4 Responsive CSS Some CSS classes have been added to ease the Web masters job when dealing with RWD related breakpoints defined by the IPG. - visible-tablet This class hides the targeted element when in desktop mode only and displays it as soon as tablet mode or less is used (i.e. when viewport width < 768 pixels) - hidden-tablet This class displays the targeted element in desktop mode only and hides it whenever tablet mode or less is used (i.e. when viewport width < 768 pixels) - visible-phone This class displays the targeted element only for Horizontal phone mode and less (i.e. when viewport width < 600 pixels) - hidden-phone This class hides the targeted element only for Horizontal phone mode and less (i.e. when viewport width < 600 pixels) 16 of 18

17 5. HINTS AND TIPS For advanced Web masters. 5.1 Improving performance To optimize Web pages loading time, it is possible to avoid using the wcm:library element and replace it with the exact required list of CSS and JavaScript resources. This, of course, has some drawbacks: any update to the component won t be propagated to your header. You then just have to copy the CSS rules relevant to your components usage into a dedicated site.css style sheet. The very same principle is applicable to the JavaScript resources. The benefit can be huge on light or simple pages: - irrelevant CSS rules or JavaScript code won t be loaded so maintenance is simplified, - the overall memory consumption of the Web page will fit better on mobile devices, - the number of HTTP requests will be reduced so the impact of a slow 3G network link is reduced. Example <link href="/wel/template-2013/stylesheets/europa.css" media="all" rel="stylesheet" type="text/css"> <link href="/wel/template-2013/stylesheets/europa-content.css" media="all" rel="stylesheet" type="text/css"> <link href="/wel/components/2013/stylesheets/europa-components-only.css" media="all" rel="stylesheet" type="text/css"> <link href="/my-site/site.css" media="all" rel="stylesheet" type="text/css"> <script src="/wel/template-2013/scripts/europa.js" type="text/javascript"></script> <script src="/wel/components/2013/scripts/europa-components.js" type="text/javascript"></script> <script src="/my-site/site.js" type="text/javascript"></script> 17 of 18

18 5.2 Further performance improvements It is even possible to use the lazy loading feature inside your Web site specific JavaScript to load those resources in a smart way. Example components.settings = { }; "desktop" : { } "high-contrast-css":{"css":"/wel/template-2013/stylesheets/europa-high-contrast.css"} "high-contrast-js":{"js/wel/template-2013/scripts/europa-high-contrast.js"} With this, the high-contrast feature will be loaded only when the Web page is displayed in desktop mode and if the JavaScript support is enabled. 5.3 Social tools Unfortunately the technical solution presented above does not work with the social tools (a.k.a. social bookmarking ): if the script is loaded lazily, Internet Explorer cannot run it. This limitation comes from the inners of the script s organization. Although it is not manageable through the lazy loading feature, as this script is not able to run on mobile devices, it should be avoided on those platforms but not on desktop ones. Here is the trick: if(! components.ismobile ){ } document.write( '<sc'+'ript src="/wel/socialbookmark/share.js"></sc'+'ript>' ); 18 of 18