KSpoon Website
Autor: Kimi Löffel
Betreuer: Ivan Cammarota
Datum: 04.03.2022
Auf dieser Website stelle ich mich selbst vor.
Man sieht die wichtigsten Informationen auf einen Blick, kann aber mehr dazu lesen, wenn man das möchte.
Man hat eine Übersicht über alle meine Projekte, meine Interessen etc.
Dies soll alles mit einem schönen/modernen Design gemacht werden, welches für gleichaltrige ansprechend wirkt.
Für das Modul Webdesign ist eine Webseite zu erstellen. Dabei darf das Thema frei gewählt werden. Während der gesamten Dauer des Moduls wird im Rahmen des Projektmanagements diese Dokumentation vervollständigt. Wichtig ist, dass am Ende des Moduls eine Webseite mit statischen Inhalten präsentiert werden kann, welche folgende Anforderungen erfüllt:
- Eine dem Zielpublikum entsprechende Webseite
- Quellenangaben müssen vorhanden sein
Für den Benutzer muss eine einfache Benutzerführung erstellt werden. Dazu müssen alle Webseiten des Projektes sinnvoll gegliedert werden, damit eine klar ersichtliche und benutzerfreundliche Navigation erstellt werden kann.
Die Webseite soll mit CSS formatiert werden. Dabei müssen alle Elemente in externen CSS Dateien ausgelagert werden.
Die Webseite soll auf mobilen, sowie auch auf Desktop-Geräten angenehm zu bedienen sein. Es soll vermieden werden, dass herangezoomt oder vertikal gescrollt werden muss.
HTML 5 und CSS >= 3 müssen nach den W3C-Standards validiert sein.
Der Webauftritt soll mit der neusten stabilen Version von Chrome keine Darstellungsprobleme aufweisen.
Ein Farbschema soll in der Dokumentation definiert und in die Endlösung integriert werden.
Texte sind kurz und klar und ermöglichen dem Benutzer, sich auf der Webseite zurechtzufinden.
Benutzte Schriftarten sollen in der Dokumentation definiert und in die Endlösung integriert werden.
Die Aussagekraft von Textinhalten der Endlösung soll durch den Einsatz von Grafiken erhöht werden.
Wer Internetseiten erstellt, muss die rechtlichen Rahmenbedingungen kennen. Das wichtigste Recht dabei ist das Urheberrecht. Es schütz das geistige Eigentum eines Urhebers. Wer seine Webseite veröffentlicht (z.B. im Internet) muss daher seine Rechten und Pflichten kennen. Zum Beispiel ist es nicht erlaubt Bilder die auf Google gefunden wurden auf der eigenen Webseite zu verwenden.
Darum bietet zum Beispiel Google die Möglichkeit unter „Erweiterte Suche" > „Nutzungsrechte" > „kostenlos zu nutzen oder weiterzugeben – auch für kommerzielle Zwecke" Bilder zu filtern.
Im Projekt dürfen nur Inhalte verwendet werden, die kostenlos weiterverwendet werden dürfen. Im Internet gibt es dazu verschiedene Fotogalerien in denen Fotographen ihre Bilder unter gewissen Umständen freigeben:
http://www.flickr.com/creativecommons/
Meistens wird eine Namensnennung vorgeschrieben. Darum muss jedes Webprojekt eine Impressumseite enthalten, auf der die Urheber genannt werden. Auf dieser Seite werden vor allem Urheber der Bilder genannt, wo der Urheber nicht unter das Bild geschrieben werden kann. Das ist zum Beispiel bei CSS Designs der Fall. Hier im Bbc müssen alle «fremden» Inhalte auf einer Impressumsseite aufgelistet werden.
Am Ende des Projekts wird folgender Inhalt abgegeben:
Alle HTML, CSS und JavaScript-Dateien inkl. benötigten Ressourcen. Alle Skripts funktionieren und die Inhalte (Texte, Bilder, usw.) werden korrekt dargestellt.
Die Dokumentation (dieses Dokument) ist vollständig ergänzt worden. Alle geforderten Inhalte sind so beschrieben, dass eine andere Person das Projekt später weiterführen könnte. Beispielinhalte (gelb eingefärbt) existieren nicht mehr.
Meine Zielgruppe ist hauptsächlich Freunde und Interessierte an meinen Projekten.
Das Alter meiner Zielgruppe: Gleichaltrige (um 16 Jahre)
Tageszeiten: Während des Tages sowohl als auch abends
Da die Website voraussichtlich sowohl tagesüber als auch bei Nacht aufgerufen wird werde ich die Möglichkeit einbauen zu einem Dark-Mode zu wechseln. Da die Zielgruppe in meinem Alter ist, soll das Design ansprechend und modern sein.
Auf dieser Seite soll ein Banner mit einer Begrüssung sein. Darunter eine Erwartung, die man and von der Website erfüllt bekommt.
Darunter soll eine «Top» Auswahl der Projekte sein.
Auf dieser Seite werden alle Quellen aufgelistet.
Auf dieser Seite soll hauptsächlich eine grosse Auswahl der Projekte präsentiert werden.
Auf dieser Seite stelle ich mich selbst vor.
Zu den jeweiligen Projekten soll es eine Website geben, welche eine Beschreibung, einen Link zum Source code und sonstige Informationen enthalten soll.
Burger-Menu zur Hauptnavigation sowohl mobile als auch auf dem Desktop, da ich finde, dass dies moderner aussieht als eine Auswahl mit Unterseiten zuoberst.
Aufbau jeder Seite ähnlich, Header oben, Footer unten.
Header zur Navigation, Footer mit den wichtigsten Informationen und Links.
Hier sieht man die Home-Page der Website. Das Auswahlmenu kann durch klicken auf den Menu-Burger (die drei Striche oben links) aufgerufen werden. Ebenfalls weis der Benutzer anhand des grünen Striches bei «Home», dass er sich auf der «Home» Seite der Webseite befindet.
Dasselbe gilt auch für die Desktop Website. Durch Klicken auf den Menu-Burger, kann das Auswahlmenu hervorgerufen werden. Hier wird durch den Strich bei «About me» signalisiert, dass man sich auf dieser Seite befindet.
Ich habe das Farbschema mithilfe der Website color.adobe.com erstellt.
Dabei gedacht habe ich mir, dass Blau und Grün eher moderne Farben sind und somit gut zu meiner Zielgruppe passen.
Wurde verwendet für den Titel im über dem Bild (Tags: <h2>)
Wurde verwendet für den Titel der Website und den Hover Effekt bei den Social Links am unteren Rand der Website (Tags: <h1>, <.social a:hover> )
Wurde für (fast) alle Links verwendet (Tags: <a>)
Wurde bisher noch nicht verwendet
Wurde bisher noch nicht verwendet
Ich finde, dass die untenstehenden Schriftarten modern aussehen und zu meiner Website passen.
Tags mit dieser Schriftart: <h1>
Der Titel ist mit der Schriftart Roboto Thin umgesetzt, da ich diese Schriftart für einen Titel perfekt finde.
Tags mit dieser Schriftart: <a>, <p>, <ul>, <li>
Ich finde, für Fliesstext sieht diese Schriftart genau perfekt aus.
Tags mit dieser Schriftart: <h2>, <h3>
Für Überschriften, Untertiteln etc. finde ich diese Schriftart sehr geeignet.
Tags mit dieser Schriftart: <i>
Die Beste Unicode Mono Font!
- Betriebssystem: Windows
- Browser: Chrome & Firefox
- Gerätespezifikationen:
- Prozessor: Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz]
- RAM: 16.0GB
- Dimensionen und Auflösung Display: 1920x1080px
| Abschnitt | Inhalt |
|---|---|
| ID | T-01 |
| Vorbedingungen | Browser muss geöffnet sein |
| Ablauf | Klicken auf die URL Leiste und die URL «bloefk.bbc-projects.ch» eingeben |
| Erwartetes Resultat | Die Webseite wird erfolgreich geladen. Es entsteht kein Error. |
| Abschnitt | Inhalt |
|---|---|
| ID | T-02 |
| Vorbedingungen | Browser mit der geöffneten Website «https://validator.w3.org/#validate\_by\_uri» |
| Ablauf | Klicken auf das Textfeld und die URL «bloefk.bbc-projects.ch» eingeben und auf Check klicken. |
| Erwartetes Resultat | Nach dem Laden der Webseite sollen keine Errors zu finden sein. Warnings sind in Ordnung. |
| Abschnitt | Inhalt |
|---|---|
| ID | T-03 |
| Vorbedingungen | Browser mit der geöffneten Website «https://jigsaw.w3.org/css-validator/#validate\_by\_uri+with\_options» |
| Ablauf | Klicken auf das Textfeld und die URL «bloefk.bbc-projects.ch» eingeben und auf Check klicken. |
| Erwartetes Resultat | Nach dem Laden der Webseite sollen keine Errors zu finden sein. Warnings sind in Ordnung. |
| Abschnitt | Inhalt |
|---|---|
| ID | T-04 |
| Vorbedingungen | T-01 |
| Ablauf | Es wird die Webseite auf Kompatibilitätsprobleme überprüft. Ein Kompatibilitätsproblem ist definiert durch: |
- Text auf der Gleichen Ebene über anderem Text
- Abgeschnittener Text | | Erwartetes Resultat | Nach dem Überprüfen der gesamten Website sollen keine Kompatibilitätsprobleme vorhanden sein. |
| Abschnitt | Inhalt |
|---|---|
| ID | T-05 |
| Vorbedingungen | T-01 |
| Ablauf | Es wird auf alle Links auf der Website geklickt. |
| Erwartetes Resultat | Es soll keine Seite auf eine nicht vorhandene Seite führen, das heisst jede verlinkte Website soll keinen http Status code über 400 zurückgeben. |
| Abschnitt | Inhalt |
|---|---|
| ID | T-06 |
| Vorbedingungen | T-01 |
| Ablauf | Es wird auf die drei grünen Striche am oberen Rand geklickt. |
| Erwartetes Resultat | Es soll ein Auswahlmenu aufgehen, in welchem die Seite, auf welcher die Person sich momentan befindet, mit einem grünen Strich markiert ist. Klicken auf Links auf dieser Auswahlseite öffnen die jeweilige Seite (ausser der «Switch Theme» Link). |
| Abschnitt | Inhalt |
|---|---|
| ID | T-07 |
| Vorbedingungen | T-06 |
| Ablauf | Es wird auf den «Switch Theme» Link geklickt. |
| Erwartetes Resultat | Das Theme wird geändert, das heisst falls der Hintergrund momentan weiss war, sollte dieser dunkel werden und umgekehrt. Dies sollte auch beim wechseln von Webseiten (auf der bloefk.bbc-projects.ch Domain) vorhanden bleiben damit dieser Test erfüllt ist. |
| Abschnitt | Inhalt |
|---|---|
| ID | T-08 |
| Vorbedingungen | T-06 |
| Ablauf | Es wird auf den «Switch Theme» Link geklickt. |
| Erwartetes Resultat | Das Theme wird geändert, das heisst falls der Hintergrund momentan weiss war, sollte dieser dunkel werden und umgekehrt. Dies sollte auch beim Wechseln von Webseiten (auf der bloefk.bbc-projects.ch Domain) vorhanden bleiben damit dieser Test erfüllt ist. |
| Abschnitt | Inhalt |
|---|---|
| ID | T-09 |
| Vorbedingungen | T-05 |
| Ablauf | Es werden alle Webseiten aufgerufen und es wird geprüft ob jede Schriftart (vorallem die Unicode Zeichen) so angezeigt wird wie sie soll. |
| Erwartetes Resultat | Alle Zeichen |
Ich habe währenddessen mein Wissen zu Webdesign anwenden und erweitern können.
Meistens wenn ich ein Problem hatte konnte ich dies in kurzer Zeit beheben. Aber die meiste Zeit ging alles «flüssig». Insbesondere gegen Ende finde ich, dass ich den Workflow um einiges ausgebaut habe, ich konnte vieles schneller umsetzen und hatte nicht mehr grosse Probleme bei der Umsetzung von diversen Sachen.
Ich bin alles in Allem sehr zufrieden mit meinem Endresultat.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent