The schedule was as follows.

1. Ilmari Heikkinen, "Sprucing up your pictures with HTML5" – Ilmari will cover some HTML5 basics – the enhancements that it provides over previous web standards and will focus on how image and video filters can be used, demonstrating some examples.

2. Neil Turner, "Lessons learned with HTML5" – Neil has built some web applications based on HTML5 and will talk about his experience doing this, including browser support issues, compatibility, responsive web design and performance.

3. Josh Holmes, “Is that a Rich Web in Your Pocket?” – A fast moving trend is building for mobile with HTML5. In this talk, Josh Holmes will show what can be accomplished with a mobile browser app and talk about the design considerations for that form factor.

I borrowed some of the slides from Joe Marini’s MIX talk on Mobile and put my very demo heavy spin on it. My slides are at http://www.slideshare.net/joshholmes/is-that-a-rich-web-in-your-pocket.

I’ve been passionate about mobile and mobile web for quite some time. I’ve been doing on device mobile development for the better part of 10 years now starting back with CE 4 in January 2002. It’s amazing to me, however, how far the mobile industry has come in that time period. It’s been a fast and furious but fun ride in that time…

Do you remember the pain of trying to develop on for the text based browser? Remember  when WAP (Wireless Applications Protocol) development was all the rage? It seems soooo long ago at this point and so old school. In actuality, the WAP forum who were the main drivers of WAP was actually consolidated in 2002. And I remember when it was such a huge deal that the ASP.NET Mobile Toolkit could produce WAP compliant mark-up which meant that I didn’t have to…

But the mobile web development space has exploded. Smartphones these days, including the Windows Phone, are capable of running some amazing things. To demonstrate I showed HamsterDance Revolution which uses javascript, CSS3, the audio tag and more with some serious performance on a Mango device. Next I showed the FishIE Tank and the Speed Reading in rapid succession and then moved over to the Mango emulator for my demos.

Phones these days have the potential to be much more than just a small computer in our pocket. Phones these days know what time it is (clock), where it is (geo-location), what the lighting is like (light sensor), if it’s moving (accelerometer), where it’s going (compass) and can even see (camera) and hear (mic). It’s amazing what they are capable of these days. With all of that knowledge of their surroundings, mobile apps and sites should be augmented by reality. They should geo-locate you to give you directions to the closest train stop (for instance) rather than you having to pick from a list. If the lighting is bad, they should go with a high contrast colour scheme. If it’s loud around you, they should not ask for voice input. If you’re moving, minimize text input. And so on. At the moment, the browser doesn’t have access to all of these sensors but I can’t imagine that that’s that far away.

In addition, the way that people use devices in a mobile context is vastly different than a desktop development. It’s more than just the screen size that matters here. People who are using mobile are on the go and need immediate information. As part of that, I showed the United Airlines mobile site, Facebook, Twitter and the like.

When people are sitting at their desk, they are in a controlled, stable and (a lot of the time) comfortable environment. They are able to do sustained browsing and research.

When people are on the go, they need quick, "glance-able” information that will give them the information that they need at the moment. For example, that could be directions to the venue that they are headed to or a phone number or any number of discrete bits of information that they need while on the go.

Then I moved on to talking about designing for the finger verses the stylus/mouse/keyboard. First of all, the finger is not as accurate as a stylus or mouse. If I turn my finger on it’s side and am very careful, my finger is still at least 40 pixels across and most of the time it’s closer to 80 pixels. And then there’s all of the sites that are so dependent on the mouse and/or keyboard.

As an example, I pulled up http://thekillersmusic.com/html5 in IE9 and showed how fantastic of a site it is and then showed the same site rendering on Mango but talked about the fact that it’s too reliant on the mouseovers and the like to be useful in a mobile context. Same thing with Pacman in IE9 verses on a mobile device. While it renders and plays, it requires a keyboard for navigation.

Mobile sites need to be clean and crisp without a lot mixed fonts, colours and the like. Don’t overuse graphics, gradients and  heavy background images as they can all effect download speed and/or view-ability in direct sunlight. Make sure that you’ve thought about the readability and the usage of whitespace. Obviously you don’t want to go nuts with the white space because you’ve got so little real estate to start with but a little bit of white space can make all the difference.

Work as hard for your user as you can. In other words, minimize the user’s input by providing intelligent defaults and picking up as much from the sensors as you can to make as many decisions as possible. Make sure that you store user’s previous inputs and where possible, use them to help streamline future engagement.s

Lastly, think carefully about your mobile strategy. It can range from doing nothing to going hog wild with a mobile specific design.

One of the key things here is that you make a deliberate choice with regards to your mobile strategy because almost guaranteed you’ll have users browsing your site from their mobile devices.

• Do nothing
• No special content adaptation, result is the desktop site being delivered to the device. Sometimes, this is the right choice. It’s definitely the default choice and the easy one to go with.
• Basic Mobile Adaptation
• Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile. This one is slightly more difficult to pull off as you have to make sure that your content works on both desktop and mobile.
• Multi-Serving Content
• Same page is sent to mobile and desktop, styled differently for each. This is not as hard as you’d think. You can accomplish this through the use of the @media tags to reformat the layout dependent on screen width and the like.
• Mobile Specific Design
• Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary. This is a high end strategy that requires a lot more work as you’re effectively building two different sites. On the other hand, it makes the mobile experience fantastic but doesn’t require you to compromise on the desktop experience.

The quick couple of take aways are that mobile web has evolved tremendously over the past handful of years. As a result you should really think about your mobile strategy and consider your mobile user’s context as part of that strategy.

Oh – and in my last moments I threw up http://ie6countdown.com to hopefully push out the last bits of IE6 around.

This was a fun talk to give and I hope to expand on this talk and do a much richer version in the near future.

Try phpBB on the Microsoft Web Platform today!

The WebPI will take a look at the dependencies that the project has requested and pull those in as well. In the case of phpBB, this includes PHP 5.2.13 (and higher when the WebPI supports it), SQL Server (Yes, I said SQL Server!) and more. It will configure IIS for FastCGI support and the whole nine yards.

The work to accomplish all of this awesome support was done at JumpIn Camp by Nils Aderman, Chris Smith and Henry Sudhof of the phpBB core team. I’ll be talking a lot more about JumpIn Camp over the next couple of weeks but in short, JumpIn Camp was an event that I helped organize, along with Yuriy Zaytsev, Will Coleman and Bram Veenhof in Zurich, Switzerland. There were contributors from a number of the top PHP applications in the world that attended for the opportunity to work on their own projects to support various Microsoft technologies (such as IIS, WebPI, SQL Server, SQL Azure, Silverlight…) with Microsoft technology experts available for technical support.

The SQL Server patch was developed by Microsoft in line with our interoperability efforts in the open source community. The new SQL Server for PHP 1.1 driver that was released back in October, 2009 enables phpBB with UTF-8 on SQL Server, Multiple Active Record Sets (MARS) and the ability to leverage SQL Azure. phpBB has accepted that patch now in their 3.0.7 release.

There are a couple more things that are exciting about all of this to me.

First, it only took a handful of days at JumpIn Camp to pull together the WebPI package + WinCache support for superior performance on Windows. For full disclosure there was some testing and a few minor bugs fixed since then but the lions share of the work was done at JumpIn Camp.

Second, phpBB is the first of the PHP application that can be installed through the WebPI with SQL Server support. I’m hoping that it will become the trend now that the SQL Server Driver for PHP 2.0 CTP with PDO is in CTP and people can start playing with it. I know that there are several applications that are starting testing with the new driver.

Third, it was a ton of fun to get to know the folks from phpBB and all of the folks that attended JumpIn Camp. I’ve been chatting with Nils online for about 6-9 months now but this was the first time that I had met him in person.

Wrapping up – I’m looking forward to seeing a lot more of the work that came out of the JumpIn Camp wrapping up and going public over the next handful of months. It’s going to be a fun time.

In the morning, I talked at a high level about what Azure is, how the various roles work and how to run PHP on Azure. My deck that I used was the first half of the same deck that I used on the PHP On Azure World Tour.

Another great starting point and set of resources is Maarten Balliauw’s Blog itself. He’s been helping out here at JumpIn Camp from a technical perspective on Azure and running PHP on Windows in the first place. He did the next part of the session diving deep into the PHP on Azure SDK.

You’ll notice some overlap between our desk because we’re largely talking about the same SDK and leveraging the same code examples.

Maarten’s first deck that he used to talk about Blog, Queue and Table storage is:

The second one that Maarten used to talk about SQL Azure is:

Maarten also did a demo of an app called ImageCloud leverages both a Web and Worker role to do front end uploading of an image and backend processing of that image. That code can be found at ImageCloud Azure Demo Application.

For some great resources on architecture guidance, take a look at Windows Azure Architecture Guidance. This is put out by the Patterns and Practices group at Microsoft.

Another great resource is Benchmarking and Guidance for Windows Azure. This was created and launched by the Extreme Computing Group (aka XCG).

More resources:

Microsoft Windows Azure Interop

Microsoft Interop Bridges

Windows Azure 4 Eclipse

PHP Azure SDK

Windows Azure MySQL PHP Solution Accelerator

I’ll be adding to these resources over the course of the week so check back for lots more.

An example of this is that when I spoke at WordCamp Ireland, I talked about the amazing improvements in FastCGI over the past few years, the Web Application Gallery and Web Platform Installer (WebPI), URL Redirect, WinCache and many other things that Microsoft is doing to embrace open source technologies. My slides are below:

Now you can hear about these improvements from Ruslan Yakushev and Mark Brown themselves talking about these improvements, specifically the ones related to performance, with the good folks over at PHP Architect on a webcast…

For all the details, check out the web cast at Making PHP faster on IIS!

The talk that I’m going to be doing in most places is PHP/Ruby on Azure or Leveraging Azure with Non-Microsoft Languages:

Windows Azure is Microsoft’s Cloud Computing offering. It is more than a simple scalable hosting option as it is truly a platform as a service offering. This allows you to focus on your application rather than the configuring and managing your infrastructure whether you are writing C# or VB.NET or even languages such as PHP or Ruby which are first class citizens in Windows Azure. The Windows Azure Platform includes Windows Azure, which is the OS and hosting environment for web and background services, as well as non-relational storage, queues, and a blob storage for everything from videos to mountable virtual drives. Additionally, the Windows Azure Platform includes SQL Azure, a fully relational database as a service, and Windows Azure AppFabric for industry standards compliant identity management and a service bus for message passing.

But there remain the questions around why, when and how you should move to the cloud, especially if you are using PHP or Ruby. Should I put everything in Windows Azure? Do you have to convert everything you have to ASP.NET? Do you have to write code specifically for Windows Azure? What if my current applications depend on MySQL and/or memcached?

There’s a lot of good news here as it is relatively straight forward to get running in Windows Azure. Once your application is running, however, now you need to look at how to fully leverage the platform offerings architecting for the best usage of the different roles and the various aspects of the Windows Azure offerings such as the AppFabric and SQL Azure. This will help your application make the most efficient usage of CPU, bandwidth, storage and all of the things that cost in a cloud hosting scenario.

In this half day session, we will begin with the why of Windows Azure talking about when it makes sense to make a move and what the prudent migration paths are for your organization.  During this time we will tour the various aspects of Windows Azure. Then we’ll delve into the technical aspects of how to run your PHP/Ruby code on Windows Azure. Once we have that mastered, we will move onto leveraging the Windows Azure platform to its fullest.

The full schedule is as follows (and yes, this is a lot of countries in not very many days)

Feb. 21 – Dublin Ireland – http://bit.ly/phpazuredublin

I love Ireland. I hope to someday live there. I spoke there about a year and a half ago on RIA and got to meet a few of the folk but mostly worked with Martha Rotter. I got to make a number of friends last time and I’m really looking forward to seeing them again.  

Feb 23 – Lisbon, Portugal – http://bit.ly/phpazurelisbon 

This is my first time to Portugal. I’m really looking forward to meeting the local DPE team (Luis Alves Martins and Sergio Martinho). I’m speaking at the university. it looks like a beautiful venue – http://bit.ly/avsYU9. I just wish that I had more time here to explore the local culture.

Feb 24 – Vienna, Austria – http://bit.ly/phpazurevienna 

My brother has spent a lot of time in Austria but I’ve never been. I have met Mario Szpuszta back when he and I both spoke at JAOO in 2008 in Denmark. That was an awesome conference. I’ll also get to met Rolf Mistelbacher. Another thing I’m really excited about is that I’m going to spend enough time to actually see some of the city.

Feb 26 – London, UK – Keynoting PHPUK – http://bit.ly/9l8IH0

At PHP UK, I’m actually not talking about Azure. Rather I’m doing a keynote titled The Lost Art of Simplicity (Full slides on slideshare). This is actually the original reason that I’m coming to Europe in the first place. I’m honored to be asked to do the keynote and am beholden to Scott MacVicar for the invitation and to Johanna Cherry for making everything work smoothly.

March 2 – Stockholm, Sweden – http://bit.ly/phpazurestockholm

Check out this awesome venue – http://bit.ly/cGTbC0 – it’s a 17th century building in downtown Stockholm. Really looking forward to hanging out in this space.

March 3 – Oslo, Norway – registration information coming soon

I’ve never been to Norway. I should have more information about this trip in the next day or so and I’ll update this post.

**Update**

I’ve got all of the registration information for my Oslo stop.

Auditorium (ground floor)

Lysaker Torg 45

Lysaker Akershus 1366

Norge

http://bit.ly/phpazureoslo for all of the registration information.

Also, as a side note I’ve met a bunch of people from Norway while at the PHPUK conference and they’ve assured me that the polar plunge was decent training for my visit but I’d enjoy it regardless.

March 4 – Amsterdam, The Netherlands – PHP User Group

I haven’t actually met Bram Veenhof in person but  have been working with him over the past couple of years on a couple of things.I’ve been to Amsterdam several times but mostly just to the Airport and the Microsoft offices there, both of which are awesome. I’m thrilled this time to actually have a little time to explore the city.

March 5 – Brussels, Belgium – http://bit.ly/phpazurebrussells

I’ve been to Brussels once before and I’m really looking forward to going back. I’ve not get Katrien De Graeve and Rudy Van Hoe but are two of the other people that I’ve been working with closely over the past couple of years.

March 6,7 – Kilkenny, Ireland – hanging out and speaking at Wordcamp Ireland

Again, I love Ireland and hope to live there someday. I’ll be in Kilkenny at Wordcamp Ireland.

It’s going to be a lot of fun and I’m really hoping that there’s lots of good conversation. Please let me know via comments or via twitter if you’re able to make it to one of the sessions.

If you tweet about this – please use the hash tag #phpazuretour and #cityyourecomingto!

<update>It was brought to my attention that it’s often not a web designer but rather an Information Architect or a Developer who is updating the layout on the page. Completely agreed and this is yet another reason that you should look for competent web designers for the layout and design of your page.</update>

What’s bringing it up now is that CX Partners recently blogged about The myth of the page fold: evidence from user testing | cxpartners and it concerned me a little. CX Partners does a lot of user testing and one of the things that they have tested for is whether or not the “Fold” mattered to users and out of 800 users, only 3 were unable to find content because they would have to scroll to find it. They are right, users are used to scrolling and are willing to do so if they know that there’s more content below. We just need to give them visual hints that there is more content that they will have to scroll to see. What they are trying to fight is the urge to put all of the content or at least all of the *important* content Above the Fold and design pages so that users do have to scroll. I’m on board with that fight. Cramming all of the content into cramped margins and smashing things together just so that it can be seen without scrolling is horrible design.

Here’s the part that concerns me as an old school print layout guy. There’s a fundamental miss on what the “Above the Fold” content is supposed to be used for in your layout whether it’s print or web design.

How does print layout treat above the fold?

The above the fold content is not meant to be the meat of the content or really even the most important content. It’s meant to be eye catching. It’s the lure for people to pick up the paper or magazine.

When thinking about the fold in a newspaper, think about the old school newspaper dispenser with the top half of the top page displayed in the little window. There is a deliberate attempt to put a catchy photo and headline in that window so people buy the paper. Is that the best thing in the paper, not even close. That’s the picture that’s going to look good on someone’s coffee table when they toss down the newspaper.

Or better, think about the magazine stand and how there are potentially hundreds of magazines there and you need for yours to stand out enough that people will buy it. Think this through – what can they see in the magazine stand? Typically they can see the top edge of the magazine and part of the picture. I was amazed once when I was talking to a freelance sports photographer who told me that he’d net $40k-$60k for one photo if he could land the cover picture on Sports Illustrated. But it makes a ton of sense. This concept of trying to stand out on just a headline and a photo is not lost on the smart people at Sports Illustrated. The right picture could make far more than $40k worth of a difference on the stand.

How does this apply to web design?

Honestly, it’s the same exact concept. The fold or scroll line is the area of the page that people can see without having to scroll down the page. This area needs to catch people’s attention correctly because they may only be on your page for a few seconds. If you look at the statistics on any site that gets a decent amount of traffic and the average page view length is measured in seconds, not minutes.

When people are browsing through and they get a link from another site or from a search engine, what’s the first thing that they see? Imagine that as if they are glancing past your page among the potentially hundreds of others that they are looking past which is really not that much of a stretch because they are looking to see which pages are more likely to fit their needs than others. They may not be paying for your content but they are investing their time.

The problems come in two sizes. First, there are designs that try to shove as much content as they can into that above the fold area because there’s an assumption that if it’s not there, their users won’t see it. Second, there are other designs that completely shun the idea of scrolling and end up with these horrid wizard style pages where the user has to click through to see the next page and the next page and so on. Either of these are poor choices.

Back to the article for a moment – I really liked CX Partners’s “Design tips to encourage scrolling”. What was missing is the “How to hook them and keep them” bit.

Let’s look at Jeff Blankenburg’s blog for a good reference here.

You know exactly what you are going to get on his page. The disk in the middle, which is what most people see first cycles through all of the social networks that he frequents. The tweets across the top express his last several publically blasted thoughts while the little bird that flies around them draws eyeballs to them. The menu shows you that he’s delivering Code and Slides through this blog in addition to other posts. The RSS tag that hangs down and swings a little definitely captures the attention and draws people to subscribe. Finally, the title of the blog and the first blog post start drawing eyes down the page to see the meat of the content. But what real content is above the fold on Jeff’s blog? Honestly, there’s none. All of the real content is below the fold so the user has to scroll for it. Going back to the CX Partners post, that’s fine. Users know how to and are willing to scroll for content if they find the page interesting. The *only* thing that I dislike about his header is that it’s a fairly large chunk that takes 3-5 seconds to load the first time. This is a killer if the use
r is only on the page for 3 seconds.

Another great example is any Amazon product page. They have the picture of the product, average user rating and price right at the top. The product detail, related products, the actual reviews and all of the rest of the content is below the scroll line. Obviously, it’s successful for them.

Wrapping up…

Above the Fold is widely miss-understood. You need to realize that this critical section of the page is not about shoving as much content as you can the user. It’s about effectively giving the “Elevator” pitch on your site and getting that longer look that will likely involve scrolling down to see the real content.

Guard the above the fold content and keep it to the essential bits that will tell the user what your site is about rather than trying to give them everything in one big drink from the fire hose. Whenever anyone talks to you about moving a certain section of content above the fold, turn the question on them by asking them how that keeps people on the site over all.

WebsiteSpark is designed for small web consultancies ranging in size from 1 to 10 people. With WebsiteSpark, you get a package of software specifically selected for a web consultancy to serve their customers better.

What does the program provide?

WebSiteSpark provides software licenses that you can use for three years at no cost.  Once enrolled, you can download and immediately use the following software from Microsoft:

• 3 licenses of Visual Studio 2008 Professional Edition
• 1 license of Expression Studio 3 (which includes Expression Blend, Sketchflow, and Web)
• 2 licenses of Expression Web 3
• 4 processor licenses of Windows Web Server 2008 R2
• 4 processor licenses of SQL Server 2008 Web Edition
• DotNetPanel control panel (enabling easy remote/hosted management of your servers)

The Windows Server and SQL Server licenses are for you to do both development and production work. Also, the production licenses can be leveraged in a couple of different ways. You can do 1 production server with 4 processors or 4 servers with 1 processor each. These servers can also be either dedicated hardware or virtualized offerings. If you want, you can throw the licenses on your own server with the “self-hosted” model or you can enroll with one of the hosters that have signed up as a Network Partner. As a Network Partner, they will pass the savings of the licenses on to you and only charge you for the infrastructure work. You can find all of the hosting network partners on the WebsiteSpark page.

But this program is not just about software. As part of the WebsiteSpark, the people that enroll are entered into the Microsoft Partner Program and into Microsoft Pinpoint. This will help result in customer referrals and more. There’s also 2 Microsoft professional support incidents per year and some free online training that will be provided. 

Who’s eligible for BizSpark?

WebSiteSpark is available to independent web developers and small web development companies.  The only two requirements to join the program are:

1. Your company builds web sites and web application on behalf of others.
2. Your company currently has less than 10 employees.

If you qualify and want to get signed up today, there are a couple of different paths.

You can always visit WebsiteSpark and sign up directly. During the enrollment, you can pick a network partner or you can pick one of your friends at Microsoft such as me as your contact to enroll and sign you up.

Or you can send mail to webspark@microsoft.com you can get a referral code quickly.  You can then use that code to enroll in the program on the WebsiteSpark website.  Once enrolled you can immediately download and use the software, as well as begin to participate in the network/partner opportunities.

If you run into any issues at all, email me at josh.holmes@microsoft.com and I’ll help you out.

Some quick Q&A

• What happens after the 3 years?

There is a $100 exit fee when you leave the program whether you leave at the end of 1 year or you leverage all three years. However, there’s no obligation to continue using any/all of the software once you exit the program. If you so wish, you can pay the $100 exit fee and wash your hands of the whole deal. Obviously, the play here is that at the end of the three years you will find our platform and tools valuable enough to purchase.

That said, there are some interesting incentives that are being put in place right now to help you with that decision. WebsiteSpark participants can optionally choose to purchase all of the software in the WebsiteSpark program via a $999/year package. And yes, that includes all of the software involved from the tools to the production licenses.  

Or you can just leverage the production licenses through a stellar $199 a year offer that includes both 1 Windows Web Server processor license and 1 SQL Server Web edition processor license.  You can buy the quantity you need of this package at $199/year each. 

• What’s the role of the Network Partner?

Similar to the BizSpark program, the Network Partners are selected because they are active in supporting the ecosystem that the program is intended for. In the case of hosters it’s obvious. They host the websites that WebsiteSpark participants are building. There are others who work with the community in advisory roles and want to help out as mentors and coaches.

Couple of examples:

Cal Evans is another example of a great network partner as he’s working with PHP shops all over the world and helping them to be successful again as a mentor and as a coach. As a network partner, he is adding one more offering into the portfolio to help his mentees be successful.

Steve Smith from Nimble Pros who wanted to be involved as a network partner because he’s active in working with other consults to help them be successful through support, advice, mentoring and sometimes sub-contracting. He’s proven this by being a Microsoft Regional Director and an MVP for many years. His role as a network partner in the program only furthers that goal of helping the ecosystem.

Ben Henderson from Firefly Logic, Harper Reed from Threadless and John Alexander and Jeff Julian from Geeks With Blogs hold similar positions in the community as influential bloggers, coaches, mentors and advisors to many companies.

Summary

I’m really excited about WebsiteSpark because I remember when I was an independent consultant and then a partner at SRT Solutions getting our first dedicated server. It was a great feeling to have the freedom to do whatever we needed to do with the server from installing different types of software to configuring the redirects the way we wanted.

For more details – read Scott Guthrie’s blog post at Announcing the WebsiteSpark
Program – ScottGu’s Blog

Again, if you want to get involved, feel free to contact me at josh.holmes@microsoft.com. Either I can sign you up directly or get you in touch with the right network partner to help you in your situation.

JavaScript Resources

Like a lot of you, I’ve been doing JavaScript since 1996. I’ve been pretty geeked, however, with the recent (well, last 2-4 years) emergence of a ton of JavaScript frameworks that are making this work a lot easier.

The first one to talk about it dojo. It’s one of the more mature ones that’s out there. I’ll be honest and say that it’s been a little while since I’ve used it because I’ve started using jQuery or Prototype more often. That said, dojo is one of the most complete frameworks out there. I do love it’s drag and drop support. It includes offline support and a whole lot more. Check out and play with some of it’s cool features at http://dojocampus.org/explorer.

Of course, any group that has a conference called dojo.beer() is a winner in my book.

The second toolkit is MochiKit. I love it’s tag line of “Making JavaScript Suck Less”. I first worked with MochiKit when I was playing around with TurboGears – a Python web application stack. What it’s really outstanding at is doing async work which is particularly useful in doing AJAX and other service based work. It’s interesting to note that Kevin Dangoor started Turbo Gears and then at some point later ended up working for SitePen who paid him to work on dojo. Check out demos of it in action at http://www.mochikit.com/demos.html.

Prototype is a slick relatively low level framework. What it does is extend the HTML DOM to include a lot of really useful features like element, class and css selectors. One of the useful things that it does is add a number of manipulations to the built in string class. This gives us startsWith, stripScripts, stripTags, isJSON, strip and a whole lot of other really useful functions. By itself, Prototype’s useful but I have a hard time talking about it without mentioning script.aculo.us and some of the other plugins. script.aculo.us brings drag and drop support, animation frameworks a number of controls and makes it all really easy.

Check out demos of Prototype and script.aculo.us working together at http://wiki.github.com/madrobby/scriptaculous/demos.

jQuery is a fantastic and relatively light-weight framework that’s garnering a lot of new supporters recently. Honestly, I was happy with dojo and Prototype until I saw the Visual Studio Support for jQuery at which point I started playing with it.

I’m a convert. Now, because it’s not as low level as Prototype, jQuery doesn’t have some things like the string manipulation, but overall I’m really pleased. I find that I have to write a lot less code to accomplish the same results. And very importantly, the jQuery Documentation is really good. Another really useful thing is that jQuery, being a really nice citizen, has built in support to make sure that it’s compatible with other JavaScript frameworks. Throw all of that in with intellisense in Visual Studio and it makes life easy.

There are also a ton of different plugins for jQuery that do everything from menus to rude string manipulation (not as good as Prototype but it’s a start).

Some of my favorite jQuery plugins in no particular order are:

AJAX History
Mousewheel
JSON
Curvy Corners
jCarousel
xWin

  ASP.NET AJAX is the last framework I’m going to talk about here not because there aren’t other frameworks but I haven’t used the others so I don’t really want to comment on them.

First, as the name does imply, what it does really well is AJAX stuff. One of the really powerful features is the JavaScript proxy generation.

<asp:ScriptManager ID="ScriptManager1" runat="server">
      <Services>
           <asp:ServiceReference Path="~/CustomersService.asmx" />
      </Services>
</asp:ScriptManager>

That allows you to call web services as if they were methods on an object.

function GetCustomerByCountry()
{
      var country = $get("txtCountry").value;
      InterfaceTraining.CustomersService.GetCustomersByCountry(country, OnWSRequestComplete);
}

function OnWSRequestComplete(results)
{
      if (results != null)
      {
           CreateCustomersTable(results);
           GetMap(results);
      }
}

Second, despite the name, ASP.NET AJAX can work with more than just ASP.NET. There’s a project on CodePlex to generate the service proxies for PHP called PHP MS AJAX (which is a whole lot of capital letters…).

How do you choose?

There are a ton of different tests out there some of which you can look at the results, others of which you can actually run yourself…

Dojo vs JQuery vs MooTools vs Prototype Performance Comparison | Peter Velichkov’s Blog – Jan 19, 2009

Mootools Slickspeed Test

I like to see if there’s broad support so the project won’t go away, see if it’s actively being developed, what tooling is available, how easy the syntax is, how well it plays with others, what it brings to the table from a functionality standpoint and a whole lot more.

Really though, it comes down to your preferences. The good news is that it’s not the end of the world if you decide to switch frameworks.

My current JavaScript work is being done with a combination of jQuery for most of my client side work with ASP.NET AJAX doing my communications (and some of the controls) with a little bit of Prototype thrown in when I need to go lower level.

CSS Resources

I used to spend days getting exactly the right alignment in my HTML/CSS work. But as time has gone on, I’ve gotten more mature and realized that I don’t have to work that hard. Instead of me figuring out how to do the exact right layout should be, I’m starting to leverage the various CSS Frameworks that are out there – especially since there are so many new browsers and form factors out there from IE8 to Safari 4 to iPhone. I want a framework to

One really simple CSS Framework is the 960 Grid System. It’s simple and gives you a lot of flexibility. The idea is that it breaks up the page into either 12 or 16 different columns and then lets you put in areas that spread across any number of those columns. This is a direct nod to the print industry which does exactly the same thing on paper. This gives you a tremendous number of possibilities from a simple two column layout to a really complicated layouts with multiple width columns and variety. Check it out, it’s simple and it works.

  The downside of it is that it’s a fixed width layout so it’s not always the right choice. The good news, however, is that the project has been extended by Fluid 960 Grid System. This adds JavaScript to the 960 Grid System to give is a much more dynamic layout that resized to your screen size. It also brings dynamic menus to the table. It’s JavaScript it based off of a project called MooTools. 

If the you really don’t want to think that hard and the others don’t give you what you need tied up in a neat enough package, check out Layouts.IronMyers.com. It’s simple to use web site gives you a preview of exactly the layout that you’re looking for and lets you download a zip file with a sample HTML and CSS inside.

And if that’s not enough and you really just need the design and all of the layout handed to you – check out FreeCSSTemplates.org. It’s got a large number of Creative Commons licensed CSS templates and layouts.

Conclusion

I hope these resources are as useful to you as they are to me. I’ve banged my head against the wall a ton of times until I realized that someone else had already solved the problem and I can leverage their solution.

In this post, we’re going to continue that project by adding paging rather than showing all of the pictures on the one page.

Adding Paging to the Model with LINQ

Since we are simply using an XML file for the storage, we need to do the paging manually against our set of objects that we have in memory. This method works well any time you have client side caching as well.

public class ImageModel : List<Image>
{
    public ImageModel() : this(1, 10)
    {
    }

    private List<Image> GetAllImages()
    {
        string imagesDir = HttpContext.Current.Server.MapPath("~/images/");
        XDocument imageMetaData = XDocument.Load(imagesDir + @"/ImageMetaData.xml");
        var images = from image in imageMetaData.Descendants("image")
                     select new Image(image.Element("filename").Value,
                     image.Element("description").Value);
        
        TotalCount = images.Count<Image>();

        return images.ToList<Image>();
    }

    public int TotalCount { get; set; }
    public int CurrentPage { get; set; }
    public int PageSize { get; set; }
    public ImageModel(int pageNum, int pageSize)
    {
        CurrentPage = pageNum;
        PageSize = pageSize;

        var images = GetAllImages();

        this.AddRange(images.Skip((pageNum - 1) * 
            pageSize).Take(pageSize).ToList());
    }
}

Notice that I added a new constructor that takes as parameters page number and page size. This will allow us, from the controller, to control the action happening here. The next thing to notice is that the default constructor is now calling the new constructor passing in default parameters of 1 and 10. Notice that we’re starting with 1 instead of 0. This will make a ton more sense to the user and makes mapping the pages a lot simpler. Lastly, notice that we’re setting some parameters (TotalCount, CurrentPage and PageSize). We’ll use these in the view in a little bit.

If we run right now, we’ll only get the first 10 pictures. If you happen to be following along and coding this with me, go ahead and try it.

Adding the Custom Route

Next, we need to add a route to handle the page mechanism.

In the global.asax.cs file, in the method called RegisterRoutes add the following route.

routes.MapRoute(
    "ImagePaging",                                              // Route name
    "{controller}/Page{pagenumber}",                           // URL with parameters
    new { controller = "Home", action = "Page", pagenumber = "1" }  // Parameter defaults
);

Notice how the routes are built. It’s a series of url parts and named parameters. For example, the Page2 is going to pass in 2 as the selected pagenumber. We actually could have hard coded the whole path except for the page number.

Adding the Paging Action to the Controller

Now that we’ve got data routing to the an Action, we need to make sure that we’re handling it.

Turns out, this was the easiest piece of all.

public ActionResult Page(string pagenumber)
{
    ImageModel model = new ImageModel(int.Parse(pagenumber), 10);
    return View("index", model);
}

Notice that we are just creating the ImageModel leveraging our new constructor and passing it into a view. The view that we’re using is still the index view, which is the default. We don’t have to go build a new view for the paging, we just need to alter the data that we’re passing into our current view.

If you want, you can go test by browsing to /image/page2 and see what it shows.

Adding the Navigation Links

The last thing to do is to add the navigation links to the view. If you use the <% %> tags in any ASPX it runs on the server side. What this is actually doing is that the ASPX page is parsed and generated into code and compiled into a .NET assembly on the server side and the code inside the <% %> just gets copied into that generated code before it’s compiled. This means that the code that’s inside your brackets must match the language that you set at the top of the page.

<%if (ViewData.Model.TotalCount > ViewData.Model.PageSize){ %>
<div class="paging">
    <%if (ViewData.Model.CurrentPage > 1) { %>
        <%= Html.ActionLink("Back", 
               "Page" + 
               (ViewData.Model.CurrentPage - 1).ToString(), "Image")%>&nbsp;
    <% }%>
    <%decimal numberOfPages = 
          decimal.Divide(ViewData.Model.TotalCount, ViewData.Model.PageSize);
      int lastPageNumber = (int)decimal.Ceiling(numberOfPages);
      for (int i = 1; i <= lastPageNumber; i++)
       {
           if (i != ViewData.Model.CurrentPage)
           {
            %>
        <%= Html.ActionLink(i.ToString(), "Page" + i.ToString(), "Image")%>&nbsp;
    <% 
            }
       }%>
    <%if (ViewData.Model.CurrentPage < lastPageNumber)
        { %>
        <%= Html.ActionLink("Next", 
              "Page" + (ViewData.Model.CurrentPage + 1).ToString(), "Image")%>
    <% }%>
    <%=lastPageNumber%>
</div>
<% }%>

Notice that we’re using the properties set by back in the model here. There’s three different sections here. The first checks to see if we need a back button. The second loops over the pages and creates step links. And the third checks to see if we need a next button.

The navigation links in the view turned out to be the most complicated part of adding paging to the photo gallery.

Stay tuned to future posts for styling with CSS, adding a Silverlight front end and more.

One cool part about it is that you can get a tremendous amount of functionality with little to no JavaScript coding on your own. It leverages a couple of different JavaScript libraries including Prototype and Scriptaculous. These do a lot of generic HTML Dom manipulation and visualization.

The result of leveraging Lightbox.js is that when you click on one of the thumbnails that we started showing in Returning Thumbnails With the MVC Framework the full sized picture will show in a really nice lightbox style effect.

First, you need to download the Lightbox.js project. It comes in a zip file that comes with a sample application. Unzip the contents into the appropriate folders. This means that the .js files go in your /scripts directors and the images and the css in the /content folder.

The cool part is that since you have the source to it all, rock on and modify it to your heart’s content. And we’re going to do a light modification right off the bat. We could have put the images from the Lightbox.js project in the /images folder but we’re already using that for something else so we put them in the /content folder. That means that you need to open up lightbox.js and change the directory of the loading and close images to point to the correct directory.

LightboxOptions = Object.extend({
    fileLoadingImage:        'content/loading.gif',
    fileBottomNavCloseImage: 'content/closelabel.gif',

That’s the only mod that we *need* to make at the moment. If you feel like it, you can fix the image paths in lighthouse.css as well.

#prevLink:hover, #prevLink:visited:hover { background: 
        url(Content/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: 
        url(Content/nextlabel.gif) right 15% no-repeat; }

The only thing left to do is update the Images/index view to take advantage of our new capabilities. There are two mods to make. First, we need to include links to the lightbox.css and the required 3 JavaScript files (prototype.js, scriptaculous.js and lighbox.js). Second, we need to add a rel=”lightbox” to the anchor tag around our picture.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
      AutoEventWireup="true" CodeBehind="Index.aspx.cs" 
      Inherits="PhotoGalleryMVC.Views.Image.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" href="content/lightbox.css" type="text/css" media="screen" />
    <script src="scripts/prototype.js" type="text/javascript"></script>
    <script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="scripts/lightbox.js" type="text/javascript"></script>

    <p><%= Html.ActionLink("Add your own image", "Upload", "Image")%></p>
       <% foreach (var image in ViewData.Model) { %>
   <span class="image">
        <a href="/images/<%= image.Path %>" rel="lightbox">
            <img src="/image/thumbnail/<%= image.Path %>" />
        </a>
        <span class="description"><%= image.Description %></span>
   </span>
<% }%>

</asp:Content>

It’s that simple. This will render a really nice little lightbox effect on our images.

Stay tuned for future posts about styling the CSS, paging the pictures and a whole lot more.