branding uportal customizing look and feel
Download
Skip this Video
Download Presentation
Branding uPortal Customizing Look and Feel

Loading in 2 Seconds...

play fullscreen
1 / 26

Branding uPortal Customizing Look and Feel - PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Branding uPortal Customizing Look and Feel' - heman


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
branding uportal customizing look and feel

Branding uPortalCustomizing Look and Feel

Jason Shao

Application Developer

Rutgers University

introduction
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
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
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
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
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 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
Structure Transform
  • XML Layout Representation
    • Folders & channels
  • XSL Stylesheet
  • XML Structure Output
    • Tabs & columns
    • Tree & channel
    • Etc…
structure xml output
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
Theme Transform
  • XML Layout Representation
    • Tabs & Columns
  • XSL Stylesheet
  • Output
    • HTML, XHTML, WML
    • Localization
    • Branding
theme html output
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
  • 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
changing themes
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
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
Modifying existing Skins
  • Replace Images
    • Logos
    • Icons
    • Backgrounds
  • Modify CSS
    • Change Colors
    • Change Margins
    • Changes Positioning of Elements (limited)
adding skins
Adding Skins
  • Skins = CSS files and associated images
    • skinList.xml – controls skin choices available to users
    • Thumbnail image preview (skinname.gif)
    • skin-name.css
channels portlets
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
Interactive Demonstrations
  • Let’s play: what would you like to change?
    • Colors?
    • Images?
    • Backgrounds?
    • Add skins?
question answer
Question & Answer
  • Questions?
  • Comments?
  • Concerns?
summary
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
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
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
uPortal Resources
  • Mailing Lists:
  • 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
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
ad