One of my tasks this week was to rebuild a section displaying videos about specific features of a product, so-called Core Tech features. The old layout looked as follows:

The page is not live yet, but this is it’s new layout:

The idea behind that was to make it look more concise and interactive. This is because if the user hovers over one of the tabs the image nested in the link changes into a gif. On click though, the gif changes back into a png file, but with inverted colours, so that the user can easily see, which tab has been activated. Moreover, on click the content of the section, a text with a you tube video, changes appropriately. The whole page is fully responsive, although the responsiveness of the video is handled by a separate function.

During this week I was also to rebuild the news section, which was a bit clunky and not very user-friendly. Before the modification, the news page was handled by a Joomla built-in module, which wasn’t very effective because it was very slow, the user didn’t have any interface and each time the user clicked out of an article (regardless which one that was) he or she was redirected to the first page of the news section. This was very annoying, as this section currently has 119 articles, so when someone was reading 110^th and clicked out of it they found themselves at the very first page.

Right now the news page has an interface/navigation bar that allows the user to change the number of articles shown per page (dropdown), go to other page of the section (white boxes) and see the range of displayed articles:

The whole “functionality” was created from scratch. The biggest fun/challenge was to calculate the correct number of pages if the user changes the number of articles shown per page. This proved essential because if someone had 5 articles displayed per page and was on the last one and then changed the number to 25 the website would crash. To prevent that the website recalculates the number of pages each time the user changes the number of articles displayed. As an orientation point the website takes the article that currently is on the top and then, after recalculation, it redirects the user to the page where this article is located (whether it is on top, in the middle or in the bottom of the new page).

The middle part of the interface shows the box with the number of the given page and 4 adjacent boxes. However, the website checks if the active box should be in the middle, at the beginning or end of the interface bar.

Apart from the said works, I have been carrying out ongoing maintenance works regarding the websites hosted by my company.