Tech-Details

Inhaltsverzeichnis

Ein Cookie (englisch für Plätzchen) ist ein kurzer Eintrag in einer meist kleinen Datenbank bzw. in einem speziellen Dateiverzeichnis auf einem Computer und dient dem Austausch von Informationen zwischen Computerprogrammen oder der zeitlich beschränkten Archivierung von Informationen. Ein Cookie besteht aus mindestens zwei Bestandteilen, seinem Namen und dem Inhalt oder Wert des Cookie, zusätzlich können Angaben über den zweckmäßigen Gebrauch vorhanden sein. Die Datenbank kann oft vom Benutzer des Computers ohne besondere Hilfsmittel nicht eingesehen oder verändert werden.

hooolp hinterlegt ein solches Cookie, um die Nutzer bei erneuten Einloggen wiedererkennen zu können und ihm die erneute Eingabe folgender Daten zu ersparen :
* seinen Wohnort für die Umkreissuche
* die beim letzten Besuch ausgewählten Genre

Inhaltsverzeichnis

hooolp-Genre

Unter Genre in der Musik versteht man eine Klassifikation, mit der verschiedene musikalische Formen nach dem räumlichen und zeitlichen Bezug des künstlerischen Inhalts eingeteilt werden.

Der räumliche Bezug begründet die national unterschiedlich ausgeprägten Genres. Zum Beispiel existiert Schlager im deutschsprachigen Raum, Flamenco in Spanien, Fado in Portugal usw.

Für die Darstellung bei hooolp bedeutet dies, dass bei einem Konzert einer Band, die einem Genre zugeordnet ist, das in einem Land nicht existiert (z.B. eine Merengue-Band gastiert in Ungarn), diese automatisch in die Rubrik „Andere“ fällt.

In Deutschland sind folgende Genres im Frontend auswählbar. Die Zusammenfassung zu Genre-Gruppen ergab sich dabei aus der Notwendigkeit, möglichst viele Genres anwählbar zu machen, ohne zu viel Platz dafür zu benötigen. Es gibt Buttons für:

—-

* ALL GENRES – damit werden alle Genre-Buttons eingeschaltet.
* Rock
* Festival
* Metal
* Alternative
* Reggae/Ska/Punk
* Pop
* Hip-Hop
* Clubbing
* Jazz
* Blues/BlackMusic
* World/Latin/Tango
* Country
* Song
* Klassik/Musical
* Volksmusik
* Schlager/Comedy
* House
* Electro
* Electronica
* Andere – hier werden alle zugeordnet, die weiter oben nicht erfasst sind

zum Inhaltsverzeichnis
hooolp-Javascript-Widget

Das hooolp-Javascript-Widget ermöglicht es, Veranstaltungstermine auf einer Webseite anzuzeigen. Es greift auf die hooolp REST-API zurück, sendet die notwendigen Anfragen an den hooolp-Server, verarbeitet die Veranstaltungsdaten und gibt diese als HTML aus.

Sie müssen dazu lediglich 3 Zeilen HTML-Code in Ihre Webseite einfügen (eine Zeile für den Widget-Aufruf, eine für das Aussehen und eine für den Ort des Widget). Einzige Vorraussetzungen sind ein hooolp-API-Key, mit dem Sie sich bei hooolp authentifizieren und eine HTML-Seite, die über das Internet erreichbar ist.

Um Google-Maps-Karten zu Veranstaltungsorten anzuzeigen benötigen Sie außerdem noch einen Key für die Google-Maps-API (wird kein Google-Key angegeben, wird einfach keine Karte angezeigt). Diesen Key erhalten Sie unter: http://code.google.com/intl/de-DE/apis/maps/signup.html

Einbinden des Widgets

Auf einen Blick
Als Band :
<pre>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“de“ lang=“de“ dir=“ltr“>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=UTF-8″ />
<script type=“text/javascript“ src=“http://api2.hooolp.com/getwidget.php?key=[HOOOLPAPIKEY]&bands=0&gmaps=[GOOGLEMAPSKEY]“></script>
<link rel=“stylesheet“ type=“text/css“ href=“http://api2.hooolp.com/themes/default“ />
</head>
<body>
<div id=“hooolp“></div>
</body>
</html>
</pre>

Als Region (mit Kalender, Genreauswahl-Buttons und 50km-Umkreissuche):
<pre>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“de“ lang=“de“ dir=“ltr“>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=UTF-8″ />
<script type=“text/javascript“ src=“http://api2.hooolp.com/getwidget.php?key=[HOOOLPAPIKEY]&geo=berlin&range=50&datepicker=1&genrebuttons=1&gmaps=[GOOGLEMAPSKEY]“></script>
<link rel=“stylesheet“ type=“text/css“ href=“http://api2.hooolp.com/themes/default“ />
</head>
<body>
<div id=“hooolp“></div>
</body>
</html>
</pre>

eigene Styles als Erweiterung eines Themes einbinden
<pre>
<link rel=“stylesheet“ type=“text/css“ href=“http://api2.hooolp.com/themes/default“ />
<link rel=“stylesheet“ type=“text/css“ href=“http://www.meineDomain.de/meineStyles.css“ />
</pre>

Widget-Aufruf
Diese Zeile lädt den Javascript-Code und bindet das Widget in die Webseite ein:
<pre>
<script type=“text/javascript“ src=“http://api2.hooolp.com/getwidget.php?[AUFRUFPARAMETER]“></script>
</pre>

Mit Hilfe der Aufrufparameter steuern Sie den Umfang und die Funktionen des Widgets. Eine weitere Möglichkeit das Verhalten des Widgets zu beeinflussen, ist das Setzen von erweiterten Widget-Optionen. So können Sie auch Einfluss auf das Verhalten des Kalenders nehmen.

Aussehen
Diese Zeile lädt CSS-Code und definiert das Erscheinungsbild des Widgets:
<pre>
<link rel=“stylesheet“ type=“text/css“ href=“http://api2.hooolp.com/themes/default“ />
</pre>

Anstelle von default können Sie auch den Namen eines anderen verfügbaren Themas für das Widget setzen.
Es werden dann die Styles des gewählten Themas geladen. Einige Themenbeispiele finden Sie hier: http://wiese.hooolp.info

Sie können auch ein eigenes Thema erstellen.

Das Theme könnte folgende Struktur haben :

<pre>
[themeName]
→ [images]
→ bild.jpg
→ bild2.bmp
→ bild3.png
→ bild4.gif
→ styles.css
→ nochStyles.css
→ mehrStyles.css
</pre>

Grundsätzlich werden nur CSS-Dateien eingebunden, die sich im Root-Verzeichnis des Themes befinden.
Sollten Sie also weitere CSS-Dateien in unterordnern bereitstellen, müssen Sie diese in einer CSS-Datei im Root-Verzeichnis des Themes einbinden. Das geht mit : @import “meinOrdner/meineDatei.css“;

Sie können auch ein eigenes CSS-File definieren und einbinden oder einen Style-Container einbinden und an diesen Stellen nur einzelne Style-Eigenschaften des Widgets ändern.

Einen Überblick über den gesamten erzeugten HTML-Code des Widgets inklusive aller CSS-Klassen- und id’s finden Sie im Abschnitt HTML-Struktur und CSS-Klassen.

Ort
Diese Zeile definiert den Container, in dem das Widget dargestellt wird:
<pre>
<div id=“hooolp“></div>
</pre>

Der hooolp-Container muss innerhalb des HTML-Body definiert werden, also zwischen
<body> und </body>.
Wird dieser Container nicht definiert, funktioniert das Widget nicht und es kommt zu einem Fehler!

Aufrufparameter

Die Parameter werden insgesamt durch ein ‚?‘ vom Aufruf und durch ‚&‘ voneinander getrennt.

Beispiel:
<pre>
http://api2.hooolp.com/getWidget.php?key=IHRAPIKEY&gmaps=IHRGOOGLEKEY
</pre>

Groß- und Kleinschreibung der Parameter ist unbedingt zu beachten!

<tr valign=“top“>
<th width=“150px“ align=“left“>Parameter</th>
<th width=“200px“ align=“left“>Beschreibung</th>
<th width=“200px“ align=“left“>Beispiel</th>
</tr>

<tr valign=“top“>
<td>bands</td>
<td>Kommagetrennte Aufzählung der ID’s der Bands, die in der Bandauswahlbox erscheinen sollen. <br/>Wird bands=0 angegeben, werden die Bands angezeigt, die Ihnen im hooolp-Backend zugeordnet wurden. <br/>Wird der Parameter nicht angegeben, wird keine Bandauswahlbox angezeigt und Events werden nicht bandbezogen abgerufen.</td>
<td>bands=4,105 <br/>bands=0</td>
</tr>

<tr valign=“top“>
<td>datepicker</td>
<td>Diese Option aktiviert den Kalender um ein Datum zur Eventanzeige zu erzeugen.
Der Datepicker kann in den advancedWidgetOptions gesondert konfiguriert werden.</td>
<td>datepicker=1</td>
</tr>

<tr valign=“top“>
<td>days</td>
<td>Die Option days gibt an, für wieviele Tage nach dem Datum, dass im Kalender eingestellt oder in den advancedWidgetOptions angegeben wurde ebenfalls Events abgerufen werden sollen. <br/>(Datum 01.06.2010 und days=6 holt Events vom 01.06.2010 bis einschließlich 07.06.2010)</td>
<td>days=6 <br/>standard → days=0</td>
</tr>

<tr valign=“top“>
<td>genreFilter</td>
<td>Kommagetrennte Genre-IDs bzw. Genre-Namen. Stellt den grundsätzlichen Genre-Filter für die Eventliste ein. Es werden unabhängig von den Genrebuttons nur noch Events mit den angegebenen Genres geladen. Bei Genrenamen ist unbedingt die genaue Schreibweise inkl. Groß- und Kleinschreibung der Genres zu beachten (siehe Genre-Buttonbeschriftung bei hooolp)</td>
<td>genreFilter=56,57<br/>genreFilter=Klassik,Musical<br/>genreFilter=56,Musical<br/><br/>
[[http://puwiki.hooolp.info/index.php/Hooolp-Javascript-Widget#Genre-IDs alle Genre-IDs]]</td>
</tr>

<tr valign=“top“>
<td>genrebuttons</td>
<td>Aktiviert den Genrefilter für die Eventliste und zeigt die Genre-Auswahl im Widget an.</td>
<td>genrebuttons=1</td>
</tr>

<tr valign=“top“>
<td>geo</td>
<td>Diese Option bestimmt den Mittelpunkt einer Umkreissuche um Events abzurufen. Sie können hier kommagtrennt und diverse Adressinformationen wie Strasse, Stadt und Land eingeben.</td>
<td>geo=berlin</td>
</tr>

<tr valign=“top“>
<td>gmaps</td>
<td>Der GoogleMaps-Key ist wichtig, damit Google-Static-Maps für die Veranstaltungsorte in den Event-Details angezeigt werden können. <br/>Geben Sie keinen Google-Maps-Key an, werden einfach keine Karten angezeigt.</td>
<td>gmaps=1234567890abcdef</td>
</tr>

<tr valign=“top“>
<td>key</td>
<td>Dieser Key ist entscheidend und muss zwingen im Aufruf enthalten sein. Über diesen Key ordnet hooolp Ihnen Bands zu und registriert Ihre API-Zugriffe. <br/>Geben Sie keinen oder einen ungültigen Key an, erhalten Sie eine Fehlermeldung.</td>
<td>key=1234567890abcdef</td>
</tr>

<tr valign=“top“>
<td>range</td>
<td>Die range ist der Radius in Kilometern des Suchumkreises für die Umkreissuche des Parameters geo.</td>
<td>range=100 standard → 100km</td>
</tr>

</table>

erweiterte Optionen

Um erweiterte Optionen zu setzen, müssen Sie ein Javascript-Objekt mit dem Namen advancedWidgetOptions definieren. Die erweiterten Optionen werden dem Objekt als Eigenschaften zugewiesen.

Beispiel :

<pre>
<script type=“text/javascript“>
var advancedWidgetOptions{
bandPreSelection : “4“,
initDate : “24-06-2010“
};
</script>
</pre>

Auf diesem Wege können Sie auch alle Optionen aus den Aufrufparametern außer Bands, Key, Datepicker und Genrebuttons einstellen.

Parameter	Beschreibung	Beispiel
bandPreSelection	ID der Band, die beim Start des Widgets ausgewählt sein soll	bandPreSelection : “3“
initDate	Datum (dd-mm-yyyy), das beim Start des Widgets ausgewählt sein soll.	initDate : “10-06-2010“
ownInitFunction	Funktion, die zur Initialisierung des Widgets anstelle der Standardfunktion aufgerufen werden soll	ownInitFunction : “myFunction“ oder ownInitFunction : function(){…}
initCallback	Funktion, die im Anschluss an die Widgetinitialisierung aufgerufen werden soll	initCallback : “myFunction“ oder initCallback : function(){…} standard → getEvents();
onInitStart	Wird ausgeführt, wenn das Widget initialisiert wird	onInitStart : “myFunction“ oder onInitStart : function(){…}
onInitEnd	Wird ausgeführt, nachdem das Widget initialisiert wurde	onInitEnd : “myFunction“ oder onInitEnd : function(){…}
onSelectDate	Wird ausgeführt, wenn ein Datum im Datepicker gewählt wurde	onSelectDate : “myFunction“ oder onSelectDate : function(){…}
onSelectDateCallback	Funktion, die anstelle der Standardfunktion nach dem Auswählen eines Datums ausgeführt werden soll	onSelectDateCallback : “myFunction“ oder onSelectDateCallback : function(){…} standard → getEvents();
onSelectBand	Wird ausgeführt, wenn eine Band ausgewählt wurde. BandId enthält die Id der ausgewählten Band.	onSelectBand : “myFunction“ oder onSelectBand : function(bandid){…} standard → getBandDetails
onSelectBandCallback	Funktion, die anstelle der Standardfunktion nach dem Auswählen einer Band ausgefürht werden soll	onSelectBandCallback : “myFunction“ oder onSelectBandCallback : function(){…} standard → getEvents();
hooolpPreBandSelection	HTML-Code, der in das hooolpPreBandSelectionHtml-Div eingefügt wird	hooolpPreBandSelectionHTML : ‚ Bitte Band wählen… ‚
hooolpPostBandSelection	HTML-Code, der in das hooolpPostBandSelectionHtml-Div eingefügt wird	hooolpPostBandSelectionHTML : ‚ … ‚
hooolpPreDatepicker	HTML-Code, der in das hooolpPreDatepickerHtml-Div eingefügt wird
hooolpPostDatepicker	HTML-Code, der in das hooolpPostDatepickerHtml-Div eingefügt wird
datePicker_*	* darf alle Optionen des jQueryUI-Datepickers sein und lässt damit die vollständige Konfiguration des Kalenders zu Liste aller Kalenderoptionen

HTML-Struktur und CSS-Klassen

Das CSS für den Datepicker wird auf der Homepage behandelt
<pre>
<div id=“hooolpDatepicker“>jQuery-UI-Datepicker</div>
<div id=“hooolpOptionField“>
<input type=“hidden“ id=“hooolpDatepickerDate“ value=““/>
<input type=“hidden“ id=“hooolpSelectedBands“ value=““/>
<div id=“hooolpOptionFieldGenres“>
<ul>
<li>
<input id=“hooolpAllGenres“ type=“checkbox“ />
<span>Alle auswählen</span>
</li>
<li>
<input type=“checkbox“ />
<span>Text</span>
</li>
</ul>
</div>
<div id=“hooolpOptionFieldBands“>
<div id=“hooolpPreBandSelection“ />
<ul>
<li id=“hooolpBandListItem_bandId“>
<span id=“hooolpBandListItemText_Id“ />
</li>
ausgewählte Band
<li id=“…“>
<span id=“hooolpBandListItemText_Id“ />
</li>
</ul>
<div id=“hooolpPostBandSelection“ />
</div>
</div>
<div id=“hooolpEvents“>
Event während MouseOver
<div>
<div />
<div>
<p />
<p />
<p/>
<p />
<p />
</div>
<div />
<div style=“display:none;“>
<p>
<img src=““ alt=“Eventdaten werden geladen…“ />
</p>
</div>
<div />
</div>

Event ohne MouseOver
<div>
<div />
<div>
<p />
<p />
<p/>
<p />
<p />
</div>
<div />
<div style=“display:none;“>
<p>
<img src=““ alt=“Eventdaten werden geladen…“ />
</p>
</div>
<div />
</div>

Event mit geöffneten Details (Details werden erst beim Klick geladen)
<div>
<div></div>
<div>
<p />
<p />
<p/>
<p />
<p />
</div>
<div />
<div style=“display:block;“>
<div>
<p />
</div>
<div>
<p />
<p>Strasse</p>
<p>PLZ</p>
<p>Stadt</p>
<p>
<img src=“staticMapsURL“/>
</p>
</div>
<div>
<ul >
<li>
<p />
<p />
</li>
</ul>
</div>
<div>
<p>
<a target=“_blank“ href=““>
Infos und Tickets zum Event bei hooolp.com
</a>
</p>
</div>
</div>
<div />
</div>

</div>
</pre>

Genre-IDs

<tr valign=“top“>
<th width=“100px“ align=“left“>Genre</th>
<th width=“50px“ align=“center“>ID</th>
</tr>

<tr valign=“top“><td>Alternative </td><td align=“center“>61</td></tr>
<tr valign=“top“><td>Blues </td><td align=“center“>59</td></tr>
<tr valign=“top“><td>Celtic </td><td align=“center“>67</td></tr>
<tr valign=“top“><td>Electro </td><td align=“center“>63 </td></tr>
<tr valign=“top“><td>Ethno </td><td align=“center“>42 </td></tr>
<tr valign=“top“><td>Festival </td><td align=“center“>27 </td></tr>
<tr valign=“top“><td>Folk </td><td align=“center“>65 </td></tr>
<tr valign=“top“><td>Funk </td><td align=“center“>47 </td></tr>
<tr valign=“top“><td>Hip-Hop </td><td align=“center“>53 </td></tr>
<tr valign=“top“><td>Indie </td><td align=“center“>62 </td></tr>
<tr valign=“top“><td>Jazz </td><td align=“center“>32 </td></tr>
<tr valign=“top“><td>Klassik </td><td align=“center“>56 </td></tr>
<tr valign=“top“><td>Metal </td><td align=“center“>30 </td></tr>
<tr valign=“top“><td>Musical </td><td align=“center“>57 </td></tr>
<tr valign=“top“><td>Pop </td><td align=“center“>29 </td></tr>
<tr valign=“top“><td>Punk </td><td align=“center“>46 </td></tr>
<tr valign=“top“><td>Reggae </td><td align=“center“>35 </td></tr>
<tr valign=“top“><td>Rock</td><td align=“center“>28</td></tr>
<tr valign=“top“><td>Schlager</td><td align=“center“>58</td></tr>
<tr valign=“top“><td>Ska</td><td align=“center“>55</td></tr>
<tr valign=“top“><td>Song</td><td align=“center“>36</td></tr>
<tr valign=“top“><td>Soul</td><td align=“center“>34</td></tr>
<tr valign=“top“><td>Volksmusik</td><td align=“center“>40</td></tr>
<tr valign=“top“><td>World</td><td align=“center“>66</td></tr>
<tr valign=“top“><td>Turkish</td><td align=“center“>68</td></tr>
<tr valign=“top“><td>Gothic</td><td align=“center“>69</td></tr>
</table>

WordPress-work-around

WordPress wandelt die ‚&‘ zum Trennen der Parameter in ‚&#038‘ um.

Eine Lösung für das WordPress-Problem bietet das Textcontrol-Plug-In:

http://plugins.trac.wordpress.org/wiki/TextControl
zum Inhaltsverzeichnis

hooolp-API-Key

Der hooolp-API-Key dient der Authentifizierung des Nutzers.

Ein Nutzer des hooolp-Systems bekommt den Key unter
* Meine Daten
* API-Keys verwalten

Der Key gilt für alle Seiten einer Domain, also z.B.
* www.meineseite.de
* blog.meineseite.de
* www.meineseite.de/termine/tour.html

Dort können Sie dem Key Bands und/oder Locations zuordnen, die Sie mit ihrem Widget ausgeben wollen.

Hier kann eine Agentur z.B. auswählen, für welche Bands sie auf ihrer eigenen Seite mit Hilfe des hooolp-Widgets die Tourdaten anzeigen lassen will. Bands, die gerade nicht live spielen könne ausgeblendet werden usw.
Die Zuordnung der Bands und Location ist lediglich eine Hilfestellung und gibt die Bands oder Clubs an, die über die Parameter bands=0 bzw. locations=0 ausgewählt werden.

Selbstverständlich kann man auch Daten zu jeder anderen Band oder Location abrufen und ausgeben, muss diese dann aber direkt über deren id auswählen.

Näheres dazu finde Sie in der Dokumentation zum hooolp-Javascript-Widget.

zum Inhaltsverzeichnis

Tagestipp

Der Tagestipp ist ein Event, das in der Event-List besonders hervorgehoben ist.

Damit fällt es dem Besucher ins Auge, ein hooolp-Service, der analog zum Tagestipp in den Printmedien von den Clubs gekauft werden kann.

Stadtmagazine erlauben so genannte Stopper zum Bewerben von Konzerten. Sowas kostet je nach Stadtmagazin und Rabattstaffelung 70,- bis 100,- €.

Clubs, die regelmäßig Stopper schalten, erhalten Rabatte.

Dieses System wird bei hooolp online in einer ähnlichen Preisklasse übernommen.

Dabei gilt :

* Das System garantiert, dass immer nur ein Tagestipp auf der Eventseite zusehen ist.
* Da die Umkreissuche maximal einen Radius von 100 km haben kann, wird nur ein Tagestipp in einem solchen Umkreis zugelassen. Genau also in einem Quadrat 200x200km, was ja etwas größer ist.
* Der Tagestip gilt ab dem Tag der Aktivierung bis zum Veranstaltungstag.
* Rechtzeitiges Buchen des Tagestipps garantiert

einen lange Anzeige-Zeitraum
dass kein anderes Konzert an dem Tag in der Region Tagestipp wird.

* Der Tagestipp ist unabhängig von den Genre-Schaltern immer sichtbar.
* Wenn alle Genres ausgeschaltet sind, bleibt der Tagestipp als einziges Event trotzdem sichtbar.
* Der Tagestipp ist eine interessante Werbemöglichkeit für besondere Konzerte
* Der Tagestipp kann auch gebucht durch Agenturen und Bands werden

zum Inhaltsverzeichnis

Inhaltsverzeichnis

Cookies

hooolp-Genre

hooolp-Javascript-Widget

Tagestipp

Cookies

hooolp-Genre

Einbinden des Widgets

HTML-Struktur und CSS-Klassen

Genre-IDs

WordPress-work-around

hooolp-API-Key

Tagestipp

Schreibe einen Kommentar Antworten abbrechen