Systems Engineer Demo Notes

Last Revised:
July 13 1998,  Los Angeles, Matthew Reiser

Acknowledgements:
Thanks to Woodstock and others for providing expertise and guidance.

Revision History:

• v1.0: Ink.com, Music a la Mode, Production Center 3.x
• v1.1: T3 v2.2, DLOAD
• v1.2: First draft released to team
• v1.3: Initial StoryServer 4.x modifications

• This is a work-in-progress and I'm grateful for any feedback on improving it.
• This page evolved from personal notes, so much of it can be customized to suit your own preferences.

• Regular text:
Material to be spoken aloud
• Bold text:
Material to be emphasized
• Italicized text:
Samples of humor to lighten up the crowd
• (Parenthetical text):
Actions taken by SE, such as mouseclicks in Production Center.

Contents

General Notes

• Before onsite demo
• During onsite demo

StoryServer 3.x

• Main Points
• Ink.com
• Music a la Mode
• Production Center 3.x

• Main Points

Other Tools

• An Easy Template
• T3 v2.2
• DLOAD

Before onsite demo

Customer Contacts:

• Primary customer contact:
• Administrator (assistant, secretary, etc.):
• Audio/Visual person (to help you get/fix that busted LCD projector on the fly)

Site Background:

• Purpose of customer site:
• What type of site is it:
• Who will benefit from StoryServer:
• What does customer want / need to see to move the deal:
• Reminder: Visit current customer website so you can tailor demo material to their business

Logistics:

• Address:
• Directions to site:
• Directions to meeting place (e.g. conference room):
• Parking information (permit needed?):

Technical Background:

• Current system(s):
• Hardware:
• OS:
• Web server:
• Database:
• Other servers (e.g. NetGravity)

---

During onsite demo

Prepare laptop for demo:

• Connect projector to laptop
• Boot projector
• Boot laptop
• Verify PC/projector partnership
• Set Display: From 1024x768 to 800x600 to (if you have to) 640x480 (reboot not needed)
• Verify StoryServer system services (stop / restart as needed)
• This script will list active Vignette services
• Start apps:
• Production Center (Projects / Demos / MAM; verify database is up)
• Browser: test MAM and Ink.com (Use Ctl-Alt-S in Navigator for more real estate)
• Sales presentation
• Resize all apps as needed
• Focus and resize projector image
• Leave display at sales presentation

Personal reminder:

• Business cards readily available
• Cup of water (to avoid speaker's cough!!)

StoryServer 3.x

Main Points

1. Content Components
2. Content Reuse
3. Universal Content Entry
4. Virtual Link Management
5. Browser Capabilities
6. Adaptive Navigation
7. Production Center

ink.com

This site is basically a ripoff of CNET's news.com
Site goals include:
• To publish a high volume of news stories
• To provide compelling visitor experience
• To make website manageable for in-house webteam (customer)
Structure of ink.com is: a master template that calls other templates
A "template within a template" is called a component
Examples of components: NavBar, Top Stories, Headlines, etc.
(Choose News / Clinton)
ink.com templates govern site's look&feel, and these templates pull news content from the database and cache it on the DocRoot

Content Components

• Allows separation of content from format
• NavBar on the left
Similar to news.com but uses purple background instead of yellow to avoid a look&feel lawsuit
Component cached in DocRoot; only needs updating when sections change in database
Advantage: Site is component-driven; allowing for better performance and scalability

• Components are better than Server-Side-Includes because you get application logic
If component is called via "Display on Desktop" link, then call template directly and show window with same content but no "Display on Desktop"
CNET does same but adds "Update Now" and other buttons

So components are more powerful than Server-Side-Include's

Content Reuse

• Example: HardCopy
news.com has a similar component, but inserts advertisement to increase ad revenue
• Content under "Top Stories" Section is repurposed under "News" link in NavBar component and under Headlines component

Let's move from Top Stories to News (Click on News, Clinton)
Content is reused in 3 locations:
• Top
• News
• Latest Headlines
Advantage: You can use different layouts using different templates but reuse same content

• Again, content is maintained in one place: your database

 

 
 
 

Advantage: Simpler, easier maintenance

How often have you seen different links with the "same" content misspelled?
This way you either have no mistakes or you have the samemistake everywhere, which makes it easier to catch and fix it!
Now let's choose a News story (Choose News, "Clinton", Scroll to "Related Stories")
 
This table of stories, another component, was pulled from the database.
It looks up the story ID in table and use its keywords as index into related stories to display the 5 most recent stories containing matched keyword(s)

• Keywords contrast with plain indexing because if story's about "Tiger Woods" and you use "woods" as an index, you get "related stories" about lumber, etc.
Advantage: Using keywords produces Related Stories that are actually related.

Note that this demo is searching via keyword into the database, but a search engine such as Verity or Excalibur could also be used in the Related Stories component.

Virtual Link Management

• When you add or remove content/assets, "Related Stories" gets updated automatically and is either populated or non-existent, but it is not broken
Advantage: You don't have to go back into all other links to check relevancy or update links.  This is Virtual Link Management
So far we've seen site templates intended for end-user eyeballs.
Now let's look at Content Entry templates:

Universal Content Entry

What if you wanted to submit a new story to ink.com?

(http://localhost/publishing/Edit, login)

Wouldn't it be nice to allow just anyone to submit content, just for a day?
(Enter content)
Note that keywords in listbars are being pulled from database

Advantage: Content Entry templates allow anyone anywhere to create and submit content remotely.  This fosters independence for designers & authors.  This is good since graphics artists aren't always HTML experts.

So this page is just another template and it's just one of the ways content can be entered.

When I submit content to the database, it kicks off a workflow and the webteam can walk it through production.
For example, if an editor later wants to change keywords or layout, this page changes from a Content Entry template to a Content Edit template.
It supports multi-part form posts, so no more FTP'ing all over the world

Summary of Ink.com

• Components
which make your site faster and more modular
• Content Reuse
which reduces coding work, freeing up programmers to concentrate on the cooler stuff
• Virtual Link Management
which is a powerful capability, achieved by using components to pull content out of your database
• Universal Content Entry
which allows authors and editors to submit and approve content without have to know HTML

Put [NEEDS LOGIN] at top of (Demos / Music A La Mode / Bands / Content Entry Templates / MAM Table MAM_Bands_Edit)

Adaptive Navigation

Notice that instead of a Splash Screen, I get a Personal Calendar because believe it or not, I've been here before.
Personalization offers a more compelling visitor experience.
This is done using Adaptive Navigation.  Could also have been done with direct login.

Browser Caps

NavBar: Everything above "the tuba" is a cached component sitting in the DocumentRoot.
We can see here that StoryServer supports non-Lefthanded NavBars
This is a good example of how templates enforce no constraints on how resultant pages look.
Mouseovers are done with JavaScript, since StoryServer detects my browser type as Netscape Navigator.
If I were Bill Gates and using IE, this component would use VBScript, and would also reside in cache.
But I guess if I were Bill, I might not be here with you now.
So we have one template that creates two cached components in your DocRoot
Advantage: Programmers can use latest browser features, without risking browser breakage.

So let's look at the (Schedule) and see who's playing at this festival

(Choosing a band) brings up a list of Venues

(Choosing a venue) shows a list of other bands playing at that venue

(Choosing another band) begins to draw me closer into the site

I can (add to calendar) and the event will show up on my Personal Calendar.
Notice that I can also navigate into hyperlinks on the Personal Calendar itself

I can (join discussion) and add my thoughts about this band
(back to Band)

Cross-referencing Bands & Venues and using Discussion Groups in this way can keep visitors at your site longer which increases your hit-rates.
This is probably good, unless you're hosting on an Apple II

 
Vignette works with various ad management systems such as NetGravity and FlyCast

I suppose the ultimate goal here is for visitors to purchase (tickets)

Since the visitor's personal calendar already stored their preferences, it's easy for them to (submit) their order
Now you can hand this order off to whatever ECommerce package you've built or bought
Vignette has partnerships with ECommerce vendors such as Open Market and TestDrive

In fact, StoryServer offers the freedom to choose Best-of-Breed technologies for your various tools:

• Databases
• Web server
• Operating System
• E-Commerce package

Production Center 3.x

Important: This part of the demo script assumes the following is already done on your laptop:

Using Administrator:

Create Media and Editor groups

Create a user for yourself who is a member of both groups

Using Production Center:

• Add default workflow in (Demos / Music A La Mode / Bands / Content; Workflow)
• Create task: "Add Image for Band" to be done by Media
• Create task: "Copy Edit" to be done by Editors

Production Center:

• ...is a "Java-based collaborative real-time work environment"
• ...runs on Mac, Wintel and Solaris
• ...can be used by any member of your website team

Projects

...can contain
(mouse over menu icons)
• Projects or nested projects (e.g. Projects / Demos / Music A La Mode)
• Tasks
• Templates
• Content Records
• Static Files
PC is flexible enough to work the way your business does:
• Band managers sign bands to the festival
• Event managers coordinate venues and schedules
• Images are handled by PhotoShop guy who's so good we give him his own directory containing images, sound files, etc.
Let's take a look at details for one of these projects (Bands / Content / Details)

(General tab)
The first thing you'll notice is that:

• I own this project
• If I want, I can (Include Final Review) before launching content within this project to be launched live
• Content can also be (Automatically Launch)ed as soon as workflow completes


(Workflow tab)
Here is the default workflow for anything under the Content project

• Add image for band (Details)
• Copy Edit (Details)
• You can also (Add) Legal Review ("Legal" / Ok / Cancel)


So now let's add a band to this festival

(Content / New Record)
This calls up your favorite browser and navigates to Content Entry template
(Ask audience for a band; enter content)
When we (Save) this new content, SS pushes it out to database and kicks off its defined workflow

If we (jump back to PC) we see that this new asset pops up in real time in our (Content Project)
Its status is "Working" because it has entered the workflow

Speaking of workflow, let's check our (ToDo) list

Media Task

Media people are sitting around when Production Center blasts a new task into their ToDo window and they email about the new assignment.
 
Since I've added myself to both the Media and Editors groups, when I volunteer to (Highlight Task / Start / OK) this task, it automatically drops off the list of Media group.

If I need a reminder of what I need to do, I can check (Workflow) to see:

• What needs to be done
• Who's on the hook for doing it
If I need further (Details) I can get that as well
(Cancel)
Let's work on this (Item)

If I (Edit Record / OK), Production Center spawns my favorite browser and gives me a Content Entry template, only now it's been repurposed as a Content Edit template

 
Let's (choose an image / Preview)
Here we see that images on this drop-down listbox are from the database and have gone through the workflow first and got approved
Now, let's (Save) this new content to the database

When I (PC / highlight Task / Task / Finish / OK) the task, it drops off my ToDo list and PC moves it on to next step in the workflow:

Editorial Task

Now the Editors are innocently working away when their Production Center when up pops a new task
I put on my Editor's hat and take the task and assign it to myself.

When I (Highlight Task / Start / OK) the task, it drops off the Editors task list because it's now assigned to me (also an Editor!)
If I need to see where this asset has been so far, I can check (Workflow) and see:

• What needs to be done
• Who's been working on this and any (Notes) they may have added.
• Again, further (Details) are available

(Cancel)
If I (Item / Edit Record / OK) this record, PC spawns the Editor's fav. browser and gives me a Content Edit template

As an editor, we can adjust the look and feel:

• If the band name is too wide, we can either fix it ourselves or send it back to the Media group
• If JPEG not correct size, we can send back to Photo-Shop guy, etc.
When we (PC / Task / Finish / OK) this task, its defined workflow is now completed and its status is now "Ready to launch"

Automatic Launch Task

As you recall, we specified that all content under the Bands project go live whenever workflow completes.
So since this (Projects / Content / "Record") is now done with the workflow, it gets launched Live via the System Launch task.

Now if we look at the details of this ("Record" / Details / Workflow) we see:

• The list of remaining tasks is empty; as it should be if the content is Live
• And we have a complete Audit Trail for the asset, including its automatic system launch.

Summary

Workflow can adjust to fit whatever your business dictates
We've just seen a good example of workflow which included:
1. Universal Content Entry into database
2. Cross-platform, collaborative tools for individuals and groups
3. A full audit trail for that record, including creation and launch details

StoryServer 4.x

Main Points

1. Universal Content Entry
2. Content Components
3. Content Reuse
4. Virtual Link Management
5. Version Control
6. XML Services
7. Browser Capabilities
8. Adaptive Navigation
9. (List is Under Construction)

An Easy Template

v2.2 is available from our FTP site

Main Points:

• T3 lets you easily manage your tables and Content Entry templates.
• We're about to see how easy it is to create templates automatically.

1. Launch
2. Login
3. Create a new table

    Table name: Widgets (tailor this to customer's business)
    Fields:
        id integer primary key not null
        supplier varchar 255 not null
        description varchar 255 null
        Next/Home
4. View table: Widgets
5. Generate Content Entry

    Widgets
    Use All Fields of Tables
    Base Template Pathname: /Interfaces/Widgets
    Base Title of Table to Generate: Table Widgets
    Target Project: >Demos>Custom
    Debug Only: Unchecked.
    Next (creates tables; wait 5 seconds)
6. Show resultant templates:
• Index: http://localhost/Interfaces/Widgets/Index
• Edit: http://localhost/Interfaces/Widgets/Edit/
7. Show Template Editor by tweaking line 21 of Index template so that it's better designed:
Replace: [FIELD id] "Edit #[FIELD id]: [FIELD description]"
With: [FIELD id] "[FIELD supplier]: [FIELD description]"

DLOAD