docWEISSWO PinPoint Schnelleinbettung
download 
Plainte Transcription
WEISSWO PinPoint Schnelleinbettung
WEISSWO PinPoint
Schnelleinbettung
Für Professionelle Anwender
Derzeit nur in Deutsch erhältlich
For Professional Use Only
Currently only available in German
Schritte der Einbettung
Die folgenden Schritte sind zur Einbettung notwendig und werden in den nächsten Sektionen
ausführlich beschrieben (Punkt 1 und 3 sind im Dokument: WEISSWO Websiteeinbettung enthalten):
1.
2.
3.
4.
Kurzversion von [Erstellung eines Seitendesigns]
WEISSWO PinPoint Account
[Auswahl der Parameter zur Gestaltung der Karte]
Einfügen des IFRAMES in Ihr Design
Seitendesign
Es gibt zwei grundsätzliche Möglichkeiten der Einbettung:
1. Einbettung mit variabler Größe (Illustration 1)
2. Einbettung mit fixer Größe
Illustration 1: Variable Größe mit horizontalem Menü
PinPoint Account / Iframe
Sie sollten die Webadresse zu Ihrer Karte per Email bekommen haben. Das PinPoint Account wird als
IFRAME SRC='...' in den folgenden Beispielen verwendet. Setzen Sie Ihre eigene Webadresse an
den entsprechenden Stellen ein. Es sieht ungefähr so aus: http://pinpoint.weisswo.biz/users/2
2
WEISSWO Schnelleinbettung
Jänner 2010
Einbettung mit variabler Größe
Man baut ein Java Script Programm in die Einbettungsseite ein das die Karte dynamisch dem
maximalen Bildschirminhalt des Websitebenutzers anpasst. Dazu muss das Design der
Einbettungsseite nach drei Seiten offen sein. Andere Möglichkeiten werden im Dokument WEISSWO
PinPoint Websiteeinbettung beschrieben.
Im folgenden Beispiel ist die Höhe des Menüs 184px. Wenn man Ränder addiert kommt man auf ca.
198 Pixel, die von der Seitengröße abgezogen werden müssen. Diese wird 3 mal (onload, onresize
und im Code) mit WW_SETHEIGHT(198); gesetzt. Fügen sie anstatt des IFRAME SRC Demolinks
die URL auf Ihr Account ein.
<body>
<!-- BEISPIEL: div style="background: url(BANNER.jpg); height:184px;" -->
<div><iframe style="width: 100%; height: 600px;" id="iframe"
src="http://pinpoint.weisswo.biz/users/2/pinpoint.php?group=s01"
frameborder="0" scrolling="no">
Iframe nicht moeglich.
</iframe></div>
<script type="text/javascript">
var w = new WeissWoFullScreen('iframe', 0, 198);
</script>
</body>
Einbettung mit fixer Größe
Bei der Einbettung in fixer Größe verwendet die Einbettungsseite ein Rechteck mit vorgegebener
Größe zur Darstellung der Karte. Das ist auch die Einfachste Art der Einbettung. Das hat folgende
Konsequenzen:
●
●
Die Scroll-Zoom Funktion der Karte interagiert mit der vertikalen Scroll-Leiste Ihrer Seite
(kann per Option abgeschaltet werden).
Besucher Ihrer Website mit großen Bildschirmen können die Karte nicht maximal vergrößern
und verlieren so an Übersichtlichkeit.
<DIV><IFRAME ID="iframe" SCROLLING="no" FRAMEBORDER="0"
STYLE="width: 800; height: 600;"
SRC="http://pinpoint.weisswo.biz/users/2/pinpoint.php?group=s01>
Your browser does not support iframes.
</IFRAME></DIV>
<script type="text/javascript">
var w = new WeissWoFullScreen('iframe');
w.setButtonTexts(' Vollbild','Normalbild');
w.activateFullScreen();
</script>
3
WEISSWO Schnelleinbettung
Jänner 2010
WEISSWO FullScreen
WEISSWO FullScreen ist ein JavaScript Helferprogramm, welches in die Kartenseite eingebaut
werden kann und auf zwei verschiedene Arten hilft:
1. WEISSWO FullScreen ermöglicht für Seitendesigns mit fixer Größe eine Vollbildansicht, die
die Karte auf die gesamte Größe des Browserfensters des Benutzers ausdehnt ohne den
Iframe neu zu laden.
2. Das Programm macht die automatische Größenanpassung des Iframes für Seitendesigns
mit variabler Größe.
Achtung: WeissWoFullScreen überschreibt body onload und body onresize. Es kann nur zusammen
mit einer IFRAME Einbettung verwendet werden.
Laden des JavaScripts
Das Helferprogramm kann am Ende vom 'body' geladen werden und wird gleich anschließend
aktiviert. Es wird immer eine spezielle Version von WeissWoFullScreen geladen. Hier ist es Version
684.
<script src="http://pinpoint.weisswo.biz/lib/js/WeissWoFullScreen.684.js"
type="text/javascript"> </script>
Als fixen Parameter übergeben Sie bitte die ID des Iframes. Für Seitendesigns mit variabler Größe
können Sie aber auch optional die Einzüge links + rechts (offsetX) und oben + unten (offsetY)
angeben. Werden keine Einzüge übergeben, bleibt der Iframe immer in der beim Laden definierten
Größe. Wenn Sie nicht nur die variable Größenanpassung wollen, sondern auch einen
FullScreenModus für die gesamte Browserfenstergröße, müssen Sie activateFullScreen()
aufrufen.
Anwendung für Seitendesigns mit fixer Größe
var w = new WeissWoFullScreen('IFRAMEID');
w.setButtonTexts(' Vollbild','Normalbild');
w.activateFullScreen();
Anwendung für Seitendesigns mit variabler Größe ohne Vollbildmodus
new WeissWoFullScreen('IFRAMEID', offsetX, offsetY);
Anwendung für Seitendesigns mit variabler Größe mit Vollbildmodus
var w = new WeissWoFullScreen('IFRAMEID', offsetX, offsetY);
w.activateFullScreen();
Laden der CSS Stile für die Buttons
Die Vollbild und Normalbild-Buttons werden automatisch an das Element das den Iframe enthält
angehängt und absolut in dessen Inhalt per CSS positioniert (siehe Zeile 1 und 2 des CSS Beispiels).
Das Kontainerelement ist ein einfaches DIV.
<style type='text/css'>
#weissWoFullScreenButton { position:absolute; top:0px; left:75px; }
#weissWoCloseButton
{ position:absolute; top:0px; left:75px; }
#weissWoFullScreenButton a, #weissWoCloseButton a
{ display:block;
width:135px; height:35px;
font-family:"Verdana"; font-size:14px; font-style:normal;
text-decoration:none;
4
WEISSWO Schnelleinbettung
Jänner 2010
color:black;
}
#weissWoFullScreenButton a:hover, #weissWoCloseButton a:hover { color:green; }
#weissWoFullScreenButton img, #weissWoCloseButton img
{ border:none; }
#weissWoFullScreenButton div { position:absolute; left:40px; top:5px; }
#weissWoCloseButton div
{ position:absolute; left:40px; top:5px; }
</style>
Eigene Buttons für FullScreen Modus
Wenn Sie nur den FullScreenModus mit der obigen Zeile aktivieren, werden die alternativen FullScreenModus
Buttons + Texte von weisswo.com verwendet. Möchten Sie aber eigene Buttons verwenden, gehen Sie wie folgt
vor:
w.setFullScreenButtonImage('ButtonUrl', buttonWidth, bottonHeight);
w.setCloseButtonImage('ButtonUrl', buttonWidth, bottonHeight);
Hinweis:
Möchten Sie nur den Text in den alternativen Buttons ändern, übergeben Sie nur den ersten
Parameter mit dem gewünschten Text.
Vollständiges Beispiel mit Vollbildmodus und dynamischer Größenanpassung
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>700_auf_einen_Streich</title>
</head>
<body style="padding:0px; margin:0px;">
<div style="height:150px; background:url(../Streich700/Live-Banner.jpg)"></div>
<DIV>
<IFRAME FRAMEBORDER="0" Scrolling="no" ID="iframe"
SRC="http://pinpoint.weisswo.biz/users/0/8/"
WIDTH="1000"> Iframe nicht moeglich </IFRAME>
</DIV>
<script src="http://pinpoint.weisswo.biz/lib/js/WeissWoFullScreen.684.js"
type="text/javascript"> </script>
<style type='text/css'>
#weissWoFullScreenButton { position:absolute; top:0px; left:75px; }
#weissWoCloseButton
{ position:absolute; top:0px; left:75px; }
#weissWoFullScreenButton a, #weissWoCloseButton a
{ display:block;
width:135px; height:35px;
font-family:"Verdana"; font-size:14px; font-style:normal;
text-decoration:none;
color:black;
}
#weissWoFullScreenButton a:hover, #weissWoCloseButton a:hover { color:green; }
#weissWoFullScreenButton img, #weissWoCloseButton img
{ border:none; }
#weissWoFullScreenButton div { position:absolute; left:40px; top:5px; }
#weissWoCloseButton div
{ position:absolute; left:40px; top:5px; }
</style>
<script type="text/javascript">
var w = new WeissWoFullScreen('iframe',0,151); // HÖHE MENÜ = 150px
w.activateFullScreen();
5
WEISSWO Schnelleinbettung
Jänner 2010
</script>
</body>
</html>
6
WEISSWO Schnelleinbettung
Jänner 2010
ANHANG A
OPTIONEN
Firmen- oder kategoriespezifische Icons für die Karte
Manche Kunden wünschen eigene Icons zur Darstellung auf der Karte die nicht in den
Standardbibliotheken enthalten sind. Jedem Ort kann genau ein Icon zugewiesen werden (Gruppe).
Eine Nummerierung ist bei speziellen Icons nicht möglich. Jeder Ort kann beim Anlegen eine 3
Buchstabenkennung (Kategorie, Gruppe) erhalten. Diese 3 Buchstabenkennung wird für das Icon in
der darzustellenden Karte verwendet (siehe aber auch Parameter 'group' in Scriptparameter).
Orte können aus verschiedenen Gründen in Gruppen eingeteilt werden:
1. Darstellung unterschiedlicher Icons in der Karte und/oder
2. Unterteilung der Datenbank zum Abrufen mehrerer unterschiedlicher Karten
WEISSWO kann solche Icons für ein PinPoint Account einrichten.
Kartenlegende, Gruppen- und Feature-Icons
Nach Erstellung von Icons auf Kundenwunsch kann eine Kartenlegende (siehe Illustration 2:
Legenden und Icons) angelegt werden. Dazu erstellt WEISSWO einen Konfigurationsfile der jedem
Icon eine Legendentext zuordnet. Der Legendentext kann in beliebig vielen Sprachen angegeben
werden und wird automatisch in der richtigen Sprache angezeigt. Es besteht die Möglichkeit mehr als
eine Legende anzulegen und verschiedene Legenden in verschiedenen eingebetteten Karten zu
benutzen.
Illustration 2: Legenden und Icons
7
WEISSWO Schnelleinbettung
Jänner 2010
ANHANG B
NUMMERIERTE ICON SETS
Farben stehen in Dreierkombinationen von 0 4 8 B F in HTML RGB Notation zur Verfügung. Wenig
kontrastreiche Kombinationen (dunkle Schrift, dunkler Hintergrund, helle Schrift heller Hintergrund)
fehlen. Beispiel: FF0 = gelb, F00 = rot, 0F0 = grün, 00F = blau, FFF = weiß.
Illustration 3: Standard Pin Icon Set 'b' oder 'b-'
Illustration 4: Standard Pin Icon Set 'w' oder 'w-'
Illustration 5: Sternförmiges Icon Set 'sb' oder 'sb-' (32x32)
Illustration 6: Sternförmiges Icon Set 'sw' oder 'sw-' (32x32)
Illustration 7: Sternförmiges Icon Set 'sb2' oder 'sb2-' (28x28)
Illustration 8: Sternförmiges Icon Set 'sw2' oder 'sw2-' (28x28)
http://pinpoint.weisswo.biz/mk/w/
http://pinpoint.weisswo.biz/mk/b/
http://pinpoint.weisswo.biz/mk/sw/
http://pinpoint.weisswo.biz/mk/sb/
http://pinpoint.weisswo.biz/mk/sw2/
http://pinpoint.weisswo.biz/mk/sb2/
8
WEISSWO Schnelleinbettung
Jänner 2010
ANHANG C
SONSTIGE ICON SETS
Illustration 9: Sternförmiges Icon Set 'gold-' (Keine Nummerierung!)
Illustration 10: Sternförmiges Icon Set 'gold2-' (Keine Nummerierung!)
Illustration 11: Rundes Icon Set 'ci-' (Keine Nummerierung!)
http://pinpoint.weisswo.biz/mk/gold/
http://pinpoint.weisswo.biz/mk/gold2/
http://pinpoint.weisswo.biz/mk/ci/
9
WEISSWO Schnelleinbettung
Jänner 2010
