Page 1

bindung


bindung

vorwort

zusammenarbeit

braincandy - süssigkeiten für ihr gehirn

arbeitsaufteilung projekt

was vor 4 jahren als projekt begann, soll nun endlich einen professionellen charakter bekommen. braincandy multimedia production und braincandy subdivision ‚b*sub‘ bilden zusammen ein starkes synergiennetzwerk zur realisierung von multimedialen produktionen. der webauftritt ist ein elemtarer eckpfeiler dieser verbindung. das spezielle bei diesem prozess war, dass der aufbau der strukturen und des netzwerks parallel zum webautritt entstanden sind und somit der webautritt ein unverfälschtes bild dieses konstrukts abgibt. der neue auftritt von braincandy b*sub ist voller emotion und dem wunsch, visionen wahr werden zu lassen. die website soll das erreichen, was braincandy sich für all ihre projekte als oberstes ziel gesteckt hat - die richtige atmosphäre zu erzeugen und die sinne des konsumenten mit der vielfalt der medialen möglichkeiten zu berühren.

projektauftrag projektdefinition / briefing styledefinition / design konzeption / dokumentation layout dokumentation konzept / struktur webshop db mysql entwicklung html / php-programmierung webshop photografie bildbearbeitung video / sounddesign flash-entwicklung / java script

tauchen sie ein in die welt von braincandy

marcel angehrn marcel angehrn marcel angehrn marcel angehrn adi grüninger adi grüninger adi grüninger adi grüninger marcel angehrn marcel angehrn marcel angehrn marcel angehrn

/ adi grüninger / adi grüninger

/ tiziana secchi / anna fürer


bindung


bindung

inhaltsverzeichnis 1 7 9 15 19

grobkonzept briefing / brainstorming expose struktur (einfach) material

21 23

thematisch / inhaltliches konzept flash seite b*store

24 25 26 27 28 29 30 31 32 33

didaktisch / methodisches konzept global intro home kontakt konzept design photography video 2*adore b*store

35 45 54

styleguide ci / cd braincandy flash seite b*store

57 89

drehbuch flash seite b*store

121 129 133 135

technische angaben probleme und hilfsmittel kosten rechtslage


1

grobkonzept

bindung

die ausgangslage Vor 4 Jahren ist die Idee zu „braincandy“ aus einem projekt heraus entstanden. Thomas Bürgin und Marcel Angehrn konnten damals die Animations und videotechnische visualisierung für die liveauftritte einer band gestalten, welche kurz zuvor einen plattenvertrag mit universal-music-germany unterzeichnen durfte. Die erste singleauskopplung aus dem album war der song „braincandy“. Seit diesem projekt wurde in der freizeit fleissig weitergearbeitet. erfahrungen und enttäuschungen gesammelt, know-how ausgetauscht, schulen besucht und den einen oder anderen auftrag sauber abgeliefert. Nun, die zeit ist gekommen um „braincandy“ auch gegen aussen ein professionelles gesicht zu verpassen. bis anhin waren keine organisatorischen oder konzeptionellen überlegungen zu „braincandy“ als firma nötig, doch genau das soll jetzt während dieser entwicklungszeit konzentriert und professionell in Angriff genommen werden. Im gegensatz zum physischen gebilde „braincandy“, welches geführt wird durch Marcel Angehrn mit konzeptioneller unterstützung durch can isik soll nun auch die virtuelle bürogemeinschaft „braincandy“ auf dem netz entstehen. dabei werden leute aus dem vertrauten umfeld je einen bereich in dem sie professionell tätig sind betreuen und so ein effektives, eingespieltes synergienetzwerk darstellen. „braincandy“ soll spannend, sympathisch, aufgeschlossen und professionell wirken. um die kunden zu gewinnen welche schlussendlich eine interessante zusammenarbeit ermöglichen und medial die sprache von „braincandy“ verstehen oder sogar sprechen, möchten wir zur unterstützung „braincandy“ als brand lancieren.


3

bindung

grobkonzept die zeilgruppe

funktionsbeschreibung

braincandy platziert sich aus erfahrung in einen ergänzenden bereich der werbebranche. viele werbeateliers und kleinere und mittlere agenturen verfügen über know-how was klassische werbung und internet angeht, sind jedoch auf fremdanbieter im bereich video, animation, photografie und authoring von cd und dvd angewiesen. diese nische soll braincandy ausfüllen. aus den anfängen heraus hat braincandy auch gute kontakte zu bands und tonstudios in der schweiz, welche braincandy mit videoclips und animationen visuell unterstützen können. dabei geht es braincandy darum, den lowbudget bereich abzudecken, da bei normalen clip-produktionen auf film die produktionskosten in der regel das budget der bands bei weitem übersteigen. diese kunden sind auch das aushängeschild und die beste referenzgrundlage für braincandy. hier ist es oft möglich den eigenen stil einzubringen und sehr viele technische komponenten zu vereinen.

die website soll folgende funktionalitäten aufweisen. über ein ansprechendes intro gelangt man direkt zur hauptnavigation welche folgende punkte umfasst. konzeption, video, photografie, animation, visuals, sound, technix, bc_sphere, kontakt. folgende punkte werden weiter unterteilt. visuals: dabei gehts um einzelarbeiten und um den optischen stil welchen „braincandy“ einsetzt. technix: hier geht es um techische aspekte, die vorallem durch adi grüninger betreut werden. vom mac-support über das know-how vom einwandfreien aufbau von print-dokumenten bis zur beratung von hard und softwareeinsatz werden hier dem kunden zur verfügung gestellt. bc-spere: befasst sich mit dem lifestyle welchen „braincandy“ verkörpert. es ist sozusagen der fun-bereich der page welcher sehr frei und flexibel gestaltet werden kann. fixer bestandteil dieses bereichs ist der „bc“-webshop, welcher zum beispiel durch selbst-designte postkartensets über diverse andere artikel mit „braincandy“- logo den brand unterstützen soll und die visuelle vielseitigkeit von „braincandy“ aufzeigen soll.


�� ���

� ������������� �������

�� ����

�� ����

� � � � � �

������ ������������� ���������� ������������������ �������������� ���� ������ ���������

�� ������

� � � �

������ ��� � ����� �������� ������� ����������� ��� ����������

�� ���������

� ���������� ��� ��� ��� ���� � ������� ��������

�� �������

� � � �

�������������� ������������ ������ ���� �������

bindung

4


5

bindung

grobkonzept benötigte infrastruktur

rahmenbedingungen

da durch „braincandy“ ein teil des corporate designs bereits besteht, sind wir verpflichtet, diesen in der website weiterzuführen und in unser neues design zu integrieren. gleichzeitig ist als vorgabe der zbw ein dynamischer bereich der website erforderlich und deshalb haben wir uns mit „braincandy“ für eine shop-lösung entschieden, da die für „braincandy“ in zukunft den grössten vorteil bietet und sich hervorragend als unterstützende massnahme zur förderung des „braincandy“-brands eignet.

da wir zu grossen teilen auf mac produzieren und unsere eigene infrastruktur auf einem guten stand ist werden wir mit folgender infrastruktur der zbw auskommen. einerseits werden wir die kamera sony vx2000 benötigen um einen clip zu realisieren.bei der kamera verhällt es sich so, dass wir eventuell die möglichkeit haben während der sommerpause ein wichtiges referenzprojekt zu realisieren und dafür wär der einsatz der vx-2000 ideal. für unsere shop-lösung benötigen wir einen php-server. deshalb bestellen wir einen php-server zum mitnehmen plus einen web basierten server mit php. wir werden einerseits php einsetzen, da wir auf unix-basierten applerechnern produzieren und asp nicht unterstützt ist. andererseits besteht die kundschaft von braincandy hauptsächlich aus kreativen, welche zum grossen teil ebenfalls auf mac arbeiten und php auch in diesem fall besser unterstützt ist.


7

bindung

briefing / brainstorming da dieses projekt innerhalb von braincandy realisiert wurde und somit keine kundenseitigen angaben angefordert werden mussten fand ein briefinggespräch im eigentlichen sinne nicht statt. der projektinhalt und die rahmenbedingungen wurden über die letzten 2 jahre bereits durch marcel angehrn und weitere mitglieder von braincandy definiert. adi grüninger wurde durch diverse gespräche mit dem projekt vertraut gemacht und erlangte somit nach und nach den gesamten wissensstand der für dieses projekt erforderlich ist. während der gesamten dauer des projekts fanden diverse brainstormings statt, die sich jeweils auf die verschiedenen themenbereiche konzentrierten. die ergebnisse welche aus diesen brainstormings resultierten lassen sich aus den formulierungen der einzelnen konzeptstufen ableiten.


bindung


9

exposé

bindung

exposé braincandy subdivision als virtuelle bürogemeinschaft und untergruppe der firma braincandy hat sich braincandy subdivison, kurz b*sub, zum ziel gesetzt, ihren bisherigen webauftritt, wie auch die gesamte struktur neu zu definieren und umzusetzten. dieser auftritt soll intern wie auch öffentlich als neuorientierung und revitalisierung von braincandy wahrgenommen werden. als zulieferer für die werbebranche, kmu`s und musikbands, ist braincandy in der lage konzeptionell, visuell wie auch auditiv multimedia-content zu planen und produzieren. braincandy hat sich zum obersten ziel gesetzt, ihre kundschaft durch konzeptionelle und visuelle stilsicherheit und einzigartigem ästhetischem flair zu bedienen. hier kommt bereits der begriff subdivision ins spiel, welcher ein in unserem falle eine virtuelle bürogemeinschaft definiert - ein netzwerk. der grosse vorteil für den kunden von braincandy und auch für das arbeiten innerhalb dieses gebildes ist die nutzung professioneller synergien in einem freien zusammenschluss von kreativen köpfen, welche sich vollumfänglich mit dieser struktur identifizieren und durch diverse namhafter referenzen ihr können mehrfach unter beweis gestellt haben. gegen aussen wird braincandy trotzt seiner offenen strukturen als perfekt organisierte firma agieren, sowie die integrierten personen als mitarbeiter derselben. der organisatorische mehraufwand einer solchen struktur muss durch standardisierte abläufe und einer perfekten bewirtschaf-

tung der website aufgefangen werden. diese überlegungen sind mitunter hauptbestandteil der konzeptionellen phase für dieses projekt. ein weiterer wichtiger bestandteil welcher die kernüberlegungen beeinflusst umfasst das anstreben von braincandy, einen brand zu lancieren. dabei zeigen sich die einzelnen instanzen bereit, eine parallelfunktion zu übernehmen, zwischen marktorientiertem, kundenspezifischen erfüllen von aufträgen und dem versuch mehr und mehr den ästhetischen stil von braincandy dem kunden nahezubringen. die produktionen von braincandy als multimediale kunstwerke zu verstehen soll das langfristige ziel sein. um diese idee zu unterstützen wird in einem separaten shopbereich der website, welcher sich „b-store“ nennt, eingegangen. in diesem bereich sollen repräsentative arbeiten von braincandy zur ansicht oder zum download bereitgestellt werden, gleichzeitig wird hier auch ein webshop eingerichtet, welcher verschiedene merchandise-artikel von braincandy zum bestellen beinhaltet. all diese massnahmen sollen dazu dienen, den besuchern der website den lifestyle, die atmosphäre den hintergrund und die visionen von braincandy aufzuzeigen und sie für einen moment an unserem traum teilhaben lassen.


10

definition der zielgruppe

die optik

braincandy möchte die obenerwähnte zielgruppe als kunden gewinnen und bedienen. da diese zielgruppe in ihrem sinne eher zwischenhändler und nicht endkonsument darstellt, gilt es zu verstehen, dem „zwischenhändler“ zu vermitteln, dass braincandy der ideale partner ist, um in zusammenarbeit die endkunden gezielt und überzeugend anzusprechen. braincandy konzentriert sich hier auf ein offenes publikum mit freude an design, technisch einwandreier umsetzung, mut zur intelligenten provokation und dem willen visionen umzusetzen.

„ all the beauty in life“ sollte der leitfaden sein. leider lässt sich das jedoch nicht so einfach umschreiben, da es sich hier um erfahrungswerte, leidenschaften und nicht zuletzt auch um geschmack handelt.. ein stil braucht einschränkungen und regeln, damit ihn andere nachvollziehen können und ebenfalls im sinne von braincandy produzieren zu können ohne zwingend den gleichen subjektiven eindruck nachzuempfinden. vorallem im multimedialen bereich wo meist mehrere personen in ein projekt involviert sind, ist es wichtig, dass alle wissen wie sich das ziel anfühlen soll. um im fall von „braincandy „ flexibel und stilsicher bleiben zu können ist es unumgänglich ein ausführliches cd-manual zu erstellen, welches jegliche elemente enthält und im umgang mit text, bild, farbe und ton alle wichitgen fragen beantwortet. auf einen punkt wollen wir hier jedoch gerne etwas näher eingehen - die hibiscusblüte als bildmarke. die hibiscusblüte vereint diverse komponenten die sinnbildlich für braincandy stehen. einerseits steht sie symbolisch für die hawaiianischen und die südpazifischen inseln welche bei uns zentraleuropäern meist sehnsüchtige gefühle auslösen und wir uns nicht scheuen sie mit „traumhaft“ zu beschreiben, andererseits kennt man sie als stilmittel im surfbereich - welcher wiederum mit freiheit, kraft, natur, idealismus und genuss in verbindung gebracht

bindung

exposé


11

bindung

exposé die optik (fortsetzung)

der aufbau

wird. dieser erste subjektive eindruck soll für die produktionen von braincandy stehen - sie sollen der assoziation mit dem hibiscus gerecht werden. es gibt aber noch eine andere verbindung zu dieser pflanze. hibiscuspflanzen haben eine lange geschichte , welche ihre wurzeln in china hat - ursprünglich war sie lediglich eine kleine rosafarbene blume. durch kunstvolle und sehr sorgsame eingriffe konnte man jedoch tausende von farben und eine vielzahl von neuen formen und grössen züchten. das ganze setzte jedoch know-how, visionen, emotionen und geduld voraus, aufgrund ihrer perfekten architektur und schönheit wurde sie schon sehr früh von seeleuten über die südpazifischen inseln bis nach hawaii gebracht, später auch in die heutige usa und im 17. jahrhunder dann nach europa. diese evolution lässt einige metaphorische vergleiche zu, darüber wie braincandy multimedia versteht und damit umgeht und auch darüber wie das langfristige ziel aussehen kann - die verbreitung vom brand braincandy wie auch die bekanntheit als qualitätsorientierte produktionsstätte von einzigartigen, multimedialen kunstwerken.

der internetauftritt von braincandy soll gleichermassen medial anspruchsvoll, wie auch einfach und logisch navigierbar sein. durch die intuitiven navigationsmöglichkeiten sollen berührungsängste mit neuen medien absorbiert werden. der auftritt wird in zwei sprachen aufbereitet, in deutsch und englisch. zusammen mit braincandy wurde diese entscheidung getroffen, da es einerseits einen cosmopolitischen und professionellen eindruck beim besucher hinterlässt und andererseits braincandy von anfang an die möglichkeit bietet über die schweizergrenze hinaus zu agieren und kontakte zu knüpfen. das intro - unter www.braincandy.ch soll der user erstmals mit dem stil von braincandy in berührung kommen. durch ein spektakuläres und professionell durchdesigntes intro soll er gefesselt und in den bann von b-sub gezogen werden. das intro endet mit der möglichkeit sich zwischen englischer und deutscher sprachversion zu entscheiden. nach dieser interaktion befindet sich der user schliesslich in der hauptnavigation von wo er sich nun für die einzelnen menupunkte der braincandy subdivision entscheiden kann.


bindung


13

exposé

bindung

die technologie wir möchten in diesem abschnitt noch kurz ein paar technische elemente erläutern. der grundaufbau der webseite wird in flash mx programmiert und und so publiziert, dass er mit einem flash 4 plugin besucht werden kann. videodateien, animationen und bildmaterial werden ja nach art und länge in separatem flashfenster angezeigt. dieses separate medienmodul verfügt über eine eigene playersteuerung um nicht zwischen verschiedenen screens switchen zu müssen. videosequenzen werden mit sorenson-codec im quicktime-format komprimiert, für sämtliche photos wird jpeg verwendet die shoplösung wird aufgrund der macintosh-programmierumgebung und aus rücksicht auf die verschiedenen besucherplattformen in php programmiert, der fertige shop wird anschliessend über eine xhtml-seite aufgerufen. java-script wird als ergänzende technik zum beispeil für die platzierung von fenstern oder speziellen mouseevents zum einsatz kommen.

wir freuen uns sehr, in enger zusammenarbeit mit braincandy und braincandy subdivision b*sub dieses interessante und wegweisende projekt zum erfolgreichen gelingen bringen zu dürfen.


15

einfache strucktur

bindung

flash teil

���� �����

���� �����

���� �������

���� �������

���� ������

���� �������

���� �����

���� �������

���� �������


bindung


17

einfache strucktur

bindung

html / php teil (b*store)

����� �����

����� �������

����� ���������

����� ����������� ������

����� ������� ��������

����� ���� ��� �������

����� ����������� ������

����� ������� ��������

����� ���� ��� �������

������� ����� ������� ���� �����

������� ������ ���� ���� ��� ����

����� ������� �������

����� ������

����� �����


19

materialbeschaffung

bindung

material das projekt braincandy wurde in vollem umfang durch marcel angehrn und adrien grüninger realisiert. sämtliche bilddaten und videodaten stammen aus dem braincandy-archiv von marcel angehrn und somit auch die bildrechte. auf der suche nach den benötigten sounddateien wurden wir auf www.flashkit.com fündig. diese daten stehen zum freien gebrauch zur verfügung und sind somit legal in ein projekt integrierbar. nenneswerte materialbeschaffung in anderer form hat in diesem sinne nicht stattgefunden, da der gesamte umfang des contents selbst produziert wurde.


20 ���� �����

struckturplan flash-seite

���� �������

���� �������

���� ������

���� �������

���� �����

���� �������

���� �����

��� �� ���� �������

���� ��������

���� ������

���� �����

��������

���� �� �����

��� �� ���� �����

���� ����� ���� ������� ���� ����� ���� �������

���� �������� ���� �������

���� �����

���� �������

���� ����� ���� �����

���� �������

bindung

���� �����


21

inhaltliches-thematisches konzept

bindung

inhaltliches-thematisches flash-seite 10.0

intro

20.0

b*sub

30.0

65.0

gallery5

bild-gallery mit model sabrina

b*sub wird grob erklärt

70.0

video

auswahl referenzprojekte

kontakt

anschrift von braincandy

71.0

braincandy

musikvideo, info & bildübersicht

40.0

konzept

wie wird ein multimediakonzept aufgebaut

71.1

film braincandy

popup, film im quicktime player

50.0

design

auswahl auf die drei präsentationen

72.0

bound

musikvideo, info & bildübersicht

51.0

beryl

printwerbung für ein frisör

72.1

film bound

popup, film im quicktime player

52.0

yayin

printarbeit für eine weinlounge

73.0

no remedy

musikvideo, info & bildübersicht

53.0

kinok

printwebung für das kinok

73.1

film no remedy

popup, film im quicktime player

60.0

photography

auswahl photogallerie‘s

74.0

sindustrie

paralellmontage, info & bildübersicht

61.0

gallery1

bild-gallery mit model nadia

74.1

film sindustrie

popup, film im quicktime player

62.0

gallery2

bild-gallery mit model gisi und paddy

80.0

2*adore

braincandy lifestyle übersicht

63.0

gallery3

bild-gallery mit model gisi und paddy

81.0

tatoo

info & tatoobilder flash-slideshow

64.0

gallery4

bild-gallery mit model sabrina

90.0

b*store

link zu b*store (1.0.0 stukturgramm b*store)


22

����� �����

����� ����������� ���������

����� �������

����� ���������

����� ����������� ������

����� ������� ��������

����� ���� ��� �������

����� ����������� ������

����� ������� ��������

����� ���� ��� �������

������� ����� ������� ���� �����

������� ������ ���� ���� ��� ����

����� �������� �������

����� ������� �������

����� ������������

����� ������

����� �����

����� ����

����� ���

����� �������

bindung

struckturplan b*store


23

inhaltliches-thematisches konzept

bindung

thematisch/inhaltliches konzept b*store 3.0.0

warenkorb

der optische warenkorb mit produktnr, name, menge, löschen, neue menge, aktualisieren in hintergrund php für update usw

navigation der seiten 1.0.0 / 2.0.0 / 2.x.0 / 3.0.0 / 4.0.0 / 5.0.0 . sie wird mittels php geladen

4.0.0

bestellung_ login1

stammkunden login mittels nachname und kundennummer

css

dient für den lock aller seiten

5.0.0

bestellung_ login2

neukunde login mittels ganzer anschrift, telefon und e-mail

2.0.0

artikel

produkteauswahl mittels einem kleinen bild 6.0.0

lieferadresse

2.0.1

eintrag_in_ warenkorb

pop up fenster als visuelle bestätigung an den user. im hintergrund php für den eintrag im korb

auszug aus dem warenkorb rechningsadresse und andere lieferadresse

6.1.0

adresse_aendern

hier kann man die anschrift ändern

2.1.0

detail_irish_ coffee

bild des produkt und aus der datenbank der preis / beschreibung

7.0.0

mailto

danke für den einkauf und automatisch ein mail an den shopbetreuer

2.1.1

irish_coffee_bild

grossaufnahme vom produkt 8.0.0

agb_s

gesetzesbestimmungen

2.2.0

detail_ artikel2

9.0.0

auftrag

dient für den shop-betreuer um die bestellung die er mittels mail bekommt von der datei 7.0.0

1.0.0

start

wilkommen im b*store

1.1.1

db_verbindung

dient für die datenbank-verbindung (unsichtbar)

1.1.2

menu

1.1.3

2.2.1

bild vom produkt


24

didaktisches-methodisches konzept globale gedanken über das projekt webauftritt braincandy. braincandy - der name ist konzept süssigkeiten für das gehirn zucker löst positive emotionen im menschlichen gehirn aus, dasselbe werden auch die produktionen und der webauftritt von braincandy bewirken. for all the beauty in life. die anzusprechende zielgruppe besteht aus werbeverantwortlichen von kmu`s in verschiedenen branchen, privatpersonen sowie kunstschaffenden, vorwiegend aus dem musikbereich. was wir bei dieser gruppe als gemeinsamkeit erkennen können. ist der wunsch nach ästhetik, intuitiver umgang mit dem produkt und kurzer aber prägnanter text-information. es ist wichtig einen logischen aufbau zu präsentieren, da es sich dabei nicht ausschliesslich um routinierte multimediaanwender handelt. um den user beim besuch dieser website von unerer professionalität zu überzeugen, muss die seite technisch einwandfrei funktionieren. dafür können vor dem eintreten in die seite ( intro ) allgemein gültige voraussetzungen getroffen werden. im fall von braincandy setzen wir quicktime 5 und flash player 6 voraus. zu einem späteren zeitpunkt darf der besucher nicht mehr durch technische inkompatibilitäteten oder gar fehlprogrammierungen aufgehalten werden, da er sonst möglicherweise in verärgertem zustand die seite verlässt. das interesse des users soll durch ansprechendes design, intelligente navigation, schnellen zugriff auf informationen und verschiedenen „goodies“ wie

zum beispiel referenzgallerien aufrecht erhalten werden. um trotz gleichbleibender navigation und rasterorientiertem grundlayout keine monotonie aufkommen zu lassen, gestaltet sich der aufbau der einzelnen unterkapitel variierend. dies soll den user einerseits neugierig machen sich das ganze spektrum von braincandy anzusehen und weiter auf dieser website zu verweilen, andererseits zeigt es verschiedene möglichkeiten auf, die evtl. entscheidungsfaktoren für die kontaktaufnahme oder gar die plazierung eines auftrages sind. ein weiterer wichtiger punkt den es zu vermitteln gilt, ist die gewissenhaftigkeit und die stilsicherheit innerhalb eines projektes und im umgang mit ci/cd. durch die saubere einhaltung von gewissen elementen oder der unikaten art der bearbeitung von z.b bildern oder ähnlichem, wird dem user eine gewisse eigenständigkeit und kontinuität demonstriert, welche sicherheit und selbstbewusstsein vermitteln. dadurch kann er davon ausgehen, dass wir auch sein projekt in seinem sinne und für seinen zweck optimal konzipieren und produzieren werden. uns ist es wichtig das der user diese dinge auf unserer website spürt und wir sie nicht in einem ausformulierten werbetext erwähnen müssen. die atmosphäre die den user umgibt ist dabei ein wichtiges element unsere arbeit und unseren stil zu verstehen. durch den„look and feel“ dieser webseite soll unser verständnis von multimedia transportiert werden. das sounddesign hat 2 wichtige funktionen. was die navigation angeht soll sie als benutzerführung und interaktionsbestätigung auf den buttons dienen. was den backgroundloop betrifft, soll er die stimmung der website unterstreichen und dem user während seinem besuch bei braincandy eine einzigartige atmosphäre bieten.

bindung

global


25

didaktisches-methodisches konzept

bindung

intro didaktik:

methodik:

das intro soll den user erstmals mit dem look and feel von braincandy in berührung bringen. das intro soll elegant und anmutig wirken und keine negativen elemente beinhalten. der user soll interesse entwickeln um nach dem intro auf der seite zu bleiben und sich mit dem inhalt auseinandersetzen. elemente wie das logo von braincandy und die sterne als bildmarke werden hier zur förderung des wiedererkennungswert platziert.

durch den langsamen banneraufbau und das einblende der einzelnen grafikebenen in der mitte des screens bekommt das intro eine spannende ruhe. der user kommt somit erstmals mit der bildwelt und dem formalen design von braincandy in berührung. durch das vollständig automatisierte intro kann der user sich völlig auf die danachfogende website konzentrieren. durch die integration des logos und der sterne ist der user nun mit den erkennungsmerkmalen von braincandy vertraut und wird sie als solche auch in anderer form wiedererkennen. das ineinanderblenden von intro und website soll den emotionsaufbau beim user nicht unterbrechen.text


26

didaktisches-methodisches konzept didaktik:

methodik:

der aufbau der home-site ist einer der schlüsselmomente beim besuch dieser website. hier wird der user mit der struktur der seite und dem stil von braincandy vertraut gemacht. der user wird darüber informiert was sich hinter dem namen braincandy und dem begriff b*sub verbirgt und eingeladen einzutauchen und sich in der website zu vertiefen. auch die navigation wird hier erstmals sichtbar und somit auch die einzelnen untermenüs welche sich auf dieser seite befinden. der user soll sich wohlfühlen und lust auf mehr „süssigkeiten“ bekommen. brandunterstützende massnahmen sollen anhand von bild und logoplazierungen vorgenommen werden.

im anschluss ans intro, also beim ersten besuch der home-site wird die struktur der seite modular aufgebaut. somit wird dem user step by step das system der page aufgezeigt. ein wichtiger faktor ist bestimmt die navigation, welche beim ersten ladevorgang von links ins bild gleitet und somit die aufmerksamkeit des users auf sich zieht. durch die bildsprache im oberen bannerbereich und im linken sektor wird auf dieser seite der surfstil thematisiert, welcher ein hauptelement im cd von braincandy darstellt und unumgänglich ist für die vermittlung des brand-gedanken. auch das b*sub-logo wird hier einmalig plaziert, da es durchaus für spätere brandwiedererkennung von bedeutung sein kann. die bilder sind als duplex in hellen blautönen gehalten um dem gesamten erscheinungsbild eine beruhigende wirkung zu verleihen. diese ruhe wird zusätzlich durch ein soundloop unterstützt, welcher durch seine tiefe und den rhytmus an die kraft und die anmut einer welle erinnern soll. dieser loop bleibt über die gesamte aufenthaltsdauer auf www.braincandy.ch bestehen, kann aber natürlich durch die allgemein bekannten symbole von audio und videoabspielgeräten aus und eingeschaltet werden. durch dezente beep-klänge wird der user beim darübergleiten jeglicher tasten darauf aufmerksam gemacht, dass sich dahinter eine funktion verbirgt. im rechten sektor, dem sogenannten infobereich, findet der user in textform eine kurze beschreibung über braincandy und dessen netzwerk b*sub.

bindung

home


27

didaktisches-methodisches konzept

bindung

kontakt didaktik:

methodik:

auf dieser seite soll der user auf einen blick alle informationen bekommen um mit braincandy in kontakt zu treten. er soll sein anliegen schnell und unkompliziert an uns weiterleiten können. die entscheidung mit uns in kontakt zu treten soll durch die gegebenen möglichkeiten erleichtert werden, denn ein erster schriftlicher kontakt bietet eine gute grundlage für eine allfällige zusammenarbeit. weiter soll er die möglichkeit besitzen, einen lageplan zu erhalten um den weg zu einer besprechung oder einer präsentation bei braincandy mühelos zu finden. auch hier soll selbstverständlich der stil von braincandy weitergeführt werden und brandunterstützende elemente enthalten.

durch den bildwechsel im oberen bannerbereich und dem darinenthaltenen textvermerk „ kontakt“ merkt der user sofort das sich sein standort gewechselt hat. der bannerbereich, wie auch der linke bildsektor thematisieren auf dieser seite den surfverwandten skateboardbereich, wiederrum eine brandunterstützende massnahme und konsequente einhaltung des cd von braincandy. zur visualisierung des themenbereichs „kontakt“, spielt im linken mediensektor eine geloopte animation, mit global gültigen pictos für kommunikation ab. ist somit ein orientierungshilfe und gleichzeitig ein formal schönes stilmittel. auf der rechten seite findet der user in textform die postanschrift, die telephonnummer und die e-mailadresse „contact@braincandy.ch“. die e-mailadresse wird dem user durch einen farbwechsel beim rollover signalisieren, das hier ein direkter mailversand möglich ist. beim klick wird sein mailclient geöffnet und eine vorberetete mail mit der adresse von braincandy aufgerufen.


28

didaktisches-methodisches konzept didaktik:

methodik:

hier wird dem user der bereich konzeption nähergebracht. er soll auf dieser seite merken, dass er bei braincandy in guten händen ist, wenn es nicht nur darum geht formal schöne, sondern auch intelligente, zielorientierte und somit erfolgversprechende multimediaproduktionen zu realisieren. die seite enthält eine allgemeine erklärung zum konzept, wie auch eine grobübersicht der einzelnen konzeptstufen.

der bereich konzept wird auf dieser seite mit den amaturen einer designerkaffemaschine thematisiert, bestimmt ein wichtiger bestandteil bei der erarbeitung eines konzeptes. im linken bildsektor erscheint die rote hibiscusblüte aus dem cd von braincandy gefolgt von einer textzeile „ conception is like entering a secret garden“, in fraktaler schrift, welche die anmut eines puzzles ausdrücken soll - auch hier die klare assoziation mit den konzeptstufen die es gilt zusammenzufügen und zu vereinen. die textzeile in verbindung mit der hibiscusblüte soll die komplexität dieser aufgabe ausdrücken, aber auch die schönheit und die perfektion die daraus entstehen kann, wenn man sie richtig efüllt. als letztes element erscheint ein button, der durch das wort „enter“ und ein mystisches geräusch als rollover, den user auffordert, den geheimen garten zu betreten. kein grosses rätsel aber eine kleine interaktionsmöglichkeit um die aufmerksamkeit des users zu behalten. nachdem der enter-button gedrückt wurde erscheint im rechten feld der text mit den allgemeinen abhandlungen zum thema konzept. durch ein weiteres symbol am textende kann sich der user noch weiterklicken zu den einzelnen konzeptstufen in der grobübersicht und über den gleichen button auch wieder zurück.

bindung

konzept


29

didaktisches-methodisches konzept

bindung

design didaktik:

methodik:

im designbereich der website soll dem user in erster linie die vielseitigkeit unserer gestalter anhand einer kleinen auswahl von realisierten projekten vermittelt werden. wichtig ist hier das es sich um printerzeugnisse handelt, damit der user erkennen kann, dass braincandy auch in diesem bereich ein kompetenter ansprechspartner ist. dies sollte jedoch nicht zu stark thematisiert werden, da ein ein grossteil der zielgruppe selbst aus dem werbe und printbereich stammt und somit interessenskonflikte entstehen könnten. design wird hier in einem allgemeineren kontext, wie z.b architektur, industriedesign oder ähnlichem thematisiert - und somit auch die influenzen und das damit verbundene interesse von braincandy dargestellt. der inhalt dieser seite soll sporadisch gewechselt oder ergänzt werden, da printmedien am bildschirm nicht die gleiche wirkung haben wie z.b 3d-animationen oder videoprojekte.

der banner auf dieser seite befasst sich mit architektur-design - eine orientierungshilfe für den user und gleichzeitig sinngemässes stilmittel. im linken bildsektor erscheint ein bild mit einer dachkonstruktion eines logos, welches von uns durch 3 buttons ergänzt wurde. die buttons bauen sich erst nachträglich der reihe nach auf und werden von einem dezenten beep-klang begleitet um auf sich aufmerksam zu machen. beim darüberfahren mit der maus ertönt ein metallisches geräusch, welches den user auffordern soll, durch einen klick die dahinter verborgenen gallerien zu besuchen. der inhalt dieser seite ist komplett modular aufgebaut und kann somit problemlos erneuert werden. wenn der user sich in eine gallery geklickt hat, wird ihm anhand einer slideshow und natürlich begleitet von text alles wissenswerte über das jeweilige projekt vermittelt. rechts unten im textfeld findet er jeweils den back-button der ihn zur projektauswahl zurückbringt.


30

didaktisches-methodisches konzept didaktik:

methodik:

die dunkle und sinnliche seite von braincandy wird dem user im photographie-bereich präsentiert. der besucher soll auf dieser seite durch den mystischen und erotischen touch angesprochen werden. auch findet er hier optisch eine abwechslung zu den vorherigen, eher technisch oder sportivangehauchten seiten. durch die bildsprache im allgemeinen wie auch den photogallerien lernt der user eine neue, provokantere seite von braincandy kennen. der ästhetische umgang mit erotik und fetisch ist ein grosses anliegen von braincandy und ein wichtiges stilmittel in unserer arbeit. diese seite soll dem user diesen aspekt etwas näherbringen und berührungsängste damit vermindern. wichtig hierbei ist, den user zu informieren, dass braincandy die ganze bandbreite von photografie bedienen kann, was wiederum durch den textbereich und ergänzende oder wechselnde photogallerien mit diversen themeninhalten vermittelt wird.

als banner wird hier die skyline von istanbul eingesetzt, die durch ihre signifikanten moscheekonturen einen hauch von orientalischer mystik verbreitet. durch blitzeffekte wird die aufmerksamkeit des users auf den bildsektor gezogen, wo er das entstehen einer photocollage beobachten kann und sich einen ersten eindruck von diesem bereich machen kann. durch das einblenden eines kurzen infotextes zu diesem bereich kann sich der user einen blick über das angebot im bereich photografie verschaffen. er wird eingeladen die verschiedenen gallerien zu besuchen welche beim aktivieren von bildbuttons als popups erscheinen.

bindung

photography


31

didaktisches-methodisches konzept

bindung

video didaktik:

methodik:

diese seite befasst sich mit einer der kernkompetenzen von braincandy. um das zu unterstreichen, soll der aufbau der seite etwas spektakulärer ausfallen. diese seite soll dem user, ein sonst meist wegen kosten und aufwand gefürchtetes videoprojekt in greifbare nähe rücken. durch den unkomplizierten umgang in text und bild und den einsatz von ausgesuchten referenzprojekten soll sich der user amüsieren und begeisterung für ein projekt in dieser art entwickeln. um diesen effekt zu erzielen werden hier keine firmenpräsentationen gezeigt, sondern „süssigkeiten fürs hirn“ wie z.b realisierte musikclips oder kurzfilme.

im bannerbereich zur orientierung und als stilmittel, hausdächer mit satellitenschüsseln als sinnbild für broadcasting und fernsehen. im bildsektor finden wir eine auswahl von jeweils vier verschiedenen videoprojekten, die den user durch einen rollovereffekt auf funktionalität hinweisen. durch einen klick kommt er auf die seite des jeweiligen projekts. eine kurze zusammenfassung in textform unterrichtet ihn über die rahmenbedingung, den kunden, den drehort und verschiedene andere informationen die für das jeweilige projekt von bedeutung waren. im linken bildsektor findet er neben eizelnen videostills auch den play-button um sich einen ausschnitt aus diesem projekt anzusehen. die quicktime movies spielen in einem neuen fenster ab. der hintergrundsound der homepage wird beim laden der movies ausgeschaltet um ein überlappen der sounds zu vermeiden. dem user werden hier interaktionsmöglichkeiten in form der freigesschalteten quicktimesteuerung zur verfügung gestellt, auch ein download ist möglich.


32

didaktisches-methodisches konzept didaktik:

methodik:

auf den seiten unter dem namen „2 adore“ wird braincandy dem user den „braincandy-lifestyle“ vermitteln. es handelt sich dabei um eine brandunterstützende massnahme. es sollen ihm verschiedene bereiche als konsumgut präsentiert werden. ob reiseberichte, links zu einzigartigen kunstschaffenden, oder eigenproduktionen die zwar sehenswert sind jedoch in den anderen bereichen nicht untergebracht werden könnnen.

durch den bildwechsel im oberen bannerbereich und dem darinenthaltenen textvermerk „ 2 adore“ wird der user auf den wechel des themeninhalts aufmerksam gemacht. der bannerbereich zeigt ein sinnliches, aufgewecktes frauengesicht was für den user das „2 adore“ bereits thematisieren soll. im medienbereich baut sich eine bildkombination auf, welche aus verschiedenen bereichen aus der „2 adore“-thematik zusammensetzt um den user einen eindruck zu vermitteln was er auf den folgenden seiten finden wird. auf der rechten seite findet der user in textform eine abhandlung zum thema „all the beauty in life“ der ihm influenzen und interssen von braincandy vermittelt sowie eine linksammlung wo er die einzelnen themengebiete ansteuern kann.

bindung

2*adore


33

didaktisches-methodisches konzept

bindung

b*store didaktik:

methodik:

nun kommen wir zum konsumbereich der seite. dem b*store, einer dynamischen, datenbankgestützten shoplösung welche hauptsächlich zur förderung des brands „braincandy“ gilt. in diesem bereich soll vorallem der gleichgesinnte kern der zielgruppe angesprochen werden. durch die brandprodukte aus den bereichen surf, skate, snowboarding (themen erweiterbar) wird ein eher junges, aktives publikum angesprochen und somit die nach statistik grösste kaufkraft-gruppe. die artikel sollen jedoch liebhaberstücke sein und nicht billige massenabsatzprodukte. als wichtiges element im b-store gilt der geschenkversand, der user hat hier die möglichkeit rechnungs-und lieferadresse zu trennen und somit andere mit einem exklusiven braincandy-geschenk zu überraschen und das ohne aufpreis als geschenk im typischen braincandy-look verpackt. der shop ist selbstverständlich auch ein referenzprojekt für die kunden, die sich für einen dynamischen bereich in ihrem projekt interessieren.

die skateboardanlage im bannerbereich unterstützt die identifizierung des shopbesuchers mit dessen inhalt. geprägt durch den aufbau der sonstigen website befindet sich unter dem banner die navigation, ebenfalls ausgestattet mit rollovereffekt. es ist wichtig, dass der kunde mit wenigen clicks durch die seiten navigieren kann. der kunde soll im b*store die gleichen logischen abläufe tätigen, die er bereits vom normalen einkaufen her kennt. aus diesem grunde wird der kunde durch den shop geführt, ohne das er es merkt. um einen einkauf zu tätigen muss sich der kunde durch einen loginbereich begeben. dieser bereich besteht aus einem stammkundenlogin und einem neukundenlogin. ein kunde ist erst nach der ersten bestellung in den stammdaten erfasst. durch das einfache prozedere wird dem kunden die entscheidung erleichtert, sich im login-bereich zu registrieren und somit seine personalien in die stammdaten einzutragen. nach diesem login befindet sich der kunde erneut in einer warenkorbübersicht, diesmal kombiniert mit seiner rechnungsadresse. hier kann er nun durch den eintrag einer anderen lieferadresse und durch das anhaken einer checkbox, ein fertig verpacktes geschenk bestellen oder gleich versenden lassen. durch ein popup wird dem kunden für seinen einkauf gedankt.


bindung


35

ci-cd von braincandy schrift

bindung

aero extended | regular die schrift aero extended | regular dient ausdrücklich nur für den brand.

braincandy

spationierung: 25 , dieser wert kann der schriftgrösse angepasst werden. laufweite: 100%

aero outline | regular die schrift aero outline | regular kann für die pagina verwendet werden.

123456789

spatzionierung: 0 laufweite: 100%

bank gothic bt | medium die schrift bank gothic bt | medium dient für untertitel und für alle fliesstexte. für alles, was nicht mit dem brand zu tun hat.

untertitel fliesstext | fliesstext | fliesstext | fliesstext | fliesstext | fliesstext | fliesstext | fliesstext | fliesstext |

spatzionierung: für untertitel ist es der wert 10 für fliesstext ist es der wert 0 laufweite: 100% zeilenabstand: immer den wert auf automatisch es gibt gestalterische ausnahmen, die der typograf in absprache ändern darf um den auto-wert zu ändern


����������

�� ���� �������� � ������� ���� �� ����� �����������

�� ���� �������� � ������� ���� �� ����� �����������

bindung

36

�� ���� �������� � ������� ���� ����������� ��������������� ��

�� ���� �������� � ������� ���� �� ����� ����������� ��� �������������� ��� ���� � ����� ���������� �������

�����

����������� �����

�� � �� � �� � ����

�� � �� � ��

�� � �� � ��

�� � �� � �� � ��

���� � ���� � ����

��� � ��� � ���

�� � �� � �� � ���

��� � ��� � ���

��� � ��� � ���

��� � �� � �� � ��

��� � ���� � ����

��� � ��� � ���


37

bindung

ci-cd von braincandy überlegungen zur brand gestaltung

farben und schrift des brand

braincandy und seine philosophie besteht nun schon seit ca. 4 jahren. der brandgedanke war von anfang an vorhanden, jedoch wurde er nie genau definiert. beim erstellen der neuen website stiessen wir auf unklarheiten was das erscheinungsbild und den brand betreffen und haben uns deshalb entschieden, den brand in anlehnung an das vorhandene neu zu lancieren. dabei war es wichtig mehr schlichtheit und professionalität in die gestaltung zu bringen, die farbwelt zu reduzieren und neu zu definieren. bildmarken mussten unterteilt werden in logos und add-ons, andere wurden ganz aus dem erscheinungsbild entfernt, da sie nicht mehr zeitgemäss wahren. diese überarbeitung hat uns sehr geholfen bei der realisierung des gesamten projekts in bezug auf stilsicherheit und effizienz. das zusammenspiel zwischen brand und dem allgemeinen erscheinungsbild der firma ist nun zweifellos gelungen.

Das fertige braincandy-logo kann bei braincandy angeforbert werden, je nach verwendung stehen diverse formate zur integration bereit. der font ist aero extended | regular. auf der datei LOGO_braincandy.eps ist das logo, in drei grössen und in pfade konvertiert. im unteren teil sind die standardfarben des logos. die frben sind in der werten von c|m|y|k , r|g|b und im websicheren r|g|b dargestellt. die datei LOGO_braincandy.eps ist auf der vorherigen seite abgebildet.


39

ci-cd von braincandy untertitel am brand

����������

� � �� � � � � � �

������

bindung

das logo braincandy kann mit divesen textinformationen ergänzt werden, dies jedoch nur in absprache mit braincandy m.angehrn.

����������

dieser text soll immer in bank gothic bt | medium geschrieben werden. die grösse wird anhand der linienstärke vom y angepasst. das mass y entspricht der höhe der linienstärke vom y aus dem logo. die unterzeile kann durch sperren des textes optisch angepasst werden. bei diesem anpassen tritt mass x in kraft. mass x ist so gross wie der abstand der einzelnen buchstaben. x regelt also den abstand zwischen ende text und anfang des y von braincandy. beim thema farben wird im 4-farbendruck das 75% cyan als vorlage gelten und beim graustufen print soll 100% weiss oder schwarz verwendet werden. invertiert zum braincandy-logo. falls aus irgendwelchen gründen eine andere farbe verwendet werden muss, darf das nur in absprache mit braincandy geschehen !


41

ci-cd von braincandy add ons

bindung

die add-ons dienen in erster linie als blickfang aber auch zur unterstützung für den brand braincandy. die symbole 3stern und die hibiscusblüte sind fixer bestandteil des erscheinungsbild im screendesign und merchandisebereich. um die assoziation zwischen diesen add-ons und braincandy zu festigen werden diese gezielt und häufig eingesetzt.die verwendung dieser add ons sind dem grafiker überlassen. die kontrollüberlegung „ less is more“ sollte jedoch gecheckt werden. häufig ist weniger auch mehr. bei der schrift handelt es sich um die sin-gothic. diese schrift erzeugt mit ihren mystischen style und dem fraktalen stil eine eigene aufmerksamkeit. deshalb wird sie als dritte schrift verwendet. sie dient jedoch nur als gestalterisches add-on font. die nebenan aufgeführten add-ons befinden sich auf der cd-rom, ci/cd braincandy. diese cd wird an alle personen von b*sub abgeliefert.

sin gothic font


42

ci-cd von braincandy b*sub ist die abkürzung für braincandy-subdivision. eine untergruppe von braincandy. mit ausnahme der eigenen bildmarke übernimmt b*sub das volle ci/cd von braincandy. das b*sub logo ist integrierter bestandteil vom ci/cd von braincandy und somit im stammdatenordner aller braincandy-originaldaten unter b*sub auffindbar. das logo ist lediglich für den einsatz am bildschirm konzipiert, da der gesamte printverkehr über das offizielle braincandy-system organisiert ist.

bindung

b*sub


43

ci-cd von braincandy briefschaften

bindung

die braincandy briefschaften werden als kontrast zu den modernen medien in einem speziellem erscheinungsbild designt. die briefschaften werden im packpapier-look gefertigt. einziger unterschied sind die papierst辰rken. 90 gramm f端r a4 | 80 gramm f端r couverts | 250 gramm f端r die visitenkarten. um unsere briefschaften nicht aufwendig in einer druckerei fertigen zu lassen werden logo und text auf eigenen sw-laserdruckern geprintet. die indesign-templates der briefschaften liegen im ci_cd_braincandy unter briefschaften zum gebrauch bereit.

muster


45

styleguide bc webseite

bindung

einleitung die neue website von braincandy wird in flash entwickelt, der neue webshop in html/php. die screenmasse des flashauftritts betragen 725 pixel x 400 pixel und die hintergrundfarbe entspricht r|g|b schwarz aus dem ci-cd von braincandy. dieser styleguide ist stark abh채ngig vom allgemeinen ci-cd von braincandy. der webauftritt entspricht somit eins zu eins auch dem ci/cd von braincandy mit ausnahme vom b*store. dieser wird leichte abweichungen haben da er in html realisiert wird und wir dort gestalterisch nicht die gleiche bewegungsfreiheit haben wie in flash. als schrift wird bank gothic bt | medium eingesetzt. braincandy wird nach ci/cd mit aero extended | regular geschrieben oder bereits als logo importiert. als add on wird die schrift sin-gothic verwendet.


46

styleguide bc webseite masse der seite:

725 x 400 px

banner:

725 x 105 px

linie 1 längs:

position auf pixel 0 von rechts , 110 pixel von oben, dicke ist 1 pixel und 725 pixel lang 725px länge x 15 px höhe

navigation:

einzelner button der navi: schrift wird eingepasst zwischen linie 1 und 2 die länge ist unterschiedlich, der abstand zwi schen den buttons beträgt 5 pixel linie 2 längs:

position auf pixel 0 von rechts , 125 pixel von oben, dicke ist 1 pixel und 725 pixel lang

medienfenster links:

x=10, y=130, länge=320, breite=240 px

textfenster rechts:

x=350, y=130, länge=360, breite=240 px

linie 3 längs:

position auf pixel 0 von rechts , 375 pixel von oben, dicke ist 1 pixel und 725 pixel lang

linie 4 quer:

position auf pixel 340 von rechts , 125 von oben, dicke ist 1 pixel und 250 pixel lang

screen der webseite

bindung

masse der grundseite


47

styleguide bc webseite

bindung

gestaltung des banner die banner befinden sich im braincandy projektordner unter fotos_banner. in der datei layout_banner befinden sich die psd dateien mit den ebenen. sie entsprechen der abbildung auf der linken seite oben. f체r die getaltung eines neuen banner setzt man auf ebene 4 das neue blid ein. in anlehnung an die vorlagen ist es entscheidung der verantwortlichen grafikers, welche ebenen er sichtbar machen will und allenfalls noch justieren. die text ebene mit dem seitenvermerk z.b kontakt wird 체berschrieben mit dem jeweiligen kapitelname. die sterne bleiben bestehen, wie auch die zusatzzeile - * braincandy. die platzierung muss je nach textl채nge angepasst werden !


bindung

48


49

styleguide bc webseite

bindung

gestaltung der outline vom banner nebenan sieht man die outline-illustration eines banners. es wird fĂźr jeden banner eine solche illustration erzeugt. ausnahem ist hier der banner fĂźr den b*store. wird keine outline-illu benĂśtigt. ist das illu-file gezeichnet, wird es in den projektordner unter grafiken gespeichert. die strichdicke ist 1 px.


50

styleguide bc webseite die navigation der braincandy-website befindet sich unter dem namen ebene_200.swf auf dem projektserver braincandy unter webautritt. die ebene wird auf stufe 200 geladen und bleibt w채hrend dem gesamten projekt sichtbar. die buttons sind inbank gothic bt geschrieben und haben die farben vom ci-cd. weiss im normalzustand, grau f체r mouseover und 75% cyan f체r mousedown. die masse der navigation sind ersichtlich aus der vermassung des screens.

bindung

navigation und dessen button


51

bindung

styleguide bc webseite medienfenster

textfenster

Das medienfenster dient ausschliesslich für bildmaterial und bild-textkombinationen oder animationen. für gallerien und filme wird ein externes fenster geöffnet. dieser entscheid ist abhängig von verschiedenen formaten in den galleriemedien oder den videos, sowie der datenmenge die auf diese weise den user auf der page nicht blockiert.

das textfenster dient hauptsächlich der information. kleine grafische elemente, navigationshilfen oder ähnliches können jedoch ohne weiteres platziert werden sofern sie den text nicht stören. der text wird meistens von links nach rechts eingeblendet.


bindung

52


53

styleguide bc webseite sound

bindung

es werden folgende sound-dateien verwendet: Navigation: beeppit.mp3 background: decennia-decennia-3559.wav sounddateien f체r effekte und ander buttons (frei w채hlbar): Bleeep.mp3 | Spooky1.mp3 | Ting.mp3


54

styleguide b*store der banner und die navigation des b*store werden im voraus produziert und unter menu.php auf dem webserver gespeichert. die datei wird mit der php-funktion include, gemäss drehbuch in die seiten geladen. da diese variante gewählt wird, ist der shop sehr flexibel modifizierbar für diverse anpassungen und designs. die datei menu.php wird im photoshop anhand ci/cd gestaltet. der titelbanner entspricht den üblichen banner. (speicherort - siehe styleguide banner). dadurch wird die herkunft des shops offensichtlich. folgende buttons wurden definiert: [ artikel ] [ warenkorb ] [ agb‘s ]. hinter artikel und warenkorb muss der wert $login im query angefügt werden. die button müssen im normal-zustand weiss sein, 65% schwarz beim mouseover und 75% cyan (umrechnen in photoshop) beim mousedown. die weissen linien entsprechen den flash-screens. die links werden mittels quelltext koordiniert. ( tool - macromedia - dreamweaver ) die breite beträgt 725 px die höhe ca. 400px. masse: banner: 85 x 725 navigation: 27 x 725 (14px schrift)

bindung

navigation


55

styleguide b*store

bindung

screen detail

schrift und farbe im html für die textdarstellung in html werden die schriften„Verdana, Arial, Helvetica, sans-serif“ verwendet und in der farbe #999999 (grau) definiert. die link‘s werden identisch dargestellt. der backgraund ist #000000 (schwarz). für die schlagwörter und die benennung der warenkorbspalten verwenden wir #4188d4 (cyan). diese werte sind bestandteil des css.


56

styleguide b*store screen neukunde login

bindung

screen warenkorb


57

drehbuch

bindung

allgemeines zum drehbuch das drehbuch wird so einfach wie möglich gehalten. zur erklärung, wie die daten abgespeichert werden dient das bild links. hier sieht man die einzelnen ordner die auf dem projektserver braincandy liegen. der ordner wird 2 mal im tag auf eine sicherung gespielt. in drehbuch hat es bei teils nummern ein x drin zb. 2.x.0. das bedeutet, das die screens mit den folgenden nummern 2.1.0 | 2.2.0 | 2.3.0 | usw die gleich aufbauweise haben wie der erste screen dieser nummer kombination (2.x.0). bei unklarheiten oder allfälligen änderungen muss der projektleiter angesprochen werden. nur dieser darf änderungen im drehbuch vornehmen.


58

dateien vom screen 10.0 .psd

.gif

banner skyline

banner_photography

banner_photography

banner augen

banner_adore

sterne

stars

rahmen

ebene_200

.jpg

banner_adore

.mov

.mp3

bindung

.swf


59

drehbuch der flash seite screen 10.0 | intro

bindung

link von: www.braincandy.ch was ist zu sehen: weisser rahmen, 3 sterne, skyline istanbul, augenpaar, braincandy logo und ein text. was passiert: sterne reihen sich auf, skyline wird in bannerform eingefadet augenpaar erscheint im bild mit blitzeffekt. text wird eingeblendet: multimedia to reach your senses. link nach: autoloade 20.0 b*sub (home)


60

dateien vom screen 20.0 .psd

ebene_10

banner_home

titelillustration navigation

zeich_home

.gif

.jpg

.mov

.mp3

banner_home zeich_home

ebene_200

medienfenster

board_bottom

board_bottom

background loop

ebene_99

decennia-decennia3559

navi on mouse over

ebene_200

beeppit

navi on mouse down

ebene_200

ting

bindung

titelbanner

.swf


61

drehbuch der flash seite screen 20.0 | b*sub (home)

bindung

link von: autoload 10.0 was ist zu sehen: surf-titelbanner, im medienfenster ist ein bildelement, b*sub logo, navigation, text im textfenster, braincandy logo was passiert: sound-loop startet, navigation gleitet von links ins bild. 端berblendung titelbanner zeichnung-photography. medienfenster wird eingeblendet und text wird von links nach rechts eingeblendet. b*sub logo erscheint. link nach: 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 80.0 text: willkommen by braincandy & b*sub b*sub, das virtuelle netzwerk von braincandy. optimale synergiennutzung f端r den erfolg ihrer multimediaprojekte. b*sub ist ein kleines und dadurch sehr flexibles und effizientes netzwerk von multimediaschaffenden und gestaltern. durch diesen zusammenschluss sind wir in der lage projekte jeglicher art in einem eingespielten team zu realisieren. tauchen sie nun ein und geniessen sie unsere brain - candys.


62

dateien vom screen 30.0 .psd

titelbanner

ebene_20

banner_kontakt

titelillustration

ebene_20

zeich_kontakt

medienfenster

enene_21

skate_bottom

globe logo

ebene_23

globe_trans

text kontakt

ebene_23

.gif

.jpg

.mov

.mp3

banner_kontakt zeich_kontakt skate_bottom globe_trans

bindung

.swf


63

drehbuch der flash seite screen 30.0 | kontakt

bindung

link von: 端ber hauptnavigation was ist zu sehen: skate-titelbanner, im medienfenster ist ein animiertes bildelement mit pictos, globe logo, navigation, text im textfenster, braincandy logo was passiert: 端berblendung titelbanner zeichnung-photography. medienfenster wird eingeblendet und text wird von links nach rechts eingeblendet. globe logo erscheint. e-mail link im textberiech ist aktiv. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 80.0 text:

kontakt at braincandy braincandy magnihalden 22 ch-9000 st. gallen phone: 0041 (0)76 377 86 87 email: contact@braincandy.ch


64

dateien vom screen 40.0 .pdf

titelbanner

ebene_30

banner_coffee

titelillustration

ebene_30

zeich_coffee

medienfenster

ebene_32

hibiscus_rot

text konzept

ebene_33

.gif

.jpg

.mov

.mp3

banner_coffee zeich_coffee hibiscus_rot

button over

spooky

button down

bleep

bindung

.swf


65

drehbuch der flash seite screen 40.0 | konzept

bindung

link von: über hauptnavigation was ist zu sehen: coffee-titelbanner, im medienfenster befindet sich eine bildkombination aus hibiscusblüte und typo, navigation, text im textfenster erscheint nach interaktion was passiert: überblendung titelbanner zeichnung-photography. medienfenster wird stufenweise eingeblendet und text wird von links nach rechts dargestellt, sobald man die interaktion im medienfenster ausführt. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 80.0 text: konzept by braincandy die wichtigste grundlage für den erfolg ihrer multimediaproduktion ist das sorgfältige aufarbeiten der verschiedenen konzeptphasen. je nach art der produktion müssen verschiedene faktoren berücksichtigt werden. in zusammenarbeit mit ihnen werden wir diese notwendigen stufen gehen, um allfällige fehltritte zu vermeiden und somit den grösstmöglichen erfolg für ihr projekt zu gewährleisten.


66

dateien vom screen 50.0 .psd

titelbanner

enene_40

banner_bridge

titelillustration

enene_40

zeich_bridge

medienfenster

ebene_41

ptt_turkey

text design

ebene_41

.gif

.jpg

.mov

.mp3

banner_bridge zeich_bridge ptt_turkey

on load button

bip

button over

bleep

button down

highbleep

bindung

.swf


67

drehbuch der flash seite screen 50.0 | design

bindung

link von: über hauptnavigation was ist zu sehen: brücke-titelbanner, im medienfenster befindet sich eine bildkombination aus bildelement und buttons, navigation, text im textfenster wird von links nach rechts eingeblendet. was passiert: überblendung titelbanner zeichnung-photography. medienfenster wird stufenweise eingeblendet. text wird von links nach rechts dargestellt. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 51.0 | 52.0 | 53.0 | 60.0 | 70.0 | 80.0 text: design by braincandy design und gestaltung ist bei braincandy in jedem bereich einer der wichtigsten faktoren. die schönen dinge wecken emotionen die nützlichen erleichtern uns, das ziel zu erreichen - die perfekte kombination aus diesen beiden ist unser ziel. verschaffen sie sich einen ersten eindruck von ausgewählten arbeiten aus dem printbereich. diese gallerien werden in den nächsten wochen aktualisiert. schauen sie also wiedermal rein.


68

dateien vom screen 51.0 .psd

beryl bild1

ebene_49

beryl_01

beryl_01

beryl bild2

ebene_49

beryl_02

beryl_02

beryl_03

beryl_03

beryl bild3

ebene_49

back button

ebene_94

text

ebene_49

.gif

.jpg

.mov

.mp3

bindung

.swf


69

drehbuch der flash seite screen 51.0 | beryl

bindung

link von: 50.0 was ist zu sehen: grundscreen bleibt bestehen von 50.0. medienfenster erscheint eine slideshow von referenzprojekt beryl. textbereich mit navigationsmĂśglichkeit zurĂźck auf 50.0. was passiert: im medienfenster spielt die slideshow automatisch ab. texteinblender von links nach rechts. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 80.0


70

dateien vom screen 52.0 .psd

medienbereich

ebene_42

yayin_intro

text_bereich

ebene_42

back button

ebene_94

.gif

.jpg

.mov

.mp3

yayin_intro

button over

bleep

button down

highbleep

bindung

.swf


71

drehbuch der flash seite screen 52.0 | yayin

bindung

link von: 50.0 was ist zu sehen: grundscreen bleibt bestehen von 50.0. medienfenster erscheint ein bild mit yayin-logo. textbereich mit navigationsmöglichkeit auf vier referenzgallerien und zurück auf 50.0. was passiert: im medienfenster wird das bild eingeblendet, gleichzeitig erscheint der text. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 80.0 text: yayin - die weinlounge hinter dem namen „yayin“ verbirgt sich ein konzept füreine gleichnamige weinlounge mit spezialisierung auf internationalen wein. der begriff „yayin“ stammt aus dem hebräischen und ist die allgemeine bezeichung für das edle getränk. auf den folgenden seiten zeigen wir ihnen prototypen welche für die präsentation einer erfolgreichen diplomarbeit realisiert wurden. santé!


72

dateien vom screen 53.0 .psd

.gif

.jpg

kinok 01 vorne

ebene_48

kinok_01_vorne

kinok_01_vorne

kinok 01 hinten

ebene_48

kinok_01_hinten

kinok_01_hinten

kinok 02 vorne

ebene_48

kinok_02_vorne

kinok_02_vorne

kinok 02 hinten

ebene_48

kinok_02_hinten

kinok_02_hinten

button back

ebene_94

text

ebene_48

.mov

.mp3

bindung

.swf


73

drehbuch der flash seite screen 53.0 | kinok

bindung

link von: 50.0 was ist zu sehen: grundscreen bleibt bestehen von 50.0. medienfenster erscheint eine slideshow von referenzprojekt kinok. textbereich mit navigationsmĂśglichkeit zurĂźck auf 50.0. was passiert: im medienfenster spielt die slideshow automatisch ab. texteinblender von links nach rechts. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 80.0


74

dateien vom screen 60.0 .psd

titelbanner

ebene_50

banner_istan

titelillustration

ebene_50

zeich_istan sabi_colage

medienfenster

ebene_52

text

ebene_53

button1 positiv

ebene_52

phot_but_1_p

.gif

.jpg

.mov

.mp3

banner_istan zeich_istan

bindung

.swf

sabi_colage phot_but_1_p

button1 negativ

ebene_52

phot_but_1_n

phot_but_1_n

button2 positiv

ebene_52

phot_but_2_p

phot_but_2_p

button2 negativ

ebene_52

phot_but_2_n

phot_but_2_n

button3 positiv

ebene_52

phot_but_3_p

phot_but_3_p

button3 negativ

ebene_52

phot_but_3_n

phot_but_3_n

button4 positiv

ebene_52

phot_but_4_p

phot_but_4_p

button4 negativ

ebene_52

phot_but_4_n

phot_but_4_n

button5 positiv

ebene_52

phot_but_5_p

phot_but_5_p

button5 negativ

ebene_52

phot_but_5_n

phot_but_5_n

button over

bleeppit

button down

highbleep


75

drehbuch der flash seite screen 60.0 | photography

bindung

link von: über hauptnavigation was ist zu sehen: skyline-titelbanner, im medienfenster befindet sich eine bildkombination, navigation, text im textfenster wird von links nach rechts eingeblendet. anschliesend bauen sich fünf bildbutton auf, welche die einzelnen bildgallerien ansteuern. was passiert: überblendung titelbanner zeichnung-photography. medienfenster wird blitzartig, wechseln positiv - negativ eingeblendet. text wird von links nach rechts dargestellt. bildbutton werden mit dem text langsam eingeblendet. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 51.0 | 52.0 | 53.0 | 60.0 | 61.0 |62.0 | 63.0 | 64.0 | 65.0 | 70.0 | 80.0 text: photography by braincandy bewegende bilder gehören zu den wichtigsten elementen einer erfolgreichen multimedia - produktion. egal ob werbe, industrie oder kunstfotografie, sprechen sie mit uns über ihr vorhaben und wir werden für sie die ideale bildauswahl zusammenstellen. enjoy the galleries ......


76

dateien vom screen 61.0 (6x.0 identisch) .psd

.gif

.jpg

gallery cover

dancer_ebene_0

gallery_cover

gallery_cover

dancer1

ebene_181

nadia_01

nadia_01

dancer2

ebene_182

nadia_02

nadia_02

dancer3

ebene_183

nadia_03

nadia_03

dancer4

ebene_184

nadia_04

nadia_04

dancer5

ebene_185

nadia_05

nadia_05

.mov

.mp3

bindung

.swf


77

drehbuch der flash seite screen 61.0 - 6x.0 | gallery (popup)

bindung

link von: 60.0 was ist zu sehen: bildkomposition frau / moschee, auswahlnummern, info von model und künstler was passiert: popup öffnet sich in richtiger grösse. die bildnummern dienen als schaltfläche für das anzeigen der bilder link nach: beenden durch schliessen des fensters


78

dateien vom screen 70.0 .psd

titelbanner

ebene_60

banner_satelitte

titelilustration

ebene_60

zeich_satelitte

.gif

.jpg

.mov

.mp3

banner_satelitte zeich_satelitte

button1 over

ebene_62

button1_over

button1_over

button1 down

ebene_62

button1_down

button1_down

button2 over

ebene_62

button2_over

button2_over

button2 down

ebene_62

button2_down

button2_down

button3 over

ebene_62

button3_over

button3_over

button3 down

ebene_62

button3_down

button3_down

button4 over

ebene_62

button4_over

button4_over

button4 down

ebene_62

button4_down

button4_down

bindung

.swf


79

drehbuch der flash seite screen 70.0 | video

bindung

link von: über hauptnavigation was ist zu sehen: satelitte-titelbanner, im medienfenster befindet sich eine bildkombination aus schaltflächen in vertikalen streifenform, navigation, text im textfenster wird von links nach rechts eingeblendet. was passiert: überblendung titelbanner zeichnung-photography. im medienfenster werden die vier schaltflächen im ständigen wechsel von on mouseover und on mousedown effekt von rechts nach links aufgebaut. nach vollständigem aufbau bleiben sie stehen. die button reagiern auf mouseover und wechseln dabei den einzelnen bildstreifen. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 71.0 | 72.0 | 73.0 |74.0 | 80.0 text: videoproduction by braincandy sicherlich eine unserer grössten leidenschaften und somit eine von braincandys kernkompetenzen. lassen sie sich anstecken von dieser faszination des bewegten bildes. vom briefing ueber die konzeption, hin zum dreh, schnitt und der postproduction wird ihr projekt von einem eingespielten team betreut. gewinnen sie einen ersten eindruck von unserer bisherigen arbeit ....


80

dateien vom screen 71.0 - 7x.0 .psd

collage bound

ebene_67

collage_bound

text

ebene_67

backbutton video

ebene_69

playbutton

ebene_67

.gif

.jpg

.mov

.mp3

bindung

.swf


81

drehbuch der flash seite screen 71.0 - 7x.0 | bound

bindung

link von: 70.0 was ist zu sehen: bildcollage vom videoinhalt im medienfenster, playbutton um video abzuspielen, text im textfenster, backbutton zurück zur videoübersicht was passiert: im medienfenster baut sich die bildcollage rastermässig auf. am ende des bildaufbau erscheint der playbutton mit rollovereffekt. im textfenster wird das gewählte projekt erklärt. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 72.1 | 80.0


82

dateien vom screen 71.1 - 7x.1 movie bound

.psd

.gif

.jpg

.mov

.mp3

bound_320

bindung

.swf


83

drehbuch der flash seite screen 71.0 - 7x.1 | bound link von: 71.0 - 7x.0

bindung

was ist zu sehen: quicktime movie mit konsole im skalierten popup-fenster was passiert: movie wird vom server geladen. movie wird nicht automatisch abgespielt. link nach: beenden durch schliessen des fensters


84

dateien vom screen 80.0 .psd

titelbanner

ebene_70

banner_sabiface

titelillustration

ebene_70

zeich_sabiface

text

ebene_73

adore intro

ebene_71

adore_intro

.gif

.jpg

.mov

.mp3

banner_sabiface zeich_sabiface adore_intro

link over

bleeppit

link down

highbleep

bindung

.swf


85

drehbuch der flash seite screen 80.0 | 2*adore

bindung

link von: über hauptnavigation was ist zu sehen: sabiface-titelbanner, im medienfenster befindet sich eine bildkombination, navigation, text im textfenster wird von links nach rechts eingeblendet. anschliesend bauen sich drei textbutton auf, welche die einzelnen themenbereiche ansteuern. was passiert: überblendung titelbanner zeichnung-photography. medienfenster wird gefadet, wechseln positiv - negativ eingeblendet. text wird von links nach rechts dargestellt. textbutton werden mit dem text eingeblendet. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 80.0 |81.0 | 8x.0 text: 2 adore by braincandy for all the beauty in life. was uns interessiert künnte auch sie interessieren. hier werden wir regelmässig künstler, städte oder andere themen vorstellen, die uns inspirieren und die unsere arbeit positiv beeinflussen. enjoy


86

dateien vom screen 81.0 - 8x.0 .psd

.gif

.jpg

tattoo bild1

ebene_75

tattoo_01

tattoo_01

tattoo bild2

ebene_75

tattoo_02

tattoo_02

tattoo bild3

ebene_75

tattoo_03

tattoo_03

tattoo bild4

ebene_75

tattoo_04

tattoo_04

tattoo bild5

ebene_75

tattoo_05

tattoo_05

tattoo bild6

ebene_75

tattoo_06

tattoo_06

tattoo bild7

ebene_75

tattoo_07

tattoo_07

tattoo bild8

ebene_75

tattoo_08

tattoo_08

tattoo bild9

ebene_75

tattoo_09

tattoo_09

tattoo bild10

ebene_75

tattoo_10

tattoo_10

.mov

.mp3

bindung

.swf


87

drehbuch der flash seite screen 81.0 - 8x.0 | tattoo

bindung

link von: 80.0 was ist zu sehen: tattoo-slideshow, text, rechts im textfenster befindet sich der backbutton. was passiert: tattoo-slideshow spielt automatisch im medienfenster ab. text wird von links nach rechts eingeblendet. rechts im textfenster befindet sich der backbutton mit rollovereffekt. link nach: 20.0 | 30.0 | 40.0 | 50.0 | 60.0 | 70.0 | 80.0 text: tattoo-design by b*sub einst war es ritueller körperschmuck der polynesischen ureinwohner. durch die beliebtheit der südpazifischen inseln hat sich dieser kult über die letzten jahrhunderte auf die ganze welt ausgebreitet und ist heute in den verschiedensten kulturen und den unterschiedlichsten gesellschaftskreisen anzutreffen. die auswahl des richtigen motivs stellt sich häufig als grösste herausforderung bei der entscheidung zu einem tattoo heraus. lassen sie sich von marcus@braincandy.ch beraten und er wird für sie ihr individuelles art-tattoo kreieren.


88

dateien vom screen 1.0.0 .php wilkommen

.jpg

menu into_store

bindung

navigation

.gif


89

drehbuch b*store screen 1.0.0 | start link von: www.braincandy.ch | 90.0 [ s*store]

bindung

was ist zu sehen: banner, navigation, wilkommen button was passiert: es wird eine session id erstellt im hintergrund und diese wird in die tabelle besuscher eingetragen mit dem datum, uhrzeit. link nach: 2.0.0


91

drehbuch b*store screen 1.1.1 | db verbindung

bindung

diese datei wird von der funktion <?php include`menu`.php; ?> in jeder php datei geladen wo eine kommunikation mit der datenbank stattfindet. <?php //Datenbank zugriffsrechte $benutzer = „braincandy“; $kennwort = „J3xxxv“; $host = „flu-mysql-01.tiscalinet.ch“; $db = „braincandy“; // Verbindung erstellen $verbindung = mysql_connect($host, $benutzer, $kennwort); if (! $verbindung) die(„Verbindung gescheitert“); mysql_select_db($db); ?>


92

dateien vom screen 1.1.2 .gif

banner

.psd

shopnavi_skate

artikel

artikel_02

artikel over

artikel_02-over

artikel down

artikel_02-dowm

warenkorb

warenkorb_03

warenkorb over

warenkorb_03-down

warenkorb down

warenkorb_03-over

agbâ&#x20AC;&#x2DC;s

agb_05

agbâ&#x20AC;&#x2DC;s over

agb_05-over

agbâ&#x20AC;&#x2DC;s down

agb_05-down

navigation-banner

.jpg

bindung

.php

shopnavi


93

drehbuch b*store screen 1.1.2 | menu

bindung

link von: die datei 1.1.2 wird von der funktion <?php include`menu`.php; ?> geladen auf der jeweiligen seite was ist zu sehen: banner, navigation was passiert: rollover auf den navigationsbutton link nach: 2.0.0 | 3.0.0 | 9.0.0 die datei 1.1.2 wird auf folgende webseiten angewendet: 1.0.0 | 2.0.0 | 2.1.0 - 2.1.... | 3.0.0 | 4.0.0 | 5.0.0


95

drehbuch b*store screen 1.1.3 | css

bindung

body

{ bgcolor: #000000; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; }

.starttext

{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #ffffff; text-align: left; }

h1

{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #999999; background-color: #000000; text-align: center }

.text1

{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;

auf die datei text.css wird grunds채tzlich von jeder webseite zugegriffen. man dar aber auch von hand eingreifen und das css an einzelnen stellen zu 체bergehen. denn teilweise gehr es nicht mit dem php.


96

dateien vom screen 2.0.0 .php

.jpg

menu

produkt 1

flame_black1

produkt 2

hibiscus_colored1

produkt 3

surfsing_big1

produkt 4

hawaii_sticker1

produkt 5

surfsing_girl1

produkt 6

wahine1

produkt 7

hibiscus_white1

produkt 8

surfsing_boy1

bindung

navigation

.gif


97

drehbuch b*store screen 2.0.0 | artikel link von: 1.0.0 | 2.x.0 | 3.0.0 | 4.0.0 | 5.0.0

bindung

was ist zu sehen: banner, navigation, produkte des shop was passiert: die produkt-bilder sind die schaltfl채chen link nach: link nach: 3.0.0 | 9.0.0 2.1.0 - 2.x.0 die links f체hren auf die detailansicht der produkte. deshalb kann die anzahl der links unterschiedlich sein.


98

.jpg banner

in_warenkorb

db verbindung

db_verbindung

<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD=“preloadImages();“> <p>&nbsp;</p> <table width=“300“ height=“110“ border=“0“ align=“left“ bordercolor=“#000000“ bgcolor=“#000000“> <tr> <td height=“120“><img src=“Bilder/in_warenkorb.jpg“ width=“300“ height=“105“ border=“0“ /></td> </tr> </table></p> </div> <?php // Verbinden der Datenbank include („db_verbindung.php“); //Warenkorb abfragen wird für UPDATE verwendet $query = „SELECT * FROM warenkoerbe WHERE besuchernr =\“$login\“ && produktnr=\“$produktnr\““; $result=mysql_query($query); if(mysql_num_rows($result) > 0) { //aendern der Menge $update = „UPDATE warenkoerbe SET menge=\“$menge\“ WHERE

bindung

dateien vom screen 2.0.1


99

drehbuch b*store

bindung

screen 2.0.1 | eintrag_in_warenkorb besuchernr=\“$login\“ AND produktnr=\“$produktnr\““; mysql_query($update); } else {

link von: 2.1.0 - 2.x.0

$entry_date = $HTTP_SESSION_VARS[„datum“]; $entry_login = $HTTP_SESSION_VARS[„login“]; //Produkteintrag in den Warenkorb $warenkorb=“INSERT INTO warenkoerbe (datum, besuchernr, produktnr, menge) VALUES (\“$entry_date\“, \“$login\“, \“$produktnr\“, \“$menge\“)“; $resultset=mysql_query($warenkorb); } // Verbindung beenden mysql_close($verbindung); ?>

link nach: da screen 2.0.1 ein popup ist, muss man das fenster schliessen.

</BODY> </HTML>

was ist zu sehen: bestätigung, dass das produkt in dem warenkorb ist. was passiert: schreibt das produkt in die tabelle warenkorb ein.

diese datei dient in erster linie dazu, dass die produkte in die sql tabelle eingetragen werden. desshalb wird es als popup aufgerufen und ist nur minimal gross. ca 320 x 300 px


100

dateien vom screen 2.x.0 navigation

menu

db verbindung

db_verbingung

.gif

.jpg

produkt1

flame_black2

produkt2

hibiscus_colored2

produkt3

surfsing_big2

produkt4

hawaii_sticker2

produkt5

surfsing_girl2

produkt6

wahine2

produkt7

hibiscus_white2

produkt8

surfsing_boy2

zur端ck

zurueck_auf_ artikel_01

zur端ck over

zurueck_auf_ artikel_01-over

zur端ck down

zurueck_auf_ artikel_01-down

bindung

.php


101

drehbuch b*store screen 2.x.0 | detail_artikel1 link von: 2.0.0

bindung

was ist zu sehen: banner, navigation, produktnr. 1 was passiert: beim clicken auf das produkt wird es gross in einem popup angezeigt screen 2.1.x beim button in den warenkorb wird die menge in den warenkorb gelegr. symbolisch daf체r erscheint ein popup screen 2.0.1 link nach: link nach: 2.0.0 | 2.1.x | 3.0.0 | 9.0.0 die seiten sind kopierbar f체r jedes produkt. man muss nur die produktnummer id 채ndern und den value wert im submit. dieser zahl ist die nummer der id in der tabelle produkte des jeweiligen produkt.


102

dateien vom screen 2.x.1 produkt1

flame_black

produkt2

hibiscus_colored

produkt3

surfsing_big

produkt4

hawaii_sticker

produkt5

surfsing_girl

produkt6

wahine

produkt7

hibiscus_white

produkt8

surfsing_boy

bindung

.jpg


103

drehbuch b*store screen 2.x.1 | bild_vom_produkt link von: 2.1.0 - 2.x.0

bindung

was ist zu sehen: grossansicht des produkt aus dem detail was passiert: das fenster wird als popup aufgeschalten link nach: keinen link, das fenster muss wieder gelรถscht werden


104

dateien vom screen 3.0.0 db verbindung

db_verbindung

navigation

menu

.gif

text

warenkorb_ anleitung

zum login

zum_login_01

zum login over

zum_login_01-over

zum login down

zum_login_01-down

aktualisieren

warenkorb_icon

bindung

.php


105

drehbuch b*store screen 3.0.0 | warenkorb

bindung

link von: 1.0.0 | 2.0.0 | 2.x.0 | 4.0.0 | 5.0.0 was ist zu sehen: eine anleitung zum warenkorb ist unter der navigation. zeigt die produkte, die in den warenkorb gelegt wurden was passiert: man hat die mÜglichkeit um eine neue menge einzutragen oder das produkt aus dem warenkorb zu lÜschen. die änderungen werden ßber dern button aktualisieren angepasst link nach: 2.0.0 | 4.0.0 | 9.0.0


106

dateien vom screen 4.0.0 .php menu

als neukunde anmelden

als_neukunde_ anmelden_01

als neukunde anmelden over

als_neukunde_ anmelden_01-over

als neukunde anmelden down

als_neukunde_ anmelden_01-down

bindung

navigation

.gif


107

drehbuch b*store screen 4.0.0 | bestellung_login1

bindung

link von: 3.0.0 was ist zu sehen: anmeldeung eines stammkunden mit zwei textfelder und einem login button. unter dem login button ist der button als neukunde anmelden. was passiert: nachname und kundennummer werden mit dem wert stammkunde an die seite 6.0.0 gesendet link nach: 2.0.0 | 3.0.0 | 5.0.0 | 6.0.0


108

dateien vom screen 5.0.0 .php menu

bindung

navigation


109

drehbuch b*store screen 5.0.0 | bestellung_login2

bindung

link von: 4.0.0 was ist zu sehen: die anmeldung des neukunden mit textfelder und login button. der kunde wird aufgefordert seine daten anzugeben, da er ein neukunde ist. was passiert: diese daten werden an die seite 6.0.0 gesendet mit dem wer neukunde. link nach: 2.0.0 | 3.0.0 | 6.0.0


110

dateien vom screen 6.0.0 .php db_verbindung

채ndern

aendern_b_01

채ndern over

aendern_b_01-over

채ndern down

aendern_b_01-down

bindung

db verbindung

.gif


111

drehbuch b*store screen 6.0.0 | lieferadresse

bindung

link von: 4.0.0 | 5.0.0 | 6.1.0 was ist zu sehen: warenkorb auszug, rechnungsadresse, lieferadresse, checkbox für geschenkverpackung was passiert: daten vom warenkorb werden aus der datenbank gelesen. kunde wird in hidden felder in die rechnungsadresse geschrieben. im bereich der liferadresse sind textfelder vorhanden und eine checkbox, dass die bestellung in eingepackt werden soll. unter der rechnungsadresse ist ein ändern button. beim click auf diesen button gelangt man auf 6.1.0. kommt der kunde von der seite 5.0.0 her, werden unten eine stammkunden login daten aufgeführt für den nächsten login. die seite 6.0.0 soll im quellcode 3 mal vorhanden sein. denn es wird mit if und else gearbeitet. kommt man von der seite 4.0.0 wird der wert stammkunde übergeben. kommt man von der seite 5.0.0 wird der wert neukunde übergeben. oder ist es ein update von der seite 6.1.0 wird der wert update übergeben. so wird dann selektiert, in welcher quelltext bearbeitet wird und auf der seite 6.0.0 dargestellt wird. eintrag der angaben von der seite 5.0.0, neukunde und 6.1.0, änderung werden in dieser datei 6.0.0 gemacht. auch die stammkundendaten von der seite 4.0.0 werden hier überprüft. link nach: 6.1.0 | 7.0.0


112

dateien vom screen 6.1.0 .php db_verbindung

bindung

db verbindung


113

drehbuch b*store screen 6.1.0 | adresse_aendern

bindung

link von: 6.0.0 was ist zu sehen: textfelder und ein update button nachname und vorname können nicht geändert werden. die anderen angaben sind textfelder. was passiert: es werden die daten des kunden aus der datenbank gelesen und nachname, vorname in die hidden felder eingetragen. die anderen felder muss der kunde von hand ausfüllen. wenn er updare drückt wir das formular mit dem zusätzlichen wert update an die seite 6.0.0 gesendet. dort wird dann das update ausgeführt wenn alle angaben vorhanden sind. link nach: 6.0.0


114

dateien vom screen 7.0.0 .jpg bestellung

bindung

danke bild


115

drehbuch b*store screen 7.0.0 | mailto

bindung

link von: 6.0.0 was ist zu sehen: braincandy bedankt sich f체r den einkauf beim kunden. der shop-betreiber erh채lt ein mail, dass ihm kundennummer, seine adresse, die lieferadresse und den link f체r die webseite 9.0.0 was passiert: es wir ein mail im php erstellt un dies wir dann an den shopbetreiber verschickt. link nach: 9.0.0


116

dateien vom screen 8.0.0 .jpg text agb

blume_agb text agb

bindung

hibiscus

.indd


117

drehbuch b*store screen 8.0.0 | agb_s

bindung

link von: 1.0.0 | 2.0.0 | 2.x.0 | 3.0.0 | 4.0.0 | 5.0.0 was ist zu sehen: es ist eine niederschrift der gesetzlichen bestimmungen des b*store. am ende des text ist die hibiscusbl端te was passiert: fenster wird als popup aufspringen link nach: link f端r die e-mailadrsse (mailto)


118

dateien vom screen 9.0.0 .php db_verbindung

bindung

db verbindung


119

drehbuch b*store screen 9.0.0 | auftrag

bindung

link von: der query string, der im mail angefügt ist wird der einzige link auf diese seite sein. was ist zu sehen: der warenkorb, die rechnungsadresse und die lieferadresse der bestellung. das dokument ist auf weisem hintergrund. (wegen dem ausdrucken dieser daten) was passiert: die datenbank wir aufgerufen und mit einem select befehl weden die daten der bestellung aud der datenbank gelesen. link nach: kein link diese datei wird für die lieferung, für die buchhaltung benötigt. es ist immens wichtig für den shop-betreuer


121

technische angaben b*store

bindung

aufbau der b*store wird mit mysql und php in verbindung von html realisiert. die gestaltung soll eher schlicht ausfallen und in weiten teilen dem braincandy ci/cd angepasst sein. er soll auf ca. 20 produkte ausgelegt sein und authentifizierungssystem beinhalten welches stammkunden speichert und neukunden erfasst. durch die erzeugung einer session-nummer aus datum und zeit wird der user über die variable $login während seinem einkauf auf jeder seite eindeutig identifiziert. auf cookies wird verzichtet, da sie im browser häufig ausgeschaltet sind. bei der produkteauswahl wird auf das detailfile des produktes zugegriffen. dieses detail wird für jedes produkt erstellt. man kann es für jedes produkt kopieren, muss jedoch danach den link der grossansicht anpassen und die bilder wechseln, die produkte nr im select befehl ändern und den value des submit auf die gleiche nummer setzen wie in der abfrage. simple. die beschreibung und der preis der detailansicht wird aus der db geladen. drückt man den submit button wird ein pop-up fenster generiert. in diesem fenster erhält der user die bestätigung, dass das produkt im warenkorb gespeichert ist. hinter diesem pop-up steht ein sql code. dieser checkt ob sich der artikel schon im korb befindet oder nicht. falls nicht, wird der artikel mit der menge und dem $login in der db tabelle warenkorb eingetragen. befindet sich dieser artikel bereits im warenkorb, wird ein update durchgeführt. dieses update schreibt die neue menge in die tabelle für den user mit diesem $login. drückt man in der navigation auf den button warenkorb, wird die db tabelle warenkorb aufgerufen und die artikel auf der website grafisch dargestellt, welche sich im warenkorb befinden. nun hat der user die möglichkeit die menge zu ändern oder das produkt aus dem warenkorb zu löschen. um zu verhindern

das der kunde die menge null eintragen kann, wird beim aktualisieren in diesem fall die menge auf eins gesetzt. nach der auswahl der produkte, gelangt der user über den button login auf die login-seite. hier kann er seinen nachnamen und die kundennummer eintragen und auf login drücken. ist alles ok mit seinen angaben gelangt er in den bereich lieferadresse. sind die angaben falsch bekommt er eine fehlermeldung. ist der user ein neukunde, so kann er auf der login-seite auf den button neukunde drücken. auf dieser seite werden seine personalien abgefragt. er muss alle personalien angeben um weiter auf die lieferadresse zu kommen, andererseits erscheint auch hier eine fehlermeldung. auf der seite lieferadresse befindet sich eine bestellübersicht, die rechnungs/lieferadresse welche nicht identisch sein müssen. als feature kann man die bestellung auch als geschenk verpacken lassen. bei der rechnungsadresse hat man die möglichkeit die anschrift zu ändern, das wiederum auf einer neuen seite. der nach- und vorname bleiben dabei zur sicherheit des shop-betreibers fixiert. auf dem button bestellen wird ein mail aus php erzeugt und an den shop-beteiber gesendet. dieses mail beinhaltet eine webadresse. mittels dieser adresse gelangt man auf eine webseite welche die gesamte bestellung und kundendaten in einem formular zum ausdruck bereithält. dies funktioniert mittels zugriff auf den warenkorb $login und auf die kundendaten $kundennr die im query der www-adresse vom e-mail gespeichert sind. über die datei text.css soll ein einheitliches design über den ganzen shop gültigkeit behalten. es soll so oft als möglich integriert werden. designanpassungen werden somit schnellr und einfacher.


bindung


123

technische angaben b*store

bindung

db verbindung <?php //Datenbank zugriffsrechte $benutzer = „braincandy“; $kennwort = „J3xxx2v“; $host = „flu-mysql-01.tiscalinet.ch“; $db = „braincandy“; // Verbindung erstellen $verbindung = mysql_connect($host, $benutzer, $kennwort); if (! $verbindung) die(„Verbindung gescheitert“); mysql_select_db($db); ?>

die datenbankverbindung wird nur einmal erzeugt. in der datei db verbindung.php. auch hier muss man bei einem wechsel des servers die angaben nur einmal ändern. wird auch gemäss drehbuch mittels der php funktion include auf die seiten geladen.


124

technische angaben b*store # # # # # # # #

phpMyAdmin MySQL-Dump version 2.5.1 Host: localhost Erstellungszeit: 14. September 2003 um 20:52 Server Version: 3.23.56 PHP-Version: 4.2.3 Datenbank: `braincandy` --------------------------------------------------------

CREATE TABLE `besucher` ( `besuchernr` varchar(50) NOT NULL default ‚‘, `datum` varchar(25) NOT NULL default ‚‘, `kundennr` varchar(50) NOT NULL default ‚0‘, PRIMARY KEY (`besuchernr`) ) TYPE=MyISAM; # CREATE TABLE `kunden` ( `kundennr` int(7) NOT NULL auto_increment, `vorname` varchar(30) NOT NULL default ‚‘, `nachname` varchar(30) NOT NULL default ‚‘, `strasse` varchar(50) NOT NULL default ‚‘, `hausnr` varchar(6) NOT NULL default ‚‘, `plz` int(5) NOT NULL default ‚0‘, `ort` varchar(30) NOT NULL default ‚‘,

`telefon` varchar(20) NOT NULL default ‚‘, `mail` varchar(50) NOT NULL default ‚‘, PRIMARY KEY (`kundennr`), KEY `kunden_index` (`nachname`) ) TYPE=MyISAM AUTO_INCREMENT=1607 ; CREATE TABLE `produkte` ( `produktnr` int(5) NOT NULL auto_increment, `bestellnr` varchar(7) NOT NULL default ‚0‘, `produktname` varchar(40) NOT NULL default ‚‘, `beschreibung` text NOT NULL, `preis` decimal(5,2) NOT NULL default ‚0.00‘, PRIMARY KEY (`produktnr`), KEY `familie` (`produktname`) ) TYPE=MyISAM AUTO_INCREMENT=3 ; CREATE TABLE `warenkoerbe` ( `korbproduktnr` int(10) NOT NULL auto_increment, `datum` varchar(25) NOT NULL default ‚‘, `besuchernr` varchar(50) NOT NULL default ‚0‘, `produktnr` varchar(10) NOT NULL default ‚0‘, `menge` int(5) NOT NULL default ‚0‘, PRIMARY KEY (`korbproduktnr`) ) TYPE=MyISAM AUTO_INCREMENT=7 ;

bindung

db aufbau


125

technische angaben b*store

bindung

my sql datenbank die datenbank wird durch adi grüninger erstellt . die benutzerrechte werden durch adi grüninger und marcel angehrn verwaltet. so ist sicherheit der kundendaten im b*store gewährleistet. im kapitel db aufbau wird genauer erläutert, wie es im detail in der datenbank aussieht. die datenbank heisst braincandy und hat vier tabellen. besucher, kunden, produkte, warenkörbe. auf der startseite wird $login erzeugt das als besuchernr in die tabelle besucher geschrieben wird, zusammen mit dem datum und der zeit. das feld kundennr wird ignoriert. legt der kunde ein produkt in den warenkorb wird dieser mit der produktnr, menge, korbproduktnr und der besuchernr=$login in der tabelle warenkörbe eingetragen. mit der besuchernr kann man immer wieder auf die produkte zugreifen die in der tabelle warenkörbe ist. sie ist zusammen mit der kundennr das herz des b_shop. diese angaben weden im query sobald erfass, immer mitgeliefert. in der tabelle kunden werden die daten vorname, nachname, strasse, hausnr, plz, ort, telefon, mail erfasst. die kundennr wird automatisch erzeugt. diese dient dem kunden später für den stammkunden-login. für den shop-betreiber dienen diese angaben als rechnungsadresse und lieferadresse. die e-mail dient zugleich als bestätigungsadresse, korespondenz und für gezielte werbung. die vierte tabelle nennt sich produkte. hier weden die einzelnen produkte erfasst mit der produktnr, bestellnr(für den shop-betreiber), produktname, beschreibung und dem preis. mit diesen vier tabellen können wir den shop sehr übersichtlich gestalten und auch im bereich der administration hält sich der aufwand in grenzen.


bindung


127

bindung

hard & software produktion

user

verwendete hardware

minimalanforderung

apple power pc g4 867mhz apple power pc g4 1ghz dual nikon coolpix 4500 scanner agfa f40 webserver www.braincandy.ch (hosted by tiscali)

hardware: mac power pc 200 mhz pc pentium 2 250 mhz monitorauflösung von 800 x 600 pixel optimiert für 1024 x 768 pixel betriebssystem: mac os 8.6 oder höher windows 95 oder höher

verwendete Programme macromedia flash mx macromedia dreamweaver mx adobe photoshop 7.01 adobe image ready 7.0 adobe indesign 2.02 adobe illustrator 10.03 adobe golive 6.01 final cut pro 3.0 quicktime pro 6.3 browser safari 1.0 browser internet explorer:mac 5.2.2

software: safari 1.0 internet explorer:mac 5.0 netscape:mac 7.0 internet explorer 5.5 macromedia flash 6 plugin quicktime 5 internetverbindung: optimal ist eine adsl oder cabelcom internetverbindung. bei einem 56k modem kann es zu einer längeren ladezeit führen beim abspielen der video`s im popup. die seite an sich läuft trotzdem sehr zügig ab.


129

bindung

probleme und hilfsmittel probleme im php

hilfsmittel im php

beim umwandeln der html seiten in php traten die ersten probleme bei der session erzeugung auf. wir wussten einfach nicht wie das geht, dass diese id auf die nächste seite kommt. wir wollten zuerst ein cookie erzeugen. dann kamm die überlegung, wenn ein user die cookies abgeschalten hat, oder die vielen mac-user. denn auf dem mac kann es zu schwierigkeiten mit dem safari browser und cookis führen. jetzt war die frage, wie man es anders lösen kann. wir kontaktierten christian kürsteiner. er hat erfahrungen in asp. christian gab uns den rat, wir sollen die erstellte session id auf dem querystring übergeben. das könne man durchaus machen, für ein shop in unserer grösse. danach lief das projekt b*store sehr zügig ab. die grössten probleme waren bei hochkomma, anführungszeichen. alles was mit echo zu tun hatte. aber gegen den schluss wurden wir auch herscher über diese probleme. am schluss gab es noch die letzte hürde zu meistern. ein mail mit php zu versenden. wir wollten ein mail mit text, ohne html. das ganze war dann einfacher als man dachte. wir wussten zuerst nur nicht, dass man mehere stings aneinander ketten darf. als dieses problem gelösst wurde, hatten wir das problem, wie wir die produkte aufliesten wollen. ohne lange zu überlegen kammen wir zur lösung, dass wir am ende des mails einen web link generieren. dieser link startet uns die webseite auftrag.php und holt die bestelldaten von der kundenid und der session id $login. somit wurde die shop lösung fertig gestellt. das ganze lief zügig ab, da wir uns lange zeit gedanken gemacht hatten und uns in die materie php reingelesen hatten.

bücher: php ge-packt | isbn 3-8266-0685-x php webseiten dynamisch programmieren | isbn 3-499-61233-x praxisbuch xhtml | isbn 3-8273-1893-9 internet: www.google.ch www.php.de www.phpforum.de www.php.net zend.com schulunterlagen: die unterlagen aus dem fach php von alexander palmer


bindung


131

bindung

probleme und hilfsmittel probleme in der konzeptphase

probleme flashentwicklung / javascript

durch die komplexität die der netzwerkgedanke b*sub mit sich brachte, haben sich die festlegung der struktur des inhalts und der menupunkte schwieriger gestaltet als erwartet. dieser teil der konzeption hat somit mehr zeit in anspruch genommen und unseren zeitplan um ca. 14 tage verschoben.

die flashentwicklung der website verlief zum grössten teil ohne grössere komplikationen, was aufgrund mangelender routine völlig unterschätzt wurde, war der zeitfaktor. der zeitaufwand wurde hauptsächlich durch die integration der grossen mengen an bilddaten aus photoshop und durch das streben nach optimaler komprimierung erhöht. die entwicklungszeit in flash hat sich dadurch fast verdoppelt.

ein weiterer punkt der viele diskussionen mit braincandy und b*sub notwendig machte und somit zeit gekostet hat, war die diskussion über die personifizierung der einzelnen mitglieder der netzwerkbereiche. nach abklärung aller vor und nachteile wurde die einigung gefunden den webauftritt anonym zu gestalten und somit verschiedenen negativfaktoren aus dem weg zu gehen. mitunter der schwierigste punkt war die integration und formulierung des braincandy-stils. da dieses netzwerk speziell aus gleichgesinnten mitgliedern zusammengestetllt wurde, war es intern einfach den stil zu definieren und stiess auch sofort auf begeisterung und allgemeine anerkennung. schwierig war es nur den stil aus einer mischung von surfthematik, sehnsucht nach fernen ländern und kulturen und fetisherotik gegen aussen darzustellen und die verbindung sichtbar zu machen ohne willkürlich zu wirken, was es auf keinen fall ist. wir hoffen dieser drahtseilakt ist uns gelungen.

komplikationen entstanden knapp vor der integration ins internet im zusammenhang mit javascript. um bei den popup-fenstern symbolleiste, adressleiste etc. auszublenden und die fenstergrösse anzupassen suchten wir nach einer idealen lösung die wir auch schon ziemlich bald implentiert hatten und die vermeindlich auch zu funktionieren schien. das grosse problem stellte sich jedoch schon bald heraus, auf dem windowsbetriebsystem gab es diverse komplikationen mit dem javascript zum schliessen der fenster mit den headeranweisungen. auf windowssystemen wurde der user gefragt ob er das wirklich wolle !? mit hilfe von patrik füglistaller konnten wir dann ein javascript aus dem flash heraus aufrufen um diese heikle fensterschliessfunktion zu umgehen.


133

kosten

bindung

flash seite

b*store

konzept grundscreen banner

36h 5h 12h

medieninhalte erstellen: kontakt konzept design photography video 2*adore

1h 2h 11h 13h 6h 5h

flashprogrammierung sound javascript einbinden testphase und 채nderungen

32h 4h 5h 4h

b*store kosten konzept erstellen der seiten im html html in php umwandeln und sql einbinden sql db erstellen erstellen von bildinhalten, button und der navigation produkte in db erfassen javascript einbinden testphase und 채nderungen total preis

total preis in franken

136h x 120 fr.

sFR. 16320.-

76 x 120 fr.

18h 6h 23h 4h 8h 3h 3h 11h sFR. 9120.-


135

rechteslage

bindung

rechte abtreten da dieses projekt mit eigenen softwarelizenzen und ohne infrastruktur der schule erstellt wurde entstehen f端r die zbw st. gallen keinerlei probleme beim abtreten der rechte an braincandy. der webauftritt von braincandy wird offiziell und komerziell genutzt und gilt als referenzprojekt der firma. braincandy wird die projektdaten sowie die dokumentation f端r die vorgeschriebenen 10 jahre aufbewahren und steht somit in beweislast falls notwendig. die zbw ist berechtigt ein konzeptbuch, sowie die daten zu demozwecken zu behalten. das weitergeben an dritte ist jedoch untersagt. hiermit bitten wir die zbw st. gallen die rechte der diplomarbeit an braincandy - marcel angehrn - magnihalden 22 - ch-9000 st. gallen und adrien gr端ninger abzutreten.

Braincandy  

Diplomarbeit

Read more
Read more
Similar to
Popular now
Just for you