Welcome to this guided tour of VIZ Builder,
the graphical database management utility
behind the VIZ course requirements visualizer.
VIZ Builder allows those who manage an implementation
of VIZ to easily and safely build and maintain
the data displayed to the end user.
VIZ Builder requires no databasing or web
development knowledge.
You can set up your own local copy of VIZ
builder, or access a working one by visiting
go.osu.edu/vizBuilder.
When you first load VIZ Builder you'll see
an important alert letting you know that changes
to the database are not automatically saved.
This is a security feature that allows VIZ
Builder to function with only passive access
to your web server, and eliminates the need
to password protect access to VIZ Builder.
Whenever you want to save your current database,
you can download it from VIZ Builder as a
file.
To make your changes public, simply upload
the new file to the "data" folder of the VIZ
directory on your website.
VIZ Builder gives you three options initially:
you can upload a database file to edit, you
can import the current public database from
your web server, or you can start a blank
database.
For the purposes of demonstration, we'll start
a blank database.
The page is divided into three main parts.
At the top is the menu bar, which has several
options that we'll discuss in a moment.
Below this is the main editor pane, where
you can create courses and programs.
And at the bottom is the display pane, where
you will see a display of all existing courses
and programs.
Adding data to VIZ is straightforward.
To add a course or program, enter its name
in the name field, select the group you'd
like to assign it to, enter a URL to its website,
if desired, and click "Add".
In our case, since the database is now completely
blank, we don't have any groups to assign
the course or program to.
So we'll have to make some first.
To do this, click on "Manage Categories" - for
groups of courses - or "Manage Colleges/Schools"
- for groups of programs.
We'll start with course categories right now.
When you open the category manager, a dialog
appears with a text entry field where you
can type the name of the category.
Let's make this one "Math".
Now we click "Add", and "Math" appears in
our list of categories.
And you'll see that it also now appears in
the drop down menu when we're adding courses.
Returning to the Category Manager, you see
two icons next to "Math".
The "save" icon allows you to update the name
of the category.
Let's say we think that "Math" is too informal,
so we change it to "Mathematics", and click
"Save".
Now our dropdown menu displays the updated
name.
Clicking the trash can displays a delete confirmation
dialog.
If we do want to delete, we select yes, and
the category disappears.
The process for creating and managing groups
of programs is identical to this.
Now that we've covered group creation and
management, let's create a couple of groups
for use in our database: Math, Writing, Science,
and Humanities.
And let's create some colleges as groups for
programs: Liberal Arts, Business, and Engineering.
We now have all of these groups to work with
in building our database.
We can now return to the process for creating
a course or program.
Let's enter the name of a new course, say
"Bio 101", and assign it to the "Science"
category.
It now appears in the Course List below.
We can add a few more courses like this: Math
101, Math 102, Chem 101, English 100, History
200, History 201, Stats 101, and we could
go on.
We can use the same approach to add programs:
Mechanical Engineering (that's an Engineering
major), Accounting (that's a Business major),
History (that's a Liberal Arts major), Geology
(that's a Liberal Arts major), Nuclear Engineering
(that's an Engineering major), Math (that's
a Liberal Arts major), and Marking (that's
a Business major).
Now we have some material to work with.
Take a look at the icons next to each course
and program.
The pencil opens up an editor window, the
copy icon lets you duplicate an entire entry,
and the trash can icon deletes the entry.
We'll focus now on the editor feature by clicking
the pencil.
We'll start with English 100.
In the editor pane, you can adjust the name,
category, and website associated with the
item.
Be sure to click "Update" after changing or
your changes won't be saved.
Imagine that "English 100" is a typo and that
we actually meant "English 101".
We just correct it and click "Update", and
our changes appear immediately.
Further down in the editor you see a section
titled "Programs that accept English 101".
This is where you create VIZ's core functionality
by associating courses with programs that
accept those courses.
In this section, you see a list of all the
programs that you've added so far.
Right now, all of them are white and have
a "broken link" icon to the right, meaning
that none of them currently have approval
links to English 101.
When you click on one of the programs (let's
do Accounting), an approval link to English
101 is created.
Now the program is highlighted and a "link"
icon appears.
To break the link, just click again.
Once you've established a link in one editor,
a reverse link is automatically created.
If we close the editor for English 101 and
open the one for Accounting, we see that English
101 is now highlighted.
Breaking the link here also breaks it in English
101, as you can see.
Let's imagine that every major requires English
101.
In this example, where we only have seven
programs, it's pretty trivial to just click
on each one.
But when you have hundreds it's a different
story.
To add links to all visible programs, you
can click the "Link All" button.
It will ask you to confirm that this is really
what you want.
Likewise, you can delink all with the appropriate
button.
Sometimes you need to link all programs in
a particular group, in which case you can
use the "Filter" feature.
You select the group you want from the Filter
dropdown menu (let's use "Liberal Arts"),
and only programs belonging to that group
are displayed.
Now "Link All" will only add links to those
programs.
As you can see here, the program editor is
the mirror image of the course editor, and
contains all the same features.
I'll now take a moment to add approval links
across the database.
Notice that I've only directly edited links
to courses, since program links are automatically
updated.
Keep in mind that I could have done it the
other way around, or used some mixture of
the two.
Now that we have a linked database of courses
and programs, it's time to turn to some of
the tools in the top menu bar.
The "New" button re-opens the initial dialog
you saw when you loaded VIZ Builder, where
you can upload, import, or start a new database.
"View Source" and "Validate" can be safely
ignored for most users.
"Download" triggers a download of the database
as a file called vizDB.txt, which you can
then upload to your VIZ site in order to publish
changes.
And "Preview" let's you see what VIZ would
look like with your current database settings.
During editing, "Preview" is the most important
of these features, since it allows you to
quickly check all changes before downloading
and publishing them.
Let's preview our current database.
Here we see all the courses and programs we've
created, along with the groups they're associated
with.
Searching shows that our approval links are
working as well.
Looks like we accidentally put Math under
Writing.
Here we see that English 101 is approved for
all programs, Bio 101 is only approved for
Geology, and so on.
If we make any changes, in VIZ Builder, they'll
show up when we preview again.
Let's change the name of "Geology" to "Earth
Science" and the name of the "Science" category
to "Natural Science".
Now when we preview, our changes appear: "Earth
Science" instead of "Geology", and "Natural
Science" instead of "Science".
And while we're at it, let's fix Math 101
so that it belongs to the "Math" category.
Now that we have a working database, let me
quickly return to the group management feature.
If we click on "Manage Colleges/Schools",
we see the same dialog we saw earlier.
But now if I want to delete one of the categories
(say "Business"), I have a problem.
Business has programs associated with it,
so I can't just delete it right away.
I need to either delete those programs or
re-associate them to another group first.
Thankfully, VIZ Builder lets you do that on
the spot using the delete feature - to delete
- or the editor feature - to reassociate.
Let's reassociate the Business majors to Liberal
Arts, for example.
As we do, they disappear from the list in
the delete dialog box.
Once we have removed all associations to programs,
VIZ Builder gives us the option to delete
the entire group, which disappears from the
dropdown menus as well as from the preview,
where we now only have Liberal Arts and Engineering.
That covers the essential data management
features of VIZ Builder.
We'll now take a look at the VIZ properties
manager, which lets you make some global adjustments
to the end-user experience of VIZ.
To access the VIZ properties manager, click
the "Edit VIZ Properties" button here in the
center of the page.
You now see a new set of fields and parameters
that you can adjust for your particular instance
of VIZ.
All of this information is written into the
database and automatically published to VIZ
along with your course and program data.
To fully take advantage of the properties
management features, you'll need some basic
web development knowledge.
However, VIZ Builder comes pre-built with
reasonable default values for most of these
fields, so you don't actually need to customize
any properties in order to deploy a functional
version of VIZ.
For those that are considering customization,
I'll interpret each of these fields in a little
more detail.
The primary and secondary color fields control
the color scheme used by VIZ.
The Primary Color shows up in foreground elements
like the expand/collapse icons, and the Secondary
Color shows up in background elements like
the top menu bar.
These are the colors VIZ Builder currently
ships with by default.
The colors are defined by hexadecimal color
codes, which you can easily look up with a
web search and copy/paste in.
Let's say we want our Primary color to be
green instead.
We just enter the desired code, click "Update",
and then preview.
The "Default Webpage" field is required and
lets you specify a default page to use in
course and program links for which you choose
not to specify a page.
Typically you'll want this to be something
like your institution's homepage.
The Help Page URL lets you link to any help
documentation you have put together.
This URL will be opened whenever a user clicks
the "Help" button in the top menu of VIZ.
The Favicon URL lets you enter a pointer to
a favicon for your page.
If you don't know what this is or don't have
a particular favicon you want to use, ignore
this.
The "Feedback Email" field lets you enter
an email address to use in the Feedback pane
of VIZ.
The "Display groups" and "Search by courses"
checkboxes let you specify what the VIZ interface
looks like by default when users first load
it.
If "Display groups" is checked, users will
see an alphabetized list of groups in the
Results Pane with an alphabetized list of
associated items under each.
If it is not checked, the Results Pane will
just contain an alphabetized list of items
and no group headers.
If "Search by courses" is checked then the
first search loaded will be the search by
courses, otherwise it will be the search by
programs.
Keep in mind that these settings only control
the defaults.
Users can toggle either of them however they
wish once VIZ is loaded.
You'll want to choose defaults that you think
will best reflect the expectations of your
users.
Then we have two long-entry fields where you
can input html for your institutional or departmental
logo, as well as html for the welcome splash
page that users see as soon as VIZ loads.
This page here.
If you specify a logo, it will appear as the
leftmost item in the top menu bar.
Here.
If you don't, that part will be blank.
Likewise, if you specify a welcome page, it
will be the first page displayed to the user
when they load VIZ.
If you don't, VIZ 
will skip right to the search feature.
VIZ defaults to an empty logo and this welcome
page here.
Finally, VIZ gives you the option of specifying
background images to use by clicking "Manage
Background Images".
If left blank, VIZ defaults to this subtle
white patterned background.
If you supply only one background, VIZ will
display it continuously.
And if you supply more than one, VIZ will
rotate through them in a cycle of thirty-second
intervals, with a randomized choice of initial
background image to keep things interesting
for users.
To demonstrate, I'll grab two background images
and add them to VIZ.
Now when we preview, the new images appear
in the background.
If we wait a couple seconds, we'll also see
the transition from one to the other.
Like that.
Notice that you can re-order images with the
up/down arrows to the right, and delete them
with the trash can icon.
If you only have two images, like we do now,
ordering doesn't really matter.
But when you have a longer cycle, these re-ordering
tools give you more control over the presentation.
That covers the essentials of VIZ data and
properties management using VIZ Builder.
If you want to play around with a fully-developed
VIZ database, you can upload the one that
distributes with the VIZ package under the
"example" folder.
In our case I'll just import it from the server.
This is the database maintained by University
Exploration at The Ohio State University,
and it looks something like this.
If you have feedback, questions, bug reports,
or feature requests, don't hesitate to contact
me, Cory Shain, at shain.3@osu.edu.
