It’s already more then a month after coming back from my trip to South Africa and I think it’s time to start blogging again. After my trip people asked me what did you learn in South Africa? How did the experience influenced you? Well I won’t answer those questions right now, but I will try to write a post about the South African experience a bit later. One thing I can write already is that getting out of your comfort zone can be difficult but is completely worth it!

During the last 3-4 weeks I’ve been working on some new stuff for Christiaan’s collection. Resolving some minor faults that sneaked in during the work before I left for my trip. This post will be about the improvements I made in the last couple of weeks.

News overview

First off there is a new section called news overview. The idea behind the news section is to give an overview of the biggest cyber incidents of last year. For now there are two concept entries online. The first one is for December 2014 and it’s about the Sony Pictures Entertainment hack. The second entry is for November 2014 and it’s about the Regin spyware. The news section will evolve in the next couple of months. The examples below are about 3 MB each.

Sharper icons

Probably one of things you learn when designing a website is to use the right icon format. When I started to build the websites I was glad I could use Portable Network Graphics (PNG) images as icons. I choose this file format because of the compression on the icon images. Can remember that I had a lot of work resizing all the images so they would be the same. Now all the icons on Christiaan’s collection are in Scalable Vector Graphics (SVG) format. This means that the user’s browser draws the icons instead of receiving a image.

An example of the drawing instructions for the awareness icon:

SVG drawing instructions for the awareness icon

SVG drawing instructions for the awareness icon

Because I’m using the SVG format the icons can’t get blurry anymore. A standard WordPress installation doesn’t have support for SVG, you can add it manually. I used the plugin ‘SVG support‘ to add it. For editing SVG images I use the free program SVG-edit, a web based program that has a lot features for editing SVG graphics. You can use the online or offline version.

While replacing all the icons they are bigger now. All the icons are resized to 96 x 96 pixels, first the icon size was 64 x 64 pixels. The height for all the icons is the same, some broader icons use the 128 pixel or 168 pixel width. The icons have now an easy to understand filename.

For example: main_communication_128_96_black. This means the icon belongs to the main category communication, the icon width is 128 pixels, the icon height is 96 pixels and the icon color is black.

Before changing all the icons to the SVG format I found an interesting article comparing SVG format with the Icon Fonts format. The article ‘Inline SVG vs Icon Fonts [CAGEMATCH]‘ gives a nice overview of both the file formats, I can recommend that you read the comments section.

New videos

For the last 2 weeks every day a new video was added to the collection. I will need to add new videos to the posting queue for the next couple of weeks. The idea is to release a technical or less technical video every day. I can recommended to watch What does the Internet of Things mean? and Do schools kill creativity?.

Knowledge is the life of the mind

The next big thing is adjusting the layout of the video entries. After my return I looked at the video entries and thought it’s time to expand the entries. After some experimenting with different layouts and some inspiration of different websites I came to a layout that I think will fit in. The new layer is meant for extra information and content related to the subject of the video. The layer is going to be added to the technical and less technical videos.

The new layer is already added to a couple of technical videos. Some examples below, the images are about 3 MB each.

At the moment it takes me about half a day per video entry to find the right content and add the content into the proper layout. During the update of a video entry, especially the technical video entries, I’m reviewing the video entry. Some of the first entries use old (and to big) backgrounds, the used images haven’t been optimised so it takes longer to load an entry.

I’m also changing some titles and the URL of a video entry. I’m using the WordPress plugin ‘Redirection‘ to automatically redirect content that has an URL change. Because I’m using the plugin visitors won’t get a ‘404 / Page can’t be found’ page. The plugin automatically generates a log with statistics about the performed redirections, which I like.

Sometimes the category of a video entry doesn’t fit anymore because there are now more categories available then when I started to build the website. Because it’s now easier for me to add new content it’s also easier to expand the existing categories for the technical videos. During the next couple of months some of the categories will be rearranged.

Editing images

I’ve been experimenting a bit with GNU Image Manipulation Program (GIMP). GIMP is a sort of Photoshop like open source software that can be used to create and edit images. It has a lot of functionality in it and because it’s open source you don’t have to pay for the use. After playing a bit with the software I find it easy to use.

With GIMP I’m creating the ’rounded’ images you see in the examples above and also the ‘3D effect’ for the new header of Christiaan’s collection.

Example of new header for Christiaan's collection

Example of new header for Christiaan’s collection

Experience is one thing you can’t get for nothing

The last thing is probably to most exciting one! It’s time to get back to work. I’ve been putting that thought off since I’m back from my trip, but just like anyone else I need to go back to work. Although working on the websites and other hobby projects is great, but it can be lonely sometimes. My trip to South Africa made me realise what I want and that’s why I’m going to start my own company.

After coming back from my trip I had some seconds thoughts and doubts, but I think it’s time to get out of the comfort zone again! I will try to write about the experience of setting up my own company during the next couple of months. Only way to end this blog post proper: #GoForIt

Learned today (and other days)

  • ‘Forgetting’ Christiaan’s collection for 2 months helped to inspire new ideas. It’s good for the creative process.
  • For icons it’s better to use the SVG file format instead of PNG. Whether you choose SVG or the Icons Fonts format depends on your needs.
  • It was a lot of work changing all the icons manually from the PNG format to the SVG format. Next time maybe it’s better to write a script that changes URL’s in the SQL database.
  • The name of a main and subcategory shouldn’t be the same, adding a ‘general’ section to each main category for the technical videos.
  • During the replacing of all icons, the new icons have an easy to understand filename. This helps when uploading and selecting icons.
  • Always add an alternate image name to an image, if an image can’t be loaded the visitor will at least see the name of the image that should be on the page.
  • Designing a new layer for the video entries took about a week of trying different concepts, it took about 100-120 drafts.
  • It takes about half a day to find related content and add the new layer to an existing video entry.
  • Adding a new layer to the video entries inspires to make more layout changes, more changes are already queued.
  • Creating the news overview section took about a week. The first one (Sony entry) took about 100 drafts. The second one (Regin entry) went faster, it took about 20 drafts.
  • Next to Flickr the website stocksnap.io has great images that can be used under Creative Commons license.

Music videos of the day

Share This