On my first ever blog post I’ve decided to go through the initial events and steps of the creation of the new Simantics website. I am going to explain the motivation behind all of this and also some techical details of how the website is built.

It all started in summer 2014 when we realized that our product Simantics System Dynamics did not have a proper website promoting its features and explaining how it can be used. I got (took) the responsibility of creating a website for it. Of course at first I had to get familiar with the current state of the three fundamental “programming languages” HTML5, CSS3 and JavaScript.

I spent maybe a week, if my memory serves me right, doing the website and once I was done with it I had gathered some experience with web development. Also I aqcuired some understanding on the current state of web design and what are the most useful frameworks in todays web development.

I came across libraries and frameworks such as jQuery, Bootstrap 3, Font Awesome and Lightbox 2.

I got familiar with the frameworks and found out how easy they are to harness and use even for an unexperienced web developer like me. I was fascinated by the fact how fast and easily one could develop responsive and mobile first websites without that much experience. I wanted to become better with the tools and frameworks so I, in quiet, decided to refresh the website of whole Simantics (yeah quite ambitious..)!

Idea

Simantics is already nearly a decade old thing and when I crawled the past news I found that the look of the Simantics website was renewed at least once before! Because there is no date set in the article I would guess the renew has happened in quite early stage in the history of Simantics. In the last renew Simantics was constructed upon Plone Content Management System (CMS). I had no experience whatsoever with Plone so I decided to migrate the website to Drupal 7 in which I had some previous experiences.

I think it was september 2014 when I made the first sketch of the new website, presented it to my co-workers and got a green light indicating that I can refresh the look of Simantics website. In september my studies also continued and we had other projects to do but the refreshing was brewing in the background once I would have the time to do it.

Execution

Now for the past month I finally have had the time to start doing this project here and there few hours a day twice a week. And by the time of writing this it is starting to get done. Some minor tweaking and styling is still left to do but the body and overall look and feel is there.

Website development

Technical Details

The back-end of this website runs on top of Drupal 7.

On the front-end this website utilizes HTML5, CSS3, JavaScript and some other third party libraries and frameworks such as

  • JQuery
  • Bootstrap 3
  • Font Awesome
  • Lightbox 2
  • maybe some more

Drupal 7

Drupal is an open source content management platform powering millions of websites and applications. It’s built, used, and supported by an active and diverse community of people around the world. Drupal advertises itself with the following quote:

Use Drupal to build everything from personal blogs to enterprise applications. Thousands of add-on modules and designs let you build any site you can imagine.

My personal opinion about Drupal is that at first it might be hard to understand and get the hold of it and to get it behave how you would like. As they state above there are thousands of add-on modules which might be a good thing or - bad. I wanted to have Lightbox 2 with my Drupal installation. I wanted to check if there exists a module for Lightbox and indeed there are several modules. It can be hard and time consuming to find the right module just for the case that you need. Also now when Drupal 8 is around the corner, many of the modules are not maintained or at least updated anymore.

JQuery

JQuery (correctly formatted as jQuery) is one of the most famous JavaScript frameworks there exists. Every web developer has heard of jQuery and what one can do with it. A quote from their website states that:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jQuery is very useful and versatile. Almost anything one could think of doing with JavaScript there exists a solution for that with jQuery. Because jQuery works cross browser the developer can concentrate on doing the scripting, not thinking if this part of the code works fluently in both Chrome and e.g. Internet Explorer.

Bootstrap 3

Bootstrap (with origins from Twitter) is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Lightbox is a small and simple JavaScript library for viewing images and creating image galleries.

If you reached this point, Thank You for reading this!