The video wall is finally ready. Made the video wall public today and it’s available via https://yt.christiaan008.com/video-wall. Below a write-up of the last couple of days. It’s a longer write-up then usual and about building the video wall, the thought process behind it and the experimenting with designs.
Building the video wall has been a lot of work, I wrote this earlier but it’s more work then I thought when I began. Most of the work was searching for the right backgrounds that can be used under Creative Commons. In total I’ve been searching for about 15-20 hours on Flickr and other websites to find good looking backgrounds in high resolution. Minimum resolution to be used is 1920 x 1080, WordPress will scale the image to smaller resolutions when importing the images. After the first search for backgrounds the adding of the content started.
My normal sleeping hours went totally out of the window during these days, because most of good ideas came during the night and gave so much energy that I couldn’t sleep. Especially Saturday was a long day with just 5 hours of sleep. Got to love the UP for tracking my life like this!
The technical video wall
The first video wall contains videos from security conferences and hacking tutorials. During the development of this video wall it was a lot of experimenting with a first design. Once I had a design that I thought could work the adding of the videos began. I really looked up against adding the videos, because during adding the videos sometimes I was searching for the right image because it wasn’t already in the media library. I needed to add the image to the media library on the YouTube website with all the right credits and the same on the Central Hub.
Creating an entry took about 15-20 minutes per entry. Once a couple of videos had been added I got the hang of it and adding content speeded up. This design uses more then the whole screen. There are 15 clickable videos in the video wall and behind every chosen video there are 4 other videos to choose from via a big slider. All the used backgrounds have been converted to black and white.
The less technical video wall
The second video wall contains videos that can help to get a basic understanding about cybercrime, cyber security, online threats but also videos that are inspiring. The development of this video wall went a bit quicker, because of the experience from creating the first video wall (making beter use of templates, knowing my way around WordPress better) and also a lot of background images that were already in the media library available speeded everything up. The design is a bit cleaner and uses less screen space.
There are about 20 clickable videos in the video wall that uses a sort of slider to display all the available videos. The three sliders have been timed with different delays (around 10, 15, 20 seconds) to display a nice changeable effect. After clicking on an entry, you will be taken to the video and below the video a grid of 4 thumbnails showing other videos. Where the entries from first video wall after choosing a video needed to be create manually, this grid view uses one or more of the three sliders to display content. Adding an entry took about 5 minutes per entry. I’m using not only black and white backgrounds but also coloured ones. Some backgrounds are just YouTube thumbnails, you can notice that a website like TED uses the custom YouTube thumbnails and choses their thumbnails carefully.
The video wall choice screen
At a certain point I got the idea to create two video walls (of course that idea came around 3:00 AM..), one video wall that contains more technical videos and one with easy to follow videos (what these videos would be I hadn’t thought of). There are two video walls and two designs. The ideas for both video walls evolved during the development of the video walls.
How the screen would look to choose between the two video walls took a couple of days to build and think about. The chosen background image was easy to find but the used text was a bit more difficult. In the first designs it was something as easy as “I’m a technical person” and “I’m not a technical person”. Then came the description something like “I’m a hacker or programmer” and “I’m a newbie or technically challenged”. I found the last one to be to negative so changed it to “I want to”.
After an user made a choice I added a screen called “Videos loading” just for the fun of it. Every time when uploading the background movies played during the countdown I got a WordPress HTTP error. Googled for a solution and it seems to be a configuration error on my server. Will look at it later (just like another few bugs mentioned in earlier posts) but found a WordPress plugin called “Add from server“. An easy to use plugin that makes it possible to add content that is already uploaded to your server. So in my case I uploaded the videos to my home directory and used the plugin to import the videos into the WordPress media library. The background movie for the technical choice is from one of the honeypot interactions. Just with some easy scripting the background movie for the less technical choice was made (only using echo and sleep commands).
Testing the designs
During the development of both designs, I continually tested the designs on my smartphone to see how the design would look in the responsive design. Both designs needed to scale to the smartphone and still be readable in both portrait as landscape mode. Also tested the designs on the latest versions of Safari, Chrome and Firefox.
Learned today (and of other days)
- ideas can keep coming and building upon each other, but it’s also important to start building otherwise you will be stuck in the thought process.
- after building a design, play with it and check if it’s still created with the intent you first started with.
- although somethings seem like a lot of work, make it fun to do and reward yourself once it’s done.
- need to get more outside when working on things that are a lot of work, can help to put new ideas in perspective.
- need to put more thought into naming the different sections on websites, naming of the video wall can still change a bit.
- my sleep rhythm can be easily influenced by the energy gotten from new ideas.
- there is a WordPress plugin “Add from server” that lets you add content already available on your webserver to be imported in WordPress.
- the weekly scheduled backups of all the WordPress websites work great.
Music videos of the day