Final solution

After several hours of hard work, this is our final contribution for the ASPC 2014.

Initial idea

We started of with a basic idea. A meeting application with SharePoint integration. Some of the first scetches are listed below.

diagram moteapp_hovedside

Since some of our team members experienced problems with the SharePoint login, we decided to work around that with a nice hack which also resulted in the nasty hack badge.

Responsive design

After a little while we got the solution up and running locally, illustrated in the screenshot below.

solution_v1

Most web pages in 2014 are responsive, so we made our solution responsive as well.

Retro – doh!

Everybody loves Super Mario. We therefore decided to give the user the good, old retro feeling by playing a sound effect from Super Mario Bros 3 whenever moving to the next agenda point.

Discussion threads

The meeting application allows users collaborating and communicating in real-time with the use of SignalR.

We also wanted to encourage the participants to write faster and more with a keyboard stroke speedometer, with the graphical usage of D3.js.

Into the sky

At the end of the competition we manage to move the solution into the sky, making it available for everyone. The solution exists on the following link:

http://aspc2014.azurewebsites.net/

Screenshots of the final design:

2014-03-29-0948

Connecting to a meeting and starting a discussion:

See the meeting discussions from a meeting:

Change the agenda for a meeting:

 

 

 

Stealing (?) code from msdn

In the lack of time, and wanting to get some nice styles to our openxml-document. MSDN came to the rescue.

The following article describes some styling of an openxml-document: http://msdn.microsoft.com/en-us/library/office/cc850838(v=office.15).aspx

And this is a copy of our codeThieve

We believe this is some kind of poor mans stealing, and could qualify for:

thieving_bastards

 

Bekk Appsters!

 

 

 

We have made a provider-hosted app running on azure websites.

Here is a small preview for you:

appster

 

The app is running in the cloud, so we believe it would qualify for:

clip_image0018.png

 

and:

clip_image00116.png

Thieves.

Instead of reinventing the wheel, our solution takes advantages of the following third-party solutions and happy helpers:

  • D3.js
  • Angular
  • SignalR
  • Foundation
  • NPM
  • Ruby
  • Bower
  • Azure

This should be enough for the thieving bastards badge:

thieving_bastards

The design of the design

To provide a good user experience we first and foremost need to ensure that our app looks good. We’ll briefly discuss our design decisions, and see how the design has evolved from the initial paper mockup. So, here’s the paper mockup upside down:

Paper mock-up

We decided to implement the design using Foundation. This is how it looked like when the basic elements were in place:

2014-03-27-1144

Next, we styled it. We decided to mimic that sharepointy, metrofied look and feel. Except for the box to type comment into, our design is completely flat. The typeface in use is Segoe UI. We use the light weight for the headings and the normal weight for everything else. Just like SharePoint, the links in the top navigation bar appear in uppercase, and we’ve stolen SharePoint’s vibrant blue color for our primary color (that does qualify for a thieving bastard badge, right?):

2014-03-29-0948

A few other things. We have used icons sparingly. Foundation has a nice set of icons, and the icons that we use involve people and conversations. A wide progress bar right below the header shows the progress of the meeting. Other than indicating progress, it also acts as a separator between the heading and the content. Lastly, you might have noticed that we replaced lorem ipsum with slipsum. (We’re not sure why we did that.)

We aim for the following badges:

glossy

salsa

Into the sky

SharePoint online is in the wind these days, so why not have our solution in the sky as well?

Visit the following link to see the solution:

http://aspc2014.azurewebsites.net/

This aims at the following badge:

stairway

Foundation customized with Sass

Instead of simply referencing Foundation (or Bootstrap) using a CDN and throwing some customization on top, we wanted the implementation of our design to be rock solid by integrating our choice of colors and typography directly into Foundation.

Long story short, we followed the installation guide on the Foundation website, and we ended up installing Ruby, gem, Node.js, npm, bower, grunt, sass, and the Sass-variant of Foundation. While this does increases the tooling complexity a bit, we believe that it is worth the effort as we now use bower to package manage our JavaScript dependencies.

This aims for the following badge:

hipster

Awesome(?) dashboard

Statistics are fun. We all know and agree to that.

What’s even more fun is the fact that one can produce completely useless statistics for almost anything.

We wanted to inspire the user to type more, and faster, comments when participating a meeting. A nice keyboard stroke speedometer solves this feature in an excellent way.

Thanks to D3.js for the creation and control of dynamic and interactive graphical forms.

We believe this qualifies for the following badges:

thieving_bastard

dash_it_out

PowerShell

Windows users have for a long time envied the UNIX crowd for their super-capable shells and terminals – especially compared to the crippled cmd.exe that can only be scripted with statements such as label and goto.

But – it is 2014, the tables are turned, and you might even not have realized it. Yes, the default terminal program that ships with Windows still sucks, but Windows comes with PowerShell – that in combination with ConEmu in many ways are better than bash, zsh, fish shell or whatever shell you might still be using.

To make ourselves super-productive productive, we wrote a set of functions and aliases for PowerShell that did wonders for our workflow. Here is a $profile example that you might use as a starting point to improve your command line workflow.

function prompt {"$PWD "}

Set-Alias c Set-Location
Set-Alias cl Clear-Host
Set-Alias g git
Set-Alias v vim
function l { Get-ChildItem | Format-Table -Property Mode, LastWriteTime, Length, Name -AutoSize -HideTableHeaders }
function u { Set-Location .. }
function vp { vim $profile }
function gg([string] $message) {
    git add -A :/
    git commit -m "$message #issue"
}
function ggg([string] $message) {
    git add -A :/
    git commit -m $message
}
function code {
    Set-Location $env:userprofile\Documents\Code
    Clear-Host
    l
}

code

This aims for the following badge:

powershell

SignalR

SignalR is a server-side software system designed for writing scalable Internet applications, notably web servers. Programs are written on the server side in C#, using event-driven, asynchronous I/O to minimize overhead and maximize scalability.

Our solution allows users collaborating and communicating in real-time with the use of SignalR.

This qualifies for the following badge:

rightnow