Project Tools in Web Development

Project Tools in Web Development A Case Study Ken Loomis, Ethan Poole, Tony Thomas Student Unions and Activities, University of Minnesota

Website Redesign Goals

Website Redesign Goals• Audit and reorganize content

Website Redesign Goals• Audit and reorganize content• Improve code management

Website Redesign Goals• Audit and reorganize content• Improve code management• Create new and consistent styles

Content InventoryContent Inventory Version Control CSS Style Guide

Content Inventory• A complete table of all the documents on a website Content Inventory Version Control CSS Style Guide

Content Inventory• A complete table of all the documents on a website• Useful for identifying redundant, outdated, or trivial content Content Inventory Version Control CSS Style Guide

Build an Inventory

Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemapgenerators/wiki/SitemapGenerators • http://www.xml-sitemaps.com/

Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemapgenerators/wiki/SitemapGenerators • http://www.xml-sitemaps.com/• Index all documents

Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemapgenerators/wiki/SitemapGenerators • http://www.xml-sitemaps.com/• Index all documents• Inspect duplicates from symlinks or redirects

Make a Spreadsheet Google Docs work well!

Add columns

Choose columns that ﬁt your project. • ID • Redundant? • Title • Outdated? • Path • Trivial? • Template • Notes • Owner • Status • Summary • etc.

Get Everyone Involved

Get Everyone Involved• Consider: • Stakeholders have the organization’s best interests in mind. • Content owners know the subject best. • Developers consider web standards, usability, and search optimization.

Get Everyone Involved• Consider: • Stakeholders have the organization’s best interests in mind. • Content owners know the subject best. • Developers consider web standards, usability, and search optimization.• The inventory serves as a tool to aid discussion during content review.

Ask Questions About Your Content.• Does anyone read this stuff?• What is its purpose?• Is it written for our audience?• Is it in the right place?• Can I combine it with something else?

Delegate and Review

Delegate and Review• Break up the work

Delegate and Review• Break up the work• Identify key sections

Delegate and Review• Break up the work• Identify key sections• Seek assistance from people who are unfamiliar with the content under review.

Delegate and Review• Break up the work• Identify key sections• Seek assistance from people who are unfamiliar with the content under review.• Meet several times to compare notes and develop your content strategy.

“Like the Sun, the West Bank Union rose onthe East Bank before settling in on the WestBank. Coffman Memorial Union conductedprogramming on the West Bank in the1960s. Coffman Program Director CarlNelson had aspirations of creating a WestBank Union, so in 1968 he uprooted himselffrom the East Bank to become the ﬁrstdirector of the newly established West BankUnion.”“...The sun sets in the west, but the WestBank Skyway is set to continue shining onthe West Bank.”

Helpful features:* File > See Revision History* Tools > Notiﬁcation Rules

Manage Scope Creep

Manage Scope Creep• Expect requests for changes during planning and development.

Manage Scope Creep• Expect requests for changes during planning and development.• Use your inventory as a reference for keeping your project on schedule.

Manage Scope Creep• Expect requests for changes during planning and development.• Use your inventory as a reference for keeping your project on schedule.• Consider the inventory as a project speciﬁcation.

Don’t Forget...• <meta> tags• .pdf, .doc, .xls meta data• Old images, documents, videos

Our Experience

Our Experience• With large amounts of content, details are easily overlooked.

Our Experience• With large amounts of content, details are easily overlooked.• Designs or wireframes may be useful to preview the results.

Our Experience• With large amounts of content, details are easily overlooked.• Designs or wireframes may be useful to preview the results.• Build consensus

Our Experience• With large amounts of content, details are easily overlooked.• Designs or wireframes may be useful to preview the results.• Build consensus• Document your organization’s decisions!

Now, howabout the code?Content Inventory Version Control CSS Style Guide

cvs status hejsan.py

cvs status hejsan.py==============================================File: hejsan.py Status: Locally Modified Working revision: 1.4 Mon Jun 11 02:12:28 2001 Repository revision: 1.4 /home/cvsroot/hejsan.py,v Sticky Tag: (none) Sticky Date: (none) Sticky Options: (none)

cvs -nq update

We were using CVS, albeit minimally. Central Repository Development Live Website Website

CVS has problems.

CVS has problems.• Overwritten and broken code

CVS has problems.• Overwritten and broken code• Mammoth commits

CVS has problems.• Overwritten and broken code• Mammoth commits• Cryptic commands

Distributed ModelLive Website Tony Central Experimental Ethan Repository WebsiteDevelopment Ken Website

The distributed model increases ﬂexibility.

The distributed model increases ﬂexibility.• Granular commits

The distributed model increases ﬂexibility.• Granular commits• Developer ﬂexibility

Why Mercurial?

Why Mercurial?• Easy-to-use commands

Why Mercurial?• Easy-to-use commands• Cross platform

Why Mercurial?• Easy-to-use commands• Cross platform• Easy to install and to manage

Why Mercurial?• Easy-to-use commands• Cross platform• Easy to install and to manage• Clone to branch

Traditional branching is complex.

Traditional branching is complex. Revision 1

Traditional branching is complex. Revision 1 Revision 2a Revision 2b

Traditional branching is complex. Revision 1 Revision 2a Revision 3a Revision 2b

Traditional branching is complex. Revision 1 Revision 2a Revision 3a Revision 2b Revision 3b

Traditional branching is complex. Revision 1 Revision 2a Revision 3a Revision 4 Revision 2b Revision 3b

Clone-to-branch is straightforward.

Clone-to-branch is straightforward.Revision 1

Clone-to-branch is straightforward.Revision 1Revision 1

Clone-to-branch is straightforward.Revision 1Revision 1 Revision 2 Revision 3

Clone-to-branch is straightforward.Revision 1 Revision 2Revision 1 Revision 2 Revision 3

Clone-to-branch is straightforward.Revision 1 Revision 2 Revision 4Revision 1 Revision 2 Revision 3

Why Mercurial?• Easy-to-use commands• Cross platform• Easy to install and to manage• Clone to branch

Why Mercurial?• Easy-to-use commands• Cross platform• Easy to install and to manage• Clone to branch• Extensions

Cool people use Mercurial.• Python• Mozilla• OpenOfﬁce.org• Vim• CodeIgniter

Cool people use Mercurial.• Python• Mozilla• OpenOfﬁce.org• Vim• CodeIgniter• Student Unions & Activities

What if I already use aversion-control system?

DON’T PANICSwitching is easy.

CSS Style GuideContent Inventory Version Control CSS Style Guide

CSS Style Guide• Reference for developersContent Inventory Version Control CSS Style Guide

CSS Style Guide• Reference for developers• Web page to demonstrate classes & id’sContent Inventory Version Control CSS Style Guide

CSS Style Guide• Reference for developers• Web page to demonstrate classes & id’s• Not necessarily a frameworkContent Inventory Version Control CSS Style Guide

CSS Style Guide• Reference for developers• Web page to demonstrate classes & id’s• Not necessarily a framework• Not a coding specContent Inventory Version Control CSS Style Guide

“Even Hipsters need a refresher course fromtime to time, and you wouldnt want to bethrowing out dated slang like ‘grody’ or ‘wicked’when mixing with other Hipsters in the know.”

Style Guide Changes

Style Guide Changes• CamelCase to hyphenated lowercase

Style Guide Changes• CamelCase to hyphenated lowercase• Eliminate legacy styles

Style Guide Changes• CamelCase to hyphenated lowercase• Eliminate legacy styles• Get rid of styles that described presentation

Style Guide Changes• CamelCase to hyphenated lowercase• Eliminate legacy styles• Get rid of styles that described presentation• Keep notiﬁcation styles (error, success, etc.)

Why not use a CSS framework?

Why not use a CSS framework?ez-css (ez-css.org)

Why not use a CSS framework?ez-css (ez-css.org)I was the only one working on the project

Why not use a CSS framework?ez-css (ez-css.org)I was the only one working on the projectFlexible (literally & ﬁguratively)

Why not use a CSS framework?ez-css (ez-css.org)I was the only one working on the projectFlexible (literally & ﬁguratively)Light footprint

Why not use a CSS framework?ez-css (ez-css.org)I was the only one working on the projectFlexible (literally & ﬁguratively)Light footprintLayout & design decisions were still in ﬂux

“I ﬁnd the ez-css classes to be remarkablyun-semantic...”

ez-css class names are esoteric.

ez-css class names are esoteric.<div class="ez-fl ez-negmrez-50"></div>

Most CSS frameworksuse un-semantic names.

Most CSS frameworksuse un-semantic names.•ez-50 (ez-css)•container_12 (960GS)•grid_1 (960GS)•span-4 (Blueprint)

They all put presentation into the markup.

We wrote our own styles.

We wrote our own styles..column { float: left; margin-right: 5%; width: 45%;}

We wrote our own styles..column.narrow { margin-right: 5%; width: 30%;}

We wrote our own styles..column.last { margin-right: 0;}

We wrote our own styles.#main-content

We wrote our own styles.#main-content.extended

The Guide#main-content #main-content.extended#contextual

We reﬁned our markup.

We reﬁned our markup. <table class="data"> <thead> <tr> <th colspan="2">Heading</th> </tr> </thead> <tbody> <tr> <td><strong>Title</strong></td> <td>Definition</td> </tr> <tr> <td><strong>Title</strong></td> <td>Definition</td> </tr> <tr> <td><strong>Title</strong></td> <td>Definition</td> </tr> <tr> <td><strong>Title</strong></td> <td>Definition</td> </tr> </tbody> </table>

Same info. Better markup. <dl class="data"> <dt class="heading">Heading</dt> <dd> <dl> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd>Definition</dd> </dl> </dd> </dl>

Beneﬁts

BeneﬁtsEasy

BeneﬁtsEasyTraining

BeneﬁtsEasyTrainingGuiding document

BeneﬁtsEasyTrainingGuiding documentConsensus

BeneﬁtsEasy DiscussionsTraining • semanticsGuiding document • accessibilityConsensus • naming conventions • common solutions

Website Redesign Project

Website Redesign Project• Major restructuring of content Content Inventory Version Control CSS Style Guide

Website Redesign Project• Major restructuring of content• Easy deployment of new code libraries Content Inventory Version Control CSS Style Guide

Website Redesign Project• Major restructuring of content• Easy deployment of new code libraries• Painless page builds Content Inventory Version Control CSS Style Guide

Project Tools in Web Development What are your questions? sua.umn.edu/minnewebcon Ken Loomis - @kmloomis Ethan Poole - @ethanp Tony Thomas - @truetone

Project Tools in Web Development

by kmloomis

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 11

Statistics