1 / 26

Branding uPortal Customizing Look and Feel

Branding uPortal Customizing 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

heman
Download Presentation

Branding uPortal Customizing Look and Feel

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Branding uPortalCustomizing Look and Feel Jason Shao Application Developer Rutgers University

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

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

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

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

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

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

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

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

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

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

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

  13. Browser Output

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

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

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

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

  18. Skinlist.xml

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

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

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

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

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

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

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

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

More Related