This End Up

This week we finished development and implementation of our latest, jQuery flavored, Arena powered cccev.com website -- and I'm pretty excited about how it turned out.  Everyone did a tremendous job: Jeremy Wagner and Mark Miller on design; Jason Offutt, Dallon and myself on development and implementation; the company PSD2HTML for slicing, and many other Cccev staff for content and testing.

It went down like this...

Jason, Dallon and I first sat down with Mark and his PSD mockups.  It was agreed in advance that our team would provide about 30 days of development time.  We broke everything down into the individual modules we needed to create or customize, and then entered each feature into OnTime (as sprint 1) along with an estimated number of hours to complete it.  Mark had to make decisions whether to keep or toss an idea, because once OnTime said we had reached a total of 30 days worth of estimated work, our meeting was over and sprint 1 was locked in.

Next Mark took the PSDs and worked with PSD2HTML to slice everything into working HTML mockups.  As Mark received output from PSD2HTML we got to work on making them actual functioning Arena modules (more on this approach at the conclusion).

What follows is a quick dissection of sprint 1 for the site.

We created six page templates.  One for the home page, three for department/subpages (1 col, 2 col, 3 col), one for our newsletter main page called "the Drop", and one for the video/podcast stuff called Central TV.

Home page:

• The promotion/feature roller you see on the home page is a custom Arena module Dallon created which uses LINQ-to-Objects to get the promotions and jQuery and the jquery.galleryScroll.1.4.5.pack.js for the slide navigation.
• The main drop down navigation is a custom module Jason created which also uses LINQ-to-Objects and jQuery for the slide effects. (applied to the appropriate content area of all new templates)
• The login-link-user-login popup is a combination of a custom Login Logout control I wrote which controls the display of a custom UserLogin.ascx module (which inherits the standard Arena ArenaWeb.UserControls.Security.UserLogin control). (applied to the appropriate content area of all new templates)

Sub pages: 

• Side bar calendar with mini event details was created by Jason.  It starts from a parent event id (module setting) and traverses the tree to obtain all child events that are flagged with the given topic areas (module setting).  jQuery is used to slide the event details when there are multiple events.
• The calendar Invite Friend popup was written by Jason and is smooth-shown via a jQuery wired to the click event of the 'send invite' link on the side bar calendar.
• The subpage navigation was created by Dallon in about 100 lines of code and markup which uses LINQ-to-Objects (see snippet below) to obtain the pages and jQuery for the sub-sub page slide animation:

  var pages = (from p in rootPage.ChildPages.OfType<PortalPage>()
               where (p.PortalPageID != -1 && p.DisplayInNav && p.Permissions.Allowed(Arena.Security.OperationType.View, CurrentUser))
               select p).Distinct().OrderBy(p => p.PageOrder);

• The serving opportunities viewer, created by Dallon, also uses LINQ-to-Objects and jQuery (see a pattern? I told you LINQ was not something to ignore;) and displays all public viewable serving tags which are a child of a given parent serving tag (module setting).
• (Not shown) a custom Background changer module applied to the department pages which uses jQuery to dynamically add css classes to particular elements to effectively change the background image according to the configured background (lookup; module setting).
• (not shown) a custom Flickr module Jason wrote which uses Athena (which uses LinqExtender).  It takes a Flickr ID (module setting) and creates a small grid of photo thumbnails which smoothly slides on prev/next navigation.

The Central TV pages use three custom modules created by Jason: channel viewer, series/topic viewer, and video player.

The Drop page uses a custom NewsletterSubscriber.ascx (it inherits the standard ArenaWeb.UserControls.Core.NewsletterSubscribe class) to achieve the exact layout needed to match Mark and Jeremy's design.

Lastly, for those who care, we relied on the underlying Arena object framework -- we did not create any custom objects.

We actually finished on time, and the burndown chart in OnTime really helped everyone stay focused.  In conclusion, one valuable lesson I learned was the added complexity of setting up our development pipeline overlapping with PSD2HTML.  The dependency between their work (javascript, css, and HTML slices) and our modules made our work messy, inefficient and disheartening at times as we would have to chase down layout bugs after merging their latest output with ours.  Next time we'll just wait until they're complete before starting our work.