Die Firebug JavaScript Console ist ein sehr nützliches Tool, jedoch fehlt in der Standardkonfiguration (überhaupt, wenn es viele Zeilen sind) die Codehervorhebung. Jedoch kann dies mit den Add-On “Acebug” geändert werden. Nach der Installation der Erweiterung stehen viele neue Helfer zu Verfügung.

Syntax Highlighting

Autovervollständigung

Syntaxvalidierung und -formatierung

Deswegen möchten wir Euch eine funktionierende Lösung mittels „Better Contact Form“ und „reCAPTCHA“ vorschlagen:

Vorgehensweise:

• Installation der Extensions „jm_recaptcha“ und „sp_bettercontact“
• Hinzufügen eines Kontaktformulars
  • Unter dem Tab „Spam“ als Captcha das „reCaptcha“ auswählen
• Anpassung des Formulars können mit den Files unter “” realisiert werden
  (hier empfiehlt es sich, die Dateien z.B. unter Fileadmin zu kopieren und anschließsen im Kontaktformular zu referenzieren)
  • “form.html” hier können die Eingabefelder verändert werden (Beispiele unter „sp_bettercontct/res/templates/frontend/examples“)
  • “email.html” Template für die E-Mails
  • “locallang.xml” anpassung der Labels
  • Wenn
• Wenn man neue Felder erstellt hat müssen diese im Maintemplate im Bereich Setup eingetragen werden.
  Zuerst alle nicht gewünschten Felder deaktivieren und danach alle neuen hinzufügen:

  // Deaktivieren von Feldern:
  plugin.tx_spbettercontact_pi1.fields {
    tel >
    fax >
    street >
    city >
  }

  // Hinzufügen von Elementen:
  plugin.tx_spbettercontact_pi1.fields {
    mein_neues_feld {
      required = 0 	// Für ein Pflichtfeld auf 1 setzen
      minLength = 3    	// mindest Anzahl der Zeichen
      maxLength = 250	// maximale Anzahl an Zeichen
      regex =		// Falls man den  Inhalt mit einer Regular Expression prüfen will
      disallowed = <>&	// Zeichen die in diesem Feld nicht erlaubt sind
      allowed =		// Nur diese Zeichen sind im Feld erlaubt
      default =		// Standard-Wert (Achtung bei Checkboxen, Radiobuttons und Selects)
    }
  }			// Kommentare entfernen!

Hiermit dürfen wir Ihnen mitteilen, dass wir nach reichlichen Überlegungen unsere Firmen-Rechtsform von einer „Offenen Gesellschaft“ in einer „Gesellschaft mit begrenzter Haftung“ geändert haben. Alle aktuellen Verträge wurden durch die Umgründung zur Gänze übernommen.

Wir sind stets bemüht, Ihnen weiterhin einen ausgezeichneten Service bereitzustellen und blicken positiv einer erfolgreichen Partnerschaft entgegen.

Bei etwaigen Fragen stehen wir Ihnen selbstverständlich gerne persönlich zu Verfügung.

Mit besten Grüßen,
Mario Ganster und Christian Zorc

Mittels der HTML5 Boilerplate, welche unter anderem von Paul Irish entwickelt wurde, kann schnell und einfach das nächste Webprojekt beginnen.

Diese Vorlage bringt einiges an Erleichterungen mit:

• Optimale Browserkompatibilität
• Schnelle Ladezeiten der Seite durch Optimierung von HTML, CSS und Javascript Files (konkatenieren und komprimierung der Files mittels Ant-Build-Script)
• Statt einem “Reset-CSS” wird ein “Normalize-CSS” verwendet
• Clevere Implementierung für Consolen-Ausgaben
• Fallback für jQuery-Auslieferung (Falls das CDN nicht erreichbar ist, wird die lokale jQuery-Kopie inkludiert)
• Einheitliche Projektstruktur

Die Boilerplate kann unter html5boilerplate.com in drei verschiedenen Versionen heruntergeladen werden

• Standardversion (inklusive Kommentare und Tips)
• Stripped (keine Kommentare oder sonstiges)
• Customized (Es können Einstellungen für jQuery, .htacess und ähnliches selbst vorgenommen werden)

Mit den folgenden paar cleveren Zeilen erhält man einiges Funktionalität.

// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console) {
    arguments.callee = arguments.callee.caller;
    var newarr = [].slice.call(arguments);
    (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
  }
};

Features:

• Cross-Browser fähig
• Unterbindet Fehler, falls die Console nicht vorhanden ist
• Log-History (Log-Nachrichten werden zwischengespeichert, falls die Console nicht aktiv/vorhanden ist)
• Der Code ist mittel “Public Domain” freigegeben

Die folgenden fünf Erweiterungen sind meine Top 5 Add-ons um den Berufsalltag eines Webentwicklers zu erleichtern:

Web Developer

Dieses Add-on fügt eine, für den Webdeveloper, nützliche Toolbar ein und ermöglicht somit den schnellen Zugriff auf wichtige Funktionen. Einige davon sind:

1. Deaktivierung des Caches
2. Javascript Deaktivierung
3. Maßwerkzeug
4. Quelltext-Validierung

Zur Add-on-Seite

pwgen – Password Generator

Dieses Add-on ist optimal für Personen, die öfters schnell ein Passwort benötigen. Mittels einem Klick auf das Icon im Footerbereich wird ein Passwort generiert und in die Zwischenablage gelegt. Mittels der Einstellungen kann die Komplexität des Passwortes definiert werden.

Zur Add-on-Seite

Firebug

Wahrscheinlich eines der wichtigsten Add-ons für den Webentwickler. Zu den Hauptvorteilen gehören:

1. Das Konsolen-Panel (z.B. für die Ausgabe von Logs)
2. CSS-Panel: Über dieses Panel ist eine Livemanipulation des CSS möglich
3. HTML Panel: Hier wird der Aufbau des HTMLs strukturiert angezeigt
4. Netzwerk Panel: zur Überwachung der Requests
5. Script Panel inkl. JS-Debug-Möglichkeit
6. Basis für weitere Add-ons

Zur Add-on-Seite

Pixel Perfect

Dieses Add-on ermöglicht es ein Overlay des Screendesigns über die Website zu legen, damit wird die pixelgenaue HTML-Entwicklung um einiges erleichtert. Dieses Add-on setzt den Firebug voraus, da es auf diesen aufsetzt.

Zur Add-on-Seite

Firebug Autocompleter

Last but not least, dieses Add-on ist unterstützt optimal das Entwickeln im Firebug Kommando Fenster. Ein großer Vorteil für mich ist, dass das Tool nicht “nur” die Standardbefehle kennt, sondern das Tool scannt alle Funktionen (auch jQuery und eigene Funktionen) und stellt sie bereit.

Zur Add-on-Seite

Viele Grüße
Euer G&Z Team

jqGrid

jqGrid ist sehr mächtiges jQuery Grid Plugin. Es zeigt statische Daten sowie mittels AJAX geladene Daten an. Durch den modularen Pluginaufbau integriert  man nur die Sub-Module welche wirklich benötigt werden und minmiert somit die Größe der Dateien.

Hauptvorteile

• Ist auch bei großen Datenmengen sehr performant
• JSON, XML und Array kompatibel
• Inline Datenmanipulation
• Gute Dokumentation – und Demoseite

Demo | Download | Doku

jquery.i18n

Ist wie der Name bereits vermuten lässt ein Plugin, welches uns hilft Webapplikationen und bestehende Plugins zu internationalisieren. Durch den einfachen Aufbau kann dieses Script sehr einfach integriert und konfiguriert werden. Als Datenquelle werden JSON Dateien herangezogen.

Hauptvorteile

• Einfache Integration
• Datenbasis als JSON ablegbar
• In bestehenden Plugins integrierbar

Download

jquery.validate

Eines der bekanntesten jQuery Validierungs-Plugin. Mit diesem Plugin können einfache bis komplexe clientseitige Validierungen durchgeführt werden. Reichen die mitgelieferten “Standard-Validierungsmethoden” nicht aus, kann man einfach eigene Methoden etwa wie RegEx-Unterstützung mittels wenigen Zeilen Code hinzufügen.

Hauptvorteile

• Einfache Integration
• Liefert bereits viele Validierungsmethoden mit
• bereits in 32 Sprachen übersetzt
• Gut erweiterbar

Demo | Download | Doku

jTemplates

Ist eine Template Engine Für JavaScript.

Hauptvorteile

• 100% JavaScript
• Ajax und/oder JSON Unterstützung
• Ermöglicht das Ausführen von Javascript / jQuery / Parameter
• Cascading Templates

Demo/Download/Doku

ui.spinner

Ein nettes Numeric-UpDown Plugin mit recht vielen Optionen.

Hauptvorteile

• Gute Browserkompatiblität
• UI-Theme kompatibel
• Viele Optionen (siehe folgenden Auszug)
  • Min / Max
  • Dezimalstellen
  • MouseWhele unterstützung
  • Prefix
  • Ziffern-Formatierung

Demo/Download/Doku

Viele Grüße
Euer G&Z Team

Jedoch habe ich einige Dinge vermisst. Beispielsweis:

• Es können nur Key Value Paare jeweils in Strings angeben werden (<String><String>)
  Möchte man beispielsweise einen Zahlenwert ablegen wird diese als String hinterlegt und auch als String zurückgeliefert – diesen muss man anschließend manuell überprüfen und konvertieren
  
• Wenn der Key nicht enthalten ist wird NULL zurückgeliefert > auch dies muss abgefangen werden

Aus diesen Gründen haben wir uns auf die Suche nach einer Alternative begeben haben – und die Lösung möchten wir Euch hiermit vorstellen.

Unsere Ansprüche an die Konfigurationsklasse sind folgende:

• Je nach Deployment z.B. local und live sollen unterschiedliche Konfigurationen geladen werden können
• Die Einstellungen sollen während der Laufzeit veränder- und abspeichbar sein
• Für den Rückgabewert soll ein Typ angeben werden können
• Der Zugriff auf die Einstellungen soll einfach gestallten werden
• Einzelne Werte sollen verschlüsselt gespeichert werden können

Oft benötigt man je nach Deployment Environmentmehere unterschiedliche Configuration Files.

Nach etwas googeln sind wir auf diesen Artikel gestoßen “Building a better .NET Application Configuration Settings Class“. Dieser Artikel beschreibt einen schönen Lösungsansatz bzw. kann man dort die Sources downloaden.
Wenn man diese Klassen anhand der Anleitung einbaut hat man bereits eine Konfigurations-Klasse für seine Projekte.

Um mehrere Konfigurationen für mehrere Deployments bereitzustellen ist der folgende Artikel sehr interessant “Multiple app.config files for deploying to different environments“. Hier wird beschrieben wie man mittels hinzufügen von Buildereignissen in der Projektdatei Tasks auslösen kann.

noch ein interessanter link http://blogs.geniuscode.net/RyanDHatch/?p=73

Beispiel eines solches Tasks:

<Target Name="AfterBuild" Condition="'$(Configuration)' == 'debug_czorc' Or '$(Configuration)' == 'debug_mganster'">
  <Copy SourceFiles="$(ProjectDir)$(Configuration).config" DestinationFiles="$(TargetDir)App.conf" />
</Target>

oder

<Target Name="AfterBuild" Condition="'$(Configuration)' == 'czorc_local' Or '$(Configuration)' == 'UAT'">
  <Delete Files="$(TargetDir)$(TargetFileName).config" />
  <Copy SourceFiles="$(ProjectDir)$(Configuration).config" DestinationFiles="$(TargetDir)$(TargetFileName).config" />
</Target>

Viele Grüße
Euer G&Z Team

Für jeden der konfigurierten Shops kann ein oder mehrere Themes definiert werden. Beispielsweise ein Default-Theme und temporäre event-/saisonspezifisches Theme.

Jeder einzelner Shop kann …

• … mehrsprachig sein
• … eigene Kataloge und Kundenstämme besitzen
• … eigene Theme verwendenna

Magento Theme Konzept

• Ein Default Theme für jeden Shop und Sprache
• Mittels den Skin und Layout Dateien kann das Design angepasst werden
  • Falls Skin Dateien vorhanden sind werden die Default-Dateien damit überschrieben

Die Magento Theme Dateien sind in folgenden zwei Verzeichnissen enthalten

• app/design/frontend/default/default/
  • Dieses Verzeichnis enthält Dateien für das Layout, Übersetzungen und Template Materialen
• skin/frontend/default/default/
  • Dieses Verzeichnis enthält Bilder, CSS Dateien und blockspezifische Javascripts

Um ein eigenes Default-Theme zu Erstellen, legt man, in den beiden oben genannten Verzeichnis Strukturen/Ordner für sein Theme an.

Beispiel:

• app/design/frontend/default/myTheme/
• skin/frontend/default/myTheme/

In diesen Ordnern kann man einzelne Theme-Dateien des Default Themes überschreiben. Bei einen Aufruf einer Seite (z.B. einer Kategory-Übersichtsseite), wird zuerst im definierten Theme nach Dateien gesucht und falls vorhanden interpretiert. Falls keine ersetzenden Dateien gefunden werden, werden die Dateien des Default Pakets herangezogen.

Der folgende Screenshot zeigt eine basis Theme-Definition:

Debug Einstellungen

Um die Theme-Erstellung etwas zu vereinfachen kann man bei den Entwickleroptionen folgende Einstellungen tätigen.

Nach diesen Einstellungen werden bei Aufruf des Shops Hinweise zu den verwendeten Dateien angezeigt, welche man anschließend in den entwickelten Theme überschreiben kann.

Magento Extensions

Mit Hilfe des Magento Connect Managers können Magento Extensions installiert werden. Den dazu benötigten Extension Key erhält man im Magento Connect Bereich.

Nützliche Magento Erweiterungen:

• TechDivision_Germany
  Deutsches Sprachpaket
• Mxperts_Jquery
  jQuery Integration

Nützliche Links

• Magento VM (Virtuelle Maschine)
  • Magento (1.4.0.1)
  • Ubuntu
  • Zend Server Community Edition
  • Virtual Box
• Designing for Magento Webinar
  • Basis Design Terminologie
  • Magento Datei Struktur und Konzepte
  • Step-By-Step How-To’s
• Magento Connect
  • Download freier und kommerzieller Erweiterungen
• Magento Demo Store
• Working with Magento Themes
• Gastbeitrag: Fix für Speicherlecks in Magento
• Blogbeitrag: Die 14 besten Magento-Tutorials

Viele Grüße
Euer G&Z Team

Wer eine Desktopapplikation-Ähnliche Webapplikation erstellen möchte, sollte sich diese zwei Plugins ansehen.

Der Unterschied zwischen den beiden Plugins besteht bei der Komplexibilität.

Das erste Plugin ist einfach einzubinden und kann einen vertikalen oder horizontalen Splitter hinzufügen. Durch Verschachtelungen ist es möglich, mehrere Splitbars in einem Layout unterzubringen.

Vierfacher Splitter

Einfacher vertikaler Splitter

Das zweite Plugin ist etwas komplexer – dafür hat es out of the box sehr viel Funktionalität um eine das Layout einer Webapplikation zu gestallten.

UI Layout simple

UI Layout extended

Hier die Links zu den jQuery Plugins:

• UI.Layout – The Ultimate Page Layout Manager
• jQuery Splitter Plugin

Viele Grüße
Euer G&Z Team