Monday Jun 13 '11Drupal on Microsoft Azure: Lessons learned via Govcamp.ca

Example Speaker Bio page
Example Session Page
Video Streams page with live-stream pop-up
Session Leader listing page
Event Sponsors
Panel with per-room session listing
The embedded live video player for Auditorium A

Microsoft recently launched a new cloud hosting platform called Azure and have been pretty active in promoting its inter-operability, reaching out to Open Source software projects to explore its suitability for hosting all sorts of software.  We got in touch with them and the founders of a Canadian event called GovCamp to build the event a website using Drupal 7 on Azure and see what we could learn along the way.  This post will introduce the project and relate our methods - for any of you reading this who may want to try your hand at deploying Drupal on Azure.

About GovCamp

Founded in 2010, GovCamp takes a page from the 'unconference' movement in bringing together various groups of people to promote non-partisan dialog - specifically relating to the changing role of Government.  For its second-ever event this summer, organizers were aiming to bring 100s of people together in Toronto representing the grassroots, Government and Industry to spark dialog which could be communicated outside the physical event using the Internet and then into the future - with at at least annual sessions of GovCamp being held in Toronto.

In its first year, the event had used a simple Wordpress website (hosted on a standard Linux-based virtual hosting environment) and hadn't gone through any identity-defining exercise - its site didn't necessarily relate what the event was about but primarily allowed organizers to easily publish blog posts.

For 2011, the organizers were certain that they would welcome more attendees than the previous year and anticipated hundreds of people around the country (and internationally) wanting to clue into the day's happenings, despite physical separation.  They needed a website that featured a blog of event-related news, could be used to relate scheduling information as well as detail on who was presenting sessions in the schedule, and stream live video from the event.  After assessing the needs and wants of the project it was clear that Drupal would be an excellent platform for it - which we could use to build a robust dynamic website that would be easy to use whilst scalable and thus relevant after the event and again when next sessions of the event were held.

So, we decided to build a website using the latest available version of Drupal 7.x, with the newest versions of contributed modules that would offer the feature-set we needed.  Alone this would be an arduous task as this meant dealing with not-yet-stable code, but we further stressed the case by attempting (for the first time ever) to get it all working on Windows Azure.

* The site's design was bespoke and kept simple - developed in 1 week from a visual identity for the event which we created.

About Windows Azure

Already used by Volvo, General Mills, 3M, Bing, The Associated Press and hundreds of other world-class brands, Azure is a cloud platform for building web applications using Microsoft's international network of data-centers which leverages that network to ideally remove the concerns of hosting infrastructure from app developers' responsibilities.

Getting Started

Because Azure is essentially a distributed hosting platform for Windows software, we needed to setup a virtual host using Windows IIS Server that would then have PHP and MySQL installed, with a small suite of tools to let us work with the Drupal file system and database we finally had to install.  So, though working in the cloud is supposed to remove headaches of working with hosting infrastructure, we were faced with essentially kitting out a new server. 

After some poking around through discussion forms and Microsoft's own helpful blog posts discussing PHP on Azure it became apparent that there was a pretty straight-forward method to setting up all of this software with just a few clicks > we used a package installer called Azure Companion, which we loaded into our hosting instance with instructions on what software we wanted installed.  The instructions were sourced online via a handy XML script and once the hosting instance was configured with our software set, we could focus on building the site!

Here are the steps we followed to get Azure up and running with the Azure Companion:

  1. Sign up for a free account at http://www.microsoft.com/windowsazure
  2. Login to Azure's Management Portal (with a Windows Live account)
  3. Create a new Storage Account
  4. Create a new Hosted Service
    1. Choosing a URL to access the host via the Web,
    2. Choosing to deploy the Hosted Service to a 'Production Environment' (and ticking to start the deployment after setup),
    3. Selecting the installation package file we found online,
    4. Editing the configuration file for that installation package to reflect the Storage Account information we just setup and then choosing it for the new Hosted Service
  5. After waiting for a little while the Hosted Service was up and running and we popped over to the URL we had chosen (at port :8080 in our browser) to take a peek at the Azure Companion.
  6. Basically, there are three things we wanted the Azure Companion to install for us (+ anything it needed in order for them to run):
    1. Drupal (We chose to install it in the '/drupal' sub-directory)
    2. PHPmyAdmin (We chose to install it in the '/phpmyadmin' sub-directory)
    3. Extplorer (We chose to install it in the '/explorer' sub-directory)
  7. After selecting the Applications to install and clicking Next, Azure Companion set about installing the software +MySQL etc... and our fresh Drupal 7 install was available at the URL/drupal we set the Hosted Service up at.

Here are some resources came accross in our prelimenary research:

Now, along the way we made a couple of errors because we hadn't learned the following - but bearing these things in mind, it should be somewhat straight-forward to get a Drupal install up and running on Windows Azure:

  • This whole processes uses a Windows IIS server - so apache .htaccess (and age-old Drupal-standard URL re-write rules don't work on Azure), and instead - such rules are written into web.config files which work in a similar way to .htaccess - Drupal 7 now comes with a Windows-friendly web.config file in root but it needs to be edited in order for direct-access to subdirectories off-root.
  • The main way to access the site's file system (and that of PHPmyAdmin and extplorer) was using the 'extplorer' tool we installed via the Azure Companion - there is no SSH or FTP when using Azure (as your files are literally spread out between all sorts of machines and geographic regions).  This is important to remember because if you mess up the URL rewrite rules in the root web.config file it can be difficult to fix the problem!
  • Through the Azure Companion you can edit files one at a time - so even if you mess up your web.config in the root and can't access 'extplorer,' you can still go to the Companion at xxx.cloudapp.net:8080, look to the 'edit file' field and type in '../web.config' (or whatever file you know you need to fix which you can't otherwise access) and the Companion will load up an editing screen where you can make changes and save the new file with edits.
  • You can edit the php.ini file for your Hosting Service through the Azure Companion - click Admin and then Configure Runtime
  • The database server location is simply 'localhost.'

Through these steps we had setup our Drupal install and could continue onto actually building our website.

* Of course, if you're reading this and have already built a Drupal website and just want to move it onto Azure, you don't need to install Drupal through the Companion - just extplorer and phpmyadmin;

  • Create a new database via PHPmyAdmin and upload/import the database for your already-developed Drupal site/application,
  • Then use extplorer to upload and unpack your site's file system tarball - editing the web.config (and sites/default/settings.php file) as needed to reflect the rewrite rules and database location.

Drupal as Application Toolkit - Building govcamp.ca

Many of you reading this will be well familiar with Drupal, and likely have already explored what makes Drupal 7 tick.   To give you a sense of how the actual event website came together, here's some information on the 3rd party/contrib modules we used to build the site; asides from Azure, this is a great model for any event website.  Also - for any of you attempting to use Azure, you can be sure the modules we used work using the methods using Azure described in this post.

As CCK is in core for Drupal 7, we just needed to install a couple of field modules, a wysiwyg editor, Panels and Views plus some tools for improving overall user interface.  Our site theme was a derivative of Zen which we installed as normal; placing it into the sites/all/themes/ sub-directory.

Here is a list of all the modules we used on the site:

User Interface Tools:

  • Admin_menu - We used this classic tool to replace the new-in-d7 Overlay and Shortcut modules, saving wait time during development. 
  • Ckeditor - Our favorite standard WYSIWYG editor
  • IMCE - With its CKEditor file-browser integration, this makes for a good solution to allow users to upload and embed media in their posts (until d7's media module becomes more usable.)
  • Menu_position - This lets us define what content types are automatically child to specific menu items in the main menu - so that when someone clicks into a session detail post, for example, it will show within the highlighted 'schedule' page linked to in the menu, though the schedule is actually of 'Page' type.
  • Flag - Admins can flag session details and speaker bios for instant archival; archives are displayed listed in a View accessible from the main menu.  This allows for data to be temporal but still saved for future reference, with non-changing URLs (re: SEO)
  • References - Used to provide an auto-populating pull-down to admins when editing Session Leader posts - allowing them to dynamically relate the bios to Session detail posts (which we then created a themed embedded-in-content View for, to cross-reference both content types where defined).
  • Panels - For dynamic landing pages.
  • Views - For dynamic lists (such as the schedule-per-room on the Video Stream Panel).

Social/SEO Tools:

  • Opengraph_meta - Extending Drupal's native meta tagging to be Facebook-friendly and auto-generate per-post.
  • Pathauto - To write automatic semantic URL rules (so that all schedules are at '/sessions/sesstiontitle' for example)
  • Tweetmeme - To automatically include a widget on posts allowing site visitors to share a link to that post on Twitter.
  • Search404 - To automatically trigger a search for whatever term a site visitor attempted to use as a URL on the site.  This helps to direct visitors to content they are interested in, if its location has changed... (especially useful since we moved from last year's basic Wordpress install)

Administrative Tools:

As anyone familiar with Drupal will know, out-of-the-box, it affords very simple functionality for publishing just two kinds of content setup by-default for more static kinds of posts - we had to install the above modules in order to acquire the functionality needed for this specific project.  As well, we replaced the default theme with a derivative of the Zen theme framework which we created specifically for GovCamp.  (Using Zen significantly speeds-up development time and ensures some base x-browser operability.)

session leader page

We chose to create a site whereby organizers can create bio posts per-speaker and then link them to session-detail posts they also submitted to the site.  Initially this meant defining custom content types (a native feature to Drupal 7), then creating the dynamic Views and Panels to display content and overall site config + user role/permission definition. 

Through themeing, we made the site print references (using a View-block leveraging the Reference module) between speakers and their sessions onto each post so visitors can click through content and be lead through the schedule of events - which was entered into the site as a 'page' with a hand-coded HTML table representing what was happening when.  (Originally we created a View for the schedule but it couldn't be displayed in a way that Event Organizers expected so we opted to just code the table.) 

During the day of the event, a Panel was published which had some plain-page content describing each Auditorium's topical theme with links to pop-up a video-stream player for that Auditorium.  The panel used three columns in each there was a View-block per-Auditorium to display the sessions upcoming through the day (they were linked node titles with the date-field from each node, displaying just the time and not date using Custom Date Display).  This was the main launch-area for live-video stream content, which was served from the Streaming Network, a sponsor handling the video feeds directly.

Of course, one of the aims for this site was to make it live past the 2011 event - so we introduced an Archive on-site, which basically lists all Speakers and Sessions as soon as event organizers log in and toggle a javascript link on each post (provided for using the Flag module).  As soon as content is moved into the Archive, we can simply turn off the main-menu links for the Schedule and Speaker Listing until the next GovCamp event.

Final Notes & Source Downloads

Using the Azure Companion, getting Drupal up and running on Windows Azure is pretty straight-forward.  Its not the quickest environment (due to lack of SSH/FTP) to develop a site in - so we recommend porting a pre-developed Drupal website to Azure if you need to use it for hosting.

As Windows Azure will let you setup your site at a sub-domain (something like http://xyz.cloudapp.net) you'll probably want to mask it with your own domain name.  Unfortunately their hosting setup doesn't do custom DNS - so edit your existing domain and add a CNAME entry for the cloudapp subdomain > once thats working, you'll be able to access the site at your domain as well as the Microsoft-given one.

Attached to this post are some files we thought you might find useful - the root web.config file we created to get Drupal's URL re-writing working whilst enabling access to sub-directories (e.g. '/phpmyadmin') and a compressed archive of the site's database and file-structure. 

If you use the attached, remember:

  • You'll want to edit the web.config file to change the drive letter from 'f:/' to whatever is displayed in the path to your php.ini file via the Azure Companion's default phpinfo.php file, which gets installed into the root when Companion installs
  • Edit the sites/default/settings.php file to include the password to the database once its setup in your (Azure) Hosting System.
(Written by Qasim - Principal/Founder @ Design Guru)

Wednesday May 4 '11designguru.tv Episode 8 - A Conversation with Jon Lax

Jon is a Principal at Teehan+Lax, a User Experience design firm he co-founded with Geoff Teehan in 2002, based in Toronto Canada.

He has worked in digital media since 1994 - starting at Shift Magazine where he won a National Magazine Award nomination for his writing before joining Grey Interactive a couple of years later as a copywriter.

In this conversation with Design Guru Principal Qasim Virjee, Jon recounts his observations on the early state of the digital advertising industry in the 1990s - introducing the service offering and approach of his firm framed by the need for focused User Experience design in the early 2000s. In recent years, the growth of Teehan+Lax's team brought the need for a broader mandate - leading to differentiation of Projects from Platforms whilst defining a commitment to transcending the hourly rate through better articulation of the company's value proposition.

URLS TO VISIT:
designguru.tv
teehanlax.com

on TWITTER:
Jon Lax: twitter.com/​jlax
Design Guru: twitter.com/​designguru_org
Qasim Virjee: twitter.com/​qasim

(Written by Qasim - Principal/Founder @ Design Guru)

Tuesday May 3 '11TED Talk - Eli Pariser: Beware online "filter bubbles"

See video

This new TED Talk from thinker/activist (/co-founder of avaaz.org) Eli Pariser is interesting to me for his point that 'auto-personalized content and space' online is a fallacy.

A trend exemplified by Amazon's recommended-product feature a couple years ago has now become status quo; I routinely hear client wants for their web spaces to contextualize themselves to their users based on actions.  A major critique Pariser makes, which I agree with, is that this automation can become inhibitive to a sense of common experience - algorithms are increasingly determining per-user experiences on the Web and this challenges beneficial feelings of social interaction online.

Getting online at the end of the 1990s was thrilling for its Wild West sense of adventure and anonymity (remember filling out forms with usernames and addresses you made up on-the-fly?)  In an increasingly branded and commercial Web today, Web experiences are becoming less adventurous due to an a priori assumption that we are being watched.  I think that, though there are more tools on the web for rapid social interaction than ever before, our online social activity is less free because we are less anonymous and subconsciously (for the most part) feel that we cannot choose to control the atmosphere of online spaces we inhabit/interact-in.

(Written by Qasim - Principal/Founder @ Design Guru)

Monday May 2 '11Galleries in Wordpress

After my brother's wedding was over last week I was faced with in interesting dilemma; should I take the easy route and ask attendees to upload their photos to say, flickr, and then collate those to a common photo pool to then embed into the Wordpress website I had created for the couple... or, should I integrate a gallery to their website.

Though I think there are huge merits to using 3rd party hosted-media solutions like flickr (I frequently use my flickr account for hosting photos I blog from my iPhone, for example), I find that they aren't very community-friendly - especially flickr.  What I mean by this is that people can get together and pool their photos but that pool suffers from not being able to display images by any other sort than the date when they were added to the pool.  Furthermore, flickr doesn't really offer many ways to embed photos into external sites other than their slideshow widget - something a lot of 3rd party media hosts have demonstrated recently is an over-reliance on leveraging their APIs to satisfy integration applications, rather then servicing the end-user with a variety of tools (flickr could offer a skinnable embed widget like Vimeo does for example.)

So, after pondering this I realized that I should take a gander at the simplest approach to creating an integrated gallery - thinking that the Wordpress site already has user permission levels and I could create accounts on the site for friends and family to log into and create their own gallery, which would auto-display on a common page.

It didn't take long for me to decide on using a plugin called NextGen Gallery.  Despite having a cheesy name, this plugin offers some really simple but powerful features, including:

  • Images can be displayed using a variety of standard javascript options (like thickbox and lightbox),
  • Custom templates can theme galleries child-to your main Wordpress template,
  • Images within-galleries can be sorted multiple ways (e.g. Ad-hoc, Date/time taken, Filename etc...),
  • Per-user ownership of galleries (so wedding attendees can manage their own galleries),
  • Sidebar widgets,
  • EXIF data display (optional)

Now, at first glance I was excited for this to come together but daunted by having to set it all up.  Well, once I rolled up my sleeves the integration came together in just 1 afternoon - and that was mainly in CSS customization! 

Like with most Wordpress plugins, to create a gallery display, I had to embed a tag into a regular page - so I created a 'Wedding Photos' page, linked it to the main menu and had it auto-display all the galleries wedding guests with logins would be contributing to.  From there, I then created a small PHP customization to display the names of the contributors (taken from the 'display name' of their user login/account on the website).

It took me a while to figure the name display out, so I thought to include it in this post incase you want to use it: you'll need to edit the wp-content/plugins/nextgen-gallery/view/album-extend.php file (or whichever one applies to the display you are using), to include the following, wherever you want a name to display:

<?php $user_info = get_userdata($gallery->author); echo $user_info->display_name; ?>

A final thing to note is that NextGen Gallery has a strong community following - which translates to other contributed plugins which extend its functionality.  I recommend checking out NextGen Public Uploader (lets public users upload images through a simple front-end form item > no back-end login needed!) and NextGen Gallery SEO Titles (creates semantic URLs for galleries).

(Written by Qasim - Principal/Founder @ Design Guru)

Wednesday Apr 13 '11Featured Artwork for Spring: Bicycles!

To celebrate the weather changing over here in Toronto I've just changed our site backgrounds to hand-drawn bicycle art :)

You can see all the images in the gallery above - one loads as the site background randomly per page load.

(Cheers to the following flickr folks for their groovy images: nyoin, doubledareyaa & tps12 !)

(Written by Qasim - Principal/Founder @ Design Guru)

Monday Apr 11 '11Wordpress for Wedding Websites - approach and essential plugins.

The front-page shown with wordpress menu bar

As soon as I heard the good news about my brother's wedding date being set for this Easter, I began thinking about how I was going to build him a simple website that would allow the couple to edit their own content easily and solicit information from their friends and family - such as RSVPs and comments via a guest-book.

After some poking around online I came across a few terrible hosted solutions specifically marketed at non-techsavvy couples, which were either built in Adobe flash (which meant that they didn't play nice with google, were cumbersome to navigate, took time to load etc..) or feature-limited.  From there I questioned whether tumblr or Posterous could be a good platform - after seeing Posterous co-founder Sachin Agarwal's wedding website built as a simple blog I knew it would work well (especially for letting attendees post photos, videos and so on to the site), but kept coming back to the idea that I'd like the site to sit on my own hosting setup so I could make sure it stays online for a very long time.

The platform I chose to use was Wordpress and the site I created is http://www.kameelandkashfi.com

Here are some of the aspects of Wordpress as a wedding website platform I like, which helped make the choice:

  • Wordpress has an excellent iPhone app
    • Posting/editing posts on-the-fly is very easy,
    • I can monitor comment submission in real-time.
  • Multiple user accounts/login - the bride and groom can use the site as a collaborative blog in years to come; with posts being attributed to their author; this gives the site itself longevity,
  • Optional post commenting meant that I could create a Guest-book out of a simple single post with public commenting turned-on,
  • Plugins - installing new site functionality is fairly straight-forward, such as a forms plugin to handle an email RSVP form with captcha/spam protection,
  • WYSIWYG editing with full-HTML view; embedding iframe content, like Google Maps into posts was very easy whilst editing content for the bride and groom using Wordpress' editor buttons was simple as they didn't need to understand HTML to add/edit posts.

Here are some plugins I found essential along the development path:

  • Akismet - the popular spam blocking plugin from Wordpress parent company Automattik
  • Fast Secure Contact Form - to create the custom RSVP form; this simple plugin provides a Graphical User Interface that let me make a form in minutes > determining what fields I want to offer guests RSVPing (dietary restrictions, number in the guest party etc...), where the form should be emailed upon submission and what message to be displayed to people once they had RSVP'd.
  • Google Analyticator - an easy way to add google analytics/statistic tracking to the site, without editing the site template,
  • WP-Cufon - a down-scalable solution to display non-web-fonts; this javascript font-replacement system is a cinch to work with and let me covert custom forms I used in designing print materials, on the website for page headings etc...

I'm quite happy with how the site has turned out - it took just two days to design and build and has proven to be highly useable.  Of course, there isn't much content that goes into a wedding website but to have a simple publishing interface that allows the bride and groom to edit information easily and moderate their RSVPs & Guestbook posts right on their cell-phone has been amazing.

* Sidenote: I created a bespoke design inspired by research I did into pan-Islamic mosaic-tiled architecture.  Once I created the design in Photoshop, I simply edited the stock Twenty-Ten template that comes with Wordpress to my needs.

(Written by Qasim - Principal/Founder @ Design Guru)

Monday Apr 4 '11The value of Insight

Screenshot of Design Guru Insight
Map view of content

Recently, as an incubated Design Guru project, I created a website which collates posts from various publications across the web - all thematically related to innovation/technology and society.  The site auto-populates and updates posts every 5 minutes.

It seems increasingly difficult to keep abreast of the full mass of technological advancement these days and this new site has been a very useful tool over the past few weeks to sort through interesting posts at-a-glance using a few factors which are built-in:

  • Posts by incoming publication/feed (RSS/Atom),
  • Category/Tag - the site automatically pulls keywords from the posts, based on frequency of use, or otherwise applies pre-defined tags (which I've entered to sort the individual feeds),
  • Region - the site traces incoming IP addresses and combines that information with geo-referenced wording in post content to plot posts on a global map,
  • Channel - Feeds have been grouped into arbitrary clumps - to start with; Agency News, Objects, Physical Spaces, User Experience and Interface

The site has been named Design Guru Insight (http://insight.designguru.org) and has been entirely built using Open Source Software and then aesthetically themed to match our main website. 

Perusing Insight, you'll notice some neat functionality asides from the neat geo-locational tagging and mapping - particularly:

  • The site remembers your preferred display mode (detail/list/map),
  • Dynamic embed codes are available as widgets you can add to your own website - they auto-update with news as posted to feeds/channels and so on,
  • RSS feeds are available to throw into your own aggregator,
  • You can search through posts using keywords.

There will be some additional changes being made to Insight over the next few months - because the site is based on the Drupal framework, which we typically do web development work using, its very flexible and should be fun to add additional functionality to!

I'd love to hear what you think of the project; drop comments below!

(Written by Qasim - Principal/Founder @ Design Guru)

Tuesday Mar 22 '11Presenting the Media Social - launching in Toronto this Friday w/a post-SXSWi party!

The Media Social, 1st edition

the Media Social (http://www.themediasocial.com/)

1st edition - SXSW 2011 recap

Within-industry collaboration an ever-increasingly important aspect of working in Communications today. The Media Social is a monthly event focused on encouraging dialogue between professionals in the media industry.

For this, our inaugural event in Toronto, we're partnering with People Downtown to throw a fun party this Friday which will bring together a bunch of folks who have just returned from Austin, Texas from attending the South By Southwest Interactive Festival (SXSWi).  A few SXSWi attendees will be relating stories from their festival experiences at the beginning of the night (+ Julia from Port 25 will be speaking about a competition being run by WebNotWar) and after a couple hours of schmoozing the beats will get a little louder :) (Kind of like a post- http://canl.it/ experience).

* To help us get organised, please RSVP on Facebook

* This event is sponsored by the folks at port25.ca !

LINKS:
http://www.peopledowntown.com/
http://www.designguru.org/
http://www.themediasocial.com/
http://www.port25.ca/

(Written by Qasim - Principal/Founder @ Design Guru)

Tuesday Mar 15 '11Custom Time-stamping comments in Drupal 6

I had to do some digging to get a solution for this today and thought to clue you all in; for a while now we've been writing custom time-stamps on nodes yet always kind of left comments alone - so I didn't have a PHP snippet handy to bung into a project I was just working on... the trick was in replacing '$node->posted' with '$comment->timestamp' ... example below:

<?php print $author; ?>- Posted: <?php print format_date($comment->timestamp, 'custom', "M j 'y"); ?>

(Written by Qasim - Principal/Founder @ Design Guru)

Wednesday Mar 2 '11My 2 Cents on Apple's new iPad 2

The ever-increasingly rapid release cycle of Apple’s product generations is getting a little annoying – I feel like I just bought my iPad a few months ago, oh wait – I did (!), and there’s no way for me to get front and rear facing cameras on it etc… Given that the prices aren’t really changing on this second-gen iPad, my first-gen iPad feels relatively redundant. It would be nice to start seeing either hardware-upgrade paths being designed into Apple consumer electronics or a trade-in program for people who want to stay up-to-date with new versions of their hardware devices.

(Written by Qasim - Principal/Founder @ Design Guru)
Syndicate content