E-Portfolio (M152)

Translated from German using DeepL.

Date: December 2022
Reading time: 14 minutes

Introduction

In module 152 I had to fulfill the following task:
"The ePortfolio should demonstrate your skills in integrating various multimedia products into a website. For this purpose, photography/image manipulations (min. three), logo creation and a short video are to be integrated into a website on your chosen topic in a meaningful way.
The work on the ePortfolio is documented and reflected upon. This documentation is an essential part of the overall project. At the same time, all external and personal contributions are shown in the documentation and special aspects of the ePortfolio are pointed out."

Zeitplan

Tools, techniques and aids

I made use of tools, techniques and aids to implement this project. These are explained in the following lines.

Visual Studio Code

I chose VSC as my development environment, as I am already very familiar with this IDE.

jQuery

To simplify the JavaScript syntax, I included this jQuery script:
https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js (opens in a new tab)

This allowed me to interact with the DOM in the JS in a simplified way.

As the application is very small, it was not easy to decide whether jQuery should really be integrated. However, if the site is expanded in the future, it will certainly be appreciated.

Bootstrap Grid

Since the design included a grid, I had to integrate it into the application. It was important here that only the grid, not the entire library, was integrated:
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap-grid.min.css (opens in a new tab)

This allows the grid classes such as "container", "row" and "col" to be used.

Cloudinary

My web application uses a lot of images. These would take up a lot of storage space on the server. That's why I host them on Cloudinary. Cloudinary is a so-called media API. You can upload media via the website. These are then stored by Cloudinary. To use the files in the project, you have to call them up via a URL. A big advantage here is that you can specify parameters when calling up the files. This makes it possible to use different resolutions depending on the viewport.
To use the platform, I uploaded all the photos.

In the code, I used the picture tag to request a different resolution depending on the screen.

Advantages

• The website remains small
• Adjustments can be made to the images without changing the code

Disadvantages

• Dependence on Cloudinary
• Replacing/adding images takes longer, as files have to be uploaded to Cloudinary and code has to be written

BEM

I was already familiar with BEM before this project.
BEM is a naming convention that defines rules for naming classes. It worked with Block, Element and Modifier.

Website: https://getbem.com/ (opens in a new tab)

Atomic

Atmoic design is also a company standard for us.
For each class, I define whether it is an atom, molecule, organism, ...

Website: https://bradfrost.com/blog/post/atomic-web-design/ (opens in a new tab)

SVG

I integrated the logo as SVG. This way it is always sharp and I can adjust it if necessary.

Flexbox

As already described, I mainly used the grid system for placement. However, as already shown in the planning, there are areas where the use of flexbox makes more sense. This is the case with the navigation, for example.

Favicons

The favicon is an important part of a website. However, it is not enough to simply integrate an icon. Depending on the browser and platform, certain files are preferred.

To create the right icons from my logo, I visited an icon generator:
https://realfavicongenerator.net (opens in a new tab)

This website not only allowed me to export 12 compatible icons, but also to customize them accordingly. For example, if you save the website on an iPhone home screen, the icon is black on a white background. On Android it is black again.

Source: RealFaviconGenerator

Multimedia elements

How the multimedia elements were created is explained in the following sections.

Image editing

I edited three images with a total of six different effects.

Image 1

I made several improvements to the first image.

Color

I cropped the image directly on my cell phone and adjusted the color. I mainly darkened it and adjusted the contrast. This makes the screen stand out a little more.

Insert screen

A basketball game was playing on the screen below when I took the photo. However, I want to show a section of the music software on the screen.

Before I started editing, I took a screenshot while using the program.
Then I loaded both images into GIMP. With SHIFT and T I opened the editing of the unified transformation.

Focus

At first there were relatively many elements in the picture. In order to explicitly focus on the large screen, I blurred everything around it. I used the watermark tool for this.

Targeted desaturation

The last step was to adjust the color. To challenge myself a little, I set myself the goal of having only the screen in color.

This way you can clearly see that something has been changed in the image.

To darken the background, I first selected the screen with the lasso. After reversing the selection, I desaturated the image.

Result

On the left you can see the original picture. On the right is the edited one.

Image 2 - Color tone

In the second picture, I changed the color of the loudspeaker. To do this, I selected it with the lasso. Then I defined a different color tone.

Result

On the left you can see the original picture. On the right is the edited one.

Image 3 - Contrast

In the last picture I wanted to change the contrast a little. When I made these changes, the picture looked worse. The contrast only improved the appearance of the guitar.
For this reason, I removed the background of the guitar on a second layer in a second attempt.

So I could only apply the contrast to these.

Result

On the left you can see the original picture. On the right is the edited one.

Reflection

The biggest difficulty was replacing the bottom screen. It took a while until the screenshot looked more realistic.
In addition, not all Windows shortcuts could be used directly in MacOS. I sometimes had to fiddle around a bit to find the correct key combination.
Otherwise, I got along well with Gimp.

Logo

I used the logo without any changes.

Video

I wanted to show how I create a beat in a video. It should be recognizable how the piece of music is created step by step. That's why I filmed this process.

Recording

As there is hardly any movement when building a beat, no camera work was necessary. However, to make the video interesting, it was important to use several camera angles. For this reason, I placed two cameras for the recording. One on the left focusing on the screen and one on the right focusing on the keyboard.
The plan was also to make a screen recording and use excerpts from it. However, this was not possible for performance reasons. So I had to create these clips afterwards and integrate them synchronously.

Cut

The editing was not easy. I had to shorten the two 30-minute recordings into a short (3-minute) video. I proceeded as follows:

1. I started iMovie and laid both tracks, the recording from the left and right, perfectly on top of each other. It helped that I clapped my hands once before filming.
2. then I started editing. I only kept the most necessary sequences. 3 Later, I decided which camera angle I wanted to use for which clips.

4. For certain scenes, I then created the screen recordings afterwards.

5. as the sound of the iPhone I was recording with wasn't good enough, I had to replace it somehow.
   So I went into the music project and exported all the tracks. I then placed these specifically under the respective clips. This process involved a lot of effort. 6 When the exported audio was in sync with the clips, I removed the audio from the recordings. 7 Finally, I added an intro and autro.

Reflection

A video is not created quickly. It requires planning, a good setup and many hours of editing.
In my case, it didn't help that I worked with a lot of audio. Because this took an enormous amount of time. Next time I would make sure that I can record a clean audio track at the same time.

I am very satisfied with iMovie. The functionalities are limited to the essentials. But that's exactly what makes the software so easy to use.

Website

This content then had to be placed on the website. More about the website is described in the following lines.

Techniques & experience

These are the techniques used and the experiences I had with them.

Consistency

My clearly defined classes and spacers ensured uniformity. These ensure that the website is consistent. Example:
Each image has an a-image class. If you want to make a change to all images, you only have to edit this class. Elements that are slightly different are provided with a modifier.

Cloudinary

As described above, I used Cloudinary. The code for using the images looks like this:

<div class="row">
    <picture class="col-8 offset-2 col-md-5 offset-md-6">
        <source
            media="(max-width: 465px)"
            srcset="
                https://res.cloudinary.com/dqp91uibw/image/upload/c_scale,w_400/v1671031346/m152/gitarre2.jpg
            "
        />
        <img
            class="a-image"
            src="https://res.cloudinary.com/dqp91uibw/image/upload/v1671031346/m152/gitarre2.jpg"
            alt="gitarre"
        />
    </picture>
</div>

In the first line, the elements are defined as a grid row. The image is then placed on the picture tag using the col properties. To use a different resolution of the image depending on the viewport, I used the picture tag. With this you can determine the source depending on the media query.
So if the end device is smaller than 465px, a downscaled image is fetched. This improves performance.

Animation

As soon as the text has reached the top edge, it should stay there and move into the background.
To achieve this, I set the position of the component to sticky. This keeps it fixed at the top. I use JS to darken the text. When scrolling, the position of the titles is read out. If one of the titles is at the top, it is colored accordingly.

This brings a little more movement to the page.

Copyright

As the website and all the media it contains are already protected by copyright, no copyright information is necessary. However, in order to point this out, I have indicated this.

I create a footer for this. In this I show the copyright symbol, followed by my name and the current year. This text also serves as a link to an imprint. It contains information about me personally. Under the "Copyright" section, more detailed information on copyright is also provided.

These rights mean that nobody is allowed to use even parts of my work. If I had wanted to release sections for certain purposes, I would have used Creative Commons. But I did not want to do this.

Media queries

I use media queries to tailor the page for the three most important viewports. These are the three sizes:

• 768px and below (mobile)
• 1200px and below (tablet)
• Above 1200px

Of course you could subdivide this even more. But I have had the best experience with these three numbers so far.
This way the website looks appealing on mobile (portrait and landscape format) and desktop.
Room for improvement: The site could be adapted for televisions. But this is not my target device. That's why I haven't done that yet.

Uppercase

As intended in the design, all texts should be written in upper case. If someone writes a text that is in lower case, it should be adjusted automatically. This is the only way to guarantee the uniformity of the page.

To achieve this, I set the text-transform property to "uppercase".

Video

I outsourced the video to YouTube so that the project wouldn't get too big. When embedding the iframe, I manipulated it. By appending the ?rel=0 at the end of the URL, I ensure that no other videos are suggested at the end or when pausing.
The big advantage of the YouTube iframe is that no controls need to be programmed.

Problems & solutions

I encountered problems during implementation. Here I describe how I solved them.

Custom Cursor

As an additional challenge, I implemented a custom cursor. I did this by placing a styled div at the position of the cursor using JS.
This caused some problems.

• Browser compatibility: Unfortunately, the cursor did not work perfectly in Safari.
  Solution: JS code cannot be executed in certain browsers.
• Iframe: The cursor could not move into the area of the embedded YouTube video

Since this is not a requirement of the design anyway and does not contribute to usability, I removed the gimmick from the live page.

Usability Navigation

The design of the navigation is somewhat unusual and also presents a few difficulties. It can happen that an image appears behind the text of a link. If this image were white, the text would no longer be easy to read.

I was able to solve this problem by adding a black border around the text. This border is invisible on a black background. However, if a light-colored image appears underneath it, the text is still legible.

Rights to the pictures

I own the rights to all photos in the guitar, band and beats sections. However, the design was intended to display images of artists.

As this is a school project, I would still have been allowed to use the images. However, if I wanted to use the site privately in the future, I would not be allowed to use the images just like that. For this reason, I redesigned the screen.
Now there is a banner with all the personalities.

Logo

The design envisaged that the logo would be fixed in place. However, this would take up some space on the page. For this reason, I styled it so that it disappears when scrolling.

Distances

The spacing had to be adjusted slightly in practice. Previously, the spacers looked like this:

There are three spacers after the adjustment.

Other margins and paddings deviate only slightly from the planning.

Colors

The colors are defined appropriately. However, to make the text stand out even more in the background, I defined a fourth color.

#191919

iOS Notch

Due to the notch, a white border is visible at the top of the newer iPhones. I found this annoying. With a theme-color metatag I colored this bar black.

Static

To breathe a little more life into the page, I implemented a text background on the home screen. This required three steps.

1. set the text color to transparent
2. set background image and link the gif
3. set background-clip to text so that the gif is cropped

To make the gif more recognizable, I changed the font of the title. I chose Impact as the font.

Reflection

There are deviations in the implementation of almost every project.
In this case, I am satisfied with my planning. All concepts and most of the design could be implemented without any problems. The deviations are mainly issues in the UX area. I implemented things that offer the user a better experience when visiting the website.

Conclusion

This project was ideal for me as I am very interested in frontend and I already had a lot of experience. I spent a lot of time in the frontend department during my apprenticeship. I will also complete my IPA in this subject area.

During this work, I realized that I not only liked the frontend, but also the entire design process. I enjoyed creating the media.

Here's what I learned in the course of this project:

• You don't always need a huge setup. You can create appealing web applications with just one HTML and JS file. If you keep this in mind before starting a project, you can sometimes do without thousands of lines of code.
• Libraries are enormously helpful. As a rule, I write as much code as possible myself. In this project, however, I learned that you can save a lot of time with libraries. Because it makes no sense to rewrite existing code. It's okay to accept help.
  When choosing libraries, you have to pay attention to two things.
  Size: The project should not load any unnecessary code
  Evaluation: What about security, popularity, maintenance and community
• Good planning is essential in order to finish a project on time.
• If you have a sensible, precise design, this makes programming easier. The more precise the design is, the fewer ambiguities will arise during implementation.
• You should not be afraid to make changes. If you realize during the implementation process that something is not ideal, it is necessary to adapt it. If you work strictly according to plan, the product may not turn out perfectly.
• Creating media involves more effort than I thought it would. Editing videos in particular takes a lot of time.