E-Portfolio (M152)

Datum: Dezember 2022
Lesedauer: 14 Minuten

Einleitung

Im Modul 152 hatte ich die folgende Aufgabe zu erfüllen:
"Das ePortfolio soll Ihre Fertigkeiten in der Integration von verschiedenen Multimediaprodukten in eine Webseite zeigen. Dazu sind Fotografie-/Bildmanipulationen (min. drei), Logokreation und ein Kurzvideo sinnvoll in einen Webauftritt zu Ihrem gewählten Thema zu integrieren.
Die Arbeiten am ePortfolio werden dokumentiert und reflektiert. Diese Dokumentation ist ein wesentlicher Bestandteil des Gesamtprojekts. Zugleich werden in der Dokumentation sämtliche Fremd- und Eigenleistungen ausgewiesen sowie auf besondere Aspekte des ePortfolios hingewiesen."

Zeitplan

Tools, Techniken und Hilfsmittel

Zur Umsetzung dieses Projektes machte ich Gebrauch von Tools, Techniken und Hilfsmittel. Diese werden in den kommenden Zeilen erläutert.

Visual Studio Code

Als Entwicklungsumgebung wählte ich VSC, da ich schon sehr mit dieser IDE vertraut bin.

jQuery

Um die JavaScript-Syntax zu vereinfachen, band ich dieses jQuery-Script ein:
https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js (opens in a new tab)

Dadurch konnte ich im JS vereinfacht mit dem DOM interagieren.

Da die Applikation sehr klein ist, war es nicht leicht zu entscheiden, ob jQuery wirklich eingebunden werden soll. Wird die Seite aber in Zukunft mal erweitert, ist man bestimmt froh darum.

Bootstrap Grid

Da das Design ein Grid vorsah, musste ich dieses in die Applikation einbauen. Wichtig war hier, dass nicht die ganze Library, sondern nur das Grid eingebunden wird:
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap-grid.min.css (opens in a new tab)

Dadurch können die Grid-Klassen wie "container", "row" und "col" verwendet werden.

Cloudinary

Meine Webapplikation verwendet viele Bilder. Diese würden viel Speicherplatz auf dem Server einnehmen. Deshalb hoste ich sie auf Cloudinary. Cloudinary ist eine sogenannte Media-API. Über die Webseite kann man Medien hochladen. Diese werden dann von Cloudinary gespeichert. Um die Dateien dann im Projekt zu verwenden, muss man die Files über eine URL aufrufen. Ein grosser Vorteil hierbei ist, dass man beim Aufruf Parameter mitgeben kann. Dies ermöglicht es, je nach Viewport andere Auflösungen zu nutzen.
Um die Plattform zu nutzen, lud ich alle Fotos hoch.

Im Code nutzte ich den picture Tag, um je nach Bildschirm eine andere Auflösung anzufordern.

Vorteile

• Die Webseite bleibt klein
• Anpassungen an den Bildern können vorgenommen werden, ohne dabei den Code zu verändern

Nachteile

• Abhängigkeit von Cloudinary
• Austauschen/Hinzufügen von Bildern dauert länger, da Files auf Cloudinary geladen und Code geschrieben werden muss

BEM

Ich war schon vor diesem Projekt mit BEM vertraut.
BEM ist eine Naming-Convention, welche Regeln zur Benennung von Klassen definiert. Dabei arbeitete man mit Block, Element und Modifier.

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

Atomic

Auch Atmoic-Design ist bei uns ein Firmenstandard.
Bei jeder Klasse definierte ich, ob es sich um ein Atom, Molekül, Organismus, … handelt.

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

SVG

Das Logo baute ich als SVG ein. So ist es immer scharf und ich kann es bei Bedarf anpassen.

Flexbox

Wie schon beschrieben verwendete ich für die Platzierung hauptsächlich das Grid-System. Wie aber auch bereits in der Planung aufgezeigt, gibt es Bereich, in welchen der Einsatz von Flexbox sinnvoller ist. Dies ist beispielsweise bei der Navigation der Fall.

Favicons

Das Favicon ist ein wichtiger Bestandteil einer Webseite. Jedoch reicht es nicht, nur ein Icon einzubinden. Denn je nach Browser und Plattform werden bestimmte Dateien bevorzugt.

Um aus meinem Logo die passenden Icons zu erstellen, besuchte ich einen Icon-Generierer:
https://realfavicongenerator.net (opens in a new tab)

Über diese Webseite konnte ich nicht nur 12 kompatible Icons exportieren, sondern diese auch entsprechend anpassen. So wird das Icon, wenn man die Webseite auf einem iPhone Homescreen speichert, schwarz auf einem weissen Hintergrund. Auf Android ist es wiederum schwarz.

Quelle: RealFaviconGenerator

Multimediaelemente

Wie die Multimediaelemente erstellt wurde, wird in den nächsten Abschnitten erläutert.

Bildbearbeitung

Ich bearbeitete drei Bilder mit insgesamt sechs verschiedenen Effekten.

Bild 1

Beim ersten Bild nahm ich gleich mehrere Verbesserungen vor.

Farbe

Direkt am Handy habe ich das Bild zugeschnitten und es farblich angepasst. Dabei habe ich es vor allem verdunkelt und den Kontrast angepasst. So kommt der Bildschirm etwas mehr zur Geltung.

Bildschirm einfügen

m unteren Bildschirm lief zur Zeit des Fotografierens ein Basketballspiel. Ich will jedoch im Bildschirm einen Ausschnitt der Musiksoftware zeigen.

Bevor ich an die Bearbeitung ging, erstellte ich ein Bildschirmfoto beim Verwenden des Programms.
Danach lud ich beide Bilder ins GIMP. Mit SHIFT und T öffnete ich die Bearbeitung der vereinheitlichten Transformation.

Fokus

Vorerst waren relativ viele Elemente im Bild. Um den Fokus noch explizit auf den grossen Bildschirm zu lenken, machte ich rundum alles unscharf. Dazu nutze ich das Wasserzeichen Tool.

Gezielte Entsättigung

Als letzter Schritt wollte ich die Farbe anpassen. Um mich ein wenig herauszufordern, setzte ich mir das Ziel, dass nur der Bildschirm farbig ist.

So sieht man danach auch klar, dass etwas am Bild verändert wurde.

Um den Hintergrund zu verdunkeln, wählte ich zuerst den Bildschirm mit dem Lasso aus. Nach dem Umkehren der Auswahl entsättigte ich das Bild.

Resultat

Links sieht man das originale Bild. Rechts ist das fertig bearbeitete.

Bild 2 - Farbton

Beim zweiten Bild änderte ich den Farbton des Lautsprechers. Dazu wählte ich diesen mit dem Lasso. Danach definierte ich einen anderen Farbton.

Resultat

Links sieht man das originale Bild. Rechts ist das fertig bearbeitete.

Bild 3 - Kontrast

Beim letzten Bild wollte ich den Kontrast etwas verändern. Als ich diese Änderungen tätigte, sah das Bild schlechter aus. Der Kontrast verbesserte lediglich das Aussehen der Gitarre.
Aus diesem Grund entfernte ich in einem zweiten Anlauf den Hintergrund der Gitarre auf einem zweiten Layer.

So konnte ich den Kontrast nur auf diese anwenden.

Resultat

Links sieht man das originale Bild. Rechts ist das fertig bearbeitete.

Reflexion

Die grösste Schwierigkeit stellte die Auswechslung des unteren Bildschirmes dar. Es dauerte eine Weile, bis der Screenshot mehr realistisch wirkte.
Zudem konnte man nicht alle Windows Shortcuts nicht direkt in MacOS nutzen. Ich musste teilweise etwas herumpröbeln, um die korrekte Tastenkombination zu finden.
Ansonsten kam ich gut mit Gimp aus.

Logo

Das Logo übernahm ich ohne Änderungen.

Video

In einem Video wollte ich zeigen, wie ich einen Beat erstelle. Es soll erkennbar sein, wie das Musikstück schrittweise entsteht. Deshalb filmte ich diesen Prozess.

Aufnahme

Da beim Bauen eines Beats sich kaum etwas Bewegt, war keine Kameraführung notwendig. Um das Video trotzdem interessant zu gestalten, war es wichtig, mehrere Kameraperspektiven zu nutzen. Aus diesem Grund platzierte ich zur Aufnahme zwei Kameras. Eine links mit dem Fokus auf den Bildschirm und eine rechts, die das Keyboard fokussiert.
Geplant war auch, eine Bildschirmaufnahme zu tätigen und Ausschnitte daraus zu verwenden. Dies war aber aus Performance-Gründen nicht möglich. So musste ich diese Clips im Nachhinein erstellen und synchron einbinden.

Schnitt

Der Schnitt war nicht einfach. Ich musste die zwei 30-minütigen Aufnahmen zu einem kurzen (3 Minuten) Video kürzen. Dazu ging ich wie folgt vor:

1. Ich startete iMovie und legte beide Spuren, die Aufnahme von links und rechts, perfekt übereinander. Dabei half, dass ich vor dem Filmen einmal in die Hände geklatscht habe.
2. Danach ging ich ans Schneiden. Hier behielt ich nur die nötigsten Sequenzen.
3. Später entschied ich, bei welchen Clips ich welche Kameraperspektive verwenden will.
4. Für bestimmte Szenen erstellte ich dann nachträglich die Bildschirmaufnahmen.
5. Da der Ton des iPhones, mit welchem ich die Aufnahmen tätigte, nicht genug gut war, musste ich diesen irgendwie ersetzten.
   Ich ging also ins Musikprojekt und exportierte sämtliche Spuren. Diese legte ich dann gezielt unter die jeweiligen Clips. Dieser Prozess war mit viel Aufwand verbunden.
6. Als der exportierte Ton synchron mit dem der Clips war, entfernte ich das Audio der Aufnahmen.
7. Zum Schluss fügte ich noch ein Intro und Autro ein.

Reflexion

Ein Video ist nicht schnell erstellt. Es bedarf an Planung, einem guten Setup und viele Stunden im Schnitt.
Bei mir Half es nicht, dass ich mit viel Audio arbeitete. Denn dies kostete enorm viel Zeit. Das nächste Mal würde ich darauf achten, dass ich gleichzeitig eine saubere Tonspur aufnehmen kann.

Mit iMovie bin ich sehr zufrieden. Die Funktionalitäten sind zwar aufs Wesentliche beschränkt. Aber genau das erleichtert auch den Umgang mit der Software.

Webseite

Diese Inhalte mussten dann auf der Webseite platziert werden. Mehr zur Webseite ist in den nachfolgenden Zeilen beschrieben.

Techniken & Erfahrungen

Diese sind die genutzten Techniken und welche Erfragungen ich mit ihnen gemacht habe.

Einheitlichkeit

Für die Einheitlichkeit sorgten meine sauber definierten Klassen und Spacers. Diese führen dazu, dass die Webseite aus einem Guss ist. Beispiel:
Jedes Bild hat eine a-image Klasse. Will man eine Veränderung an allen Bildern tätigen, so muss man nur diese Klasse bearbeiten. Elemente, welche leicht unterschiedlich sind, wurden mit einem Modifier versehen.

Cloudinary

Wie oben schon beschrieben, nutzte ich Cloudinary. Der Code zur Verwendung der Bilder sieht wie folgt aus:

<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 der ersten Zeile werden die Elemente als Grid-Row definiert. Auf dem Picture Tag wird dann das Bild mithilfe der col Properties platziert. Um je nach Viewport eine andere Auflösung des Bildes zu verwenden, nutzte ich den picture Tag. Bei diesem kann man die Source je nach Media-Query bestimmen.
Ist also das Endgerät kleiner als 465px, so wird ein herunterskaliertes Bild geholt. Dies verbessert die Performance.

Animation

Sobald der Text am oberen Rand angekommen ist, soll er dortbleiben und in den Hintergrund rücken.
Um dies zu bewerkstelligen setzte ich die Position der Komponente auf sticky. So bleibt sie oben fixiert. Um den Text zu verdunkeln, nutze ich JS. Wird gescrollt, so wird die Position der Titel ausgelesen. Ist einer der Titel oben angekommen, so wird er entsprechend gefärbt.

Dies bringt etwas mehr Bewegung auf die Seite.

Copyright

Da die Webseite und alle enthaltenen Medien schon durch das Urheberrecht geschützt werden, ist keine Copyright Angabe notwendig. Um aber trotzdem darauf hinzuweisen, gab ich dieses an.

Dazu erstelle ich einen Footer. In diesem zeige ich das Copyright Symbol, gefolgt von meinem Namen und dem aktuellen Jahre. Dieser Text gilt auch als Link zu einem Impressum. Darin stehen Angaben zu meiner Person. Unter dem Abschnitt "Copyright" werden zudem noch genauere Informationen zum Copyright dargestellt.

Durch diese Rechte darf niemand auch nur Teile meines Werkes verwenden. Hätte ich Bereiche für bestimmte Zwecke freigeben wollen, so hätte ich Creative Commons eingesetzt. Dies wollte ich aber nicht.

Media-Queries

Um die Seite für die drei wichtigsten Viewports zuzuschneiden, setzte ich Media-Queries ein. Dies sind die drei Grössen:

• 768px und drunter (Handy)
• 1200px und drunter (Tablet)
• Über 1200px

Natürlich könnte man dies noch mehr unterteilen. Mit diesen drei Zahlen macht ich aber bisher die besten Erfahrungen.
So sieht die Webseite auf Mobile (Hoch- und Querformat) und Desktop ansprechend an.
Verbesserungsmöglichkeiten: Man könnte die Seite noch für Fernseher anpassen. Dies ist aber nicht mein Zielgerät. Deshalb tat ich das bisher nicht.

Uppercase

Wie im Design vorgesehen, sollten alle Texte in Grossbuchstaben geschrieben sein. Falls jemand einen Text verfasst, der kleingeschrieben ist, sollte dieser automatisch angepasst werden. Nur so kann die Einheitlichkeit der Seite garantiert werden.

Um dies zu bewerkstelligen, setzte ich das text-transform Property auf "uppercase".

Video

Damit das Projekt nicht gross wird, lagerte ich das Video auf YouTube aus. Beim Einbinden des Iframes manipulierte ich es. Mit dem Anhängen des ?rel=0 am Ende der URL stelle ich sicher, dass am Ende und beim Pausieren keine anderen Videos vorgeschlagen werden.
Der grosse Vorteil des YouTube Iframes ist, dass keine Controlls programmiert werden müssen.

Probleme & Lösungen

Bei der Umsetzung stiess ich auf Probleme. Hier beschreibe ich, wie ich diese gelöst habe.

Custom Cursor

Als zusätzliche Challenge implementierte ich einen Custom-Cursor. Dies tat ich, indem ich ein gestyltes Div mithilfe von JS stehts an der Position des Cursors platzierte.
Dies brachte einige Probleme mit sich.

• Browserkompatibilität: Leider funktionierte der Cursor nicht ideal im Safari.
  Lösung: Man kann JS Code in bestimmten Browsern nicht ausführen.
• Iframe: Der Cursor konnte sich nicht in den Bereich des eingebundenen YouTube-Videos bewegen

Da dies sowieso keine Anforderung vom Design ist und auch nichts zur Usability beträgt, entfernte ich die Spielerei von der Live-Seite.

Usability Navigation

Das Design der Navigation ist etwas aussergewöhnlich und birgt auch ein paar Schwierigkeiten. Es kann vorkommen, dass eine Bild hinter den Text eines Links gelangt. Wäre dieses Bild weiss, so könnte man den Text nicht mehr gut lesen.

Das Problem konnte ich mit der Vergabe eines schwarzen Randes um den Text lösen. Dieser Rand ist beim schwarzen Hintergrund unsichtbar. Kommt aber ein Helles Bild darunter, so ist der Text trotzdem lesbar.

Rechte an den Bildern

Ich besitze die Rechte an sämtlichen Fotos zu den Bereichen Gitarre, Band und Beats. Jedoch sah das Design vor, Bilder von Künstlern anzuzeigen.

Da dies ein Schulprojekt ist, hätte ich die Bilder trotzdem verwenden dürfen. Will ich die Seite aber in Zukunft privat verwenden, so dürfte ich die Bilder nicht einfach so verwenden. Aus diesem Grund redesignte ich den Screen.
Nun läuft ein Banner mit allen Persönlichkeiten durch.

Logo

Das Design sah vor, dass das Logo fix platziert wird. Dies würde aber etwas Platz von der Seite wegnehmen. Aus diesem Grund stylte ich es so, dass es beim Scrollen verschwindet.

Abstände

Die Abstände mussten in der Praxis noch etwas angepasst werden. Zuvor sahen die Spacer folgendermassen aus:

Nach der Anpassung gibt es noch drei Spacer.

Sonstige Margins und Paddings weichen nur leicht von der Planung ab.

Farben

Die Farben passend definiert. Um den Text aber noch mehr in den Hintergrund zu rücken, definierte ich noch eine vierte Farbe.

#191919

iOS Notch

Durch die Notch ist bei den neueren iPhones oben ein weisser Rand sichtbar. Diesen empfand ich als störend. Mit einem theme-color Metatag färbte ich diese Bar schwarz.

Statik

Um der Seite etwas mehr Leben einzuhauchen, implementierte ich einen Text Hintergrund auf dem Homescreen. Dazu waren drei Schritte nötig.

1. Textfarbe transparent setzen
2. Hintergrund Bild festlegen und dabei das Gif verlinken
3. background-clip auf text setzen, damit das Gif zugeschnitten wird

Damit etwas mehr von diesem Gif erkennbar ist, tauschte ich die Schriftart des Titels aus. Als Font wählte ich Impact.

Reflexion

Bei der Umsetzung kommt es fast bei jedem Projekt zu Abweichungen.
In diesem Fall bin ich zufrieden mit meiner Planung. Alle Konzepte und das meiste Design konnten problemlos implementiert werden. Die Abweichungen sind hauptsächlich Themen im UX-Bereich. Da implementierte ich Dinge, welche dem User beim Besuchen der Webseite ein besseres Erlebnis bieten.

Fazit

Dieses Projekt war ideal für mich, da mich Frontend sehr interessiert und ich schon einiges an Erfahrung mitbringen konnte. Denn während meiner Lehre verbrachte ich viel Zeit in der Frontendabteilung. Auch meine IPA werde ich in diesem Themengebiet absolvieren.

Während dieser Arbeit merkte ich, dass mir aber nicht nur das Frontend, sondern der gesamte Design-Prozess gefällt. Die Erstellung der Medien bereitete mir Freude.

Folgendes habe ich im Verlauf dieses Projektes gelernt:

• Man braucht nicht immer ein riesiges Setup. Mit jeweils nur einer HTML- und JS-Datei, kann man schon ansprechende Webapplikationen erstellen. Behält man dies vor dem Start eines Projektes im Hinterkopf, so kann man hin und wieder auf tausende Zeilen von Code verzichten.
• Libraries sind enorm hilfreich. In der Regel schreibe ich möglichst viel Code selbst. In diesem Projekt lernte ich aber, dass man mit Libraries viel Zeit einsparen kann. Denn es ergibt keinen Sinn, einen bereits existierenden Code erneut zu schreiben. Man darf die Hilfe ruhig annehmen.
  Bei der Wahl von Libraries muss man auf zwei Dinge achten.
  Grösse: Das Projekt sollte keinen unnötigen Code laden
  Bewertung: Wie steht es um die Sicherheit, Beliebtheit, Pflege und Gemeinschaft
• Eine gute Planung ist essenziell, um rechtzeitig mit einem Projekt fertig zu werden.
• Hat man ein sinnvolles, genaues Design, so erleichtert dies die Programmierung. Je genauer das Design ist, desto weniger Unklarheiten entstehen bei der Umsetzung.
• Man sollte nicht vor Änderungen abschrecken. Merkte man im Prozess der Implementierung, dass etwas nicht ideal ist, so ist es notwendig, dies anzupassen. Arbeitet man strikt nach Plan, kommt das Produkt vielleicht nicht perfekt heraus.
• Die Erstellung von Medien ist mit mehr Aufwand verbunden, als ich dies gedacht habe. Gerade das Schneiden von Videos nimmt viel Zeit in Anspruch.