Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Project Tools in Web   Development                   A Case Study        Ken Loomis, Ethan Poole, Tony Thomas Student Unio...
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...
Content Inventory• A complete table of all the documents on a  website• Useful for identifying redundant, outdated,  or tr...
Build an Inventory
Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemap-    generators/wiki/Site...
Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemap-    generators/wiki/Site...
Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemap-    generators/wiki/Site...
Make a Spreadsheet   Google Docs work well!
Add columns
Choose columns that  fit your project. • ID         • Redundant? • Title      • Outdated? • Path       • Trivial? • Templat...
Get Everyone Involved
Get Everyone Involved• Consider: • Stakeholders have the organization’s    best interests in mind. • Content owners know t...
Get Everyone Involved• Consider: • Stakeholders have the organization’s    best interests in mind.  • Content owners know ...
Ask Questions About   Your Content.• Does anyone read this stuff?• What is its purpose?• Is it written for our audience?• ...
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 co...
Delegate and Review• Break up the work• Identify key sections• Seek assistance from people who are  unfamiliar with the co...
“Like the Sun, the West Bank Union rose onthe East Bank before settling in on the WestBank. Coffman Memorial Union conduct...
Helpful features:* File > See Revision History* Tools > Notification 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  ...
Manage Scope Creep• Expect requests for changes during  planning and development.• Use your inventory as a reference for  ...
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 pr...
Our Experience• With large amounts of content,  details are easily overlooked.• Designs or wireframes may be  useful to pr...
Our Experience• With large amounts of content,  details are easily overlooked.• Designs or wireframes may be  useful to pr...
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 r...
cvs -nq update
We were using CVS, albeit minimally.                 Central                Repository                             Develop...
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                         ...
The distributed model increases flexibility.
The distributed model increases flexibility.• Granular commits
The distributed model increases flexibility.• Granular commits• Developer flexibility
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   Rev...
Traditional branching is       complex. Revision 1   Revision 2a   Revision 3a   Revision 4              Revision 2b   Rev...
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• OpenOffice.org• Vim• CodeIgniter
Cool people use       Mercurial.• Python• Mozilla• OpenOffice.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   C...
CSS Style Guide• Reference for developers• Web page to demonstrate   classes & id’s• Not necessarily a frameworkContent In...
CSS Style Guide• Reference for developers• Web page to demonstrate   classes & id’s• Not necessarily a framework• Not a co...
“Even Hipsters need a refresher course fromtime to time, and you wouldnt want to bethrowing out dated slang like ‘grody’ o...
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  present...
Style Guide Changes• CamelCase to hyphenated lowercase• Eliminate legacy styles• Get rid of styles that described  present...
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 & figurative...
Why not use a CSS    framework?ez-css (ez-css.org)I was the only one working on the projectFlexible (literally & figurative...
Why not use a CSS    framework?ez-css (ez-css.org)I was the only one working on the projectFlexible (literally & figurative...
“I find 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 refined our markup.
We refined our markup.    <table class="data">         <thead>            <tr>             <th colspan="2">Heading</th>    ...
Same info. Better              markup.    <dl class="data">        <dt class="heading">Heading</dt>        <dd>          <...
Benefits
BenefitsEasy
BenefitsEasyTraining
BenefitsEasyTrainingGuiding document
BenefitsEasyTrainingGuiding documentConsensus
BenefitsEasy               DiscussionsTraining            • semanticsGuiding document    • accessibilityConsensus          ...
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 Invento...
Website Redesign        Project• Major restructuring of content• Easy deployment of new code libraries• Painless page buil...
Project Tools in Web   Development  What are your questions?    sua.umn.edu/minnewebcon    Ken Loomis - @kmloomis     Etha...
Project Tools in Web Development
Project Tools in Web Development
Project Tools in Web Development
Project Tools in Web Development
Project Tools in Web Development
Project Tools in Web Development
Project Tools in Web Development
Project Tools in Web Development
Project Tools in Web Development
Project Tools in Web Development
Upcoming SlideShare
Loading in …5
×

Project Tools in Web Development

1,514 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Project Tools in Web Development

  1. 1. Project Tools in Web Development A Case Study Ken Loomis, Ethan Poole, Tony Thomas Student Unions and Activities, University of Minnesota
  2. 2. Website Redesign Goals
  3. 3. Website Redesign Goals• Audit and reorganize content
  4. 4. Website Redesign Goals• Audit and reorganize content• Improve code management
  5. 5. Website Redesign Goals• Audit and reorganize content• Improve code management• Create new and consistent styles
  6. 6. Content InventoryContent Inventory Version Control CSS Style Guide
  7. 7. Content Inventory• A complete table of all the documents on a website Content Inventory Version Control CSS Style Guide
  8. 8. 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
  9. 9. Build an Inventory
  10. 10. Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemap- generators/wiki/SitemapGenerators • http://www.xml-sitemaps.com/
  11. 11. Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemap- generators/wiki/SitemapGenerators • http://www.xml-sitemaps.com/• Index all documents
  12. 12. Build an Inventory• Use a site map generator to create a list. • http://code.google.com/p/sitemap- generators/wiki/SitemapGenerators • http://www.xml-sitemaps.com/• Index all documents• Inspect duplicates from symlinks or redirects
  13. 13. Make a Spreadsheet Google Docs work well!
  14. 14. Add columns
  15. 15. Choose columns that fit your project. • ID • Redundant? • Title • Outdated? • Path • Trivial? • Template • Notes • Owner • Status • Summary • etc.
  16. 16. Get Everyone Involved
  17. 17. 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.
  18. 18. 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.
  19. 19. 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?
  20. 20. Delegate and Review
  21. 21. Delegate and Review• Break up the work
  22. 22. Delegate and Review• Break up the work• Identify key sections
  23. 23. Delegate and Review• Break up the work• Identify key sections• Seek assistance from people who are unfamiliar with the content under review.
  24. 24. 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.
  25. 25. “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 firstdirector of the newly established West BankUnion.”“...The sun sets in the west, but the WestBank Skyway is set to continue shining onthe West Bank.”
  26. 26. Helpful features:* File > See Revision History* Tools > Notification Rules
  27. 27. Manage Scope Creep
  28. 28. Manage Scope Creep• Expect requests for changes during planning and development.
  29. 29. Manage Scope Creep• Expect requests for changes during planning and development.• Use your inventory as a reference for keeping your project on schedule.
  30. 30. 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 specification.
  31. 31. Don’t Forget...• <meta> tags• .pdf, .doc, .xls meta data• Old images, documents, videos
  32. 32. Our Experience
  33. 33. Our Experience• With large amounts of content, details are easily overlooked.
  34. 34. Our Experience• With large amounts of content, details are easily overlooked.• Designs or wireframes may be useful to preview the results.
  35. 35. Our Experience• With large amounts of content, details are easily overlooked.• Designs or wireframes may be useful to preview the results.• Build consensus
  36. 36. 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!
  37. 37. Now, howabout the code?Content Inventory Version Control CSS Style Guide
  38. 38. cvs status hejsan.py
  39. 39. 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)
  40. 40. cvs -nq update
  41. 41. We were using CVS, albeit minimally. Central Repository Development Live Website Website
  42. 42. CVS has problems.
  43. 43. CVS has problems.• Overwritten and broken code
  44. 44. CVS has problems.• Overwritten and broken code• Mammoth commits
  45. 45. CVS has problems.• Overwritten and broken code• Mammoth commits• Cryptic commands
  46. 46. Distributed ModelLive Website Tony Central Experimental Ethan Repository WebsiteDevelopment Ken Website
  47. 47. The distributed model increases flexibility.
  48. 48. The distributed model increases flexibility.• Granular commits
  49. 49. The distributed model increases flexibility.• Granular commits• Developer flexibility
  50. 50. Why Mercurial?
  51. 51. Why Mercurial?• Easy-to-use commands
  52. 52. Why Mercurial?• Easy-to-use commands• Cross platform
  53. 53. Why Mercurial?• Easy-to-use commands• Cross platform• Easy to install and to manage
  54. 54. Why Mercurial?• Easy-to-use commands• Cross platform• Easy to install and to manage• Clone to branch
  55. 55. Traditional branching is complex.
  56. 56. Traditional branching is complex. Revision 1
  57. 57. Traditional branching is complex. Revision 1 Revision 2a Revision 2b
  58. 58. Traditional branching is complex. Revision 1 Revision 2a Revision 3a Revision 2b
  59. 59. Traditional branching is complex. Revision 1 Revision 2a Revision 3a Revision 2b Revision 3b
  60. 60. Traditional branching is complex. Revision 1 Revision 2a Revision 3a Revision 4 Revision 2b Revision 3b
  61. 61. Traditional branching is complex. Revision 1 Revision 2a Revision 3a Revision 4 Revision 2b Revision 3b
  62. 62. Clone-to-branch is straightforward.
  63. 63. Clone-to-branch is straightforward.Revision 1
  64. 64. Clone-to-branch is straightforward.Revision 1Revision 1
  65. 65. Clone-to-branch is straightforward.Revision 1Revision 1 Revision 2 Revision 3
  66. 66. Clone-to-branch is straightforward.Revision 1 Revision 2Revision 1 Revision 2 Revision 3
  67. 67. Clone-to-branch is straightforward.Revision 1 Revision 2 Revision 4Revision 1 Revision 2 Revision 3
  68. 68. Why Mercurial?• Easy-to-use commands• Cross platform• Easy to install and to manage• Clone to branch
  69. 69. Why Mercurial?• Easy-to-use commands• Cross platform• Easy to install and to manage• Clone to branch• Extensions
  70. 70. Cool people use Mercurial.• Python• Mozilla• OpenOffice.org• Vim• CodeIgniter
  71. 71. Cool people use Mercurial.• Python• Mozilla• OpenOffice.org• Vim• CodeIgniter• Student Unions & Activities
  72. 72. What if I already use aversion-control system?
  73. 73. DON’T PANICSwitching is easy.
  74. 74. CSS Style GuideContent Inventory Version Control CSS Style Guide
  75. 75. CSS Style Guide• Reference for developersContent Inventory Version Control CSS Style Guide
  76. 76. CSS Style Guide• Reference for developers• Web page to demonstrate classes & id’sContent Inventory Version Control CSS Style Guide
  77. 77. CSS Style Guide• Reference for developers• Web page to demonstrate classes & id’s• Not necessarily a frameworkContent Inventory Version Control CSS Style Guide
  78. 78. 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
  79. 79. “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.”
  80. 80. Style Guide Changes
  81. 81. Style Guide Changes• CamelCase to hyphenated lowercase
  82. 82. Style Guide Changes• CamelCase to hyphenated lowercase• Eliminate legacy styles
  83. 83. Style Guide Changes• CamelCase to hyphenated lowercase• Eliminate legacy styles• Get rid of styles that described presentation
  84. 84. Style Guide Changes• CamelCase to hyphenated lowercase• Eliminate legacy styles• Get rid of styles that described presentation• Keep notification styles (error, success, etc.)
  85. 85. Why not use a CSS framework?
  86. 86. Why not use a CSS framework?ez-css (ez-css.org)
  87. 87. Why not use a CSS framework?ez-css (ez-css.org)I was the only one working on the project
  88. 88. Why not use a CSS framework?ez-css (ez-css.org)I was the only one working on the projectFlexible (literally & figuratively)
  89. 89. Why not use a CSS framework?ez-css (ez-css.org)I was the only one working on the projectFlexible (literally & figuratively)Light footprint
  90. 90. Why not use a CSS framework?ez-css (ez-css.org)I was the only one working on the projectFlexible (literally & figuratively)Light footprintLayout & design decisions were still in flux
  91. 91. “I find the ez-css classes to be remarkablyun-semantic...”
  92. 92. ez-css class names are esoteric.
  93. 93. ez-css class names are esoteric.<div class="ez-fl ez-negmrez-50"></div>
  94. 94. Most CSS frameworksuse un-semantic names.
  95. 95. Most CSS frameworksuse un-semantic names.•ez-50 (ez-css)•container_12 (960GS)•grid_1 (960GS)•span-4 (Blueprint)
  96. 96. They all put presentation into the markup.
  97. 97. We wrote our own styles.
  98. 98. We wrote our own styles..column { float: left; margin-right: 5%; width: 45%;}
  99. 99. We wrote our own styles..column.narrow { margin-right: 5%; width: 30%;}
  100. 100. We wrote our own styles..column.last { margin-right: 0;}
  101. 101. We wrote our own styles.#main-content
  102. 102. We wrote our own styles.#main-content.extended
  103. 103. The Guide#main-content #main-content.extended#contextual
  104. 104. We refined our markup.
  105. 105. We refined 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>
  106. 106. 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>
  107. 107. Benefits
  108. 108. BenefitsEasy
  109. 109. BenefitsEasyTraining
  110. 110. BenefitsEasyTrainingGuiding document
  111. 111. BenefitsEasyTrainingGuiding documentConsensus
  112. 112. BenefitsEasy DiscussionsTraining • semanticsGuiding document • accessibilityConsensus • naming conventions • common solutions
  113. 113. Website Redesign Project
  114. 114. Website Redesign Project• Major restructuring of content Content Inventory Version Control CSS Style Guide
  115. 115. Website Redesign Project• Major restructuring of content• Easy deployment of new code libraries Content Inventory Version Control CSS Style Guide
  116. 116. Website Redesign Project• Major restructuring of content• Easy deployment of new code libraries• Painless page builds Content Inventory Version Control CSS Style Guide
  117. 117. Project Tools in Web Development What are your questions? sua.umn.edu/minnewebcon Ken Loomis - @kmloomis Ethan Poole - @ethanp Tony Thomas - @truetone

×