Anatomy of a web page – ISN Take Five Videos

http://softwarecommunity.intel.com/videos/

http://softwarecommunity.intel.com/isn/downloads/anatomyofawebpage2.gif

Hardware:

1 - IIS - Intel Dual Xeon 3.6GHz (Irwindale) core machine 4Gb RAM w/Windows Server 2003 (32bit)

2 - SQL Server 2000 - Same configuration

Software:

1 ASP.Net (C#)

2 TSQL (Stored Procedures)

3 RSS.NET (http://rss-net.sourceforge.net/)

4 jQuery (http://jquery.com/)

dimensions plug in http://plugins.jquery.com/project/dimensions

tool tip plug in http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

jqModal http://dev.iceburg.net/jquery/jqModal/

Greybox Redux (http://jquery.com/demo/grey/)

5 Querystring (http://adamv.com/dev/javascript/querystring Adam Vandenberg)

6 formatDate (http://www.svendtofte.com/code/date_format/ Svend Tofte)

7 Unobtrusive Flash Objects (http://www.bobbyvandersluis.com/ufo/ Bobby van der Sluis)

8 My Uploader Java Object (http://www.javaatwork.com/java-upload-applet/details.html)

9 Ajax.NET Professional (http://www.ajaxpro.info/)

10 West-Wind Web Tools (http://www.west-wind.com/)

11 Blip.Tv Wiki API Tools (http://wiki.blip.tv/index.php/Blip.tv_API_2.0)

12 Google AJAX Feed API’s for reading RSS feeds http://code.google.com/apis/ajaxfeeds/

And more..

Where to start… I suppose you can visit the web page (http://softwarecommunity.intel.com/videos/) to see the end result but better to start on the back end to understand the integration.

We chose to write this software in ASP.Net C# and I wanted the entire web page to be able to run site agnostic so there is nothing really in the way of typical ASP.Net code-behind and controls. Since all the data in the web page is delivered with JSONP style implementation (http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/.) In my case the data set is small so it is delivered with the page itself as opposed to secondary calls. If the data set gets larger before the whole app gets re-written then I will go to Category based services calls for each subset of data.

For the ISN Video Repository (http://softwarecommunity.intel.com/videos/) we chose to go with blip.tv http://www.blip.tv for our video hosting over YouTube and you can see all our videos at http://intel-sw.blip.tv/ and the community submitted videos at http://isn_user.blip.tv. Our stakeholders wanted to build a site that contained all of our videos in one single place as to join all the intel communities together. Blip provides a REST based API (http://wiki.blip.tv/index.php/Blip.tv_API_2.0) and RSS feeds that make this all possible.

Steps involved in writing this web application:

Back End -

A> Database to keep a copy of the RSS feed data containing all the details for our videos.

First we need a database to synch our information and to be able to add more information. Microsoft SQL Server 2000 fueled by a BlipTv RSS feed http://intel-sw.blip.tv/?skin=rss&file_type=flv&page=1 and page=2 etc. (see a pattern forming here.)

Using RSS.Net from SourceForge http://rss-net.sourceforge.net/ provided us a nice easy way to get our RSS Feed data from BlipTv and only a few modifications to the code were required to make it internally for testing (proxy support required.)

B> Using a ASP.Net spawned thread timer to retrieve the data.

We wanted to make this happen on an automatic basis and therein lies some choices. 1> Create a batch timer script set to run on a interval. 2> Or spawn an ASP.Net timer thread within the web administration tool (where we are going to have the process monitoring anyway.) Batch process’s still require monitoring tools and debugging smarts so we chose the second option as the code is kept within the admin tool and this the monitors is in the same place.

I have a video up on the community site that shows off the “How To: ASP.Net Batch Processing via Thread Timer” http://softwarecommunity.intel.com/videos/home.aspx?fn=100040&Category=Community

Considering how many times Blip has updated the RSS feeds, renaming variables, breaking this process I am glad I went with a spawned process thread under ASP.Net as it was much easier to manage and see errors from within the admin tool (if there are any that need to be addressed.)

So we spawn a timer thread to process all the pages in the RSS feed and then synch data to SQL. We never delete anything (anymore) as there have been times that Blip’s RSS feed has broke and deleted all our videos. When the RSS feed came back the code recreated all the links with new ID’s which made a good mess off things. We update for changes like description, tags, title, thumbnails, etc..)

Note: Blip recently changed the RSS to include a new smaller thumbnail and it appears that they made the older thumbnail into a much bigger image size (not 100% sure about the sizing change though.)

Note: They made some more fixes to video thumbnail sized and clarity fixing some very low resolution problems that were there for almost a month. Still small thumbnails but much better looking.

The admin back-end allows us to add some additional meta data to each video like an extra RSS Feed link to an ISN Communities or Author/Celebrity Feed related to the Video.

Front End - Above

From top to bottom (skipping some elements as the are composite of others):

CSS header graphic region with a simple jQuery click event to open the ISN Home Page http://softwarecommunity.intel.com/isn/home/default.aspx

jQuery http://jquery.com/ JavaScript library makes up a ton of the pages code as our group is in love with the simplicity end elegance that it imparts to web page client side code development. jQuery is lightweight and cross browser compliant and easy to get started with. The community support for jQuery add ins http://plugins.jquery.com/ and UI http://ui.jquery.com/ are awesome!

JSON DATA in Page – BlipTv provides a JavaScript API that allows you to add a dynamic script tags to the web page which allows you to get back data and in a single JavaScript method called blip_ws_results(JSON_Data_Structure) and here is an example call that retrieves that data http://blip.tv/file/148720?skin=json&file_type=mp3,m4a,mov,mpg,mp4,m4v,avi. This JSON Data structure contains everything you would want to know about the video for client side display (height, width, duration, media source, thumbnails, categories, timestamps etc.) Dynamic script tags (JSONP http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ are easy to do in many JS libraries and manually http://ajaxpatterns.org/On-Demand_Javascript.

The TV set like theme of the player window is accomplished in a typical fashion of CSS repeating graphics and rounded images in boxes in the corners. I typically hate Photoshop mockups as they put a huge pain in the azz burden on the developers and this was no exception. Page mockups with rounded borders are just frell http://www.urbandictionary.com/define.php?term=frell.

The video player is managed via Unobtrusive Flash Objects or UFO for short and works quite well and provides nice progressive FLV format rendering. BlipTv does the translation from MOV,WMV etc uploaded formats so that save use the trouble of file hosting and pseudo streaming of files.

Larger View button uses GreyBox Redux http://jquery.com/demo/grey/ to provide a popup window in a window.

We have a concept called “video series” as well where they can setup a series of videos. Series added it’s own complications for sorting and page display and I had to re-conceptualize it more than once to get all the end user page features working correctly but all in all I think it looks good.

Direct download links, embedding code are straightforward generations

Common Services – All bundled into JavaScript files and an .ASHX backend calling mechanism

Common options to most ISN pages are things like Email a friend, Support feedback, Page Comments, Rating (thumbs up or down)

Found typically around the Right hand channel page and feed options

Email a friend popup

ISN Support popup

Commenting

AJAX provides us post ability for the submitted comments and a character counter of encoded characters to be posted. Akismet and Arne Brachhold provided the .Net API’s for anti-spam prevention http://www.arnebrachhold.de/2006/04/18/akismet-anti-spam-library-for-the-dotnet-framework/

Voting on favorite videos – Notice CAPTCHA popup to help prevent spam voting.

The VIDEO CATEGORIES toolbar and QueryString JavaScript http://adamv.com/dev/javascript/querystring provide dynamic linking to categories with some simple URL parsing. By adding on ? Category=Community onto the end of the main page display it will auto-navigate the interface to bring these items to the main page display and shifts the toolbar. I had some issues with the timing of events when displaing categories that were off screen so I close this in a short delay timer in JS code

if (catg == "Virtualization" || catg == "CommunityUploads")

setTimeout( function(){ $("#vcatRight").click(); }, 500);

Mouse over video images and Videos Series hypertext links pops up the entire video description via the jQuery tool tip plug in http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ and makes for a nice effect.

Sharing on the Right hand navigation seems to never get used so I am not going to talk about it here except to say that we gave the ability to upload community videos with a nice progress indicator upload Java Applet - My Uploader Java Object (http://www.javaatwork.com/java-upload-applet/details.html) but again there has only been about one or two community submissions.

Last feature I would talk about if the search

Which works quite cool in that it goes through the entire data set and filters the display to only show the search for keywords. There was not enough time to write the search to be AND/OR capable so it just parses for single keyword and updates the display.

PROS:

Good experience and brings into play quite a few API’s and conceptual technologies

CONS: What I would do different If we do this app again.

I would toss all PhotoShop look and feel as it is entirely unnecessary marketing bloat and does not pertain to developers/technologists who have a different mindset.

"Entirely AJAX" stinks for Google search crawlers and makes an big loss. You need to have URL’s to crawl or an alternate method for Google to follow to pull all the links.

Page is very large - Small fast page size would be much better end user experience as opposed to the bloated one that it is right now.

Provide easier cross linking of ISN Communities and Forums for a better social experience. Blogs are linked in but not always obvious and our Forums are not linked on these pages