Branding uPortal Customizing Look and Feel

Branding uPortalCustomizing Look and Feel Jason Shao Application Developer Rutgers University

Introduction • Standards Based Design • uPortal Rendering Process • Layouts • Structure Transform • Theme Transform • CSS/HTML styling (Skins) • Changing Themes • Modifying and Adding Skins • Customizing Channels & Portlets

Standards Based Design • XHTML • “semantic markup” – express content • Validation, validation, validation • Meaningful identifiers • CSS Controlled Design • Separation of Content & Design

Advantages of Standards Based Web Design • Separate of content from style • Ease maintenance • Clarify meaning of individual elements • Reduce bandwidth requirements • Styles & Images can be cached by browsers • Eliminate weight of presentational markup • Speed page loading & rendering • Improved Accessibility

uPortal Rendering Process • Multistage process • Stages represented via XML documents • XSL Transformations used at each stage • Customization possible at each stage • Final output rendered by user’s browser

Layouts • Layout Managers • Simple, ALM, DLM • Determine what channels to give a user • Defaults for different users (student, staff, etc.) • Customizable • Possibly dynamically generated

Layout XML <layout> <folder ID=“sd” immutable=“true”…> <folder ID=“ft1”…> <channel id=“02” chanID=“05” class=“org.jasig.portal.CHeader”/> </folder> <folder ID=“ft2”…> <channel id=“02” chanID=“05” class=“org.jasig.portal.CWebProxy”/> </folder> <folder ID=“ft3”…> <channel id=“02” chanID=“05” class=“org.jasig.portal.Briefcase”/> </folder> </folder> </layout>

Structure Transform • XML Layout Representation • Folders & channels • XSL Stylesheet • XML Structure Output • Tabs & columns • Tree & channel • Etc…

Structure XML Output <layout> <header> <channel … /> </header> <navigation> <tab id=“t1” name=“personal info”/> <tab id=“t2” name=“academics”/> </navigation> <content> <channel id=“01-2” name=“Bookmarks” … /> <channel id=“01-7” name=“Email” … /> </content> <footer> </footer> </layout>

Theme Transform • XML Layout Representation • Tabs & Columns • XSL Stylesheet • Output • HTML, XHTML, WML • Localization • Branding

Theme HTML Output <html> <head> <title>uPortal</title> <link type=“text/css” src=“…” /> </head> <body> <h1>uPortal</h1> <div id=“navigation”> <a id=“tab1” href=“”>Tab 1</a> <a id=“tab2” href=“”>Tab 2</a> </div> <div id=“content”> <div class=“channel bookmarks” id=“23-06”> </div> </div> </body> </html>

Browser • Browser Identification used to select output type (HTML, WML, etc.) • HTML sent to browser • Browser Fetches associated images/CSS/etc. • Browser produces final rendered output

Browser Output

Changing Themes • Browser profiles associated with themes • Theme.sdf • Theme.xsl • Potentially serve different markup to different browsers, or devices (e.g. mobile phones) • Serialization options (html vs. wml vs. xhtml) • Skins are associated with a particular theme • ANT modstylesheet Target • Add or modify themes

Changing Doctypes • Force browsers into “standards mode” • Manually set doctype in Theme XSL • XSL:output or code doctype declaration into XSL • Modify portal.properties to pass through

Modifying existing Skins • Replace Images • Logos • Icons • Backgrounds • Modify CSS • Change Colors • Change Margins • Changes Positioning of Elements (limited)

Adding Skins • Skins = CSS files and associated images • skinList.xml – controls skin choices available to users • Thumbnail image preview (skinname.gif) • skin-name.css

Skinlist.xml

Channels & Portlets • Modify common styles in Skin CSS • Channels: styles listed with previews in the CSS Channel • Portlets: styles part of JSR-168 specification • Modify output markup fragments • Channels: channel specific XSL transforms • Portlets: various view technologies, JSP most common

Interactive Demonstrations • Let’s play: what would you like to change? • Colors? • Images? • Backgrounds? • Add skins?

Question & Answer • Questions? • Comments? • Concerns?

Summary • Standards based design has many advantages • Flexibility & Maintainability • Resource Requirements (bandwidth, disk-space, etc.) • Accessibility • Many uPortal Customization OptionsIn ascending order of difficulty & flexibility: • CSS customization – “skinning” • Theme XSL • Structural XSL

Tips & Tricks • Standards-mode: doctype switch • Browser Web Design Support • Firefox: Web Developer Toolbar Extension • IE: Accessibility Toolbar • Others: Web Design Scriptlets • CSS Hack management • Portal.properties: log XML before transform

Standards-Based Design Resources • http://www.alistapart.com • http://www.zeldman.com • http://www.csszengarden.com • http://www.456bereastreet.com • http://www.37signals.com/resources.php • http://www.stopdesign.com • http://www.meyerweb.com/eric/css/ • http://www.w3c.org

uPortal Resources • Mailing Lists: • jasig-portal@lists.unm.edu • jasig-dev@lists.unm.edu • jasig-announce@lists.unm.edu • uPortal Documentation: http://www.uportal.org • JA-SIG wiki: http://clearinghouse.ja-sig.org:9000 • JA-SIG clearinghouse: http://clearinghouse.ja-sig.org • uPortal Developer Channels • Anonymous CVS: uportal.org:2401

Relevant Books • Michael Kay, XSLT: Programmer’s Reference • Jeffery Zeldman, Designing with Web Standards • Eric Meyer, Eric Meyer on CSS • Robin Williams, Non Designer’s Design Book

Branding uPortal Customizing Look and Feel