Dokumentation
Tobias Bieber 182658
Stefano Gampe
178443 Sven Finner
182685 Benjamin Büchele
182691
Mit unserer Website „GuitArt“ präsentieren wir die Arbeit eines Gitarrenbauers in Hannover und begleiten Schritt für Schritt, wie aus einzelnen Werkstücken eine Akustikgitarre entsteht. Die Schritte werden hierfür mit Bildern von der Arbeit, erklärenden Texten und Videos untermauert, sowie am Ende ein 3D-Modell der fertigen Gitarre präsentiert.
Die einzelnen Elemente der Arbeitsschritte werden wie eine Geschichte präsentiert. Die Videos stellen hierbei den Kern der Arbeitsschritte dar. Sie zeigen den Meister bei der Arbeit und wur- den von einem professionellen Sprecher kommentiert.
Auf Wunsch können dann über Icons, die auf den Bildern zu finden sind, mehr Infos, via Text und Bild, zu den einzelnen Arbeitsschritten eingeblendet werden, indem der User auf die Icons klickt.
GuitArt entstand im Rahmen des Moduls „Medienintegration“ bei Professor Riempp.
Auf den nachfolgenden Seiten findet man die Konzeption und Ausarbeitung der entwickelten Webseite. Außerdem das Exposé, das Treatment, das Screenbook als auch letzte Änderungen und den finalen Stand der Webseite, sowie ein Fazit als auch ein Ausblick.
Vorwort 2
Exposè
4-11 Treatment
12-24 Screenbook
25-66 Änderungen
1. Medienbausteine 68 2. Videoproduktion 69 3. Hintergrundfarbe 70 4. Einfärbung des Logos 71 5. Entwicklung 72 6. Inhalt 73 7. Design 74 8. Historische Bilder 75 9.Typografie, Überschriften 76 10. Design + Animation 77 11. Inhalt 78
12. Neuigkeiten 79 Finaler Stand
Intro 81 Startseite 82 Zwischenüberschriften 83 Themenabschnitte 84 Text und Video 85
Funktion zum Gitarre stimmen 86 3D-Modell 87 Performance 88 Fazit + Ausblick
Fazit 90
Ausblick 91
Inhalt 3
GuitArt
Stefano Gampe………….178443
Sven Finner……….182685
Tobias Bieber……….182658
Benjamin Büchele……….182691
Unsere Website ““G GuuiittAArrtt”” soll einen Eindruck über das LLeebbeenn eeiinneerr G Giittaarrrree verschaffen und als fiktive Werbeseite für einen Gitarrenbauer aus Hannover dienen.
Die Website soll modern und im multimedialen Maße realisiert werden.
Dabei werden alle wichtigen SScchhrriittttee ddeerr EEnnttsstteehhuunngg einer Gitarre aufgezeigt:
Wie wird eine Gitarre gebaut? Welche Materialien und Teile werden benötigt? Was passiert nach dem Gitarrenbau mit dieser?
Dabei wird zum Einen auch auf die G Geesscchhiicchhttee und auf den BBaauu der Gitarre eingegangen, zum Anderen werden die vveerrsscchhiieeddeenneenn AArrtteenn von Gitarren präsentiert.
All diese Fragen und Themen werden mithilfe eines SSttoorryytteelllliinngg--KKoonnzzeeppttss
beantwortet, entsprechend den Anforderungen des Moduls “Medienintegration
Konzeption - Multimedia und Rich-Media” von Herrn Prof. Roland Riempp.
Ob bei einem großen Rockkonzert, am Lagerfeuer mit Freunden oder zuhause in den eigenen 4 Wänden. Die Gitarrenmusik begegnet uns oft im Leben.
Doch wie entsteht dieses vielseitige Instrument und was ist seine Geschichte dahinter?
Diese Webseite richtet sich an aallllee M Muussiikkbbeeggeeiisstteerrttee, die etwas mehr über Gitarren erfahren wollen.
Am Ende verweist die Seite durch einen Link auf den
Onlineshop eines G Giittaarrrreennbbaauueerrss in Hannover der auch der
fiktive Auftraggeber für diese Seite ist. Durch die
vorangegangenen Einblicke in seine Arbeit soll der Kunde
von der Q Quuaalliittäätt ddeerr PPrroodduukkttee überzeugt werden ohne das
zu aggressiv W Weerrbbuunngg betrieben wird.
Die Seite wird in Form eines SSiiddee--SSccrroolllleerrss realisiert. Dabei setzen wir die höchste Priorität auf die mobile Darstellung basierend des Mobil-First-Ansatzes. Das Logo unserer Webseite wird permanent an der oberen Bildschirmkante fixiert und besitzt die Funktion eines Home-Buttons, mit welchem man wieder zum Anfang gelangt. Die Geschichte wird per SSccrroollllyytteelllliinngg erzählt. Dabei werden an bestimmten Punkten verschiedene Icons/Buttons aufleuchten, welche bei Interaktion weitere
Informationen preisgeben.
Um sowohl einen eeddlleenn als auch
hhaannddw weerrkklliicchheenn C Chhaarraakktteerr unserer Website zu wahren, setzt sich unsere Farbpalette
größtenteils aus BBrraauunnttöönneenn, die an H Hoollzz
erinnern in verschiedenen Abstufungen, sowie Goldgelb oder Weiß, für Akzente und
Blickfänger, zusammen.
Die Brauntöne der Website sind angelehnt an das BBaauum maatteerriiaall der betreffenden Gitarren und auf ihrer Basis wurde mit Hilfe von
Farbharmonien die Schmuckfarben berechnet.
(Erster Logo-Entwurf)
Die Assets werden alle iinn EEiiggeennpprroodduukkttiioonn erstellt, bearbeitet, optimiert und
geschnitten.
Die Hauptbausteine der Webseite bilden die FFoottoo-- uunndd VViiddeeooaauuffnnaahhm meenn der
einzelnen Arbeitsschritte an einer Gitarre.
Aber auch TToonnaauuffnnaahhm meenn von Spielproben werden zu hören sein.
Dies alles setzt sich zu einem stimmigen, informativen und
musikalischen Erlebnis für den User zusammen. Es soll Lust darauf
machen sich mehr mit diesem
Instrument auseinanderzusetzen und vielleicht sogar ein paar erste
Spielversuche zu wagen.
Wir verfolgen als Team den Progressive Web App ((PPW WAA)) AAnnssaattzz. Mit diesem vereinen wir die Basics wie HTML, CSS und Javascript/JQuery mit dem Framework Node.js. Hinzu kommt die Möglichkeit, die Webseite als nnaattiivvee AApppp auf Smartphones bedienen zu können, weshalb eine JJSSO ON N U Unntteerrssttüüttzzuunngg nicht fehlen darf.
Zur Bearbeitung des Contents werden vorwiegend Produkte der Creative Cloud von Adobe verwendet. So werden Logos, Icons oder Buttons als Vektoren in Illustrator erstellt und hochauflösende Bilder in Photoshop und
Lightroom für unsere Zwecke aufbereitet. Filmische Werke werden in Premiere geschnitten und passende
Audiofiles in Audition verfeinert. Zusätzlich werden kleine Animationen in Animate erstellt.
GuitArt
Treatment
Team
Stefano Gampe………….178443
Sven Finner……….182685
Tobias Bieber……….182658
Benjamin Büchele……….182691
Idee
Unsere Website “GuitArt” soll einen Eindruck über das Leben einer Gitarre verschaffen und als fiktive Werbeseite für einen Gitarrenbauer aus Hannover dienen.
Die Website soll modern und im multimedialen Maße realisiert werden.
Dabei werden alle wichtigen Schritte der Entstehung einer Gitarre aufgezeigt:
Wie wird eine Gitarre gebaut? Welche Materialien und Teile werden benötigt? Was passiert nach dem Gitarrenbau mit dieser?
Dabei wird zum Einen auf die Geschichte und auf den Bau der Gitarre eingegangen, zum Anderen werden die verschiedenen Arten von Gitarren präsentiert.
All diese Fragen und Themen werden mithilfe eines Storytelling-Konzepts beantwortet, entsprechend den Anforderungen des Moduls
“Medienintegration Konzeption - Multimedia und Rich-Media” von Herrn Prof. Roland Riempp.
Ziele & Zielgruppe
Ob bei einem großen Rockkonzert, am Lagerfeuer mit Freunden oder zuhause in den eigenen 4 Wänden. Die Gitarrenmusik begegnet uns oft im Leben.
Doch wie entsteht dieses vielseitige Instrument und was ist seine Geschichte dahinter?
Diese Webseite richtet sich an alle Musikbegeisterte, die etwas mehr über Gitarren erfahren wollen.
Am Ende verweist die Seite durch einen Link auf den Onlineshop eines Gitarrenbauers in Hannover, der auch der fiktive Auftraggeber für diese Seite ist. Durch die vorangegangenen Einblicke in seine Arbeit soll der Kunde von der Qualität der Produkte überzeugt werden, ohne dass zu aggressivWerbung betrieben wird.
Aufbau & Navigation
Die Seite wird in Form eines Side-Scrollers realisiert. Dabei setzen wir die höchste Priorität auf die mobile Darstellung basierend des Mobile-First-Ansatzes. Das Logo unserer Webseite wird permanent an der oberen Bildschirmkante fixiert und besitzt die Funktion eines Home-Buttons, mit welchem man wieder zum Anfang gelangt.
Die Geschichte wird per Scrollytelling erzählt. Dabei werden an bestimmten Punkten verschiedene Icons/Buttons aufleuchten, welche bei Interaktion weitere Informationen preisgeben.
Aufbau & Navigation
Medienbausteine
Texte:
Unsere Texte werden als Informationselement zu der Geschichte und Entstehung der Gitarre
genutzt. Dabei basiert das auf der Website bereitgestellte Wissen auf selbst durchgeführten Recherchen im Internet, sowie auf Informationen von Seiten unseres gewählten Gitarrenbauers.
Bilder:
Die Bilder sollen die textlich beschriebenen Themen unterstützen, damit sich ein Besucher bestmöglich über Gitarren informieren kann.
Sowohl die einzelnen Teile und Materialien, als auch die Gitarrenarten an sich sollen auf der Website ersichtlich sein.
Die (meisten der) hier verwendeten dargestellten Bilder sind eigene Aufnahmen der Arbeit unseres ausgewählten Gitarrenbauers aus Hannover.
Medienbausteine
Video:
Wie die Bilder soll auch mindestens ein Video das Thema Gitarren bildlich veranschaulichen. Das Video soll unter anderem die Arbeitsschritte an einer Gitarre zeigen.
Sobald das Video startet, sollen alle anderen Audio-Elemente (die Atmo) pausieren, um nicht vom Inhalt des Videos abzulenken.
Das Video soll von selbst starten, wenn der entsprechenden Punkt der Website erreicht ist, da es zum Storytelling beitragen soll. Es wäre somit für einen Nutzer, der die Website nicht kennt, nicht sinnvoll, den Videoinhalt unbewusst zu überspringen.
Animation:
Scroll-Animationen sollen das Storytelling unterstützen und zwischen den einzelnen Bereichen der Website einen fließenden Übergang verschaffen. So gibt es zum Beispiel Fade-In und Fade-Out-Animationen, um die Informationen nicht abrupt darzustellen.
Medienbausteine
Audio:
Als atmosphärische Unterstützung zur Website dienen selbst eingespielte Gitarrenmelodien unserer Wahl. Zudem sollen an bestimmten Stellen des Storytellings passende Sounds zum Inhalt der Story auftreten, welche die Bild- und Textelemente unterstützen.
Es soll dem Besucher möglich sein, die Lautstärke über einen Lautstärkeregler manuell lauter und leiser einzustellen, oder den Ton stumm zu schalten.
Sobald ein Video auf der Website abgespielt wird, wird die Audiospur der Atmo pausiert.
Zusätzlich soll für die Besucher eine kleine Web-Applikation zum Stimmen einer Gitarre eingebunden werden. Unter Verwendung eines Mikrofons kann der Besucher eine Saite anspielen, zu der passend auf dem Bildschirm die gespielte Note erscheinen soll.
Typografie
Logoschrift: GuitArt
Überschrift: GuitArt
Fließtext : GuitArt
Edwardian Script ITC
Die Schriftart die dieses Projekt charakterisiert. Sie stellt den künstlerische und traditionellen Hintergrund dar.
Kozuka Mincho Pro R
Diese Typografie leitet die einzelnen Themen ein. Die Serifen sollen unauffällig das edle Design der Seite betonen.
Microsoft Yi Baiti
Die serifenlose Schriftart ist für den Fließtext. Auch längere Texte sind mit ihr gut zu lesen und das Schriftdesign fügt sich passend in das Gesamtbild der Seite ein.
Farben
662d23 f7931e 000000 855b3d f8d050 43292a b89679 f8eecc 5b3b26
Um sowohl einen edlen als auch handwerklichen Charakter unserer Website zu wahren, setzt sich unsere Farbpalette größtenteils aus Brauntönen, die an Holz erinnern, in verschiedenen
Abstufungen, sowie Goldgelb oder Weiß, für Akzente und Blickfänger, zusammen.
Die Brauntöne der Website sind angelehnt an das Baumaterial der betreffenden Gitarren und auf ihrer Basis wurde mit Hilfe von Farbharmonien die Schmuckfarben berechnet.
Technische Umsetzung
Für die Umsetzung der Idee verfolgen wir, als Team, den Progressive Web App (PWA) Ansatz.
Diese Apps können wie jede andere Webseite auch mit HTML5, CCS3 und JavaScript realisiert werden. Ein besonderer Fokus bei diesem Ansatz wird auf die priorisierte Unterstützung von Smartphones gelegt, welcher sich als ein responsives Design wiederspiegelt. Somit erfüllen wir ebenfalls alle Anforderungen für den Mobile- First-Ansatz.
Der große Vorteil dieser Idee äußert sich in einer effizienteren Entwicklungszeit. Früher musste ein Team jeweils eine mobile Webseite und eine native App entwickeln. Eine PWA macht die doppelte Entwicklung nun überflüssig, da sie sowohl über eine URL aufgerufen, als auch offline auf dem Gerät bereitgestellt werden könnte.
Technische Umsetzung
Damit die App problemlos offline nutzbar sein wird, müssen alle Dateien auf dem Endgerät gespeichert werden - das sogenannte Caching.
Hierbei spielen die Service Worker eine wichtige Rolle. Diese werden im Web-Browser im Hintergrund ausgeführt und stellen alle essentiellen Funktionalitäten wie das Caching für die Offline-Verwendbarkeit zur Verfügung. Für die Initialisierung solcher Worker wird JSON benötigt und für mögliche Server-Kommunikation könnte node.js zum Einsatz kommen.
Jedoch unterstützen nicht alle Browser diese Funktionalität. Deshalb beschränken wir uns auf Firefox und werden dort alle erforderlichen Funktionalitäten implementieren.
Zur Realisierung des Contents werden die Produkte der Creative Cloud von Adobe verwendet.
Screenbook
Konzeption
Idee 4 Ziele und Zielgruppe 5 Aufbau und Navigation 6 Medienbausteine
Texte, Bilder, Animation 8 Video und Audio 9 Typografie 10 Farben 11 Icons 12 Logo 13 Technik
Technische Umsetzung 15 Webstorm 17 Node.js 18 Json 19 Lighthouse 20
Inhalt
S. 1: Klangholz 22 S. 2: Vorbereitende Arbeiten 23 Historischer Text 1 24
S. 3: Das Biegen der Zarge 25 Historischer Text 2 26 S. 4: Der Korpus 27 S. 5: Der Hals 29 Historischer Text 3 31 S. 6: Das Bundieren 32 Historischer Text 4 33 S. 7: Die Lackierung 34 Historischer Text 5 35
S. 8: Die Gitarre „spielfertig“ machen
36 Historischer Text 6 38 S. 9: Das fertige Instrument 39 Historischer Text 7 40 Organisation
Projektplan - Gantt 42
Inhalt 26
Konzeption
Unsere Website “GuitArt” soll einen Eindruck über das Leben einer Gitarre verschaffen und als fiktive Werbeseite für einen Gitarrenbauer aus Hannover dienen.
Die Website soll modern und im multimedialen Maße realisiert werden.
Dabei werden alle wichtigen Schritte der Entstehung einer Gitarre aufgezeigt:
Wie wird eine Gitarre gebaut?
Welche Materialien und Teile werden benötigt?
Was passiert nach dem Gitarrenbau mit dieser?
Dabei wird zum Einen auch auf die Geschichte und auf den Bau der Gitarre eingegangen, zum Anderen werden die verschiedenen Arten von Gitarren präsentiert.
All diese Fragen und Themen werden mithilfe eines Storytelling-Konzepts beantwortet, entsprechend den Anforderungen des Moduls
“Medienintegration Konzeption - Multimedia und Rich-Media” von Herrn Prof. Roland Riempp.
Idee 28
Ob bei einem großen Rockkonzert, am Lagerfeuer mit Freunden, oder zuhause in den eigenen 4 Wänden: Die Gitarrenmusik begegnet uns oft im Leben.
Doch wie entsteht dieses vielseitige Instrument und was ist die Geschichte dahinter?
Diese Webseite richtet sich an alle Musikbegeisterte, die etwas mehr über Gitarren erfahren wollen.
Am Ende verweist die Seite durch einen Link auf den Onlineshop eines Gitarrenbauers in Hannover, der auch der fiktive Auftraggeber für diese Seite ist.
Durch die vorangegangenen Einblicke in seine Arbeit soll der Kunde von der Qualität
der Instrumente und Produkte überzeugt werden, ohne dass aggressiv Werbung betrieben wird.
Ziele und Zielgruppe 29
Die Seite wird in Form eines Side-Scrollers realisiert. Dabei setzen wir die höchste Priorität
auf die mobile Darstellung basierend des Mobil-First-Ansatzes. Das Logo unserer Webseite wird permanent an der oberen Bildschirmkante fixiert und besitzt die Funktion eines Home-Buttons, mit welchem man wieder zum Anfang gelangt. Die Geschichte wird per Scrollytelling erzählt.
Dabei werden an bestimmten Punkten verschiedene Icons/Buttons aufleuchten, welche bei Interaktion weitere Informationen preisgeben.
Aufbau und Navigation 30
Medienbausteine
Texte
Unsere Texte werden als Informationselement zur der Geschichte und Entstehung der Gitarre genutzt. Dabei basiert das auf der Website be- reitgestellte Wissen auf selbst durchgeführten Recherchen im Internet, sowie auf Informatio- nen von Seiten unseres gewählten
Gitarrenbauers.
Bilder
Die Bilder sollen die textlich beschriebenen Themen unterstützen, damit sich ein Besucher bestmöglich über Gitarren informieren kann.
Sowohl die einzelnen Teile und Materialien, als auch die Gitarrenarten an sich sollen auf der Website ersichtlich sein.
Die Mehrheit der verwendeten dargestellten Bilder sind eigene Aufnahmen der Arbeit unseres ausgewählten Gitarrenbauers aus Hannover.
Animation
Scroll-Animationen sollen das Storytelling unterstützen und zwischen den einzelnen Bereichen der Website einen fließenden Über- gang verschaffen. So gibt es zum Beispiel Fade-In und Fade-Out-Animationen, um die Informationen nicht abrupt darzustellen.
Medienbausteine 32
Video
Wie die Bilder soll auch mindestens ein Video das Thema Gitarren bildlich veranschaulichen.
Das Video soll unter anderem die Arbeits- schritte beim Bau einer Gitarre aufzeigen.
Sobald das Video startet, sollen alle anderen Audio-Elemente (die Atmo) pausieren, um nicht vom Inhalt des Videos abzulenken.
Das Video soll von selbst starten, wenn der entsprechende Punkt der Website erreicht ist, da es zum Storytelling beitragen soll. Es wäre somit für einen Nutzer, der die Website nicht kennt, nicht sinnvoll, den Videoinhalt unbe- wusst zu überspringen.
Audio
Als atmosphärische Unterstützung zur Web- site dienen selbst eingespielte Gitarrenmelo- dien unserer Wahl. Zudem sollen an bestimm- ten Stellen des Storytellings passende Sounds zum Inhalt der Story auftreten, welche die Bild- und Textelemente unterstützen.
Es soll dem Besucher möglich sein, die Laut- stärke über einen Lautstärkeregler manuell lauter und leiser einzustellen, oder den Ton stumm zu schalten.
Sobald ein Video auf der Website abgespielt wird, wird die Audiospur der Atmo pausiert.
Zusätzlich soll für die Besucher eine kleine Web-Applikation zum Stimmen einer Gitarre eingebunden werden. Unter Verwendung eines Mikrofons kann der Besucher eine Saite anspielen, zu der passend auf dem Bildschirm die gespielte Note erscheinen soll.
Medienbausteine 33
Edwardian Script ITC
Die Schriftart die dieses Projekt charakterisiert. Sie stellt den künstlerischen und traditionellen Hintergrund dar.
Kozuka Mincho Pro R
Diese Typografie leitet die einzelnen Themen ein. Die Serifen sollen unauffällig das edle Design der Seite betonen.
Montserrat ExtraLight
Die serifenlose Schriftart wird für den Fließtext eingesetzt. Auch längere Texte sind mit ihr gut zu lesen und das Schriftdesign fügt sich passend in das Gesamtbild der Seite ein.
Eyecatcher:
Überschrift:
Fließtext:
GuitArt
GuitArt
GuitArt
Typografie 34
Um sowohl einen edlen als auch handwerklichen Charakter unserer Website zu wahren, setzt sich unsere Farbpalette größtenteils aus warmen Brauntönen, die an Holz erinnern, in verschie- denen Abstufungen, sowie Goldgelb oder Weiß, für Akzente und Blickfänger, zusammen.
Die Brauntöne der Website sind angelehnt an das Baumaterial der betreffenden Gitarren und auf ihrer Basis wurde mit Hilfe von Farbharmonien die Schmuckfarben berechnet.
662d23 855b3d b89679
000000 43292a 5b3b26 f7931e
f8d050
f8eecc
Farben 35
Die eigens für diesen Zweck erstellten Icons wer- den auf der finalen Website eingesetzt werden um zusätzliche, einblendbare Hinweise zu den einzelnen Schritten in der Herstellung der Gitar- re anzuzeigen. Der Besucher der Website klickt auf diese und der jeweilige Inhalt, ob nun Text, Animation oder Video öffnet sich, während der Rest der Website, durch verringerte Sättigung, dezent in den Hintergrund tritt.
Die jeweilige Art des Icons lässt darauf schließen um welche Art Inhalt es sich handelt.
Das Wachssiegel steht für geschichtliche Infor- mationen, während der Gitarrenkopf tiefergrei- fende Informationen zu dem jeweiligen Arbeits- schritt bereit hält.
Icons 36
Der Schriftzug des Logos ist eine Wortschöpfung aus den beiden englischen Wörtern „Guitar“
und „Art“, ein deutlicher Hinweis darauf, dass Gitarrenbau und Kunst Hand in Hand gehen.
Alle Regeln im Umgang mit einem Logo, wie Unveränderlichkeit, werden konsequent befolgt.
Logo 37
Technik
Für die Umsetzung der Idee verfolgen wir, als Team, den Progressive Web App (PWA) Ansatz.
Diese Apps können, wie jede andere Webseite, auch mit HTML5, CCS3 und JavaScript realisiert werden.
Ein besonderer Fokus bei diesem Ansatz wird auf die priorisierte Unterstützung von Smartphones gelegt, welcher sich als ein responsives Design wiederspiegelt. Somit erfüllen wir konsequent alle Anforderungen für den
Mobile-First-Ansatz.
Der große Vorteil dieser Idee äußert sich in einer effizienteren Entwicklungszeit. Früher musste ein Team jeweils eine mobile Webseite und eine nati- ve App entwickeln. Eine PWA macht die doppelte Entwicklung nun überflüssig, da sie sowohl über eine URL aufgerufen, als auch offline auf dem Gerät bereitgestellt werden kann.
Technische Umsetzung 39
Damit die App problemlos offline nutzbar sein wird, müssen alle Dateien auf dem Endgerät ge- speichert werden - das sogenannte Caching.
Hierbei spielen die Service Worker eine wichtige Rolle. Diese werden im Web-Browser im Hinter- grund ausgeführt und stellen alle essentiellen Funktionalitäten wie z.B. das Caching für die Offline-Verwendbarkeit zur Verfügung. Für die Initialisierung solcher Worker wird JSON benötigt und für mögliche Server-Kommunikation könnte node.js zum Einsatz kommen.
Jedoch unterstützen nicht alle Browser diese Funktionalität. Deshalb beschränken wir uns auf Firefox und werden dort alle erforderlichen Funk- tionalitäten implementieren.
Zur Realisierung des Contents werden die Pro- dukte der Creative Cloud von Adobe verwendet.
Technische Umsetzung 40
Die integrierte Entwicklungsumgebung Webstorm bietet die bestmöglichen Tools zur Verwirklichung einer Progressiven Web App.
In erster Linie wird die IDE zur Entwicklung von Mobilen Apps mit Hilfe der Programmiersprache JavaScript erstellt.
Zusätzlich werden Techniken wie HTML5, Node.js und Bootstrap unterstützt, welche nach Bedarf als Plug-In hinzugefügt werden könnten.
Somit lässt sich der Funktionsumfang nach Belieben erweitern. Trotz der minimalistischen Bedienoberfläche stellt Webstorm vielversprechende Funktionen bereit, wie Unit Test und Tools zur Versionskontrolle.
Webstorm 41
Für die Realisierung eines Webservers, der die Möglichkeit besitzt mit einem Client zu kommunizieren, wird eine serverseitige Plattform wie node.js verwendet.
Node.js zeichnet sich für seinen Fokus auf Performance aus. So lässt sich eine asynchrone
Netzwerk Kommunikation problemlos realisieren. Des Weiteren bauen viele verwendete Plugins, wie z.B. Firebase, auf dem node.js Framework auf, weshalb es sich zu einem festen Bestandteil des Projekts etabliert.
Node.js 42
Die JavaScript Object Notation, oder kurz JSON, ist ein kompaktes Datenformat, welches in
unserem Projekt für den Datenaustausch zwischen Webserver und Client fungiert.
Dabei werden Daten seriell zwischen beiden Kommunikationspartnern ausgetauscht.
Ein wichtiger Aspekt, welchen wir mit JSON realisieren möchten, ist das Cachen der Pro- gressiven Web App auf dem jeweiligen lokalen System. Somit besitzt der Client die Möglichkeit, die Anwendung auch ohne Internetanbindung starten zu können.
Json 43
Lighthouse ist eine Open-Source Software, welche es ermöglicht, voll automatisch die eigene Webseite auf Qualitätsmerkmale zu testen.
Hierbei wird vor allem der Progressive Web App Ansatz berücksichtigt. Weitere Testkategorien können die Leistung, Zugänglichkeit, Best
Practices und Suchmaschinenoptimierung sein.
Nach erfolgreicher Testdurchführung gibt das Tool sofort Rückmeldung auf den derzeitigen Entwicklungsstand. Es werden Punkte
von 0 (Schlecht) bis 100 (sehr gut) vergeben.
Sollten Mängel vorhanden sein, so wird man auf diese hingewiesen und auf einen Lösungsansatz verlinkt.
Lighthouse 44
Inhalt
Am Anfang einer jeden Gitarre steht ein Stück Holz. Holz, das durch seine Sorte, die Qualität, die Lagerung und durch sein Wachstum den Klang und die Lautheit des Instruments grund- legend beeinflusst. Es werden nur Hölzer verwendet, die wenig Äste aufweisen und viele Jahre gelagert werden um an der Luft zu trocken. So verliert das Holz nach und nach seine internen Spannungen und kann bedenkenlos verbaut werden, ohne dass das Instrument später Risse bekommt und birst. Im Gitarrenbau findet man meist tropisches Hartholz, das verwendet wird, um die einzelnen Teile stabil und langlebig zu fertigen.
Für die Decke verwendet man oft Fichte oder Kanadische Rotzeder, da die Schallgeschwindigkeit und Elastizität hier sehr hoch sind. Dieses Holz wird auch Resonanzholz genannt.
Das Korpusholz für Boden und Zarge (die Seitenwand der Gitarre) besteht oft aus Ostindischem Palisander, Riegelahorn, Ahorn, spanischer Zeder oder Mahagoni.
Mahagoni wird auch sehr oft beim Gitarrenhals verwendet. Für das Griffbrett benötigt man ein sehr hartes Holz, welches sich auch nach vielen Jahren des Spielens nicht abnutzt.
1. Seite: Klangholz (Textbox) 46
Das Fügen
(Video: Der fortlaufende Arbeitsgang des Fügens)
Bäume, aus denen Klangholz gefertigt wird, sind nicht sonderlich breit. Aus einem Holz-Rohling gewinnt man nur jeweils eine Hälfte des Korpus. Deshalb muss man zwei Rohlinge zusammen- fügen. Das geschieht durch eine sorgfältig vorbereitete Leimung mit Knochenleim (oder auch Tierleim genannt).
Die Kanten der beiden Tonhölzer werden akribisch bearbeitet, um einen perfekten rechten Winkel zu erreichen. So passen sie später wie Zwillinge zueinander und bilden eine makelose Einheit, die sogar stabiler ist als das Klangholz selbst.
In Form bringen
(Video: Die einzelnen Tonholz-Rohlinge werden in eine Breitbandschleifmaschine geschoben) Nachdem die Leimfuge getrocknet ist, werden die Klanghölzer weiterverarbeitet. Um die ge- wünschte Stärke bzw. Dicke der Tonholz-Rohlinge zu erhalten, bearbeitet man diese mit Hilfe einer Breitbandschleifmaschine. Hier wird, wie der Name schon sagt, mit einem sehr breiten Schleifband nach und nach, Material an der Holzoberfläche weggenommen, um es auf den Zehntel genau auf das benötigte Maß zu bringen.
(Video: Boden und Decke werden mit einer Laub- oder Bandsäge zugeschnitten) Anschließend werden Boden und Decke mit Hilfe der Schablone aufgezeichnet.
Dann kommt die Säge zum Einsatz und die Form der Gitarre wird das erste Mal erkennbar.
2. Seite: Vorbereitende Arbeiten (Video) 47
Zum zweitem Thema – Vorbereitende Arbeiten
Die ersten Schritte im Gitarrenbau kennt Ihr nun. Aber woher stammt dieses vielseitige Instrument eigentlich?
Sprachlich gesehen hat das Wort mehrere Abstammungen.
(Spanisch guitarra, arabisch qitara, altgriechisch Kithara)
In der Form, wie wir die Gitarre heute kennen, gibt es sie seit dem 19. Jahrhundert. Den Ursprung hat sie allerdings schon viel tiefer in der Vergangenheit.
Laut Archäologen gibt es Höhlenmalereien aus den Jahren 10000 v. Chr, die ein erstes Saiteninstrument zeigen - den Jagdbogen, mit einer
Sehne gespannt an einem Holzstab.
Ägyptische Zeichnungen von vor etwa 5000 Jahren zeigen Frauen aus der Zeit der Pharaonen, die Instrumente ähnlich einer Gitarre spielen.
Image: https://upload.wikimedia.org/wikipedia/commons/3/39/Britannica_Guitar_Egypt.jpg
Historischer Text 1 48
(Video: Aufnahmen der unbearbeiteten Rohlinge)
Wie bei Boden und Decke, besteht auch der Zargenkranz aus zwei Rohlingen. Jeder bildet später eine Hälfte der Seitenwand der Gitarre. Diese besitzen viel weniger Stärke als Boden und Decke und somit sehr flexibel.
(Video: Biegen der Zarge am Biegeeisen)
Mit Hilfe eines Biegeeisens wird nun der Rohling plastisch verformt. Dieses Biegeeisen wird auf ca. 230 °C erhitzt und verflüssigt das Harz in der Zarge. Wenn es abkühlt und sich wieder verfestigt, hält es das Holz in der zuvor gebogenen Form.
Dieser Arbeitsschritt ist hier sehr traditionell gehalten und erfordert viel Geduld und Präzision.
Immer wieder muss das gebogene Holz mit der Schablone abgeglichen und korrigiert werden.
(Video: Herstellung und Verleimung der Klötze)
Sind die Zargen in Form gebogen, folgt das Fertigen vom End – und des Halsklotzes. Diese verbinden die beiden Zargen und bringen Stabilität in das Instrument. Der Halsklotz bildet die Grundlage der Aufnahme des Gitarrenhalses. Der End- oder Unterklotz kann später dafür ver- wendet werden, um eine Klinke-Buchse für einen Tonabnehmer zu installieren.
(Video: Biegen und verleimen der Reifchen)
Um eine größere Klebefläche zwischen Zarge, Boden und Decke zu erhalten, werden sogenannte Reifchen in die Innenseite der Zarge geleimt.
3. Seite: Das Biegen der Zarge (Video) 49
Zu Thema 3 + 4 – Korpusbau
Die Anforderungen der Instrumente änderten sich durch den großen Einfluss des Christentums.
Man wollte mehrstimmige Instrumente haben. Somit wurde der Resonanzkörper aus mehreren Brettchen zusammengeleimt. Damit dem Druck, der durch Ansetzen des Gitarrenhalses ent- steht, entgegengewirkt wird, wurden die Seitenteile entsprechend nach außen gebogen.
Musikforscher vermuten, dass dies die ersten Impulse auf dem Weg zur heutigen Form der Gitarre waren. Denn auch damals hatten manche der gebauten Instrumente schon einen eher flachen Körper, so, wie wir es heute nun kennen.
Historischer Text 2 50
(Video: Verzierung und Bohrung des Schalllochs)
Als nächstes wird in der Decke eine Zentrierbohrung für das Schallloch gesetzt. An dieser kann man sich auch orientieren, wenn man die Nut für die Verzierung, die Schalllocheinlage ausfräst.
Die Verzierung ist eine Kunst für sich. Sie kann aus mehreren Holzmosaiken oder Holzspan- ornamenten bestehen. Eine aufwendige und filigrane Arbeit, die der Gitarre eine unverwechsel- bare Optik verleiht.
Nachdem die Schalllocheinlage verleimt und getrocknet ist, muss der Überstand abgeschliffen werden. Danach folgt noch die Bohrung des eigentlichen Schallloches.
(Video: Bracing von Boden und Decke der Gitarre)
Da Boden und Decke der Gitarre sehr dünn und damit anfällig für Beschädigungen auf Grund des hohen Saitenzugs sind, müssen sie verstärkt werden. Aber gleichzeitig müssen sie noch so gut wie möglich schwingen. Dies erreicht man mit einem so genannten Bracing. Dabei werden dünne, speziell bearbeitete Leisten auf die Innenseite von Boden und Decke geleimt.
Hier sehen wir ein sogenanntes X-Bracing. Zwei überkreuzte Leisten bilden den Schnittpunkt zwischen Schallloch und Steg. Es gibt unter Anderem noch das Forward Shifted X-Bracing oder das Scalloped Bracing. Je nach Wahl des Bracings verändert sich der Klang der Gitarre.
Sind die Leisten angebracht, ist das Gewicht der einzelnen Bauteile jetzt wieder zu hoch und das Holz ist viel zu steif. Es kann nicht mehr gut Schwingen und das wirkt sich erheblich auf den Klang und die Lautstärke des Instruments aus.
4. Seite: Der Korpus (Video) 51
Um an diesem kritischen Punkt ein zufriedenstellendes Ergebnis zu erhalten, wird die Decke nun „gestimmt“. Dies wird mit einem Klopftest realisiert. Es gilt nun durch Hören zu erkennen, wann der Punkt erreicht ist wo Flexibilität und Steifigkeit des Holzes sich perfekt die Waage halten.
Indem man die Leisten in die Vertikale zu einem Dreieck ausarbeitet, reduziert man das Gewicht und erhöht die Flexibilität, behält aber die angestrebte Stabilität bei.
Ein weiteres Mittel, um diesen Effekt noch zu erhöhen, ist das sogenannte Ausfedern.
Am äußeren Rand der Decke wird an den Leisten auch in der Höhe Material entfernt.
Dadurch wird dieser Bereich der schwingfreudigste der ganzen Gitarre.
Nachdem der Gitarrenbauer mit dem Ergebnis des Klopftests zufrieden ist, schwingt die Decke nun wie eine Einheit, vergleichbar wie die Membran eines Lautsprechers.
Nun folgt das Bracing des Bodens bei dem die Arbeitsschritte, denen der Decke gleichen.
Hier wird allerdings auf eine traditionelle Form des Bracings zurück gegriffen, da der Boden naturgemäß steifer als die Decke der Gitarre ist.
Nun folgt das sogenannte „Aufschachteln“. Die Zarge wird mit dem Boden und der Decke verleimt. Zum Trocken wird die Gitarre traditionell mit Schnur umwickelt, um einen
geeigneten Anpressdruck zu erhalten. Ist der Korpus getrocknet, werden Zierränder eingesetzt.
Dies dient einerseits der Ästhetik anderseits dem Kantenschutz.
4. Seite: Der Korpus (Video) 52
(Bilder: Halsrohling unbearbeitet und das Verfahren der „verdrehten Kopfplatte“)
Kaum zu glauben, dass aus so einem kantigen Stück spanischer Zeder später mal ein aufwendig verarbeiteter Gitarrenhals wird. Um die Grundlage dafür zu schaffen wendet der Gitarrenbauer eine bestimmte Technik an. Bei der sogenannten „verdrehten Kopfplatte“ wird am oberen Ende des Rohlings ein diagonaler Schnitt von 14° durchs Holz gesägt. Nun wird der dabei entstandene Keil 180° in seiner horizontalen Achse gedreht und mit seiner Unterseite wieder an den Hals an- geleimt. Auf diese entstandene Fläche kommt später das Griffbrett, deshalb muss diese perfekt auf einem Niveau sein.
(Bilder: Einsetzen des Spannstabs und Verstärkungen)
Als nächstes Folgen drei Fräsungen in die Rückseite des Rohlings. In der Mitte wird der Spann- stab eingesetzt. Ein dünnes Metallrohr mit zwei Gewinden. Dieser hilft später dem Saitenzug der entgegenzuwirken. In die anderen beiden Nuten kommen zwei Carbonfaser-Verstärkungen für die allgemeine Stabilität.
(Bilder: Arbeitsgang Halsfuß)
5. Seite: Der Hals (Diashow) 53
Nun folgt das Leimen des Halsfußes der später die Verbindung zum Korpus herstellt. Um die- se Verbindung herzustellen wird am Fuß ein Zapfen herausgearbeitet der perfekt in die Nut im Korpus passt. Anschließend wird das Griffbrett aus Ebenholz zurechtgesägt und aufgeleimt. Der Rohling erhält seine erste grobe Form und die Bohrungen für die Schraubverbindung zwischen Hals und Korpus werden gesetzt.
(Bilder: Kopf wird bearbeitet und Finalisierung)
Der Kopf erhält seine Form. Mit Hilfe einer Schablone wird er fast perfekt auf Maß gebracht und die Pilotbohrungen der Stimmmechaniken könne bereits gesetzt werden. Auf der Rückseite wird die sogenannte Volute geformt. Sie erfordert kunstvolles, handwerkliches Geschick und ein gutes Augenmaß. Zum Abschluss erhalten beide Seiten des Kopfes ein Deckfunier.
Mit viel Handarbeit wird der Hals schließlich in seine finale Form gebracht.
5. Seite: Der Hals (Diashow) 54
Zu Thema 5 - Hals
Schon zu Zeiten des Römischen Reichs waren Saiteninstrumente mit Resonanzkasten und Hals in Verwendung. Doch die Entwicklung der Laute schritt voran. Nun wurde der Hals nur noch an den Körper angesetzt, im Gegensatz zur ursprünglichen Bauweise, als dieser über die gesamte Länge des Korpus hinwegging.
https://upload.wikimedia.org/wikipedia/commons/5/5f/Neapolitan_mandolin_001.jpg
Historischer Text 3 55
(Bilder: Bunddraht wird in Form gebogen und eingesetzt)
Die Spielbarkeit bezeichnet die Qualität der Handhabung des Instruments. Das Bundieren spielt hierbei eine wichtige Rolle. Hierbei müssen die Bünde der Wölbung des Griffbretts entsprechen.
Nach dem die Bundschlitze gereinigt worden sind werden die Bünde eingeleimt und gepresst.
Der Überstand an den Seiten wird abgefeilt damit keine Verletzungsgefahr besteht.
(Bilder: Bünde abrichten)
Um ein einheitliches Niveau der Bünde auf dem Griffbrett zu erhalten, werden diese mit einer großen Blockfeile abgerichtet.
(Bilder: Bundkrone wiederherstellen und Finalisierung Bundierung)
Um danach die sogenannte Bundkrone wiederherzustellen, also die abgeflachte Oberfläche nun wieder abzurunden, verwendet man eine spezielle Bundfeile. Diese besitzt dieselbe Form wie der Bund. Durch seitliches Abrunden, Feinschliff und Politur wird das Bundieren abgeschlossen.
6. Seite: Das Bundieren (Diashow) 56
Zu Thema 6 - Bundieren
Im 10. Jahrhundert sollen Mauren, die damals in Spanien herrschten, ein bereits ausgereiftes Instrument mit nach Europa gebracht haben, die sogenannte „Oud“.
Oud stammt vom arabischen Wort al-oud ab, was nicht mehr bedeutet als „das Holz“.
Somit gelang eine arabische Laute in unsere Nähe, die heutzutage ohne Bünde gespielt wird.
Aus der Oud entwickelte sich anschließend die Laute aus der Zeit der Renaissance, welche sehr ähnlich aufgebaut war, jedoch wurden bei der Laute erstmals Bünde hinzugefügt.
Bild: https://upload.wikimedia.org/wikipedia/commons/8/88/Oud2.jpg
Historischer Text 4 57
(Bilder: Einzelne Schleifgänge und Wässerung)
Je dünner Lack auf die Gitarre aufgetragen wird um so besser kann das Holz schwingen. Deshalb wird hier eine traditionelle Schellacklackierung verwendet. Hierfür muss das Holz allerdings
zuerst sehr fein geschliffen werden. Dabei wird es sehr hell. Deshalb spricht man auch von
„weißfertig machen“. Zwischen den einzelnen Schleifgängen wird das Instrument immer wieder gewässert. Das hat den Hintergrund, dass sich die Holzfasern immer wieder neu aufrichten und somit noch feiner geschliffen werden können.
(Bilder: Auftragen der Leimtränke und weiterer Schliff)
Der nächste Schritt ist die sogennate Leimtränke. Hier wird stark mit Wasser verdünnter
Knochenleim auf den Korpus aufgetragen. Dies ist die erste Imprägnierung gegen Feuchtigkeit und füllt kleinste Poren im Holz auf. Danach erhält man eine sehr glatte Oberfläche.
(Bilder: Lackierung)
Nach einem weiteren Schleifgang wird nun der Schellack aufgetragen. Das Verfahren nennt sich französische Politur und ist ein langwieriges Unterfangen. Hierbei wird ein Polierballen mit einer Baumwollfüllung leicht in Lack getränkt und in kreisenden Bewegungen solange über das Holz geführt bis er trocken ist. Das wird unzählige Male wiederholt bis eine mehrschichtige dünne Lackschicht den ganzen Korpus überzieht.
(Bilder: Firnis des Halses)
Der Hals wird nicht lackiert. Er erhält nach dem Schliff eine Leinölfirnis aus gekochtem Leinöl die mit einem Pinsel aufgetragen wird.
7. Seite: Die Lackierung (Diashow) 58
Zu Thema 7 – Lackierung
Die aus der Oud entstandene Renaissancelaute (Mandora) besaß meist vier bis sechs Chöre. Chöre sind im Prinzip nichts anderes als Saitenpaare. Jedoch entwickelte sich diese Laute im Zeitalter des Barocks weiter. Anstatt jedoch dem im Barock üblichen Anschlagen der Saiten wurde das Melodiespiel wieder beliebter und geriet in den Vordergrund. So bekam die spanische Gitarre kurz vor Ende des 18. Jahrhunderts ihre sechste Saite, wie sie auch bei der Mandora eingesetzt wurde.
Bild:
https://i.pinimg.com/originals/ee/04/a3/ee04a32595d- f272bd8389029e184f289.jpg
Historischer Text 5 59
(Video: Letze Arbeiten und Finalisierung des Instruments)
Korpus und Hals werden durch die Verschraubung endlich vereint. Wir befinden uns nun in den letzten Zügen der Fertigung. Diese verlangt dem Gitarrenbauer nochmal viel Geschick und Handwerkskunst ab.
Der obere Sattel, der traditionell aus Rinderknochen besteht, wird gefertigt. Er sitzt an der Stelle wo der Hals in den Kopf übergeht. Weiter oben werden die Stimmmechaniken montiert.
Nun folgt die Positionierung und Befestigung des Stegs mit Hilfe einer Schablone. Die Position wird mit einem scharfen Messer in den Lack geschnitten und die Unterseite des Stegs wird an die Wölbung der Decke angepasst. Dann wird der Steg aufgeleimt. Auch hierfür wird nun ein Sattel aus Rindsknochen gefertigt und befestigt. Dieser bekommt anstatt der Saitenführungen sogennante Kompensationen. Diese Helfen tragen später dazu bei, dass beim Greifen der
Saiten weniger Kraft aufgewandt werden muss. Um die Saiten befestigen zu können werden sechs Löcher in den Steg und die Decke gebohrt. Hier folgen die Saiten, die mit den Bridgepins in den Löchern befestigt werden. Es wird nun das erste Mal besaitet und gestimmt. Danach ruht das Instrument die nächsten zwei Wochen und um die Spannungen im System zu verteilen.
8. Seite: Die Gitarre „spielfertig“ machen (Video) 60
Durch den ersten Saitenzug hat sich der Hals leicht verzogen. Um dem entgegenzuwirken wird der Spannstab angezogen. Die Saiten werden entfernt und es beginnen die letzten Arbeiten an den Sätteln. Oben werden die Kerben nochmals vertieft, um das Greifen in den tiefen Tonlagen noch komfortabler zu machen. Unten erhält die Kompensation den finalen Schliff. Um das Niveau der Saiten anzupassen wird an der Unterseite der Sättel Material entfernt.
Das Instrument wird gereinigt und das Griffbrett erhält eine Ölung, um noch widerstandsfähiger gegen Abnutzung zu sein. Dann wird die Gitarre wieder besaitet und gestimmt. Das Instrument ist fertig.
8. Seite: Die Gitarre „spielfertig“ machen (Video) 61
Zu Thema 8 – Spielfertig machen
Als weiterer Vorläufer der Gitarre zählt der persische Setar, eine Langhalslaute, ursprünglich mit drei Saiten („se“ = drei, „tar“ = Saite). Die heutige Setar besitzt meistens 4 Saiten, wie auch auf der Abbildung zu sehen ist. Genau wie bei der akustischen Gitarre ist der Korpus aus Holz zusammengesetzt, oftmals jedoch sogar aus einem einzigen Stück geschnitzt, und der Hals daran angesetzt. Bei der modernen Setar sind die erste und dritte Saite aus Messing,
die zweite und vierte jedoch aus Stahl.
(Bild + Infos von http://alipirabi.de/setar/)
Historischer Text 6 62
(Bilder: Studiobilder des fertigen Instruments)
Zusätzlich zum Video wird es in diesem Bereich eine kleine programmierte Applikation geben, mit welcher es möglich sein wird, die eigene Gitarre, unter zuhilfenahme eines Mikros, zu
stimmen.
9. Seite: Das fertige Instrument (Bilder) 63
Zu Thema 9 – fertiges Instrument
In der Blütezeit der Gitarre lebten die wichtigsten Komponisten in Paris und Wien. Aber auch in London waren viele Gitarristen wohnhaft, darunter auch Deutsche. In der Zeit der Romantik führte der Weg der Gitarre jedoch wieder nach Spanien. Dort entstanden durch Francisco Tárrega die typischen Griff- und Anschlagtechniken, die bis heute gängig sind. Der Gitarren- bauer Antonio de Torres erbaute in dieser Epoche die Gitarre in der Form, die heute als
Grundlage jeder Akustik- und Konzert-Gitarre genutzt wird.
Bild: http://raredelights.com/wp-content/uploads/2014/01/Classical-Guitar-by-Antoniode-Torres.jpg
Historischer Text 7 64
Organisation
KW40 KW41 KW42 KW43 KW44 KW45 KW46 KW47 KW48 KW49 KW50 KW51 KW51 KW1 KW2 KW3 KW4 Grafikproduktion
Szenenfotografie Modellfotografie Nachbearbeitung Videoproduktion
Arbeitsprozesse filmen Schnitt
Nachbearbeitung Audioproduktion
Gesprochener Text Hintergrundmusik Soundeffekte Nachbearbeitung Animationproduktion
Intro Gitarrenhals Bundierung Softwareproduktion
Implementierung Qualitätssicherung
Funktionstest UI Test UX Test Dokumentation
Protokoll
WS 19/20 Arbeitspakete
Projektplan - Gantt 66
Änderungen
Grund: Bounce Rate möglichst klein halten
Die Planung sah vor einzelne Kapitel des Inhaltes als Fotostrecke darzustellen, andere als Video.
Dies war so festgelegt worden, um den Umfang der Dreharbeiten etwas kleiner zu halten.
Jedoch hat die Praxiserfahrung gezeigt, dass die Arbeitsschritte sich um einiges interessanter im Bewegtbild darstellen lassen. Um die eventuell daraus resultierende Bounce Rate der User so gering wie möglich zu halten, haben wir uns dazu entschieden jeden Abschnitt als Video zu zeigen.
Im ersten Kapitel ging es ursprünglich um die Grundlagen von Tonholz zur Herstellung von Gitarren. Allerdings gab es dazu sehr wenig eigenes Material zu filmen, dass zum Thema passen würde. Und Stock Footage kam aufgrund unseres Film-Looks nicht in Frage. Deshalb ist das ers- te Kapitel nun eine Einführung des Zuschauers in den Inhalt der Seite und was er zu erwarten hat. Unterstützt wird das Ganze mit einem Teaser der nächsten Kapitel. Für uns eine Chance den Rezipienten persönlich anzusprechen und durch eine Erwartungshaltung weiter an unsere Web- seite zu binden.
1. Bereich: Medienbausteine 68
Grund: Corona-Pandemie
Zu Beginn unserer Konzeption, lag unser Fokus auf der Vielfalt der Medienbausteine. Jeder Ar- beitsschritt sollte verschieden dargestellt werden. Mal als Bildergalerie, mal als Video, mal als Ani- mation. Soviel zur Theorie. In der Praxis stellte sich heraus, dass in dieser Anordnung der Medien die Struktur fehlte und der Rezipient sich unweigerlich fragen wird. Warum kann ich nicht alles im Bewegtbild konsumieren? Gitarrenbau ist ein sehr komplexes Thema und somit am besten mit einer audio-visuellen Quelle darzustellen. Die Vielfalt der Medienbausteine ist ungeachtet unserer Änderungen trotzdem zu finden. Nur geordneter wie zuvor geplant.
Zeitlich war die Abgabe für das Ende des Sommersemesters 2020 angesetzt. Leider ist dies nicht möglich und nun muss das Projekt zu unserer großen Enttäuschung leider unfertig abgegeben werden. Gründe hierfür sind natürlich allen voran die Corona-Pandemie, die den Zeitplan des Gitarrenbauers, sowie natürlich auch unseren Zeitplan komplett durcheinander gebracht haben.
Durch die Einschränkungen von Reisen mit Auto oder Zug konnte leider seit Februar kein Dreh mehr realisiert werden. Somit enthält die finale Abgabe des Projekts nur fünf von geplanten 8 Ar- beitsabschnitten die gefilmt wurden. Da die einzelnen Arbeitsschritte an der Gitarre voneinander abhängen und nur bedingt vorbereitet werden können, bedarf hier einer exakten und langwieri- gen Planung. Da dies in den letzten Monaten einfach nicht möglich war, hoffen wir, dass dies für alle beteiligten ein annehmbarer Kompromiss ist.
2. Bereich: Videoproduktion 69
Grund: Ästhetik
Statt einem hellen, weißen Hintergrund haben wir uns nun doch für einen dunkelgrauen
Hintergrund (#343a40) entschieden. Hauptsache hierfür sind ein besseres farbliches Zusammen- spiel der Bilder mit dem Hintergrund und ein angenehmerer Kontrast der technischen (nun) weißen Zeichnung zum Hintergrund.
3. Bereich: Hintergrundfarbe 70
Grund: Ästhetik und Kontrast
Farben des Logos wurden aufgrund des neuen Hintergrund angepasst für besseren Kontrast und Ästhetik. Statt Braun (#43292a) für den Korpus nun reines Schwarz und Weiß für den Hals.
4. Bereich: Einfärbung des Logos 71
Grund: Installations-Button wird vom Browser selbst erkannt. Download-Button ist somit nicht nötig.
Inhalt der Änderung:
Der Installieren-Button wird nicht links oben im Header der Website angezeigt (siehe Screen- book), sondern rechts oben in der Adresszeile (siehe Abbildung unten, hier: Chrome)
5. Bereich: Entwicklung 72
Grund: Der Fokus soll eher auf dem Bau der Gitarre liegen.
Inhalt der Änderung:
Die verschiedenen Arten von Gitarren werden nicht präsentiert. Wir konzentrieren uns auf die Art der Gitarren, die im Verlauf der Website gezeigt wird – die Akustikgitarre.
Zusatzinformationen dazu beschränken wir auf ein paar historische Fakten zur Herkunft der des Instruments allgemein.
6. Bereich: Inhalt 73
Grund: Der Header mit Logo als HomeButton wird nicht benötigt. Außerdem stört es, da die Bil- der auf Fullscreen skaliert sind.
Inhalt der Änderung:
Das Logo wird lediglich zum Start der Seite gezeigt. Im folgenden Verlauf wird im Header nur der Sound-Button zu sehen sein, mit der die Hintergrundmusik stumm geschaltet werden kann.
7. Bereich: Design 74
Grund: Die Bilder, die im Screenbock passend zu den historischen Texten gewählt wurden, waren lediglich Vorschaubilder, die aufgrund ihrer Lizenzen nicht von uns verwendet werden können.
Inhalt der Änderung:
Die Bilder wurden nun durch neue ersetzt, die mehr zum Stil der Website passen und die lizenz- frei oder erworben sind.
8. Bereich: Historische Bilder 75
Grund: Ästhetik
Inhalt der Änderung:
Die Schrift zum Einleiten der einzelnen Kapitel ist von Kozuka Mincho Pro R zu Edwardian Script ITC geändert worden. Dies soll ein einheitlicheres und ansprechenderes Bild der Webseite ver- mitteln.
9. Bereich: Typographie, Überschriften 76
Anlass der Änderung:
Die beiden „Buttons“ zum Öffnen der weiteren Inhalte heben sich zu wenig vom Hintergrund ab.
Inhalte der Änderung:
Die Buttons wurden an ihren Positionen stehen gelassen. Diese wurden nun mit einem pulsie- renden Kreis hinterlegt, der dem Besucher andeuten soll, damit zu interagieren. Beide Buttons wurden mit verschiedenfarbigen Animationen ausgestattet, um den unterschiedlichen Inhalt nochmals visuell zu betonen.
10. Bereich: Design - Animation 77
Anlass der Änderung:
Der Text ist nicht essenziell für die historischen Zusätze und für den Verlauf der Seite. Zudem passt er nicht mehr in den Aufbau der Kapitel
Inhalte der Änderung:
Der letzte historische Text zum fertigen Instrument (Screenbook Seite xy) wurde ausgelassen. Auf der Seite „fertiges Instrument“ soll als Abschluss das 3D Modell alleine stehen.
11. Bereich: Inhalt 78
3D-Darstellung der Akustik-Gitarre:
Zusätzlich zu den bisherigen Änderungen haben wir noch ein 3D-Modell einer Akustikgitarre ein- gebunden. Diese zeigt ein sich stetig langsam rotierendes Modell als Abschluss der Website.
12. Neuigkeiten 79
Finaler Stand
Basierend auf unserer Konzeption, die im ersten Teil dieses Moduls stattfand, haben wir unsere Website zum Großteil erfolgreich umsetzen können. Im Folgenden sollen ein paar Screenshots aufzeigen, wie die Website aussieht.
Dabei sind sowohl Aufnahmen der Desktop-Darstellung zu sehen, aber auch die mobile Dar- stellung, die sich in unserem Fall von Tablet zu Smartphone nicht unterscheidet.
Das mit der Funktion können wir ja auch zum Finalen Stand als „Besonderheit“ dazufügen
Intro 81
Button um Ambiente-Musik ein oder ausschalten zu können.
Startseite 82
Eingefärbte Elemente auf Gitarrenhals geben Fortschritt der Seite an.
Zwischenüberschriften 83
Desktop Ansicht Mobile Ansicht
Icons öffnen Text oder Video zu den jeweiligen Arbeitschschritten. Rote Wachssiegel stehen für historische Texte, Gitarrenhälse erläutern die Arbeitsschritte genauer.
Themenabschnitte 84
Desktop Ansicht Text
Video
Mobile Ansicht
Text und Video 85
Schrift wird orange eingefärbt wenn der gewünschte Ton getroffen wird
Mit Zugriff auf ein Mikro kann die
Funktion den Ton einer ungestimmten Gitarre aufnehmen und bewerten.
Funktion zum Gitarre stimmen 86
3D - Modell 87
Wie im Screenbook erwähnt, verwendeten wir Google Lighthouse, um die Seite am Ende der Umsetzung auf ihre Performance prüfen zu lassen.
Hierbei werden die Punkte Performance, Accessibility (engl. Zugänglichkeit), Best Practices (engl. Empfohlene Vorgehensweise) und SEO (engl. Suchmaschinenoptimierung) in Betracht gezogen.
Bei Performance wird bspw. Berücksichtigt, wann das erste Bild komplett gerendert ist oder wie lange die Seite allgemein zum Laden benötigt.
Bei der Accessibility spielt vor allem die Validierung der erzeugten HTML-Seite eine Rolle.
Bei den Best Practices wird geschaut, ob die Entwicklerkonsole des Browsers Fehler auswirft, ob veraltete Schnittstellen verwendet werden etc.
Zu guter Letzt prüft Lighthouse bei SEO, ob die grundsätzlichen Elemente zur Suchmaschinen- optimierung (wie bspw. META-Tags oder Titel-Elemente) im HTML Code genutzt werden.
Alles in allem müssen wir lediglich bei der Performance durch die Verwendung vieler Medien Punkte einbüßen. Bei den restlichen Kriterien schneiden wir mit 100 Punkten mit der vollen Ausbeute ab.
Performance 88
Fazit + Ausblick
Wir haben gelernt, dass vor allem unvorhergesehene Umstände Projekte wie dieses stark beeinflussen können. In unserem Fall wurde das Projekt vor allem durch Corona verzögert.
Explizit wurde die Produktion der Bilder / Videos für die letzten 3 Kapitel beeinflusst und somit das Gesamtbild der Website beeinträchtigt. Ein weiterer Faktor war hier, dass der Auftraggeber nicht in unserer unmittelbaren Nähe, sondern in Hannover hausiert. Kurzfristige Absprachen oder spontane Drehtage waren somit ausgeschlossen.
Mit einem Framework zu arbeiten, mit welchem man bisher keine Erfahrungen hat, erfordert je nach Framework (in unserem Fall ReactJS) viel Aufwand. Dies fiel es uns schwerer, als
anfangs erwartet. Allerdings braucht man solche Herausforderungen auch, um daraus zu Ler- nen und mit solchen Aufgaben klar zu kommen.
Fazit 90
Es sind bei der Abgabe 5 der eigentlich 8 Kapitel gefüllt, die letzten konnten nur mit den recher- chierten historischen Texten und provisorischen Platzhaltern ausgefüllt werden.
Die letzten Szenen zur fertigen Produktion der Gitarre werden gedreht und wie die Kapitel zu- vor in Videos mit historischen Zusatzinfos verpackt. Anschließend ist geplant, die Website dem Gitarrenbauer, der begleitet wurde, zur Verfügung zu stellen.
