Branding uportal customizing look and feel
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Branding uPortal Customizing Look and Feel PowerPoint PPT Presentation


  • 81 Views
  • Uploaded on
  • Presentation posted in: General

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

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


Browser output

Browser 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


Skinlist xml

Skinlist.xml


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:

    • [email protected]

    • [email protected]

    • [email protected]

  • 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


  • Login