Highlights des medanitwo WordPress Theme Frameworks:

• Homepageslider – großer Slider mit Beschriftung und verschiedenen Slide-Effekten
• Farbschema – wählen Sie zwischen verschiedenen Farbschemata aus (Beispiel: hell/dunkel)
• Layout – wählen Sie zwischen verschiedenen Modulpositionen
• Font-Size – Schriftgrößen frei wählbar
• Font-Color – Schriftfarbe frei wählbar
• Link-Color – Linkfarbe frei wählbar
• Logo – Logo schnell tauschbar
• Favicon – Favicon schnell tauschbar
• Mail-Encryption – codieren von Mail-Adressen im Footer
• Analytics – automatisches Einbinden von Google-Analytics und Piwik möglich

Das WordPress Theme-Framework von medani webdesign wien wird laufend weiter entwickelt um unseren Kunden weiter professionelle Webseiten am Puls der Zeit zu bieten. Sie haben interesse am WordPress Theme-Framework oder einer individuellen Webprogrammierung? Dann kontaktieren Sie unsere Experten für Programmierung (Gerhard Waschier, dipl. Mediendesigner) und Webdesign (Florian Felber, BA).

Für FFP hat medani webdesign ein individuelles Design entworfen, das der Webseite einen sehr persönlichen Charakter verleiht. Eingebunden sind sowohl ein Image-Slider und eine Youtube-ähnliche Slideshow, als auch ein Vimeo-player. Dabei werden eingebettete Videos von Vimeo automatisiert als Video in der Slideshow eingebettet und abgespielt.

Das Ziel war ein individuelles Webdesign mit einigen besonderen Features. Die meisten Features sind allerdings im Backend versteckt und dienen der Usability, die medani webdesign auf die speziellen Wünsche des Kunden abgestimmt hat. Zusätzlich kommen im Frontend der Webseite einige jQuery Techniken zum Einsatz, welche die Webseite zu einem absoluten “Hingucker” machen.

Als Basis diente das Content Management System WordPress in der aktuellen Version (WordPress 3.1), in welchem der Kunde sehr einfach neue Inhalte und neue Videos posten kann.

Details zu diesem Web-Projekt finden Sie auf der Referenzseite.

Wie bereits berichtet, wurde Anfang Mai die neue Version von jQuery (Version 1.6) veröffentlich. Dabei wurden weitgehend alle Funktionen verbessert. jQuery 1.6 ist dabei vor allem schneller und mit einem neu geschriebenen Attributmodul veröffentlicht worden.


Doch was genau bringt uns das im Webdesign? Ganz einfach. Webseiten mit der neuen jQuery Version werden deutlich schneller. Das .attr(“wert”) wird zum Beispiel (je nach Browser) bis zu 5x schneller ausgeführt. Dadurch werden Seiten spürbar beschleunigt. Neue Webprojekte können dadurch noch schneller geladen werden oder noch mehr Funktionen aufnehmen. Alte Webdesigns können ebenfalls durch ein Update auf die aktuelle jQuery Version einen Geschwindigkeitsschub erhalten.


Aber Vorsicht. Webseiten, die mit der alten jQuery Version 1.5 arbeiten, sollten nicht einfach updaten. Durch die neu geschriebenen Attributmodule kann es zu Komplikationen kommen. Seiten, in denen Funktionen für jQuery 1.5 geschrieben wurden, könnten mit der neuen Bibliothek durchaus Probleme bereiten, da die alten Codes nicht mehr korrekt ausgeführt werden.

Für das renommierte Unternehmen Installateur Dorner hat medani webdesign ein individuelles Design entworfen, das der Webseite einen sehr persönlichen Charakter verleiht. Auf der Startseite wird ein Image-Slider eingebunden. Um vor allem das Corporate Design des Unternehmens zu unterstreichen wird als Hintergrundbild der Wassertropfen (Logo) des Unternehmens verwendet. Dieses Hintergrundbild wird mit Hilfe einer kleinen JavaScript Funktion automatisch auf die passende Bildschirmgröße gebracht und wird auf jedem Bildschirm ideal groß dargestellt.

Das Ziel war ein individuelles Webdesign mit einer reduzierten und schlichten Oberfläche, die vor allem das Unternehmensbild wiederspiegelt. 
Zusätzlich kommen im Frontend der Webseite einige jQuery Techniken zum Einsatz, welche die Webseite zu einem absoluten “Hingucker” machen. Auf das aktuelle WordPress System setzt ein individuelles Webtemplate auf Basis des von medani webdesign entwickelten WordPress Templates auf. Das Template wird laufend erweitert und an die Bedürfnisse der Kunden als auch an die technischen Neuerungen angepasst.

Als Basis diente das Content Management System WordPress in der aktuellen Version (WordPress 3.1.1), in welchem der Kunde sehr einfach neue Inhalte und neue Videos posten kann.

Nähere Informationen zum Webdesign Projekt finden Sie auf der Referenzseite.

Mobile Webseiten werden jetzt mit dem WordPress Plugin “GWX Mobile Switch” noch besser unterstützt. Das von medani webdesign wien entwickelte WordPress Plugin bietet dabei großen Komfort bei der Erstellung von mobilen Lösungen. Mobile Geräte, Smartphones und Tablets werden dabei automatisch erkannt.

Wird ein mobiles Gerät entdeckt, kann der User auf ein eigenes mobiles Design weitergeleitet werden. Das Design kann dabei bequem im Backend vom User ausgewählt werden.  Mittels Umschalter kann zusätzlich zwischen der mobilen Version und der Vollversion hin- und her gewechselt werden. Momentan werden sämtliche aktuellen mobilen Geräte unterstützt inkl. iPhone, iPad, iPod, Android Phones, Windows Mobile 6.5, Windows Phone 7, Opera Mobile, Firefox Mobile, Blackberry, Nokia und viele andere mehr. Das Plugin wird laufend um die neuesten mobilen Browser erweitert.

Entwickelt wurde das Plugin für die aktuelle WordPress Version 3.1 und ist damit auf dem neuesten Stand der Technik.

Momentan setzt medani webdesign das Plugin exklusiv bei seinen Kunden mit mobilem Webdesign ein. Einen kleinen Vorgeschmack auf die Arbeitsweise des interessanten Plugins bekommen Sie unter www.bma-law.com. Dazu nur schnell die Adresse in Ihrem Smartphone aufrufen und das Ergebnis ansehen.

– Gerhard Waschier, dipl. Mediendesigner (Anfrage)

WordPress als Content Management System ist großartig. Viele tolle Funktionen, die im aktuellen Release bereits enthalten sind, machen das System zu einem der modernsten und flexibelsten Content Management Systeme der Welt. Nicht vorhandene Funktionen und Komponenten können dabei ganz einfach über so genannte Plugins erweitert werden. Die Anzahl der WordPress Plugins ist groß und die gebotenen Funktionen der Plugins sind sehr unterschiedlich. So können Plugins Suschmaschinenoptimierung weiter verbessern, eine Slideshow einbinden, Videos abspielen, eine Bildergalerie erstellen,  einen Eventkalender zur Verfügung stellen, das System vor Spam schützen, Google Analytics einbinden, Google Maps einbinden, etc… Sie sehen also, die Möglichkeiten sind groß, um das System nach den eigenen Bedürfnissen zu erweitern.

Mit etwas Suche findet man auch gute Plugins für die meisten Bedürfnisse. Doch was wenn eine spezielle Funktion noch nicht existiert und es kein passendes (auffindbares) Plugin gibt? medani webdesign programmiert nicht nur Ihre Webseite und erstellt ein modernes Webdesign. Mit Hilfe von Custom Fields kann einerseits das Template um spezielle Funktionen erweitert werden. Soll die Funktion templateunabhängig bleiben, dann kann medani webdesign auch ein passendes WordPress Plugin entwickeln, das auf die aktuelle Version von WordPress maßgeschneidert wird.


WordPress bietet dabei die Möglichkeit Funktionen über das Backend zu bearbeiten, als Widget zur Verfügung zu stellen oder direkt in das Webdesign einzuarbeiten. Zusätzlich können Plugins von medani webdesign als Shortcode im Artikel eingebunden werden. Die Plugins von medani webdesign werden mittels PHP, mySQL, XHTML, modernen Stylesheets (CSS3) und jQuery umgesetzt.


Damit Ihre Webseite noch mehr kann und Ihr Webdesign noch weiter hervorsticht!

Beim Forschen nach Trends und neuen Ideen zu den Themen Webdesign und Suchmaschinenoptimierung stößt medani webdesign wien immer wieder auf interessante Seiten, Gimmicks und Techniken im Web. Viele dieser Techniken und Ideen fließen in neue Webprojekte ein und bringen unseren Kunden nicht nur  erweiterte Funktionalitäten. Oft wird dabei die Usability stark erhöht und Webseiten sowohl optisch als auch praktisch aufgepeppt.

Eine Seite, auf die medani webdesign gerade gestoßen ist: keyboardr

Keyboardr ist eine online Suchmaschine

Ähnlich Google oder Bing werden mit keyboardr Webseiten im Netz gefunden. Für die Suchergebnisse wird die Engine von Google verwendet. Das heißt, Sie finden die aktuellen Google-Suchergebnisse in dieser Suchmaschine.

Was ist das Besondere an dieser Suchmaschine?

Keyboardr kommt mit einer sehr reduzierten Oberfläche aus und ist vollständig ohne Maus bedienbar. Lästige Werbung wird dabei prinzipiell ignoriert. Die Suche wird “live” initialisiert. Zusätzlich werden die Suchergebnisse aufgeteilt:

Links stehen die normalen Suchergebnisse, darunter die Blog-Ergebnisse von Google. Rechts oben sind Wikipedia-Links zu den Keywords zu finden. Darunter folgen Youtube- und Google Images-Ergebnisse. Diese Aufteilung macht es einfach, die Seite zu überblicken und wichtige Links zu sortieren.

Eine tolle Funktion kommt – wie der Name der Suchmaschine schon sagt (keyboard = Tastatur) – der Tastatur zu: Die gesamte Suchmaschine kann ausschließlich mit der Tastatur bedient werden. Das bringt dicke Pluspunkte in der Bedienbarkeit!

Fazit: keyboardr ist eine interessante Suchmaschine. Gerade die Schlichtheit in Verbindung mit der tollen Usability macht die Suchmaschine sehenswert. Doch entscheiden Sie selbst, ob keyboardr für Sie Top oder Flop ist!

Zu finden ist die Suchmaschine unter http://keyboardr.com

Heute wurde die lang ersehnte WordPress Version 3.1 veröffentlicht. Mit der neuen Version präsentiert sich WordPress als System mit steigenden Content Management System – Qualitäten.

Um einiges später als geplant wurde die neue Version von den WordPress Entwicklern zum Download freigegeben. Ursprünglich war das Release für Mitte Dezember 2010 geplant. Maßgeblich Schuld an der Verzögerung hatten einerseits die neuen Funktionen, die die Usability verbessern sollten, als auch Sicherheitslücken, die geschlossen werden mussten. Die großen Sicherheitslücken wurden zwischenzeitlich mit den Versionen 3.04 und 3.05 geschlossen. medani webdesign empfiehlt allen Kunden, die WordPress im Einsatz haben, ein Update auf die aktuelle Version. Bei Abonnierung des medani Security Pack um nur € 10 pro Monat, erledigen wir das Update Ihres WordPress-Systems völlig eigenständig. Das Paket bietet aber auch noch viele weitere Dienstleistungen, die Sie dem Link entnehmen können.

Verbessert wurde neben der Sicherheit von WordPress vor allem die Usability. So gibt es jetzt eine Admin-Bar, über die man im Frontend bequem auf die wichtigsten Funktionen im Backend zugreifen kann. Neu ist auch die verbesserte Artikel- und Seitensortierung im Backend. Neben Sortierung der einzelnen Seiten und Artikeln nach Autor, Datum und Titel, ist auch das Paging verbessert worden. So gibt es jetzt Buttons, um auf die erste und auf die letzte Seite springen zu können. Außerdem können Seiten jetzt einzeln und direkt durch Angabe der Seitennummer aufgerufen werden.

medani webdesign hat für on tour Marketing eine neue Mitarbeiter Datenbank programmiert!
In dieser Datenbank sollen Mitarbeiter nicht nur angelegt und bearbeitet werden können, sondern auch zu Projekten zugeordnet werden können.


Facts zum Tool:

• User anlegen / bearbeiten
• verschiedene Zugangsberechtigungen
• Mitarbeiter anlegen / bearbeiten
• Dateiupload zu Mitarbeitern (Bild, PDF, Word, Excel…)
• Projekte anlegen / bearbeiten
• Projektzeiträume festlegen
• Bewertung von Mitarbeitern (Star-Rating mit jQuery) zu einzelnen Projekten
• Secure Login (sicheres Einloggen) durch zusätzliche Sicherheitsmaßnahmen

Ziel des sehr speziellen Mini-CRM (Customer Relationship Management) ist sowohl die Verwaltung der Mitarbeiter, als auch der Projekte. Mitarbeiter können dabei zu Projekten zugeordnet werden. Nach Ablauf des Projekts können Mitarbeiter bewertet werden und auch Anmerkungen zur Arbeit des Mitarbeiters eingetragen werden. In der Ausbaustufe soll so eine objektive Bewertung von Mitarbeitern erfolgen, um für neue Projekte die besten Mitarbeiter auswählen zu können.


Administratoren dürfen natürlich alle Daten einsehen und ändern. Ebenso dürfen Administratoren nicht nur Mitarbeiter, sondern auch neue Systemuser generieren.

Sachbearbeiter hingegen haben keinen Zugriff auf die Systemuser und dürfen nur Mitarbeiter und Projekte verwalten.


Als zusätzliches Feature wurde ein eigenes klickbares Captcha entwickelt, dass die Sicherheit beim Login weiter steigern soll. Passwörter werden selbstverständlich verschlüsselt und das Tool wurde ebenso gegen SQL-Injection abgesichert.


Weiters soll das Tool in Zukunft eine Schnittstelle zu den anderen Tools von  on tour Marketing bieten. Dadurch sollen Mitarbeiter nicht mehr in jedes Tool eingepflegt werden müssen, sondern die Mitarbeiterdaten und Passwörter kommen direkt aus der Mitarbeiterdatenbank und werden automatisiert in Reporting- und Promotiontools eingespeist. Dadurch können Mitarbeiter zentral an einer Stelle bearbeitet und verwaltet werden und die anderen Tools werden dadurch einfacher und schneller wartbar.

Immer wieder gibt es Probleme, wenn man mehrere JavaScript Bibliotheken gleichzeitig in einem Projekt benutzt. Daher sollte man sich Grundsätzlich auf eine Bibliothek beschränken. Leider ist das nicht immer möglich, da die verwendete Bibliothek eine benötigte Funktion vielleicht eben mal nicht zur Verfügung stellt und daher zusätzlich eine weitere Bibliothek eingebunden wird.


Doch gerade das führt zu Überschneidungen und sorgt dafür, dass benötigte JavaScript Funktionen oft nicht mehr richtig funktionieren oder für schwere Fehler auf der Seite sorgen.
Grund dafür ist, dass sowohl jQuery als auch andere Bibliotheken wie Prototype, script.aculo.us, Motools und andere bekannte Bibliotheken für Funktionen das $ Zeichen benützen.
Was also tun, wenn man jQuery mit anderen Libraries nutzen möchte ohne dass sich die Skripten gegenseitig behindern?


Die Lösung des Problems ist der in jQuery integrierte non conflict Modus.


jQuery bietet diesen Modus um eben solche Probleme zu vermeiden. Anstelle von $ werden Funktionen von jQuery nach Aufrufen dieses Moduses mit jQuery aufgerufen.


Hier ein Beispiel um jQuery mit Prototype gleichzeitig zu verwenden:

 <html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
   <script>     jQuery.noConflict();

           // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){       jQuery("div").hide();     });
         // Use Prototype with $(...), etc.
     $('someid').hide();

  </script>
</head>

<body>
Irgend ein Inhalt
</body>
 </html>

- Gerhard Waschier, dipl. Mediendesigner (Anfrage)

Webapplikationen (manchmal auch als Webanwendung bezeichnet) sind Programme, die auf einem Webserver ausgeführt werden. Aufgerufen werden diese Programme im Normalfall über einen Browser. Der Webserver kann entweder intern im Intranet oder extern im Internet verfügbar sein. Prinzipiell spielt dabei die räumliche Entfernung zum Client (Benutzer der Webapplikation) keine Rolle.

Der Client ruft dabei die URL der Applikation auf und der Server übernimmt die Anfrage und generiert oder lädt den ausführbaren Code. Die dabei generierte Webseite ist die Benutzeroberfläche der Webanwendung. Dabei muss nicht immer unbedingt HTML und CSS zum Einsatz kommen. Manche Webapplikationen setzen auf Flash oder Silverlight. Eine weitere Möglichkeit um Webanwendungen zu realisieren sind JAVA Programme.

Flash, Silverlight und Java bieten die Möglichkeit moderne, mit grafischen Effekten und Videosequenzen aufgepeppte, Applikationen zu entwickeln. Allerdings  benötigt der Client zusätzliche Plugins, um ein Programm aufrufen zu können.

HTML & JavaScript funktionieren jedoch auf allen gängigen Browsern standardmäßig. Mit Hilfe von AJAX (jQuery) können zum Beispiel Effekte und eine bessere Usability ebenfalls sehr gut umgesetzt werden.


Grundsätzlich unterscheiden wir zwischen 2 Arten von Webapplikationen:

• RIA(Rich Internet Application):
  Echte Webapplikationen, die mit Hilfe von AJAX, Flash, Java, etc. Programmlogiken teilweise auf dem Client berechnen.
• Webservices:
  ein Webserver stellt Daten in strukturierter Form zur Verfügung (zum Beispiel als XML, RSS…). Primär sind Webservices nicht zur direkten Ansicht gedacht, sondern sollen die Daten nur zur Weiterverarbeitung zur Verfügung stellen. Eine direkte Interaktion des Benutzers ist dabei nicht zwingend notwendig.

Vorteile von Webapplikationen:

Webanwendungen setzen keine spezielle Software voraus. Mit Hilfe eines einfachen Webbrowsers ist die Applikation ortsunabhängig verfügbar. Zusätzlich wird dabei eine große Plattformunabhängigkeit erreicht. Bei Änderungen am Programm muss nicht jeder Programmnutzer ein Update oder gar die neue Applikation installieren, da Änderungen zentral am Server vorgenommen werden. Zusätzlich kann eine mobile Version der Anwendung erstellt werden, um Daten auch auf iPads, Handys, iPhones und anderen Smartphones zur Verfügung stellen zu können.

Nachteile von Webapplikationen:

Für die Nutzung von Webanwendungen wird generell die Verbindung zum Webserver benötigt. Die Datenrate der Verbindung sollte die Anforderungen der Webanwendungen erfüllen können, wobei die Verbindungsgeschwindigkeit mittlerweile keine echte Hürde mehr darstellt. Außerdem können je nach Art der Applikation Sicherheit und Skalierbarkeit des Systems eine große Rolle spielen.

- Gerhard Waschier, dipl. Mediendesigner (Anfrage)

Oft hört man im Web die Begriffe AJAX und jQuery. medani webdesign versucht eine Erklärung der beiden Begriffe in verständlichen Worten.

AJAX

Ajax bedeutet nichts anderes als “Asynchronous JavaScript and XML”. Dabei handelt es sich um ein Konzept, um Daten asynchron zwischen dem Browser und dem Server zu übertragen. Dadurch können Teile der Internetseite geändert werden ohne die komplette Seite neu zu laden. Ziel ist es ein desktopähnliches Verhalten zu erzielen. Die wohl bekannteste Anwendung dabei ist die Google Suche. Ist Ihnen schon einmal aufgefallen, dass Ihnen beim Tippen automatisch Suchvorschläge gebracht werden, die sich mit jedem weiteren Buchstaben verändern und genauer werden? Das ist die Google-Suggest oder auch Autocomplete-Funktion genannt und funktioniert über AJAX.

Außerdem werden mit AJAX weitere  Effekte wie Drag & Drop, sortierbare Tabellen, Animationen ohne Flash, Accordion und viele andere Effekte ermöglicht.

jQuery

jQuery ist eine JavaScript-Bibliothek, welche die Entwicklung von AJAX-Funktionen erleichtert und beschleunigt. So müssen viele Funktionen nicht immer neu programmiert werden, sondern können einfach und komfortabel in den Quellcode eingebunden werden. Die Bibliothek besteht dabei aus einer JavaScript-Datei, die die grundlegenden Ajax-Funktionen und gängigen Effekte enthält.

jQuery ist nicht die einzige JavaScript Bibliothek, aber auf jeden Fall eine der umfangreichsten und verbreitetsten. Zusätzlich zu den Standardfunktionen kann jQuery mit Plugins erweitert werden. Durch eine starke Community im Hintergrund wird jQuery laufend weiterentwickelt. Ein weiterer Versuch die Entwicklung mit jQuery noch weiter zu beschleunigen und noch komfortabler zu gestalten  ist jQueryUI. Dabei werden die wichtigsten und meist benutzten Funktionen wie zum Beispiel Datepicker, Calendar, Autocomplete Funktion etc. zusammengefasst und können noch einfacher eingebunden werden.

- Gerhard Waschier, dipl. Mediendesigner (Anfrage)

medani webdesign hat ein neues Reporting-Tool für den Kunden on tour Marketing online gebracht!
Das Tool ermöglicht österreichweit getätigte Arbeiten zu erfassen und zentral auszuwerten.

Facts zum Tool:

• Erfassen von Trafiken
• Erfassen von Mitarbeitern
• Mitarbeiter zu Trafiken zuordnen
• Verschiedene Zugangsberechtigungen
• Multi Bildupload
• Zahlreiche Statistikauswertungen
• Statistiken als Excel downloaden

Ziel des Reportingtools ist eine Aufzeichnung der getätigten Arbeiten eines Mitarbeiters. Dadurch kann nachvollzogen werden, welcher Mitarbeiter wo und wann welche Arbeiten getätigt hat. Um die Dekotour des Mitarbeiters nicht nur in Zahlen sichtbar zu machen, wurde eigens für den Kunden ein Multiuploader in das Tool programmiert, um bequem mehrere Bilder gleichzeitig hochladen zu können.

Die knapp 5.000 Trafiken wurden dabei mittels eines eigenen Importers in das System importiert und die jeweiligen Mitarbeiter fast vollständig automatisiert den einzelnen Trafiken zugeordnet.

Der Admin hat natürlich Kontrolle über alle Mitarbeiter, Trafiken und Auswertungen und kann bei Bedarf Mitarbeiter neu anlegen und zuweisen.

Ebenfalls können die Arbeiten zusätzlich dokumentiert werden. Die Bilder selbst werden in einer Lightbox vergrößert dargestellt.

Tobaccoland hat als Auftraggeber Einsicht in die Statistiken und kann Trafiken einzeln einsehen, oder auch eine Gesamtstatistik als Excel-Datei downloaden. Dadurch werden verschiedene Auswertungen ermöglicht.

Oft gibt es in Firmen die Überlegung, wie man gerade zu Weihnachten den Kunden auf sich aufmerksam machen kann. Die Geschäfte werden geschmückt, die Auslagen dekoriert und überall hört man winterliche/weihnachtliche Lieder.

Vergessen wird dabei so gut wie immer auf die eigene Webseite.

Zeigen Sie Ihren Kunden, dass auch Ihr WordPress-System fit für den Winter ist!

medani webdesign bietet Ihnen Ihr persönliches Weihnachts-Webdesign integriert in Ihr Corporate Design.

Oder lassen Sie es einfach auf Ihrer Webseite schneien. Mit WordPress bietet medani webdesign Ihnen auch diese Möglichkeit.

medani webdesign macht jetzt WordPress Seiten fit für den Winter. Wir lassen es auf Ihrer Webseite schneien und verbreiten so ohne großen finanziellen Aufwand winterliche Stimmung auch auf Ihrem System!

medani webdesign hat ein neues Tool zur Überwachung von laufenden Promotions online gebracht!

Facts zum Tool:

• Erfassen von Shops
• Erfassen von Mitarbeitern
• Promotoren zu Shops zuordnen
• Verschiedene Zugangsberechtigungen
• Zahlreiche Statistikauswertungen

Ziel des Projekts ist es die volle Kontrolle über aktuelle Promotions zu erhalten. Dabei werden alle Shops im System erfasst und es können Supervisoren, Personaldienstleister und Promotoren zugeordnet werden.

Die Supervisoren können dabei die gesammelten Daten direkt im System eingeben. Nach Eingabe der Daten steht dem Kunden live eine Auswertung und Statistik zur Verfügung. Als Auftraggeber sehen Sie auf einen Blick wie viele Abschlüsse in Summe gemacht wurden und in welchen Shops und/oder zu welchen Uhrzeiten die Abschlüsse gemacht wurden.
Zusätzlich kann man täglich zu jedem Shop und zu jedem Promotor einen Kommentar hinterlassen, um wichtige Vorkommnisse zu dokumentieren.

Um Ihnen einen Einblick in ein weit verbreitetes JavaScript – Framework zu geben, möchte ich Ihnen jQuery vorstellen, welches von John Resig entwickelt wurde. Unter einem Framework können Sie sich ein Gerüst vorstellen, ähnlich wie es beim Bau von Gebäuden zum Einsatz kommt. In der Programmierung dient ein solches zur Festlegung der Architektur, in der ein Programm oder eine Funktionalität erstellt wird. Den Einsatz und die Möglichkeiten, die sich beim Einsatz von jQuery für Ihren Webauftritt bieten, möchte ich Ihnen in einer dreiteiligen Demonstration näherbringen.

Im ersten Teil wird die Installation von jQuery demonstriert, sowie wertvolle Tips & Tricks für die ersten Schritte erläutert. Sie können sich anhand hiervon überzeugen, dass wir stets mit dem “Puls der Technik” schreiten, um Ihnen als Kunden  aktuellste Technologie und Know-How anbieten zu können.

In weiterer Folge erstellen wir ein aufklappbares Akkordeon, dass beispielsweise bei einer Ihrer Produktseiten zum Einsatz kommen kann. Ich möchte Ihnen zunächst das Endergebnis zeigen, damit Sie sich ein Bild machen können, welches Ziel diese Demonstration verfolgt.

Wenn Sie hier auf “jQuery”, “PHP” oder “CSS” klicken sehen Sie, dass sich der jeweilige Bereich erweitert und Ihnen zuvor “versteckten” Inhalt anzeigt.

Ich werde Ihnen nun Schritt für Schritt zeigen, wie die Erstellung eines solchen aufklappbaren Menüs aussieht.

Schritt 1 – das Grundgerüst

Um mit jQuery arbeiten zu können, benötigen Sie ein HTML (Hypertext Markup Language; Wikipedia) Grundgerüst. Dieses könnte folgendermaßen aussehen:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<head><br />
</head><br />
<body><br />
</body><br />
</html>

Speichern Sie dieses in ein Verzeichnis Ihrer Wahl ab (Bsp.: jQuery/index.html).

Schritt 2 – das Einbinden von jQuery / jQuery UI

Um auf Ihrer Webseite DOM (Document Object Model; Wikipedia) – Manipulationen durchführen zu können, muss im zweiten Schritt jQuery eingebunden werden. Hierzu werden im HEAD – Bereich Ihres HTML – Grundgerüsts aus “Schritt 1″ die notwendigen JS (JavaScript; Wikipedia) Dateien angegeben, die inkludiert werden sollen.

Dies kann auf 2 Arten geschehen:

• per Google APIs (klicken Sie bitte hier)
• per “Eigenhosting”

Die Einbindung via Google APIs bringt einige Vorteile mit sich:

• durch das sogenannte “Caching” (Zwischenspeichern, um bei einem erneuten Aufruf Inhalte schneller zur Verfügung zu stellen) sparen Sie sich Bandbreite – das Laden der Seite geht etwas schneller vonstatten.
• Sie müssen sich nicht um Updates der jQuery Library kümmern, Google übernimmt das für Sie

Sollten Sie sich dazu entscheiden, Google APIs zu verwenden, so müssen Sie einen Google API Key registrieren, damit die Einbindung auf Ihrer Webseite funktioniert. Dieser eindeutige Key wird mit der URL (Uniform Resource Locator; Wikipedia) Ihrer Webseite verknüpft, Sie können also beispielsweise den hier verwendeten nicht benutzen!

“Eigenhosting” bedeutet, dass Sie ein Kopie von jQuery auf Ihrem Server hosten und sich daher selbst um Updates kümmern müssen.

Für meine Demonstration verwende ich Variante I und erweitere den HEAD – Bereich wie folgt:

<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script><br />
</head>

Wie Sie sehen können, beziehen wir neben jQuery (i.d.a.F 1.4.2) auch jQuery UI (i.d.a.F. 1.7.2), um auf vordefinierte Widgets (ein in der IT gebräuchliches Wort für “graphisches Element” oder “graphisches Fenster”) zurückgreifen zu können. jQuery UI baut auf jQuery auf, daher ist es unbedingt notwendig, jQuery vor(!!) jQuery UI einzubinden !

Schritt 3 – das Styling

jQuery UI bietet komfortable Möglichkeiten, Styles (Informationen und Vorgaben zur Anzeige) aus einer Vielzahl von bereits vordefinierten Themen auszuwählen und einzubinden. Sie finden eine Übersicht aller Standard – jQuery UI – Styles im dazugehörigen Theme Roller.

Laden Sie sich ein Theme auf Ihren PC, extrahieren Sie die heruntergeladene (gepackte) .ZIP – Datei und navigieren Sie in den Unterordner /css. Dort befindet sich ein Unterordner mit dem Namen des von Ihnen gewählten Themes, welcher eine CSS (Cascading Style Sheet; Wikipedia) und einen Ordner /images beinhaltet. Kopieren Sie den Ordner /css in jenes Verzeichnis, in dem sich auch die HTML – Datei befindet, die Ihr HTML – Grundgerüst befindet (jQuery/).

Öffnen Sie nun wieder die HTML – Datei mit Ihrem HTML – Grundgerüst (jQuery/index.html) und erweitern den HEAD – Bereich wie folgt:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script></p>
<p><script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<link href="css/jquery-ui-1.8rc2.custom.css" rel="stylesheet" type="text/css" />
</head><br />

Hierdurch binden Sie das CSS in ihre Webseite ein.

Schritt 4 – Die DIV Struktur des Inhaltes

Im vierten Schritt möchte ich Ihnen zeigen, wie ein möglicher DIV Aufbau aussehen könnte, um mit jQuery erfolgreich darauf zugreifen zu können. Hierzu erweitern wir den BODY – Bereich des HTML – Grundgerüsts (jQuery/index.html) wie folgt:

<br />
<body></p>
<div class="jQuery_demo_container" style="width: 400px; height: auto;">
<div id="jQuery_demo">
<h3><a href="#">jQuery</a></h3>
<div>Ein JavaScript - FrameWork.</div>
<h3><a href="#">PHP</a></h3>
<div>Eine serverseitige Programmiersprache.</div>
<h3><a href="#">CSS</a></h3>
<div>Zur Trennung von Code und Design.</div>
</div>
</div>
<p></body><br />

Das DIV “jQuery_demo_container” umschließt das DIV “jQuery_demo” und definiert Styling Informationen zur Breite (400 Pixel) und Höhe (automatisch).

Schritt 5 – Erzeugen des Akkordeons

Um nun per jQuery / jQuery UI das DOM manipulieren zu können, bedarf es nun nur noch einer kleinen Erweiterung des HEAD – Bereichs des HTML – Grundgerüsts:

<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<p><script type=”text/javascript”>
$(document).ready(function() {
$("#jQuery_demo").accordion();
});
</script></p>
<p></head>

Sie beauftragen jQuery der ID “jQuery_demo” (nach dessen Initialisierung) ein Akkordeon anzufügen und damit den oben gezeigten Effekt zu erzielen.

Komplett

<br />
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<p><script type=”text/javascript”>
$(document).ready(function() {
$("#jQuery_demo").accordion();
});
</script><br />
</head><br />
<body></p>
<div class="jQuery_demo_container" style="width: 400px; height: auto;">
<div id="jQuery_demo">
<h3><a href="#">jQuery</a></h3>
<div>Ein JavaScript - FrameWork.</div>
<h3><a href="#">PHP</a></h3>
<div>Eine serverseitige Programmiersprache.</div>
<h3><a href="#">CSS</a></h3>
<div>Zur Trennung von Code und Design.</div>
</div>
</div>
<p></body><br />
</html></p>
<p>

Damit möchte ich den ersten Teil der jQuery Demonstration abschließen. Im nächsten Teil werde ich Ihnen zeigen, wie Sie Ihr erstelltes Akkordeon individualisieren können!

- Christian Singer, BSc ( Anfrage )