Chapter 1

Using uPortal

Introduction to Portals..........................................................................................2

Introduction to uPortal.........................................................................................7

Framework Elements.......................................................................................7

Tabs...............................................................................................................7

Columns........................................................................................................8

Header Icons.................................................................................................9

Content Elements............................................................................................11

Channels......................................................................................................11

Making Changes to Your Layout – User Preferences......................................15

Preferences Mode............................................................................................15

Changes in the Content..................................................................................17

Adding New Items......................................................................................17

Adding A New Tab.................................................................................18

Adding A New Column..........................................................................20

Adding New Content..............................................................................23

uPortal Skins...................................................................................................28

Layout Language............................................................................................30

Note on the images in this document: Usually, the picutres that help someone understand how a program works will match exactly what that person will see on the screen of their computer. As they go from one screen to the next, the pictures in the book will move along with them so that they know that they are in the rigth place.

As you will soon see, a portal is very customizable in the way it looks and what options are made available for people using it. By this, each school or business can change the look and feel of their portal so that it matches their symbols and colors, as well as deciding to remove certain options and buttons. The pictures that are used in this manual were made as uPortal was being created. It is almost certain that the look of the portal that you will be using will not match that of the one used during development. It may look different, but it will still work in the same way.

1.1 Introduction to Portals

When you surf around on the internet, you usually start by going to a web site somewhere. From the main page you click on buttons and links, moving around the site, opening new pages as you go. Surfing a web site is kind of like reading a book, moving from one page to the next. The main difference, of course, is that you don't move from page to page in any order. You have the freedom to click around however you want, and even move from one book (web site) to another.

Figure 1.1: Navigating a Web Site

A portal is a different way to organize things on the internet. You use the same browser to get to your portal, just as you would a web site. However once you get there, a portal is more like a filing cabinet in the way things are put together, rather than a book. Each screen is like a single file, and the things on the screen are like the items held inside of the file. So instead of moving from page to page in a book, you find the file you want and look at all of the items in that file at the same time.

Figure 1.2: Portal with Two “Files” Showing the Items in the First One

Figure1.3: The Same Portal

Layout, Showing the Items in

the Second “File.”...Notice the

Color of the Tabs that Show

which “File” is Open

Another difference between a portal and a web site is that what you see in the portal can be customized. In a web site, the pages will always look the same, no matter who you are or how you look at them. When you get to a portal, you first look at the “guest” layout of the site, as you saw on the last page (Fig 1.1 and 1.2). If you have an account there, you can log in and change the portal to look the way you want it to. Each account that a portal has is like a different drawer in the filing cabinet, and each person looks only at the files in their “drawer,” or account layout.

Once you are logged into your account, you can add new “files” to your “drawer” and remove the ones you don't want. You can put things in and take things out of the “files,” and move them around however you see fit. No one except for you can make changes to your “drawer.” In many cases, you can also change the way the site looks, too. The next three pictures show the same portal (filing cabinet) as before, only this time we have logged in under three different account (drawer) names. Notice that each one has a different number of tabs (files), different channels (items) in each tab, and even different buttons in the upper right corner.

Figure 1.4: Portal, Logged in as “student”

Figure 1.5: Portal, Logged in as “admin”

Figure 1.6: Portal, Logged in as “demo”

You type the same web site address into your browser, or hit the same link to get to all four versions of this portal, Guest, Student, Admin and Demo. You will always start with the guest layout, and then tell the portal who you are so that it can give you your account. So, a portal is very different from a regular web site in the way it shows you information. This can be a great advantage to you, as you get to have some control over what you see in your layout, what files you have and what goes in them, and even how it will look. The rest of this document will explain what exactly you can change in your layout, and how you go about doing that.

Figure 1.7: “student” Layout with “imm” Skin

Figure 1.8: “student” Layout with “Hulk” Skin

1.2 Introduction to uPortal

uPortal is the name of the portal that is used to make your layout. The parts that make up a uPortal layout are divided into two categories:

Framework Elements: The framework is the parts of uPortal that determine how your layout will look, and how it is put together.

Tabs: The tabs are the “files” in your “drawer” of the “cabinet.”

Figure 1.9: uPortal Tabs

Figure 1.9 is an example of how your tabs might look. This user has four tabs in their uPortal account, meaning that they have four separate folders of content. This person has named these folders, “Entertainment,” “News,” “Biology 101,” and “Art.” We can assume that they names are related to what content is seen in each tab. In this picture, the “News” tab is the “focused” tab. The focused tab is the one that you currently have open to look at the items inside. Notice that the color of the focused tab is the same as the background where the items are.

Figure 1.10: student Portal with the “News” Tab Focused

As you click on the name of a tab, it will become the focused tab, opening and showing you its contents.

Figure 1.11: student Portal with the “Entertainement” Tab Focused

Columns: Within each tab, the content is laid out in an orderly manner. Columns help to keep the items in each tab organized. To start with, all of the channels are stacked up on top of each other.

Figure 1.12: student “Entertainment” Tab with Just One Column

Having extra columns allows you to move channels next to each other, using the full width of the screen. In the User Preferences section of uPortal, you can add, remove and change the width of the columns in your layout.

Figure 1.13: student “Entertainment” Tab with Two Columns

Header Icons: At the top of your screen, there are some icons that you can use in uPortal. These icons are buttons that you can press to perform the following functions:

Home: Pressing the “Home” icon will take you from where ever you may be in your layout to “Home.” Home is when you are in the normal view of your layout with the left most, or first, tab focused.

Figure 1.14: student Portal “Home” (Left Most Tab is Focused)

Sitemap: The Sitemap of your layout will show you a text version of all tabs and channels in your layout. If you click on the name of any of the tabs in the sitemap, that tab will become focused. If you click on the name of any channel, you will see that channel in focused mode.

Figure 1.15: student Portal Sitemap

Preferences Mode: User Preferences is how you make changes to your layout. You can add/remove or change the Tabs, Columns and Channels. Selecting this icon will turn on User Preferences mode, described later in this chapter.

Logout: This icon will log you out of your account. It will not delete anything in your account, nor remove your account. It will only log you out, effectively closing and locking your file drawer. Any changes that you may have made in the User Preferences will be saved, and you will see the “guest” user layout on your screen, replacing your, personal layout.

Content elements: Channels, sometimes also called Portlets, are the content of a uPortal layout. A few sample Channels are shown below.

Figure 1.16: uPortal Channels

As you can see, each of these channels is very different in what they have in them. These are just a small group of channels, and they have links to other web sites, input boxes for you to put in information and the minesweeper game. A channel can contain just about anything, and they can even share from one channel to another.

A uPortal Channel

Even though channels can contain a variety of content, they are all put together in the same way. Below is a dissected uPortal channel, showing its parts.

Figure 1.17: Parts of a uPortal Channel

Channel Title: The title or name of this channel.

Figure 1.18: uPortal Channel Title Bar

Icon Bar: These are buttons that allow you to do some special things with the channel. Not all channels will have all of the buttons. The Number Guessing Game channel shown above only has three of them.

Minimize: This button will close the content section of this channel, so that only the Title and Icon Bar will be seen. This button will only exist on a channel that is shown in full size.

Figure 1.19: Minimized Channel

Maximize: When you have a channel that is Minimized, this button will replace the “Minimize” button. It will re-open the content section of the channel, returning it to full size.

Focused Mode: Selecting this button will put this channel into “focused mode.” This means that the normal tab/column view of your layout will change to show just this channel.

Figure 1.20: uPortal Channel in Focused Mode

Un-Focus: This button appears when you are in focused mode. Selecting it will return you to your normal tab/column layout.

Detach: This button will open a new copy of this channel in a new window. This new window will pop-up on top of your portal window.

Figure 1.21: Detached Channel

Help: This button will give you help on how to use the channel. While some channels are very simple and just have text to read or a picture to look at, others can be quite complicated. For example, one very popular channel is used for email. This button with give you help on what the different email options are and how to make changes to the channel so that it works the way you want it to.

Print: Print this channel and its contents.

Edit: In some cases, a channel will need information from you. For example, a channel showing your local weather may requre you to tell it what your zip code is. This button will allow you to put any specific information about you into the channel that it might need.

About: This button will give you extra information that about the channel. Typically, this will be things like a credits on who made the channel, possible uses for it and other things like that.

Content Section: As mentioned above, this content of a channel can be just about anything. This is really the most important part of your layout. What goes into the content section of your channels is what you will work with when using the portal.

Channel Border: The borders surround the channel and separate the sections from each other.

Figure 1.22: Channel Borders

1.3 Making Changes to My Layout – User Preferences

Every person is given the same beginning layout (Figure 1.1). The user preferences section is where you can make changes to your layout, to customize the look and content however you want.

The third button from the left	in the header starts user preferences mode. User preferences is called a “mode” because you are not taken to a new preferences screen, nor do any new windows pop up over your layout. Instead, all of the extra graphics and new links are wrapped around your current layout (Fig 1.2).

Fig 1.23 Normal Layout View

Fig 1.24 Layout in Preferences Mode

The ways to change your layout and the new graphics that are added when turning on preferences mode are described in more detail below.

Changes to the Header Icons

Starting at the top of the screen, the icons in the layout header change in preferences mode.

Fig 1.25: Standard View Header Icons	Fig 1.26: Preferences Mode Header Icons

Turn On User Preferences Mode: Selecting this button in the standard view will turn on the preferences mode graphics.

Turn Off User Preferences Mode: Selecting this button in preferences mode will turn off the preferences mode graphics, moving you back to the standard view. All changes made to the layout will be saved when preferences mode is turned off.

Save Changes: Selecting this button in preferences mode will save all of the new changes made to your layout. You will also save the changes made to your layout when you turn off preferences mode, or when you logout. Having a save button in addition to automatically saving gives you the chance to save what you do, in case the computer crashes or something goes wrong.

Changes in the Content

The user preferences mode adds some extra links to your layout that will allow you to add new items (tabs, columns and channels) into your layout, or to move around or delete the items that are already there. The links for adding new items are all in the new “User Preferences Actions” block, while the links to move and delete items are seen as a buttons on the item you wish to change.

Adding New Items

Figure 1.27: Add Items Links in the User Preferences Actions Block

New items are added to your layout by selecting the link in the User Preferences Actions block for the new item you want.

Adding a New Tab

Select the “New Tab” link in the “User Preference Actions” block:

Figure 1.28: Add a New Tab Link

“Target” icons appear in the places where you can add a new tab. In some cases, you will see empty places where you think a target icon should appear. The administrators of the portal determine where the target icons can and cannot show in your layout.

Figure 1.29: Target Icons

Select a target icon at the place where you want the new tab. Notice that the new “Unnamed” tab is not the front tab.

Figure 1.30: New Tab – Placed at the Chosen Target

When you select the new “Unnamed” tab to bring it to the front, it will be empty of content. New columns can be added to the tab, and new channels can be moved in or added as well.

Figure 1.31: New/Empty Tab

Before you add new content, the front tab has three preferences icons of it's own:

Tab Name: Any new tab is named “Unnamed” when it is first made. You can rename the tab by typing anything you want into the text box, and then selecting the return button.

Move this Tab:	Selecting the Move Tab button will turn on the tab target icons, just like when you added the tab in the first place. You can move the tab to any one of these icons.

Delete this Tab:	When you select to delete a tab, it will permenantly remove the tab and all content (column and channels) that you have placed in the tab from your layout.

Adding a New Column

Select the New Column link on the User Preferences Block.

Figure 1.32: Add a New Column Link

“Target” icons appear in the places where you can add the new column.

Figure 1.33: New Column Target Icons

The new column appears at the chosen place.

Figure 1.34: New, Placed Column

4a. Adding a second column starts by selecting the “New Column” link again to turn on the target icons.

Figure 1.35: New Column Link

4b. Select the target where you would like the add the new column.

Figure 1.36: New Column Target Icons

4c. The widths of all of the columns in the tab, including the newly added one, will adjust so that they are all equal.

Figure 1.37: New Column Added

As with the tabs, columns have their own extra icons when you are in preferences mode. The effects of selecting these buttons is the same if the column is a new one, already in the tab, empty or if it contains channels.

Figure 1.38: uPortal Column in User Preferences Mode

Move This Column: Selecting this button will turn on the target icons for where this column can be moved. If you bring a different tab to the front, the target icons for that tab will be on, and the column will move to the new tab. All of the channels that are in the column will move along with the column when you select a target.

Delete This Column: When you delete a column, all of the channels in the column are deleted along with it.

Shrink this Column: Selecting this button will decrease the width of this column by 5%. This 5% will be spread out among any other columns on the tab. You may see that a column will not appear to change its width past a certain size, even though the numbers continue to go down as you hit this button. There can be things in a channel, such as a picture or a table, that have a fixed size. The channel, and therefore the column that it is in, cannot shrink smaller than that size. If that channel were to be move out of the column, then all of the columns in the tab will change to match their set numbers.

Expand this Column: Selecting this button will increase the width of this column by 5%. This 5% will be spread out among any other columns on the tab.

Normalize the Widths of All Columns: This button changes the widths of all of the columns on the tab so that they are equal.

The Current Width of this Column: This is a display of the width of this column as a percentage of the width of the entire page. Changing the window size will not change the column width percent. The columns will expand or shrink along with the window.

Channels can be added into a column at any time, filling out your new tab with the content that you want it to have.

Adding New Content

Content is what makes your tab useful. The channels contain all of the news, pictures and other information that you will use, while the tabs and columns give you and framework for holding these channels. In some cases, you will be able to add blocks of content all at once, made up of a tab, one or more columns and one or more channels. These “fragments” are added in the same was as just a single channel. In fact, when you look at the list of content to chose from when adding it to your new tab, fragments and channels are listed together. That is why this link is called “Add Content” rather than just “Add Channels.”

As with the other links, adding new content starts by selecting the “Add Content” link in the User Preferences Actions block.

Figure 1.39: New Content Link

This link will start the “Content Subscriber,” which allows you choose what you want to add to your tab. When the subscriber first opens, you have three options...1. Look through the alphabetical list of channels and fragements to add, 2. Narrow down the list by choosing a category of content, or 3. Quit and go back to your layout.

Figure 1.40: Content Subscriber

When you choose a category of content, the list of options changes to include only those in the category you have chosen.

Figure 1.41: Content Categories

This list can be narrowed down even more by selecting a sub-category.

Figure 1.42: Content Subcategories

When you have found and selected the content you want to include in your tab, select the “Add” button.

Figure 1.43: Add Selected Content

The target icons for where you have permission to add the new content will appear. If you move from tab to tab at this point, the target icons for whatever tab you move to will show, allowing you to place the new content where ever you decide is best for your layout.

Figure 1.44: New Content Target Icons

The new content will appear in the place of the target icon you choose.

Figure 1.45: Newly Added Content

The channels have their own preferences icons, that allow you to move them within or delete them from your layout.

Move this Channel: Selecting this button will allow you to move that channel to somewhere else in the layout. The target icons will turn on, showing you where the channel can move. If you change to another tab, you will see the target icons for that tab.

Delete this Channel: Selecting this button will permenantly remove that channel from your layout.

After repeating this a few times, your new tab will begin to take shape. The image below is what you would see after you take the tab we made with the “Minesweeper” channel. Add a third column. Add in three more channels; “Daily Business Cartoon,” “Number Guess,” and “Word of the Day.” And then adjust the widths of the columns to the sizes you would like.

Figure 1.46: New Tab Content

uPortal Skins

In uPortal, the skin is the graphics and color scheme that gives your account its look and feel. You can switch the skin, without causing any other changes to your layout. If you want to change the skin for your layout, you start with the “User Preferences Actions” block:

Select the “Skins” link on the User Preferences Block.

Figure 1.47: Change Skins Link

Look at the list of different skins available for your account. The skin that your account is currently using will be shown as selected. This “Skin Selector” channel will always show up in “focused” mode.

Figure 1.48: uPortal Skins Selector

Choose the Skin that you want to change to.

Figure 1.49: New Skin Selected

The “unfocus” button will take you back to your layout in user preferences mode, where you can immediately see how the new skin will look.

Figure 1.50: Changed uPortal Skin

Layout Language

You can change the written language that will be used for the channels and text links in your layout. When a person makes a channel, they write all of the text that will be used in that channel. For example, someone had to write the text on the “Number Guessing Game” channel that says, “This is a number guessing game. I am thinking of a number...” Someone also has to re-write all of this text in the languages that are available in your language selector.

Figure 1.51 Sample uPortal Channel

When you choose a language in the “User Locales Selector,” most of the written text in your layout will now show up in the new language. We say, “most” instead of “all” of the written text, because we do not know if all of the channels you are using have a translation for the language you have chosen. Further, text such as the tab names will not change, as that is a name that you chose. The language selector will not over write names and text that you have picked.

Choose the “Languages” link from the User Preferences Actions block.

Figure 1.52: User Language Link

As with the skins, the location selector is a channel that appears in “focused” mode. The language you are currently using will be shown as “selected” in the list.

Figure 1.53: User Locale Selector

When you have chosen the locale/language you want to use, hit the submit button to see the changes in your layout.

Figure 1.54: Change User Locale

Immediately, the new language can be seen in the locale channel:

Figure 1.55: Changed User Locale Selector

And then in your entire layout:

Figure 1.56: Changed User Layout

Jon Allen

2003-12-24T15:28:11