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

Vielen Dank für die Gute Zusammenarbeit an das gesamte Projektteam.

hier gehts zum Portfolio Eintrag

[Zeige als Diashow]

So, die Seite sieht im FireFox und im aktuellem Internet Explorer gut aus – jetzt werden die anderen Browser (wie IE6, IE7, Safari etc.) getestet.

Meist greifen ein zwei Styles bei den Browsern unterschiedlich – und was jetzt?

• Zusätzliche Stylesheets einbinden (Conditional StyleSheets) für jeden Problem Browser einbinden.
  Vorteil:
  + Es kann schnell erstellt und eingebunden werden
  Nachteil:
  – Es sind zusätzliche Requests nötig um die Dateien, welche meist nur wenige Zeilen besitzen, notwendig. FireFox öffnet gleichzeitig weniger als fünf Verbindungen. Und spätestens seit Google die Ladezeiten der Zeiten für das Ranking berücksichtigt, sollte man dies nicht vernachlässigen.
• CSS Hacks
  Vorteil:
  + Es wird keine zusätzliche CSS Datei benötigt
  Nachteil:
  – man hat nicht standard komformen Code im Stylesheet

Vor einiger Zeit bin ich auf eine interessante Alternative gestoßen:

Klassen im Body Tag

Man fügt im Body Tag weitere Klassen hinzu, welche Informationen über den aktuellen Browser enthalten. Für diese Vorgehensweise habe ich zwei ansetze gefunden, welche je nach dem, welche Technologie man verwendet seine Vor- und Nachteile haben:

• Per Conditional Comments

  
  
  
  
  
    
  ...
  ...
  

• per Jquery
  Dieses Pulgin fügt mittels jQuery weitere body Klassen hinzu

Durch diese kleine Auflistung sieht man, dass man mehrere Möglichkeiten hat, sich das Leben als Webentwickler etwas zu erleichtern.

Viele Grüße
Euer G&Z Team

1. openSUSE installieren

   Die Installation Starten und die Installationsanweisungen folgen. Hierbei kann man die Standardeinstellungen beibehalten. Je nach Größe der Festplatte würde ich empfehlen die sda3 auf /srv/ zu mounten , da in diesen Verzeichnis die meisten Files der Services gespeichert werden.

2. MySQL installieren

   ### Service installieren ###
   yast2 -i mysql mysql-client mysql-community-server
   # sorgen, dass der Service beim nächsten Neustart gestartet wird
   chkconfig --add mysql
   # Service sicher konfigurieren -> folgenden Befehl eingeben und Fragen beantworten
   mysql_secure_installation
   # Service starten
   /etc/init.d/mysql start
   # config bearbeiten
   vi /etc/my.cnf
   # Logfile einsehen
   tail -f /var/log/mysql/mysqld.log

3. Apache installieren

   ### Service installieren ###
   yast2 -i apache2
   # sorgen, dass der Service beim nächsten Neustart gestartet wird
   chkconfig --add apache2
   # weitere packages installieren
   yast2 -i apache2-mod_php5 php5-mysql php5-bcmath php5-bz2 php5-calendar php5-ctype php5-curl php5-dom php5-ftp php5-gd php5-gettext php5-gmp php5-iconv php5-imap php5-ldap php5-mbstring php5-mcrypt php5-odbc php5-openssl php5-pcntl php5-pgsql php5-posix php5-shmop php5-snmp php5-soap php5-sockets php5-sqlite php5-sysvsem php5-tokenizer php5-wddx php5-xmlrpc php5-xsl php5-zlib php5-exif php5-fastcgi php5-pear php5-sysvmsg php5-sysvshm
   # Service starten
   /etc/init.d/apache2 start
   
   # Home Verzeichnis des Webservice
   cd /srv/www/htdocs/
   # config bearbeiten
   vi /etc/apache2/httpd.conf
   # Logfile einsehen
   tail -f /var/log/apache2/error_log

4. Weitere Libs hinzufügen

   ### Service installieren ###
   yast2 -i findutils readline libgcc glibc-devel findutils-locate gcc flex lynx compat-readline4 db-devel wget gcc-c++ make vim telnet cron iptables iputils man man-pages mysql mysql-client perl-DBD-mysql perl-DBI perl-Data-ShowTable libmysqlclient-devel
   # Bei 64 Bit Systeme (wirklich nur bei 64 Bit Systeme)
   cd /usr/lib
   ln -s /usr/lib64/libssl.a libssl.a
   ln -s /usr/lib64/libssl.so libssl.so

5. phpMyAdmin installieren

   ### Service installieren ###
   zypper install http://download.opensuse.org/repositories/server:/php:/applications/openSUSE_11.3/noarch/phpMyAdmin-3.3.4-1.1.noarch.rpm

   Das Admin Interface ist nun unter folgender URl erreichbar http://DOMAIN/phpMyAdmin/

6. SVN

   ### Service installieren ###
   yast2 -> subversion subversion-server
   # Repo-Ordner anlegen
   mkdir /repos
   # Repo Datenbank anlegen
   svnadmin create /svn/REPO
   # htpasswd2 File und ersten User anlegen
   htpasswd2 -cm /svn/REPO/passwdfile
   # weitere user anlegen (-c Parameter entfällt, dieser is für das Erstellen des htpasswd2 zuständig)
   htpasswd2 -m /svn/REPO/passwdfile

   Apache Module aktivieren

   ### Datei öffnen ###
   vi /etc/sysconfig/apache2

   Beim Punkt APACHE_MODULES=”…” die folgende Module hinzufügen. Diese sind dav, dav_svn und authz_svn, die hier Leerzeichen-separiert eingetragen werden (dav dav_svn authz_svn).

   http.conf um die Location erweitern

   ### Datei öffnen ###
   vi /etc/apache2/httpd.conf

   Hie folgende Zeilen hinzufügen (jeweils für jedes Repo)

   <Location /svn/REPO>
     DAV svn
     SVNPath /srv/svn/
     AuthType Basic
     AuthName .Repositories.
     AuthUserFile /srv/svn/REPO/passwdfile
     Require valid-user
   </Location>

   Apache neustarten

   /etc/init.d/apache2 restart

   Repo aufrufen
   http://DOMAIN/svn/REPO

   Windows SVN Clients

   • http://ankhsvn.open.collab.net/
   • http://tortoisesvn.net/downloads

Viele Grüße
Euer G&Z Team