Nonna sent me home with

• tortiini soup, taco meat, pork and potatoes, a jar of salsa, a few cookies, and a slice of cake for breakfast.
• a bagel, cookies, taco meat, pork, and potatoes; all in snakc-sized baggies ’cause I have too many of her containers
• chicken, sausage, bread, muffins, and pastry. Yet I still stopped to pick up icecream.
• bagels, bread, meatballs
• cookies, a cheeseburger, bun, sauce, cake, checken cutlets, sliced bbq chicken, and pizza
• chicken, sausage, green beans, a bag of pizza flavored goldfish, and more chicken.
• peppers, broccoli rabe and sausage, chicken, a hamburger, bun, two loaves of bread, chicken scallopini, and cookies
• more turkey, more stuffing, and a large piece of fig crustatta she made me try before she’d let me take it with me
• turkey, stuffing, pasta and broccoli, and two loaves of bread
• something I think she said is veal, and pasta with meatballs and sauce.
• bruschetta, roasted peppers, risotto, and grilled chicken
• a hamburger, and some meatballs in sauce she let me have only after I promised not to freeze them.
• bruschetta, bread, pasta with zucchini, and sliced chicken with roasted peppers.
• a piece of chicken, some ribs, and cookies
• chocolates from Italy, danish, a hamburger, a bun, lentil soup, a piece of chicken, and a porkchop.
• chicken cutlets, zuccini, potato salad, a loaf of bread, and 62 movies.
• chicken cutlets, carrots, sausage, and two toothbrushes.
• Indian food from the neighbor, chicken cutlets, peas, and a loaf of bread.
• a porkchop, a burger, bread, sauce, and meatballs
• burger, cool whip, ricotta cake, pasta/broccoli, 2 shirts, some DVDs, and a pair of 4T socks
• veal, chicken, meatballs, sauce, pasta, bread, almond cake, and 2 quilts
• grilled chicken, pork roast w/ mushrooms, bread, & something I have no idea what it is, but she said it needs salt.
• peas and carrots, pork rolled with pancetta, and a loaf of bread.
• sauce, sausages, veal rolatini, pasta & zuccini, a loaf of bread, and a chicken cutlet.

It starts simple

Scenario: the office of security hosts shuttle runs to the local airport and train station during the holidays. Where should we post the information?

To answer the question we need to come up with two lists:

• the short list: a list with ideally one item: the primary location
• the long list: a list with many items to cover where users will look for the information.

Primary location: the permalink

The short list contains the primary location. The primary location can serve as the permanent location (or permalink) for the information, and can also serve as the place we want folks to look again when they seek an updated version of the information. It should answer the question, “Where do we want them to look for it next time?” This also serves as the immediate place to post the content: post it here first, then develop the related links and posts to support it.

The secondary locations gets folks to the primary location

The long list contains secondary locations to support the primary location. This also serves to put the information where people will find it effectively. Each location can either contain a full copy of the information – in this case the shuttle schedule – or it can hold a teaser to point people to the primary location. Sometimes you just want to give them what they seek without extra effort (e.g. extra clicks.) In other cases you want them to know where the information lives.

Different locations warrant different types of links

For the shuttle schedule I might have different ways of posting the teaser: a simple link to the schedule, or I might turn the schedule into a feed so I can post the next scheduled time plus a link to the full schedule, or we could have the full schedule fed into another location entirely. There are many possibilities, so I also look at many factors to justify placement and how far we want to go—does it warrant the work involved.

A single source of content makes it possible

Whether you just post a link or post the full schedule itself, the information should have a single source. You do not want to copy and paste the information in multiple locations, and then have to update each of those locations manually when the information needs to be updated.

Investigate why the content is needed

In this particular example, the shuttle schedule was provided one week before Thanksgiving. It arrived in a simple request, “Please post this on the Security website.” I asked why (sometimes my greatest asset, often my downfall) and got an answer like, “Because, students are asking for it.” I asked what it related to – what else would be done to get the word out. “That’s it.” Well, there we have a problem.

Work through the challenge

It would be less than a week to get the word out to students, who were already making plans to get to the airport and the train station for the long weekend. It wasn’t enough time to get it into the search reliably (another problem we have to solve.) And the current student population likely wouldn’t look for it (there wasn’t a shuttle schedule for the week-long October recess, so why would there be one for the four-day weekend?) Instead of posting it online, I recommended an email to the students (as they’ve done in the past.) In the future we’ll have ways to push this kind of information to the students from the web, but to be honest the majority of students just aren’t going to see it in time in this case. Under our current practice this information gets emailed and that’s what the students will expect.

Find your starting point, get it posted, then work through how it can be improved.

If I wasn’t leaving for vacation (within the hour) I would have posted the schedule, along with some links to it on other sites, and highly recommended a broadcast email—pointing folks to the schedule online. Instead, the office emailed the schedule directly to the students, as they’ve done in the past.

When I return I’d like to return to this challenge. What we need to do is put together the proper solution, and do our best to provide a starting point in time to post and publicize the winter break schedule. There is a larger need for this content, and the solution we come up with can be built upon each time a there is a shuttle schedule. Given the academic calendar we should have seven opportunities each year to post not only the schedule, but also staged improvements. The schedule needs to be posted for arrival at the beginning of the fall semester, October recess, Thanksgiving recess, winter break, the arrival at the beginning of spring semester, spring recess, and the end of the academic year. That looks like something strong enough for some useful features. Now that we’ve looked a little further it seems strong enough to plan how to feed the schedule dynamically to many locations, and possibly set up ways the people who use the information can share it with each other.

As I was thinking about this after I left the office I saw this as something important to get down so I can remind myself and share how I think through web content. It often causes scope creep, which is something I’ve been working on, and happy to say I’ve improved on greatly (especially in the last year.) As I properly plan, and share the load, things happen much more smoothly. In the past I’ve concentrated so much on the infrastructure to support such ideas that the ideas themselves haven’t taken off.

For the shuttle schedule we’ll start slow – we’ll post the winter break schedule and the office can send an email pointing to it. But I can’t stop my brain from thinking an RSS feed of the schedule to share across sites, like Vassar Info, will be a good thing to add.

• Current IA: 11/2009
• Current design: 4/2004

Establish a web governance structure

• The 21st century: we’ll get there — eventually
• Org charts: was this really necessary?

• Cabinet Level
  • Web Management Committee
  • Web Content Committee
    • Web Design Team

• Academic politics: their visciousness is only matched by the insignificance of the stakes
• Engagement: Not as interesting as watching “Cops”

Create a competent and sufficient team

• Web nerds:
  • having a team of web nerds alone wasn’t going to cut it
• Web team: you wish

Define the project

• Your problem: No, it’s not a blown RT-237 Vacuum tube. Trust me on this.
  • The problem with the site that it was old
• Scope Creep: We started out to redesign our homepage. and, well…
• Bright ideas: too many of them gives me a headache
  • Got stuck in a loop of brainstorming. Needed to say “enough, let’s move on and get going with the project”
• The journey: Of a thousand miles often ends in a mud hole
  • No deadlines, definition will cause your project to get bogged down
• Our budget: Arnold terminated it
  • Caused us to focus on what we can do in the time we have

Do the research

Can’t fix a problem if you don’t know what’s broken

This phase was less useful that he thought it would be

• Google Analytics: telling you wahat you already knew since 200x
• Data Visualization: because sometimes pictures are all people can understand
  • crazyegg; the single most important image
• User surveys: it helps when they understand the questions
  • What do you like most about our website? That you have it. OK, fair point.
• Learning from other people’s mistakes: actually, we already knew…
• Research: people will believe anything you say if they think you’ve done the research
  • if you do the research it’ll help pave the way to get through the politics
• Our budget: now he’s hacking away at it with a sword!
  • The budget was the biggest constraint. Additional cuts made it impossible to do all the research they wanted to do.
• Focus groups: sometimes the body language tells you all you need to know
• Stakeholders: there’s a lot of them and they’re mostly angry. But, hey, at least they’re wearing our campus colors.
  • The pages they were creating had to be a central clearing house of information and serve as a gateway to get people of all perspectives to the information they seek
• Our budget: Aw geez! Now he’s got a big gun!

Content

• Content: UR doin it wrong (construction sign)
• Information Architecture: yeah, anybody can do this
• Wireframe: if I have to look at another one of these I’m going on a killing spree
• Your content: some assembly required
• Our content: it’s being driven by the PR department
  • students and prospective students hate marketing; they can sniff that out and they hate it
• Our budget: Now he’s invited all of his friends!
  • Really had to cut down a lot of the content we hoped to have
• Your WCMS: it won’t do your job for you
  • someone has to write that content — someone needs to create it
• Web design: just because you wear a suit doesn’t mean you’re qualified to critique a web design
  • The research helped them get through the approval quickly
• Frameworks: I think we should have done this first learn from this mistake
• Our budget: tired of hearing about it yet?
  • It’s made us focus on what is do-able

Takeaways

• Get buy-in and high-level ownership
• Make sure you have the right people on your team
• Clearly define the project and it’s scope
• Do the research
• Get input, feedback, and buy-in
• Have a content strategy and a plan for your content

Background

All of us run our shops differently. All use students differently. Sampling obviously small, but can give you ideas

• Started as a discussion on Twitter about the lack of available information about how students are being used in web work
• Two similar schools could have very different work environments
• Survey data was collected from 130+ students and employers at the start of 2009 to see where there’s common ground and where people are innovating

One thing that is constant

• Students are our most valuable resource

We are student factories — not using students is to not use a valuable resource.

They are

• Cheap
• Abundant
• Resourceful
• Innovative
• and most importantly…

They can see things in a way that we can’t

Even in the short time he’s been working in higher ed, he can’t look at something he designed — students can look at it with student eyes and give feedback from a perspective we just don’t have.

So, what did you want to know?

• Recruiting Sources
• Responsibilities
• Info About students
• How much credit can we take? How much can we lean on them?

Recruiting

[Naval Service of Canada has great images.]

• Student Career services
• Faculty and staff recommendations (47%)
• Private listings (20%) – monster.com, etc.
• Walk-ins (16%)
• Everything else (word of mouth, high school teachers, current students)
  • high school teaches are an awesome resource — gets in touch with all the high school teachers in the area to find out who is going to Pittsburg and who is familiar in the web

What students are doing in offices

• Web design tasks (HTML, CSS, Javascript)
• Content migrations (cut/paste monkeys)
• Data entry (those poor kids)
• Tech support (those poor staff members)
• Graphic design (…I got nothing)

What students are not doing

• Maintaining social networks (19%)
• Tutorial Development (17%)
• Database work/maintenance (16%)
• Blogging (11%)
• Keyboard cleaning jockey (11%)

Using students for tech support, but not documentation, which will save work later. Should be explored.

Student info

• Only 3% are over 24 years old (average 21.62)
• 25% of offices have primarily female students
• Common Majors: computer science, comm/graphic design, then English Business, and Marketing
• 69% say they slack off 1/4 of the time (don’t worry, none over half)

Some work stats

• Only 8.6% think they are used too much or not enough
• About 1/3 plan to stay 1-2 years (20% more than that)
• 20% have no intention of working in a web field after college
• About 1/3 were hired via recommendations, and 28% each from Career Services and walkings
• 17% have changed career plans (for better or worse) after working in a web office
• 97% feel they are learning skills that will help them after they graduate, regardless of their field

Reliance on students

How much can we put on their shoulders

It’s important to note the opportunity students present as we try to fill gaps left by FT positions web can’t fill. But naturally, managing students takes time on our part, so we must balance managing students with managing our own work. It’s not a zero cost operation (not counting money)

• 86% of offices use students. The majority use 4 or less.
• 45% of offices offer $1 over minimum wage
  …

$12,658 per year: the average amount budgeted for student workers in a web office.
(budgets ranging from nothing to $95,000)

Training

• Lynda.com (the ultimate babysitter // go learn photoshop, don’t use my picture)
• Opera Web Standards Curriculum http://opera.com/company/education/curriculum
• Cheat Sheets by Added Bytes (the cheat sheets are a great babysitter) http://addedbytes.com/cheat-sheets/
• Use real tasks as examples, let them do it, and walk them through the process (learn by doing)

Tracking

• Basecamp (if you can afford it)
• Collabtive (Open source PHP)
• Eventum (Open source PHP, powerful, UGLY)
• Wikis (go out and find what fits you best)

Some closing comments

[Comments will be available in slides — comments from survey data; a few paragraphs]

Presentation at:
http://doteduguru.com/heweb09mmp9

Early Beginnings

The mousetrap of interactive maps (create pic of mousetrap game)

The Issues at UWW

• Incorrect information
• Variety of different maps
  • Wasting paper
  • Rarely updated
• Outdated maps
• Never ending construction

The Approach

1. Collecting and organizing the data
2. Getting started
3. Putting it all together
4. Keeping it going

Collecting the gum drop buttons

[pic of Candy Land]

What is it Going to do?

• What data types will your map have?
• buildings, parking, dining, wireless access, accessibility…
• Find your Keymaster!
  • Who owns your data?
  • What format is it in?
  • Conversion time
  • How often is it updated?
• Ensure you get the freshest data
  • Partnerships
  • Hope and plead
  • Chocolate Cake, Cigarettes?

Actually has someone on campus that if he wants a new map he has to bring a chocolate cake.

It’s all in how you sort it out

Data model needs to suit your goals

• Define your base unit
  • Building
  • Office
  • Generic space
• Extend the base unit
  • add services
  • sub locations / depending on your base unit

Propeller Hat Moment: Getting the goods

• Geocoding and reverse geocoding
  • Google: via Mobile API
• …

Baby Steps

[pic of Sorry]

Think Big, Start Small

Tools of the trade

• Use what you know
• Pick a service that works how you work
  • The 800 lb Gorilla: Google Maps API
  • The contenders: Yahoo! Maps, MapQuest
  • Pay to Play: Bing Maps
  • BYOM: Bring your own map

Iterative to succeed

• Plan out a cycle
  • Timeline you can keep to
  • Features per cycle manageable
• Why it works
  • Increase quality
  • Avoids burnouts
  • Keep them coming back

KISS your interface not your Palm

• Keeping it clean
• Let your data present itself
• Search is your friend make him presentable
  • Tagging
  • Full text searches

Keeping it going

[pic of shoots and ladders]

Custom Maps

• Leverage your data
• Mashup your services
  • // I want to know where I can study and have wifi at the same time
• Examples
  • Overlays: parking maps, special events, construction zones
  • Data driven: accessibility, POI, mashup career data
  • Sky is the limit

One Map to rule them all

• Single point of data
• Eliminate outdated maps
• Be green, save a tree
• Easily control when maps are available

Contact

Joel Herron
@h3r2on

A project is… “a temporary endeavor undertaken to create a unique product, service, or result” PMBOK

A Web Project is…

• Building a few web pages for a department
• Developing a simple web application that collectis student informaiton
• Using Twitter…
  …

A Project is… “ongoing, with many false starts and chronic scope creep. Governed by committee(s), success is not often tangible.”
— Higher Ed

The Chaos

• Developer coems in sometime after noon
• Designer that doesn’t answer email
• Department wants to see the term “pedagogy” on something aimed at parents
• Committees
• Never ending change requests

Learn a little from software engineering

• Pick a dev strategy: understand clearly what you are doing
• Version control
  • // Number one recomedation for anything working with code
• Issue tracking

Project definition

• First committee meeting needs “a memorandum of agreement”
• Define the goals, objectives, and/or outcomes
  • // sometimes folks get them mixed up, that’s ok
  • // set something you can measure yourself against
• Sign it
  • // anyone do this? And it works? (nope) Can’t stand alone

Follow a process, deliver a product.

• // you need to deliver something; you need end it and move on

Triple Constraint

• Scope
• Time
• Cost

The three things you have to worry about with a project.

• What am I building?
• How long will it take?
• How much will it cost to develop?

Dealing with the “what”

• … missed these

What really happens

• I would like a web site that looks like “(insert newsworthy site of the week)”
• // etc

Manage Resources

• What are the skills and people available to this project
• How much time do they have?
  • // getting people to be honest about that is not easy
• Is there a lot of communication between you and your resources even when not working together in the same place?
  • // be up front about what you expect then you won’t have miscommunication (as much)

Identify risks

• What could cause this project to be delayed or fail?
  • // make a list for this project so we’re all aware of what could go wrong
• What will you do about them?
  • // some gets sick; what if the content isn’t provided – is there a backup?
• How much will it cost (time/money)?
  • // estimate hourly rate per person

Break Project down

• Web project timeline [graphic]
  • Defining requirements
    • Development
      • User testing
        • Public beta
          • Bug fixes

Two week chunks

[graphic]

Critical path

[graphic]

Weekly planning report

[image of report]

For the students

[image of report]

• Task group
• Name
• Work to be done
• Intention

Didn’t work as well as they thought.

Agile

definition. It’s quick, nimble… we’re higher ed, that doesn’t happen.

Agile is really just getting things out on the wall for people to see. If you break it apart and do baby steps. Post rank wall — wall of sticky notes.

Smaller scale works too — don’t have to take on the whole methodology of scrum and create full backlogs. Little chart on a wall with stickies is fine — the point is to have the visual of how much you’re working on.

// having daily check-in on projects isn’t helpful for seeing the large picture — sure, we’re reporting the status of projects, but we don’t have the picture in front of us of all that is going on

Agile process

[graphic – simplified agile process]

Get involved

• Use Basecamp or excel or a word document
• Break down the project for the sponsor (and you_
  • // be honest — don’t say a month if something can go wrong and it’ll likely take 3
• Provide time estimates for each phase
• // set milestones — they don’t have to be set in stone, you can move them — you can always adjust as you go along
• Follow-up with daily/weekly updates on progress
• Share information
• // really boils down to sharing information

PM software?

• Microsoft Project (larger teams)
• OmniPlan
• Bascamp
• check the wiki page — full list

so much out there you could drive yourself crazy. Start with word or excel — start somewhere.

Learn how to use version control software

[graphic]

When you have a big “oops” you can roll it back. You can roll it back really fast with version control.

Version Control Software?

• Github
• Subversion (svn)
• Team Foundation Server
• CVS
• Google Code (svn)

Track the project

Issue tracking

• Document milestones
• Track conversations, changes, rationale
• Generate reports (if you want)
• Helps you control your scope

Bugz

[image of report from Bugzilla]

Good to see these totals because you see progress. Celebrate your success.

Issue tracking software

• Bugzilla
• Trac
• Team Foundation Server
• Basecamp

Use a process that works for you.

About me

Jess Rodgers
Associate Director, VeloCity — University of Waterloo
Blog: http://whoyoucallingajesse.com
Twitter: @jrodgers

Question… does Bascamp replace stickies?
Nothing replaces that wall.
// print cards

Benefits of integrating Flash into Cascade Server

• End users can update Flash
• Time & expense savings
• End user won’t be able to mess up Flash code

30,000 Foot View

• Flash player written to read its data from an XML file
• Create Data Definition with necessary data elements
• Data Definition attached to the homepage
• Data Definition outputs data via XSL into Flash player’s XML file format

Step 1: Develop Flash

• Design
  • Identify elements end user will update
• Develop
  • Updatable elements read by Flash from XML
  • Create XML file your way… Cascade will adapt using XSL
  • Get it working outside Cascade

Step 2: Import into Cascade

• Load files into Cascade
• Use spearate directory for Flash files (.swf, .js, .xml, etc..)
  • Turn off access to end users
• Import images to be used to folder editable by end user

Step 3: Data Definition

• Include all updateable elements from Step 1
• Can have data elements for other functionality

Step 4: Embed Flash

• Use XSL to embed exactly like HTML file from Step 1
  • Hideen from Cascade using CDATA tags
• Flash does not display in Cascade
  • Develop way for end users to see output

Step 5: Enable Front End

• Attach Data Definition
• Attach XSL
  • …
• Edit homepage and fill out the data you want

FFlash XML File

Convert Flash XML file to page asset

• Output as XML using target
• Use simple XML template
• Indexes homepage Data Definition
• Will overwrite XML file created for Flash in Step 1
• Not directly editable by end user
• Will need to be published by end user

They tried using XML created by default in Cascade, but big workaround need by Flash developer—instead, create the XML you need for Flash and make it with Cascade.

Step 7: Publish

• Publish to Web server to test
• You’re done
• Bask in your easy success

Additional Ideas

• Expand to pull in data from across site
  • News, Student Bios, Calendar events, Sports scores, etc.
• Can use same technique for other applications
  • Silverlight, Java applets, JavaScript, .NET, PHP, etc.
• Control full flash sites with Cascade

From handout:

30,000 Foot View

(above)

Setup a template for XML output

• Copy your main target group, rename to “XML”
• Click “Edit” and change Output File Extension to ”.xml”
• Create a template that just has “ in it
• Attach the XML template to the XML target

Creating an XML document

• Create a configuration set with the XML template
• Copy a page asset and rename it to the desired XML file name
• Click “Edit”, go to “System” and change the configuration set to the XML configuration set. Use a simple/blank metadata set and remove any data definition
• Attach a block to the default region that indexes the page’s Content Type that contains the data you wish to use
• Create an XSLT format that interprets the data into an XML schema. Attach this format to the same default region.

Homepage data definition

(see handout for code)

XSLT to insert Flash onto Homepage

(see handout for code)

XML schema used

(see handout for code)

XSLT used to create XML schema from homepage data definition

(see handout for code)

Site Migration

Extreme example—you can have someone be the administrator in one site and contributor in another site.

This is a tutorial on how to migration into using Sites.

Pre-migration Preparation

…missed a bunch of steps…

• Analyze current Global Site structure
  • *

Pre-migration Preparation Continued…

Treat migration as a major rollout

• Not a trivial process
• Full QA of sites will be needed
• Very likely to be code changes necessary—pay particular attention to any formats relying on index blocks
• Work in development instance first
• Rollback strategy: backup your database before migrating

No undo—make sure you have a full database backup before migrating sites.

Site Migration Wizard

[screenshot] Found in the Utilities menu

Demo has two sites with shared template, blocks, and formats. Showing two sites – example.com and example.edu in the Global area.

Using the site migration wizard.

• Gave the site name example.com
• Site URL: http://www.example.com
• Default Metadata Set
• Target: picked the parent level target for the example.com site
  • Gave a notice of all the destinations—any destination you do not select as part of this process is basically lost. Best to choose all the destinations listed.

Next screen of wizard: Role, User, and Groups

• Moved the Example Site Manage Role to the right; didn’t move users or groups at this time.

Next: Confirm

• Test migration—always want to run the test migration first and it will give you warnings and errors.
  • Errors must be resolved before the migration wizard will run.
  • Warnings are items to be aware of that you might want to adjust, but the migration will still go through (there just may be some unexpected behavior)
    • If a sub-Target has no destination associated with it that Target will be removed (with Sites they’ve gotten rid of Targets—only Destinations will be listed with each.) file extension is now defined in the Configuration Set*.

Submit

• Make take a few minutes—depends on how large the site is.
• When done, the CSS didn’t look quite right—all the links inside the CSS files (using [system-asset] tags too) didn’t get rewritten.

// yay! I don’t think our CSS is going to break when migrated.

Next: migration of example.edu

// same steps as previous site

Context navigation isn’t rendering properly. Likely script format.

Fix: adjust path in XSL.

Back to Global

Looking through for assets that should be moved out of the global area. Recommends moving common stuff into its own site—easier on permissions and linking between sites.

Copying assets

Note you can’t copy assets between Sites. You should set up sites with their own copy of images and items that can’t be shared before migration—do this in the Global area first, then migrate the sites. The Global area doesn’t have the site URL associated with it, which makes linking between Global site assets and other Sites tricky. You could set up a common site with those assets, or you can have individual copies of those assets in each site that needs it.

Cascade is designed to go from Global to Sites, but not Sites to Sites.

// I think we should migrate on the test server first, then production. That way we know what the problems are and how long it will take for each site.

In the template:

<link href="/SAMPLE SITE/web/assets/css/hub.css" media="screen" rel="stylesheet" type="text/css"/>

hub.css

/* central includes
-----------------------------------------------*/
@import "http://collegerelations.vassar.edu/centralincludes/assets/css/reset.css";
@import "http://collegerelations.vassar.edu/centralincludes/css/icons/sparkcons.css";
@import "http://collegerelations.vassar.edu/centralincludes/css/icons/kare_icons.css";

/* local includes
-----------------------------------------------*/
@import "inner.css";
@import "shell.css";

Linking to images:

In inner.css

...snippet...
#header h2 {
	display: block;
	float: right;
	margin: 0;
	width: 180px; height: 43px;
	background: transparent url(../images/masthead-vassar.gif) top right no-repeat;
...snippet...
	}