Treffpunkt Uhren und Schmuck - BWZ Rapperswil-Jona
Treffpunkt Uhren und Schmuck - BWZ Rapperswil-Jona
Treffpunkt Uhren und Schmuck - BWZ Rapperswil-Jona
Erfolgreiche ePaper selbst erstellen
Machen Sie aus Ihren PDF Publikationen ein blätterbares Flipbook mit unserer einzigartigen Google optimierten e-Paper Software.
UHREN UND SCHMUCK<br />
© by Mirco Nietlisbach & Carlo Rosenast
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Inhaltsverzeichnis<br />
Inhaltsverzeichnis ___________________________________________ 2<br />
Projektvorstellung ___________________________________________ 3<br />
Ausgangslage _____________________________________________ 3<br />
Zielgedanke ______________________________________________ 3<br />
Mitwirkende Personen im Hintergr<strong>und</strong> __________________________ 3<br />
Teammitglieder _____________________________________________ 4<br />
Pagedesign ________________________________________________ 4<br />
Seitenaufteilung ___________________________________________ 4<br />
Voraussetzungen __________________________________________ 4<br />
Schriftart ________________________________________________ 4<br />
Schriftgrösse _____________________________________________ 5<br />
Verwendete Farben ________________________________________ 5<br />
Bilder ___________________________________________________ 5<br />
Cascading Style Sheet ______________________________________ 6<br />
Kommunikation: Browser - Webserver__________________________ 7<br />
Server Side Includes _______________________________________ 8<br />
Seitenstruktur ______________________________________________ 9<br />
Sitemap _________________________________________________ 9<br />
Anzahl Seiten ____________________________________________ 10<br />
Hierarchie Navigation ______________________________________ 10<br />
Metatags________________________________________________ 10<br />
Eingesetzte Techniken _______________________________________ 10<br />
Software ________________________________________________ 10<br />
Dokumentierte CSS _______________________________________ 11<br />
Dokumentierte JavaScript’s _________________________________ 11<br />
Hosting __________________________________________________ 11<br />
Account ________________________________________________ 11<br />
Provider ________________________________________________ 11<br />
Verzeichnisstruktur________________________________________ 11<br />
Gültige Webadresse _______________________________________ 11<br />
Review___________________________________________________ 12<br />
Was ist gut gelaufen? ______________________________________ 12<br />
Was muss geändert werden? ________________________________ 12<br />
Wo lagen die Probleme_____________________________________ 12<br />
Diverses__________________________________________________ 12<br />
Verträge ________________________________________________ 12<br />
Urheberrechte / Vereinbarungen _____________________________ 13<br />
Wird die Site aufs Internet gestellt?___________________________ 14<br />
Wird die Site weiter bearbeitet? ______________________________ 14<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 2/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Projektvorstellung<br />
Ausgangslage<br />
Das Fernziel, welches uns gegeben wurde, war eine Website selbständig<br />
zu erstellen. Bevor wir aber mit der Website beginnen konnten, musste<br />
zuerst ein Thema her. Für uns war ziemlich schnell klar, dass wir eine<br />
Website über das <strong>Schmuck</strong>- <strong>und</strong> <strong>Uhren</strong>geschäft von Mirco’s Vater machen<br />
wollten, da das Geschäft von Carlo’s Vater bereits eine eigene Website besitzt<br />
(www.rosenast-fenster.ch).<br />
“<strong>Treffpunkt</strong> <strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong>“ der Name der Firma, war somit als Thema<br />
für die Website geboren. In einem längeren Gespräch stellten wir die<br />
Informationen <strong>und</strong> Ideen zusammen, welche als Gr<strong>und</strong>lage dienen.<br />
Zielgedanke<br />
Unser Hauptzielgedanke ist, dass wir dem “<strong>Treffpunkt</strong>“ einen guten Internetauftritt<br />
schaffen. Dies ist in der heutigen Zeit immer entscheidender.<br />
Weitere Ziele sind, dass wir ein auserwähltes Produkt-Sortiment im Internet<br />
präsentieren <strong>und</strong> das Geschäft mit der Website bekannter machen.<br />
Ein ferneres Ziel ist auch, dass die Website weiter auf dem Laufenden<br />
gehalten wird.<br />
Mitwirkende Personen im Hintergr<strong>und</strong><br />
Dass unsere Website überhaupt zustande kam, verdanken wir einigen Personen<br />
im Hintergr<strong>und</strong>:<br />
Markus Auf der Maur Lehrperson Projektmanagement<br />
E-Commerce<br />
Website-Gestaltung<br />
Pius Senn Lehrperson Macromedia Dreamweaver<br />
Macromedia Fireworks<br />
Walter Nietlisbach Geschäftsinhaber<br />
“<strong>Treffpunkt</strong>“<br />
Informationen<br />
Bildmaterial<br />
Bank Linth IT-Abteilung HTML-Code<br />
SSI<br />
Adobe Photoshop<br />
Gr<strong>und</strong>lagen<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 3/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Teammitglieder<br />
Carlo Rosenast<br />
Mirco Nietlisbach<br />
Schule:<br />
<strong>BWZ</strong> <strong>Rapperswil</strong><br />
Klasse KE3b<br />
Lehrgeschäft:<br />
Schule:<br />
<strong>BWZ</strong> <strong>Rapperswil</strong><br />
Klasse: KE3b<br />
Lehrgeschäft:<br />
Federtechnik Kaltbrunn AG<br />
Bank Linth<br />
Obermühlestrasse Zürcherstrasse 3<br />
8722 Kaltbrunn 8730 Uznach<br />
E-Mail:<br />
E-Mail:<br />
carlo.rosenast@federtechnik.ch mirco.nietlisbach@banklinth.ch<br />
Pagedesign<br />
Seitenaufteilung<br />
Wir haben darauf geachtet, nicht allzu viel Informationen <strong>und</strong> Bilder auf<br />
eine Seite anzubringen. Jedoch soviel, dass die Seite nicht leer wirkt.<br />
Voraussetzungen<br />
Eine Monitorauflösung von 800 x 600 Pixel wird als Mindestanforderung<br />
vorausgesetzt.<br />
Ebenfalls haben wir darauf geachtet, dass unsere Website sowohl mit dem<br />
Internet-Explorer, als auch mit Firefox einwandfrei funktioniert.<br />
Schriftart<br />
Unsere Schriftart musste folgende Kriterien erfüllen:<br />
Leserlich<br />
Modern<br />
Auf möglichst vielen Betriebssystemen vorhanden<br />
Schlussendlich entschieden wir uns für die Schriftart: VERDANA.<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 4/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Diese wurde von Microsoft hergestellt <strong>und</strong> ist in den neuesten Windows-<br />
Versionen standardmässig enthalten. Ausserdem ist diese Schriftart für<br />
verschiedene Linux-Derivate erhältlich.<br />
Schriftgrösse<br />
Die Grösse der Schrift ist bei uns in der CSS-Datei in Prozenten angegeben.<br />
Somit sind allfällige Anpassungen an der Schriftgrösse nur an einer<br />
Zahl vorzunehmen.<br />
Verwendete Farben<br />
Das Unternehmen <strong>Treffpunkt</strong> <strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong> verfügt über ein Corporate<br />
Design, welches uns die Farben vorgegeben hat.<br />
= #FFFFFF Die Hintergr<strong>und</strong>farbe, schlicht <strong>und</strong> unauffällig<br />
- weiss. Zudem ist weiss als<br />
Logofarbe von Bedeutung <strong>und</strong> somit<br />
massgebend.<br />
= #F70808 Zweite Logofarbe, welche im Design<br />
<strong>und</strong> in der Navigation leiten sollte.<br />
Für die Navigation sind die aktiven<br />
Links <strong>und</strong> die Fokus-Links mit dieser<br />
Farbe gekennzeichnet.<br />
Bilder<br />
= #797979 Unsere Schriftfarbe, gut leserlich <strong>und</strong><br />
der Kontrast zum weiss fällt nicht zu<br />
hart aus.<br />
Die generellen Links kommen in diesem<br />
Grau daher.<br />
Damit unsere Website die K<strong>und</strong>schaft anspricht, verwenden wir Produktbilder<br />
mit den dazugehörigen Informationen.<br />
Für einen schnellen Seitenaufbau, achteten wir darauf, dass die Dateigrösse<br />
der Bilder möglichst klein ist. Dies erreichten wir durch Verwendung<br />
des Bildformates JPEG mit einem hohen Kompressionsgrad. Welches zwar<br />
die Bildqualität ein bisschen schmälert dafür den schnellen Seitenaufbau<br />
positiv beeinflusst.<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 5/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Da die meisten Bilder Copyright geschützt sind, haben wir die Firmen per<br />
E-Mail angefragt <strong>und</strong> von den Meisten das Einverständnis erhalten. Die<br />
Produkt-Bilder stammen aus dem Internet <strong>und</strong> von extra angefertigten<br />
CD’s.<br />
Cascading Style Sheet<br />
Als wir beim Dreamweaver bemerkten, dass für jede Seite ein eigenes<br />
Stylesheet erstellt wird <strong>und</strong> dies zu Problemen in der Einheitlichkeit führte,<br />
entschieden wir uns eine zentrale Datei zu verwenden. Diese Datei<br />
(/includes/styles_1.css) ermöglicht die zentrale Verwaltung aller von uns<br />
erstellten Seiten.<br />
Änderungen an Farben <strong>und</strong> Schriftarten aller Seiten sind somit sehr einfach<br />
realisierbar.<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 6/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Kommunikation: Browser - Webserver<br />
Client<br />
3.<br />
IP-Adresse<br />
w.x.y.z<br />
1.<br />
URL<br />
[www.] = Server<br />
[bwzrapperswil] = second level domain<br />
[.ch] = top level domain<br />
4.<br />
http://w.x.y.z/2006/treffpunkt<br />
DNS-<br />
Server<br />
2.<br />
DNS-Server sucht<br />
im Verzeichnis<br />
die<br />
entsprechende<br />
IP-Adresse.<br />
6.<br />
Fertige Seite<br />
wird geliefert<br />
Web-<br />
Server<br />
5.<br />
Stellt gewünschte Seite<br />
zusammen.<br />
* siehe Diagramm SSI<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 7/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Server Side Includes<br />
Aufgr<strong>und</strong> des besseren Verständnisses der serverseitigen Includes, folgt<br />
ein Ablaufsdiagramm, basiert auf dem Apache 1.3 (Webserver):<br />
* Server trennt URL von<br />
Verzeichnisangabe:<br />
www.bwzrapperswil.ch/2006/<br />
treffpunkt<br />
Die Datei wird anhand<br />
der Verzeichnisangabe<br />
gesucht.<br />
nicht<br />
gef<strong>und</strong>en<br />
gef<strong>und</strong>en<br />
nein<br />
Endung SHTML?<br />
ja<br />
Abarbeitung der SSI-Befehle<br />
(von oben nach unten)<br />
HTML wird direkt an<br />
Browser weitergeleitet.<br />
Resultat der Verarbeitung<br />
404 Error<br />
Im Flussdiagramm erkennt man gut, dass SSI serverseitig ausgeführt<br />
wird. Als Gegensatz die LiveClock, welche direkt auf dem Client läuft.<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 8/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Seitenstruktur<br />
Sitemap<br />
Startseite<br />
<strong>Treffpunkt</strong> <strong>Uhren</strong><br />
<strong>und</strong> <strong>Schmuck</strong><br />
Startseite<br />
Kontakt<br />
<strong>Uhren</strong><br />
Tissot<br />
Certina<br />
Cover<br />
Mondaine<br />
Auswahl<br />
4 <strong>Uhren</strong><br />
Auswahl<br />
4 <strong>Uhren</strong><br />
Auswahl<br />
4 <strong>Uhren</strong><br />
Auswahl<br />
4 <strong>Uhren</strong><br />
Details Details Details Details<br />
<strong>Schmuck</strong><br />
Goldschmuck<br />
Stahlschmuck<br />
Titanschmuck<br />
Auswahl<br />
4<br />
<strong>Schmuck</strong>stücke<br />
Auswahl<br />
4<br />
<strong>Schmuck</strong>stücke<br />
Auswahl<br />
4<br />
<strong>Schmuck</strong>stücke<br />
Details Details Details<br />
Perlen<br />
Auswahl<br />
4 Perlen<br />
Details<br />
<strong>Treffpunkt</strong><br />
Firma Team Service Partner<br />
Aktuell<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 9/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Anzahl Seiten<br />
5 Hauptseiten - <strong>Uhren</strong> / <strong>Schmuck</strong> / Perlen / <strong>Treffpunkt</strong> / Aktuell<br />
mit diversen Unterseiten<br />
Hierarchie Navigation<br />
Hauptnavigation - <strong>Uhren</strong> / <strong>Schmuck</strong> / Perlen / <strong>Treffpunkt</strong> / Aktuell.<br />
Detailnavigation zu den oben beschriebenen Teilgebieten der Hauptnavigation.<br />
Metatags<br />
In den Meta-Angaben haben wir nützliche Informationen <strong>und</strong> Anweisungen<br />
für Web-Server, Web-Browser <strong>und</strong> automatische Suchprogramme notiert.<br />
Sie enthalten Angaben zum Autor <strong>und</strong> zum Inhalt der Datei:<br />
Diese Meta-Informationen gehören in den Header-Teil des HTML-Codes<br />
<strong>und</strong> müssen wie folgt verschachtelt sein:<br />
<br />
Meta-Informationen<br />
<br />
Eingesetzte Techniken<br />
Software<br />
Macromedia Dreamweaver MX 2004<br />
Macromedia Fireworks MX 2004<br />
Adobe Photoshop<br />
FileZilla FTP-Client<br />
Text-Editor<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 10/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Dokumentierte CSS<br />
Die Datei /includes/styles_1.css ist gut dokumentiert. Es macht daher wenig<br />
Sinn die ganze Datei hier abzubilden.<br />
Dokumentierte JavaScript’s<br />
In der Fusszeile bauten wir mit Dreamweaver eine LiveClock ein, welche<br />
mittels der Programmiersprache JavaScript realisiert wurde:<br />
Diese LiveClock wurde als Erweiterung im Dreamweaver heruntergeladen.<br />
Hosting<br />
Account<br />
FTP-Server:<br />
www.bwzrapperswil.ch<br />
Passwort <strong>und</strong> Benutzername sind für den Notfall elektronisch bei Mirco<br />
Nietlisbach erhältlich.<br />
Provider<br />
Der Provider der Website “<strong>Treffpunkt</strong> <strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong>“ ist die <strong>BWZ</strong><br />
<strong>Rapperswil</strong>.<br />
Verzeichnisstruktur<br />
Wir haben die Struktur auf die Navigation ausgelegt.<br />
Gültige Webadresse<br />
www.bwzrapperswil.ch/2006/treffpunkt<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 11/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
Review<br />
Was ist gut gelaufen?<br />
HTML-Code<br />
Mittels www.selfhtml.org <strong>und</strong> der Unterstützung durch IT-Abteilung<br />
der Bank Linth, haben wir den HTML-Code verstanden <strong>und</strong> konsequent<br />
angewendet.<br />
Teamatmosphäre<br />
Auch in Stresssituationen war die Atmosphäre stets gut.<br />
Bildmaterial<br />
Für sämtliche Bilder haben wir von den Herstellern die Erlaubnis erhalten,<br />
Sie auf unserer Website zu präsentieren.<br />
Was muss geändert werden?<br />
Intro<br />
Es sollte noch ein Intro mit Flash-Animation folgen.<br />
Produktbestellung<br />
In einem späteren Prozess, sollte noch eine Mail-Bestellungen zur<br />
Verfügung stehen.<br />
Mehr Produkte<br />
Die Produktpalette im Web sollte noch vergrössert werden.<br />
Wo lagen die Probleme<br />
Unser grösstes Problem war die Zeit. Erst nach gut 4 Wochen wussten wir,<br />
wie unser Design aussehen wird. Ebenfalls hatten wir zu viele Sachen vor<br />
Augen, welche in dieser Zeit nicht realisierbar waren.<br />
Diverses<br />
Verträge<br />
Mit Absprache mit dem Geschäftsinhaber, haben wir vorerst noch keine<br />
Verträge abgeschlossen.<br />
Da unsere Website weitergeführt wird, sind wir am überlegen, ob wir eine<br />
persönliche Internetadresse bei der SWITCH kaufen wollen:<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 12/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
www.treffpunkt-uhren-<strong>und</strong>-schmuck.ch<br />
Diese Adresse würde pro Jahr CHF 35.- kosten.<br />
Urheberrechte / Vereinbarungen<br />
Um ein breites Produkt-Sortiment dem Besucher zu zeigen, fragten wir<br />
alle Vertretungen des Geschäftes “<strong>Treffpunkt</strong> <strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong>“ an. Die<br />
meisten konnten wir via E-Mail anfragen, die anderen per Telefon.<br />
Wir setzten schon sehr früh ein Beispiel für die Anfrage auf:<br />
Sehr geehrte Damen <strong>und</strong> Herren<br />
Mein Name ist Mirco Nietlisbach <strong>und</strong> ich arbeite als KV-Lehrling im 3. Lehrjahr bei der<br />
Bank Linth in Rapperwil.<br />
Während der Schulzeit besuche ich eine Zusatzausbildung, namens @Kaufmann. Als Projektarbeit<br />
darf ich eine Website erstellen über das Juweliergeschäft meines Vaters. Walter<br />
Nietlisbach, ist Inhaber des Geschäftes "TREFFPUNKT <strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong>" in <strong>Jona</strong> <strong>und</strong><br />
ist ebenfalls K<strong>und</strong>e (K<strong>und</strong>ennummer: XXXX) von Ihnen. Aus diesem Gr<strong>und</strong> besuchte ich<br />
letztlich Ihre Website, die mir sehr gut gefällt.<br />
Da mein Kollege <strong>und</strong> ich diese Bilder sehr ansprechend finden, würden wir diese gerne<br />
für unsere Projektarbeit verwenden. Selbstverständlich werden wir einen Copyright-<br />
Vermerk dazu einführen, ebenfalls wird FIRMA als offiziellen Partner mit Link <strong>und</strong> Logo<br />
vertreten sein.<br />
Nach Abschluss der Projektarbeit <strong>und</strong> der Präsentation vor dem Prüfungsausschuss wird<br />
diese Website als Firmenpräsentation für das Geschäft meines Vaters live gestellt.<br />
Besten Dank für eine baldige Antwort.<br />
Fre<strong>und</strong>liche Grüsse<br />
Mirco Nietlisbach<br />
Die Antworten kamen sehr schnell. Einige stellten uns ein Picture-Park zur<br />
Verfügung, andere stellten uns eine Pressemappe mit Fotos zu.<br />
E-Mail Bewilligung Tissot:<br />
Sehr geehrter Herr Nietlisbach<br />
Wir freuen uns über Ihr Interesse an unserer Webseite <strong>und</strong> der Marke Tissot. Für Ihre<br />
Projektarbeit können Sie die Bilder <strong>und</strong> Texte in unserer Webseite gerne benutzen <strong>und</strong> in<br />
"<strong>Treffpunkt</strong>s" Webseite integrieren.<br />
Wir wünschen Ihnen viel Erfolg in der Zusammenstellung des Projektes <strong>und</strong> freuen uns<br />
auf das Resultat.<br />
Mit fre<strong>und</strong>lichen Grüssen<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 13/14
<strong>Treffpunkt</strong><br />
<strong>Uhren</strong> <strong>und</strong> <strong>Schmuck</strong><br />
An dieser Stelle möchten wir uns bei diesen Firmen herzlich bedanken.<br />
Wird die Site aufs Internet gestellt?<br />
Der Geschäftsführer, Walter Nietlisbach, will die Website ins Internet stellen.<br />
Uns freut es, dass unser Projekt auch Zukunft hat <strong>und</strong> unterstützen<br />
dieses Vorhaben in jedem Falle.<br />
Wird die Site weiter bearbeitet?<br />
Da die Website ins Internet gestellt wird, muss diese auch auf dem Laufendem<br />
gehalten werden. Somit wird unser Projekt weiterbearbeitet <strong>und</strong><br />
allfällige Zusätze eingebaut werden (siehe „Was muss geändert werden?“).<br />
19.05.2006 Mirco Nietlisbach/Carlo Rosenast 14/14
Change language