Software Programming

Kunuk Nykjaer

Archive for the ‘Development’ Category

React ES6 getting Started – slides

leave a comment »

I made a slide about React ES6 getting started, you can view it here

https://doсs.google.com/presentation/d/19YgTFjvgsuTIfC7NdX8QXyf43U4LKjf8xZM2342_sO8/

Written by kunuk Nykjaer

August 22, 2016 at 10:06 am

Posted in Development, Javascript

Tagged with

Sitecore MVC walk-through of refactoring a static website

leave a comment »

About

I will give an example of refactoring a static responsive website into an existing web management system (WMS) or a content management system (CMS).
More specifically this is an example of how a static webpage can be extracted into a Sitecore MVC system.

Summary

The static website is a one-page website where content and presentation are hard-coded into one big html file.

The page is refactored to different sections of views and the content is extracted into the WMS as data sources for the corresponding views.
The result is a one Layout, which has sections of views with their data sources.

Examples of static and dynamic view binding has been provided, examples of how to use shared data sources and how to code for unknown N items to be rendered.

Disclaimer

To understand this post you properly have to know some level of Sitecore.
There are many ways to structure and place the templates and data. This example is just one approach of many possibilities.

Some might argue that a better best practice is to use custom view-models, mapper tool/approach like Glass mapper, alternatives to used navigation data source setup.
In a real bigger project that might be the case, but for this task I chose the simple and faster approach.

Visual studio files and Sitecore package

All the created items and files for this refactoring task are available at.
https://github.com/kunukn/Sitecore/tree/master/startbootstrap-creative-example/Sitecore8

If you want to play with the result:

  • Install the Sitecore package
  • Add the VS files to your Sitecore project and deploy

Sitecore

This is a commercial WMS based on the .Net stack. Sitecore MVC is based on Asp.net MVC.
Sitecore is considered as one of the leading WMS according Gartner and Forrester Research.

Creative Bootstrap theme

License & Author Details:
Apache 2.0 by Start Bootstrap
http://startbootstrap.com/template-overviews/creative/
https://github.com/IronSummitMedia/startbootstrap-creative

Live preview of the static markup can be seen here
http://ironsummitmedia.github.io/startbootstrap-creative/

The webpage is responsive and the layouts adapts to different screen sizes.
The page has a navigation on the top with the following navigation items:
about, services, portfolio, contact.
When you click on the navigation item, it scrolls to the section of the page.

Here is the bird’s eye layout structure of the webpage.

bootstrap theme

We have a hero and a download section that is not part of the navigation.

Analysis and strategy

As it is a one-page website, we will only use one Layout. The different sections of the page will be extracted to separate views.

There are no business logic in this example.
That makes the re-factoring all about moving content inside the Sitecore WMS.

I will only use View Renderings to keep things simple. Controller Renderings are not needed for this re-factoring task. I will only use the model RenderingModel. That means no custom view-models. Sometimes the code will be cleaner when using custom view-models, but I want to keep things as simple as possible for this example. I will instead create a helper method to make the code in the view more DRY.

The location of the files will be centralized as much as possible to make it easier to maintain and to isolate it from other Sitecore stuff.

For the Visual studio (VS) project.
All the assets files will be moved to the folder /assets/start-bootstrap
All the layout and views will be created in the folder /Views/start-bootstrap

visual studio


 

My Sitecore installation runs at http://sitecore8.local
The url of the page will be at http://sitecore8.local/start-bootstrap

The naming strategy is to use meaningful names and to align the names in the VS project with the Sitecore items.

For the Sitecore content setup.
All the content will be at sitecore/Content/Home/start-bootstrap
The layout file will be at sitecore/Layout/Layouts/start-bootstrap
The renderings files will be inside sitecore/Layout/Renderings/start-bootstrap
All the templates will be inside the folder sitecore/Templates/start-bootrap

sitecore

The approach

The approach is relatively trivial.

  • The first step is to get the static website to work in Sitecore.
  • The following steps is to gradually re-factor the code until the content and presentation are separated into to logically allocated views and where the fields are editable in edit mode.

This is the steps I am going to follow.

strategy


 

Step 1.

Get it to work with Sitecore.

Create the layout file start-bootstrap.cshtml in Visual studio and copy the content from index.html into the cshtml file.
Update the resource path to start from ~/assets/start-bootstrap

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Creative - Start Bootstrap Theme</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="~/assets/css/bootstrap.min.css">
...

start-bootstrap.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Creative - Start Bootstrap Theme</title>

	<!-- Bootstrap Core CSS -->
	<link rel="stylesheet" href="~/assets/start-bootstrap/css/bootstrap.min.css">
...


 

In Sitecore I create a start-bootstrap item below the Home item with a basic template (no fields for now).
I create a Layout item called start-bootstrap with path to /Views/start-bootstrap/start-bootstrap.cshtml.
The start-bootstrap item is set to have the created layout.

Now I am ready to test that it works in Sitecore.
I start my browser at http://sitecore8.local/start-bootstrap?sc_mode=normal and check the console for errors.

It complained about woff2 extension types so I added this in the web.config and re-published the website and the errors went away.
This is because my IIS has to know it is allowed to run those file extension types.

  <system.webServer>
    <staticContent>		
      <mimeMap fileExtension="woff" mimeType="application/font-woff"/>
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2"/>    
    </staticContent>
  </system.webServer>

I tested re-sizing the screen and navigating around. Seems to work. So far so good.
What I have a static website inside Sitecore that works.


 

Step 2

The next step is to re-factor the start-bootstrap.cshtml file in to multiple views.

What I would like to have is partial views for each section in the webpage and separate the content into data sources. I will wait with the data sources until step 3.

The following views are created.
navigation, hero, about, services, portfolio, download, contact.

The navigation and hero will be statically bound because those sections have fixed positions for the webpage. Navigation is always at the top and the hero section is the landing page.
The remaining sections will be dynamically bound which means the section order can be changed.


 

A static binding with a data source looks like this.

@Html.Sitecore().ViewRendering("path-to-view-file.cshtml",
		new { DataSource = "path-to-sitecore-data-source-item" })


 

A dynamic binding looks like this

@Html.Sitecore().Placeholder("placeholder-name")


 

index.html

...
<body id="page-top">

<!-- navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">...</nav>

<!-- hero section -->
<header>...</header>

<!-- about section -->
<section class="bg-primary" id="about">...</section>

<!-- services section -->
<section id="services">...</section>

<!-- portfolio section -->
<section class="no-padding" id="portfolio">...</section>

<!-- download section -->
<aside class="bg-dark">...</aside>

<!-- contact section -->
<section id="contact">...</section>

...

start-bootstrap.cshtml

...
<body id="page-top">

<!-- navigation -->
@Html.Sitecore().ViewRendering("/Views/start-bootstrap/navigation.cshtml",
new { DataSource = "/sitecore/content/Home/start-bootstrap/data sources/navigation" })

<!-- hero section -->
@Html.Sitecore().ViewRendering("/Views/start-bootstrap/hero-section.cshtml",
new { DataSource = "/sitecore/content/Home/start-bootstrap/data sources/hero section" })

<!-- The remaining sections -->
@Html.Sitecore().Placeholder("section")

...


 

The content from the index.html are split out into the following views.

views


 

The layout files include all the partial views through static and dynamic binding. The layout file is decided to be in the start-bootstrap folder to keep the files centralized as much as possible.

In Sitecore the sitecore/Content/Home/start-boostrap item has the following presentation details setup.

setup


 

The dynamic binding of the about section Rendering is as follows.
All the other dynamic views also has the section value for the placeholder key.

about section


 

The content of the navigation.cshtml is simply the the navigation part refactored to that view.

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 
              data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
     <       </button>
            <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" href="#about">About</a>
                </li>
                <li>
                    <a class="page-scroll" href="#services">Services</a>
                </li>
                <li>
                    <a class="page-scroll" href="#portfolio">Portfolio</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>


 

Step 3

Now this is the most fun part. We separate the content into data sources.
This is all my created data sources for the views.

data sources


 

The navigation items are created as children items of the navigation data source.
With this approach we can have N navigation items and avoid hard-coding the number of items in advance.

There is a navigation item that links to the about section.
I add a data source type in my about section data source which points to the about navigation item.

A data source type is a reference type.
Now the about navigation item is shared by the navigation view and by the about section view
If I need to update the navigation link I will only do it once.
This ensures a DRY-way and is less error prone for content management where I don’t have to remember to update data multiple places.

about data source


 

A dynamic field binding which is editable in edit mode looks like this.
The Model.Item will be used when a Sitecore item is not provided in the html helper method.


@Html.Sitecore().Field("field-name")

 

A specific Sitecore item can also be applied for the field.

@Html.Sitecore().Field("field-name", item)

navigation.cshtml is updated to use a data source.
To render the N navigation items a foreach loop is used.

@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore.Data.Items
@model RenderingModel
			
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" 
			  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand page-scroll" href="#page-top">
				@Html.Sitecore().Field("title")
			</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">				
			@foreach (Item navigationItem in Model.Rendering.Item.Children)
			{
				<li>
					<a class="page-scroll" 
						href="#@Html.Sitecore().Field("link", navigationItem)">
						@Html.Sitecore().Field("title", navigationItem)
					</a>
				</li>					
			}
			</ul>
		</div>
		<!-- /.navbar-collapse -->
	</div>
	<!-- /.container-fluid -->
</nav>


 

I use the following extension helper method for the views to get to the data source referenced item.

ItemHelper.cs

using Sitecore.Data.Fields;
using Sitecore.Data.Items;

namespace Sitecore8.Models
{
    public static class ItemHelper
    {
        public static Item
        GetDataSourceTargetItemByFieldName(this Item item, string fieldName)
        {
            DatasourceField datasourceField = item.Fields[fieldName];
            return datasourceField.TargetItem;
        }
    }
}

 

about.cshtml is updated to use a data source.

@using Sitecore.Data.Items
@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore8.Models
@model RenderingModel	
		   
@{
	Item linkItem = Model.Rendering.Item
		.GetDataSourceTargetItemByFieldName("navigation item");		
	var link = linkItem["link"];
}
 		
<section class="bg-primary" id="@link">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 text-center">
				<h2 class="section-heading">
					@Html.Sitecore().Field("title")
				</h2>
				<hr class="light">
				<p class="text-faded">
					@Html.Sitecore().Field("teaser")
				</p>
				@Html.Sitecore().Field("link")
			</div>
		</div>
	</div>
</section>

 

Now the about section is editable.
I type this in my browser and navigate to the about section.
http://sitecore8.local/start-bootstrap?sc_mode=edit

I can edit the fields, great.
about edit mode

But I cannot save!?
My browser console log shows
Uncaught TypeError: saveButtonState.onchange is not a function

It seems the JavaScript used by Sitecore in edit mode and the JavaScript files in the webpage are colliding somehow.

I postpone the deeper investigation and as a quick fix for now, I ensure the webpage JavaScript are not running in edit mode.
I update my Layout view file.

 

start-bootstrap.cshtml

...
@if (Sitecore.Context.PageMode.IsNormal)
{
	<!-- jQuery -->
	<script src="~/assets/start-bootstrap/js/jquery.js"></script>

	<!-- Bootstrap Core JavaScript -->
	<script src="~/assets/start-bootstrap/js/bootstrap.min.js"></script>

	<!-- Plugin JavaScript -->
	<script src="~/assets/start-bootstrap/js/jquery.easing.min.js"></script>
	<script src="~/assets/start-bootstrap/js/jquery.fittext.js"></script>
	<script src="~/assets/start-bootstrap/js/wow.min.js"></script>

	<!-- Custom Theme JavaScript -->
	<script src="~/assets/start-bootstrap/js/creative.js"></script>
}
...

And now I can click save and update the fields in edit mode.

 

services-section.cshtml is updated to use a data source.
The icon can be updated by a text-field in edit mode.

Depending on the page mode the content can be adjusted by checking the PageMode.
E.g. this snippet only runs in edit mode.


@if (@Sitecore.Context.PageMode.IsPageEditorEditing)
{
...
}

@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore.Data.Items
@using Sitecore8.Models
@model RenderingModel

@{
	Item linkItem = Model.Rendering.Item
		.GetDataSourceTargetItemByFieldName("navigation item");
	var link = linkItem["link"];
}

<section id="@link">

	<div class="container">
		<div class="row">
			<div class="col-lg-12 text-center">
				<h2 class="section-heading">
					@Html.Sitecore().Field("title")
				</h2>
				<hr class="primary">
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">

		@foreach (Item serviceItem in Model.Rendering.Item.Children)
		{
		<div class="col-lg-3 col-md-6 text-center">
			<div class="service-box">
				<i class="fa fa-4x fa-@serviceItem["icon"] wow bounceIn text-primary">
				</i>

				@if (@Sitecore.Context.PageMode.IsPageEditorEditing)
				{
					<div>
						@Html.Sitecore().Field("icon", serviceItem)
					</div>
				}

				<h3>
					@Html.Sitecore().Field("title", serviceItem)
				</h3>
				<p class="text-muted">
					@Html.Sitecore().Field("teaser", serviceItem)
				</p>
			</div>
		</div>
		}

		</div>
	</div>
</section>

 

Services section data source

The icon is simply a text-field type.
The icons used are from Font Awesome web-fonts and they use css classes with fa- prefix.

services data source

 

Services section in edit mode

services edit mode

The icon text-field is only displayed in edit mode.
Here I can for example type car and click save to update to a new icon
Font Awesome car – http://fortawesome.github.io/Font-Awesome/icon/car/

I will stop the walk-through now as the rest of the refactoring is similar in method to what has been presented.

The rest of the refactored views are available to see at my GitHub repository:
https://github.com/kunukn/Sitecore/tree/master/startbootstrap-creative-example/Sitecore8

 

Dynamic binding of the views.
Because the last 5 sections were dynamically bound I can easily re-order them in the layout.
In Sitecore I go to presentation details and re-order so the download section is at the top.

sc sections reorder

Then when I re-load the webpage I can see the download section is now at the top just below the hero section.

sections reorder

 

Prerequisites

You will need to have Sitecore 8 installed and running, xDB is not needed for this example.

Installation guide

http://www.sitecore.net/Learn/Blogs/Technical-Blogs/Getting-to-Know-Sitecore/Posts/2014/12/Sitecore-8-and-Sitecore-Instance-Manager.aspx

I have used these steps to setup my Sitecore installation
https://github.com/kunukn/Sitecore/blob/master/Installation/Sitecore8/README.md

Reference learning materials

http://jockstothecore.com/sitecore-mvc-item-maze/

https://www.youtube.com/user/SitecorePM

Written by kunuk Nykjaer

May 17, 2015 at 2:05 pm

Browser only CMS

with 2 comments

This is an idea for a very minimalistic CMS solution.

You only need a browser to run the CMS solution. No web-server or DB are needed to host your CMS solution.

The content is separated to a resource folder (the content folder).
Text resources are stored inside a JavaScript file and not on a markup (html) page.

Here’s a snippet example of multiline text in markdown format stored in the resource file.

app-data.js

 Site.data = {
        multiline: function() {
            /*!
# browser only cms

**Dependencies:** 
any modern browser and your favorite text editor.

Open the index.html with your browser.

  * Your browser is the server
  * Your CMS is the content folder
  * Your CMS editor is your favorite text-editor.

To edit the content open the 
`content/text/app-data.js` file 
and refresh your browser to see the update.
            !*/
        }.parseMarkdown()
}


 

Browser only CMS is available at https://github.com/kunukn/browser-only-cms

Written by kunuk Nykjaer

February 24, 2015 at 10:52 pm

Posted in Development, Javascript

Tagged with ,

json-server is not recognized as an internal or external command

leave a comment »

if you want to run npm json-server on a windows the command json-server might not exists.

It’s probably because your missing this on the system PATH variable:
C:\Users\YOUR_NAME\AppData\Roaming\npm

You should check and add it if it is not already added, then open a new console and try again.

Alternatively you can start the server (requires nodejs and json-server installed) in the command prompt with:
node “C:\Users\YOUR_NAME\AppData\Roaming\npm\node_modules\json-server\bin\index.js” db.json

 

Or you create a bat-file and name it run-json-server.bat with the content:
node “C:\Users\YOUR_NAME\AppData\Roaming\npm\node_modules\json-server\bin\index.js” %1 %2 %3 %4 %5

E.g. to start the server on port 3001 and with a db.json file.
run-json-server -p 3001 db.json

Written by kunuk Nykjaer

February 21, 2015 at 4:37 pm

Posted in Development

Tagged with ,

Web application development steps of creating working software

leave a comment »

The steps represent the process of creating features for a web application.

Web application development steps for working software


 

Client-side is the browser.
Client-side only means it is not dependent on a back-end server.

Step 1 – prototyping

This is the step where you make a proof of concept of ideas and make demonstration for the customer to get early feedback. The content is hard-coded inside the presentation. When you search for html templates on the internet they will almost always be based on step 1.
e.g.


 

Step 2 – dynamic content

This is the step where you separate the content from presentation. You have verified that the presentation is accepted. You create a client-side template layout to enable dynamic presentation rendering. If you don’t want a single page application you can sometimes skip this step and go for a server-side template layout. The content is usually json-data where a client-side template system is used to render the presentation. This steps also enables more flexible adjustment of the content and enables easier testing of the presentation result by experimenting with the content without needing a backend server-system.


 

Step 3 – backend power

This is the step where you implement the communication between the client and the server. The content resides at the server-side. The server delivers the content to the client. If you don’t use a client-side template layout you create a server-side template layout. The data is usually to be persisted securely somewhere and that is almost always at the server-side. That’s why you will need this step.

Examples

The visual result of the code samples below can be seen here.


 

Step 1

Presentation and content are mixed

html

<section class='spots-section clearfix'>
    <div class='spot apple'></div>
    <div class='spot orange'></div>
    <div class='spot banana'></div>
    <div class='spot tomato'></div>
    <div class='spot silver'></div>
</section>


 

Step 2

Presentation and content are separated (Knockoutjs code sample).

html

<section class='spots-section clearfix' data-bind='foreach: spots'>
    <div class='spot' data-bind="css: type"></div>
</section>
<script src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js'>
</script>

javascript

var app =
    (function () {
        var spots = ko.observableArray([
            { type: ko.observable('apple') },
            { type: ko.observable('orange') },
            { type: ko.observable('banana') },
            { type: ko.observable('tomato') },
            { type: ko.observable('silver') }
        ]);
        var data = {
            spots: spots
        };
        ko.applyBindings(data);
        return data;
    })();

I have the flexibility to dynamically edit or add/delete content at run-time.

e.g. to add an apple spot i can use this code.
app.spots.push({type: 'apple'})

e.g. to change the first item to a tomato i can use this code.
app.spots()[0].type('tomato')


 

Step 3

For this step we can keep the client-side template and communicate using ajax or we can create a server-side template instead.

Here’s a simple similar server-side version of the client-side template in Asp.net MVC Razor and PHP Twig.

Razor

@model List<string>
		   	 
<section class='spots-section clearfix'>
	@foreach (var type in Model)
	{
		<div class='spot @type'></div>
	}
</section>

PHP Twig

<section class='spots-section clearfix'>
{% for spot in spots %}
    <div class='spot {{ spot.type}}'></div>
{% endfor %}
</section>

Written by kunuk Nykjaer

February 15, 2015 at 3:20 am

Posted in Development

Tagged with

How to build a minimum viable product – not like this – like this

with one comment

Cool image randomly discovered on Linkedin.

minimum-viable-product

http://en.wikipedia.org/wiki/Minimum_viable_product

The idea is simple.
Make the minimum usable product as fast as possible to get feedback.
With the feedback you can adjust progressively until you get the desired outcome.

The image makes me think of the difference between the Waterfall model and the Scrum model.

I discovered a similar image on the Internet from the blog The Myth of Incremental Development

minimum-viable-product2

Notice the difference in the emotions and the car result. There are two different kind of cars.

The person is highly dissatisfied until the car is produced in the first line. That’s makes sense. Nothing is usable until the very last result.

In the second line the person is dissatisfied for the skater product. Maybe the skater product was not wanted by the person.
Slowly the happiness increases as newer products are produced.

The key difference is the feedback loop.

What if it took X years to build the car and it was the wrong kind of car?
Maybe it was the right car X years back but we are X years wiser now.
Then it would have taken X years to find out that we are building the wrong thing.

Written by kunuk Nykjaer

October 12, 2014 at 10:42 am

Posted in Development

Tagged with ,

Build it up! – Prix Italia 2014 winner

leave a comment »

I was part of building a website called Build it up! (In Danish ‘byg det op’) for the Danish Broadcasting Corporation (DR).

about build it up

Lately I heard it won the prize Prix Italia 2014 – Web competition in Torino.

About

This was a fun project for me and I will share some of my insights of my part in the project. The interesting part of this project is how DR was able to interact with the Danish people using both web, radio and TV as the platform on a unified project.

The project was about letting the Danish people suggest projects and nominate candidates for realizing new architectural ‘beautiful’ building projects in Denmark.

The project had collaborations across different media types: web, radio and TV broadcasts. The web was the platform where users could interact and add suggestions with location, descriptions, photos and videos. The radio had programs and interviews with the stakeholders of the project. The TV broadcasted in documentary style the process and result of realizing the winner projects.

DR had allied with Danish Architecture Center (DAC) and various funding companies sponsoring the projects.

There were many stakeholders for the project. DR, DAC, architecture firms, funding companies, municipalities, the candidates for the winner project, local communities where the project was to be build.

Web development

We were two main developers (coders) for the project. I was the backend developer and Christian Planck was the frontend developer. As I remembered it, the web development process lasted for about 1-2 month before go-live date.

We used Scrum and the website have integration to CMS, Google Maps and a photo, video upload system. We were able to produce the result in short time span because DR has build a tool (framework) for configuring CMS integration and web view rendering (and because we were skilled developers 🙂 )

The webpage was to be mobile friendly where users could upload suggestions from their phones and attaching photo and video.
The webpage have a public access where the Danish citizens could interact and provider suggestions and a private admin site for monitoring, searching and examine the suggestions.

States

The website had different states during the timeline.

  • Suggesting state – Open for adding suggestions
  • Jury state – Closed for adding suggestions
  • Voting state – Open for voting, voting menu available
  • Winners found state – Closed for voting


Timeline

This is the timeline as I recall it. As a developer, my focus was in the web area. I might have missed some of the details in the radio and TV timeline.

build it up process

Written by kunuk Nykjaer

October 5, 2014 at 12:43 pm