Neben technischen Anpassungen am Google Analytics Code sind auch gewisse vertragliche Zusatzvereinbarungen mit Google notwendig, um hier deutschem bzw. europäischem Datenschutzrecht zu entsprechen.

Mit dieser Thematik sollte sich daher jeder Webseitenbetreiber sowie Webdesigner beschäftigen. Gerade für Webdesigner und Agenturen ist das Thema brisant, denn diese können durchaus für die durchgeführte Integration auf der Kundenwebseite haftbar gemacht werden.

In diesem Artikel sollen nun möglichst alle Aspekte der datenschutzkonformen und rechtssicheren Integration von Google Analytics beleuchtet werden. Weiterhin stellen wir für alle WordPress-Nutzer mit „Google Analytics Germanized“ ein einfaches Plugin zur technisch datenschutzkonformen integration zur Verfügung.

1. Vertrag zur Auftragsdatenverarbeitung

Es mag für viele nun vielleicht absurd klingen, aber es ist leider notwendig mit Google einen schriftlichen Vertrag zur Auftragsdatenverarbeitung zu schließen.

Nach Meinung der Aufsichtsbehörden sind Betreiber von Webseiten bzw. konkret die Nutzer von Google Analytics Auftraggeber von Datenverarbeitungsleistungen, welche durch Google als Auftragnehmer erfolgen.

In diesem Kontext ist daher ein schriftlicher Vertrag über die Auftragsdatenverarbeitung zwischen dem Betreiber der Webseite und Google notwendig.

Seitens Google wird zu diesem Zweck eine entsprechende Vertragsvorlage zur Verfügung gestellt, welche mit den Aufsichtsbehörden abgestimmt ist.

Download als PDF: Vertrag zur Auftragsdatenverarbeitung

Der Vertrag muss ausgefüllt via Post an die Europa-Zentrale von Google gesendet werden, welche ihren Sitz in Dublin (Irland) hat.

Auf der ersten Seite der PDF-Datei werden alle relevanten Informationen zum Ausfüllen des Dokumentes erklärt.

2. Zusatz zur Datenverarbeitung

Neben dem schriftlichen Vertrag sollte auch im Google Analytics Konto, in der Kontoverwaltung, dem Punkt „Zusatz zur Datenverarbeitung“ zugestimmt werden.

Bei neuen Google Analytics Konten wird diese Zustimmung in der Regel mit der Kontoeröffnung erteilt. Bei älteren Analytics Konten muss dieser Zusatzvereinbarung  noch gesondert zugestimmt werden.

Zu finden ist der Bereich in Google Analytics unter:
Verwaltung (links unten im Hauptmenü) > Kontoeinstellungen (linke Spalte)
In den Kontoeinstellungen ist am Ende dann folgender Bereich zu finden:

Zusatz zur Datenverarbeitung
Wenn Ihr Unternehmen in einem Mitgliedsstaat des europäischen Wirtschaftsraums oder der Schweiz ansässig ist oder Sie dem räumlichen Geltungsbereich der EU-Datenschutz-Grundverordnung unterliegen, können Sie den Datenverarbeitungsbedingungen von Google Anzeigen unter der Voraussetzung zustimmen, dass Sie einen Direktkundenvertrag mit Google zur Verwendung von Google Analytics abgeschlossen haben. Weitere Informationen

3. IP-Adressen anonymisieren – Anonymize IP

Um in Google Analytics die anonymisierung von IP-Adressen zu gewährleisten ist eine Modifikation des Google Analytics Codes notwendig.

Da es für Google Analytics mittlerweile verschiedene Tacking-Codes gibt, zeige ich im folgenden die wichtigsten Codes. Bitte wähle die Anpassung entsprechend deines Tracking-Codes.

Wenn du Google Analytics jetzt neu einbindest, wird in der Regel der Google Site Tag verwendet, dabei handelt es sich um die aktuellste Form der Google Analytics Integration.

Falls du WordPress verwendest kannst du unser Plugin zur rechtssicheren Integration von Google Analytics verwenden. Eine entsprechende Anleitung inkl. Video findest du weiter unten.

In den folgenden Beispielen ist „UA-XXXXXXX-X“ jeweils durch die eigene Analytics ID zu ersetzen.

Aktuell: Allgemeines Website-Tag / Google Site Tag

Der Code für die Integration von Anonymize IP in den Google Site Tag:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-XXXXXXX-X', { 'anonymize_ip': true });
</script>

Universal Analytics

Der Code für die Integration von Anonymize IP in den Universal Analytics Code:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-X', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');

</script>

Klassisches Analytics

Der Code für die Integration von Anonymize IP in den klassischen Analytics Code:

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

4. Widerspruchsrecht und Datenschutzerklärung

Wer Google Analytics verwendet, muss darauf zum einen in der Datenschutzerklärung hinweisen und darüberhinaus auch Möglichkeiten für einen Widerspruch (Opt-out) gegen die Erfassung mittels Google Analytics bieten.

Dieser Ausschnitt stammt aus dem Datenschutz-Generator von eRecht24. Ich möchte jedem Leser empfehlen eine individuelle Datenschutzerklärung + Impressum direkt über eRecht24 zu generieren. Der folgende Auszug soll vor allem als Beispiel dienen, nicht als Vorlage zum kopieren.

Ein solcher Hinweis in der Datenschutzerklärung kann z.B. wie folgt aussehen:

Google Analytics

Diese Website nutzt Funktionen des Webanalysedienstes Google Analytics. Anbieter ist die Google Inc., 1600 Amphitheatre Parkway Mountain View, CA 94043, USA.

Google Analytics verwendet so genannte „Cookies“. Das sind Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website durch Sie ermöglichen. Die durch den Cookie erzeugten Informationen über Ihre Benutzung dieser Website werden in der Regel an einen Server von Google in den USA übertragen und dort gespeichert.

IP-Anonymisierung

Wir haben auf dieser Webseite die Funktion IP-Anonymisierung aktiviert. Dadurch wird Ihre IP-Adresse von Google innerhalb von Mitgliedstaaten der Europäischen Union oder in anderen Vertragsstaaten des Abkommens über den Europäischen Wirtschaftsraum vor der Übermittlung in die USA gekürzt. Nur in Ausnahmefällen wird die volle IP-Adresse an einen Server von Google in den USA übertragen und dort gekürzt. Im Auftrag des Betreibers dieser Website wird Google diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports über die Websiteaktivitäten zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen gegenüber dem Websitebetreiber zu erbringen. Die im Rahmen von Google Analytics von Ihrem Browser übermittelte IP-Adresse wird nicht mit anderen Daten von Google zusammengeführt.

Browser Plugin

Sie können die Speicherung der Cookies durch eine entsprechende Einstellung Ihrer Browser-Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website vollumfänglich werden nutzen können. Sie können darüber hinaus die Erfassung der durch den Cookie erzeugten und auf Ihre Nutzung der Website bezogenen Daten (inkl. Ihrer IP-Adresse) an Google sowie die Verarbeitung dieser Daten durch Google verhindern, indem Sie das unter dem folgenden Link verfügbare Browser-Plugin herunterladen und installieren: https://tools.google.com/dlpage/gaoptout?hl=de

Widerspruch gegen Datenerfassung

Sie können die Erfassung Ihrer Daten durch Google Analytics verhindern, indem Sie auf folgenden Link klicken. Es wird ein Opt-Out-Cookie gesetzt, der die Erfassung Ihrer Daten bei zukünftigen Besuchen dieser Website verhindert: Google Analytics deaktivieren (hier JavaScript Funktion gaOptout() hinterlegen)

Mehr Informationen zum Umgang mit Nutzerdaten bei Google Analytics finden Sie in der Datenschutzerklärung von Google: https://support.google.com/analytics/answer/6004245?hl=de

Der Eintrag für die Datenschutzerklärung verweist zum einen auf die Nutzung von Google Analytics und auf ein von Google gestelltes Browser-Plugin um Google Analytics zu deaktivieren, wenn man davon nicht erfasst werden möchte.

gaOptout() Funktion

Da das von Google zur Verfügung gestellte Plugin jedoch nicht ausreicht, muss jeder Webseitenbetreiber mittels eines kleinen JavaScriptes sicherstellen, dass Google Analytics auch über einen einfachen Link deaktiviert werden kann.

Im Hintergrund wird dann ein Cookie gesetzt, welcher das Tracking abschaltet bzw. dafür sorgt, dass dieses nicht ausführt wird.

Wer unser Google Analytics WordPress Plugin zur datenschutzkonformen Integration verwendet, kann in der Datenschutzerklärung einfach folgenden Shortcode verwenden:

[ ga-optout text="Google Analytics deaktivieren" ]

Dieser Shortcode integriert den entsprechenden Link sowie die notwendigen Funktionen zum deaktivieren von Google Analytics.

Wer die Funktion selber integrieren möchte, arbeitet mit folgendem JavaScript Code und ruft die Funktion „gaOptout()“ dann über einen entsprechenden Link auf (Nutzer des WordPress Plugins müssen diese JavaScripte nicht integrieren):

<script type="text/javascript">
var gaProperty = 'UA-XXXXXXX-X';
var disableStr = 'ga-disable-' + gaProperty;

if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
}

function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = true;
}
</script>

Google Analytics datenschutzkonform in WordPress einbinden – ganz einfach mit unserem Plugin: Google Analytics Germanized

WordPress Nutzer können Google Analytics ganz einfach über unser kostenloses WordPress-Plugin Google Analytics Germanized integrieren.

Dieses ist so voreingestellt, dass es die IP-Adressen anonymisiert und stellt auch einen Link inkl. Funktionen für einen Opt-Out mittels Shortcode zur Verfügung.

Im folgenden Video zeige ich dir die notwendigen Integrationsschritte:

Bis zum 05.11.2017 gibt es den Kurs noch mit einem bombastischen Einführungsrabatt von über 50%. Dabei hast du lebenslangen Zugriff auf den Kurs, die dortigen Inhalte und auf unseren Fragen & Antworten Bereich, in welchem wir dir bei Fragen auch persönlich zur Seite stehen.

Weiterhin kommt der Kurs mit unserer Aktualitätsgarantie! Bootstrap 4 ist derzeit noch in der Betaphase, sollte sich hier bis zur finalen Version noch etwas ändern, aktualisieren wir den Kurs kostenlos, sodass du sicher sein kannst, dass du nur die neusten und aktuellsten Infos zu Bootstrap 4 bekommst.

Jetzt über 50% Rabatt sichern

Sicher dir jetzt über 50% Rabatt auf den Online-Kurs mit lebenslangem Zugriff:

Jetzt Rabatt sichern und kaufen

Der Rabatt gilt nur bis zum 05.11.2017 23:59 Uhr

Der große Bootstrap 4 Komplettkurs

Möchtest du lernen, großartige Webseiten mit Bootstrap 4 zu erstellen? In diesem Komplettkurs lernst du praxisnah die Schritt-für-Schritt-Umsetzung einer vollständigen Webseite mit Bootstrap 4 und allen dazugehörigen Komponenten. Dabei zeigen wir dir nur das, was du brauchst, um schnell Ergebnisse zu erzielen und sofort loszulegen.

Wir erklären dir alle Funktionen und die gesamte Umsetzung an einer modernen Beispielwebseite, von der du natürlich auch den gesamten Code für deine eigene Übung erhältst. Du lernst die Umsetzung von der Photoshop- / PSD-Datei hin zur fertigen Webseite auf Bootstrap-Basis.

Du lernst also den kompletten Erstellungsprozess mit vielen Tipps und Tricks aus dem Agenturalltag. Wir arbeiten bereits seit über 5 Jahren erfolgreich mit Bootstrap im Agentureinsatz und möchten dir unsere Erfahrungen mit diesem Kurs praxisnah und mit vielen Beispielen näherbringen.

Diese Beipsielwebseite setzen wir gemeinsam komplett und von Null an Schritt für Schritt um:

Das Rezept für die erfolgreiche Webseite mit Bootstrap

Ein Frontend-Framework ist dann gut und erfolgreich, wenn man der Webseite nicht mehr sofort ansieht, dass sie auf einem Framework basiert. Vielleicht kennst du sogar die eine oder andere Webseite, bei der du sofort Bootstrap als Basis erkennst?

Bei uns lernst du, Webseiten mit Bootstrap so zu erstellen, dass der Besucher diese Grundlage nicht direkt erkennt. Wir werden gemeinsam eine umfangreiche Beispielwebseite umsetzen, die vollständig auf Bootstrap basiert. Aber genau das werden wir gut kaschieren und die Seite vollständig individualisieren!

Los geht’s mit den Grundlagen

Wir zeigen dir die Grundlagen von Bootstrap. Lerne das flexible Grid und die Helper kennen. Weiterhin lernst du die Dateistruktur kennen und welche Dateien für welchen Anwendungsfall verwendet werden können.

Die komplette Umsetzung Schritt für Schritt – von der PSD-Datei zur fertigen Webseite!

In unserem Kurs lassen wir keinen Schritt aus! Das beginnt bereits bei dem Design der geplanten Webseite. Wir haben eine moderne Webseite in Photoshop vorbereitet und setzen diese aus der PSD-Datei heraus um. Du lernst den kompletten Umsetzungsprozess aus einer Designvorlage heraus.

Dabei lernst du also nicht nur die Verwendung der Bootstrap-Komponenten, sondern auch deren Individualisierung nach Kundenwunsch und eigenem Design.

Alle Komponenten von Bootstrap.

Bootstrap ist eines der umfangreichsten Frontend-Frameworks unserer Zeit. Wir zeigen dir alle verfügbaren Komponenten, die Bootstrap zur Verfügung stellt, mit entsprechenden Beispielen.

Entwickle lebendige Webseiten

Bootstrap bietet viele Komponenten, die der Webseite eine gewisse Dynamik und Leben einhauchen. Du erfährst bei uns, wie du diese sinnvoll nutzen kannst und welche Anwendungsfälle damit umgesetzt werden können.

Bootstrap und jQuery

Um dem Kurs die sprichwörtliche Krone aufzusetzen, lernst du zum Schluss die Königsdisziplin: Bootstrap-Methoden und jQuery. Dank der jQuery-Implementierung kannst du jede Bootstrap-Komponente vollständig individualisieren. Eigene Steuerelemente für das Carousel / die Slideshow oder die Verbindung von Komponenten – dank der jQuery-Funktionen alles kein Problem.

Wäre es nicht cool, wenn die Webseite automatisch Informationen über die Öffnungszeiten anzeigt, wenn ein Nutzer diese über ein Kontaktformular mit freier Texteingabe anfragen möchte? Ja, das wäre definitiv ein cooles Beispiel, und wir zeigen dir, wie etwas in der Art realisiert werden kann.

Bootstrap Referenzkarte

Wir haben für dich eine übersichtliche Referenzkarte mit wichtigen Helper-Klassen und Schnellreferenz zu wichtigen Layout-Bestandteilen wie z. B. dem Grid-System erstellt. Diese mehrseitige PDF-Referenzkarte kannst du entweder ausdrucken oder als digitale Gedankenstütze verwenden.

Jetzt Rabatt sichern und kaufen

Der Rabatt gilt nur bis zum 05.11.2017 23:59 Uhr

Dieser Online-Kurs beinhaltet Videomaterial mit über 10 Stunden Spieldauer, aufgeteilt auf 11 Abschnitte und rund 60 Lektionen. Der Kurs richtet sich vor allem an Anfänger im Bereich WordPress. Vorkenntnisse oder gar Programmierkenntnisse sind nicht erforderlich.

Inhalte des Online-Kurses

Der Online-Kurs verbindet das Beste aus zwei Welten, nämlich die Video-Trainings mit den Kursen und Seminaren. Im Online-Kurs befinden sich über 10 Stunden Video-Material, welches frei und nach eigener Geschwindigkeit angesehen und verinnerlicht werden kann.

Zusätzlich können alle Teilnehmer des Kurses untereinander kommunizieren und natürlich jederzeit Fragen an mich persönlich stellen. Damit haben wir die Vorteile eines Seminars mit dem kommunikativen Austausch aller Teilnehmer untereinander sowie der Flexibilität eines Video-Trainings für die Lerninhalte.

Das beste am Online-Kurs: Lebenslanger Zugriff auf alle Inhalte und auch spätere Erweiterungen sowie Zugriff zu Live-Webinaren.

Jetzt 40% Rabatt sichern

Der Rabatt gilt nur bis zum 18.08.2017 23:59 Uhr

1. Einleitung
Zum Start bekommst du grundlegende Informationen zum Kurs, zu meiner Person und einige WordPress Basics, die du unbedingt wissen solltest.

2. Vorbereitungen und Installation
So bestellst und konfigurierst du deinen Webspace und installierst darauf WordPress. Dabei führe ich dich Schritt für Schritt durch die Installation.

3. Die WordPress Oberfläche und die Funktionen
Du lernst alle Basics, um WordPress bedienen zu können und um für die tägliche Arbeit gerüstet zu sein.

4. Themes
Ich erkläre dir was Themes sind, zeige dir die besten Bezugsquellen und wir installieren gemeinsam eines der meistgenutzten Premium-Themes für WordPress.

5. Webseite mit Leedeo erstellen
Das WordPress-Premium-Theme Leedeo bekommst du gratis mit diesem Kurs. Ich erkläre dir wie du es installierst und bedienst sowie die wichtigsten Funktionen.

6. Plugins & SEO Wissen
Ich zeige dir die 8 wichtigsten Plugins um WordPress zu erweitern und vermittele dir grundsätzliches WordPress SEO Wissen, um bei Google & Co. ganz vorne zu stehen.

7. Backups und Sicherheit
Du lernst wie du Backups für den Notfall erstellst, wie du wichtige Updates installierst und wie du deine WordPress Webseite sicher gegen Angriffe schützt.

8. Vernetze Dich
Auch nach Abschluss des Online-Kurses lasse ich dich nicht allein. Du bist jetzt Teil einer Gemeinschaft und kannst dich mit anderen Kursteilnehmern (Bloggern und Unternehmern) sowie mir vernetzen und in Kontakt bleiben.

Abschlussbescheinigung
Jeder Kursteilnehmer erhält eine Abschlussbescheinigung. Nach Abschluss aller Lektionen, kannst du diese als PDF herunterladen.

Jetzt den Online-Kurs mit 40% Rabatt sichern

Für alle Leser des Webdesign-Podcast möchte ich den Online-Kurs mit einem besonderen Rabatt anbieten, welcher exklusiv nur hier veröffentlicht wird.

Du erhältst beim Kauf des Kurses ganze 40% Rabatt und lebenslangen Zugriff auf die jetzigen Inhalte, sowie alle spätere Ergänzungen und Erweiterungen.

Jetzt 40% Rabatt sichern

Der Rabatt gilt nur bis zum 18.08.2017 23:59 Uhr

30-Minuten des Kurses jetzt schon ansehen

Möchtest du gerne einen ersten Einblick in den Kurs? Hier findest du eines der ersten Videos, mit welchem du die Bestellung eines Webspace sowie die WordPress Installation kennenlernst.

Der neue Release ist vom Umfang her eher klein, bietet jedoch einige Neuerungen, bei denen vor allem Autoren hellhörig werden dürften. WordPress 4.8 ist im großen und ganzen ein „Widget-Update“.

Die neue WordPress Version glänzt mit insgesamt vier neuen Widgets. Alle vier werden gerade bei Autoren sicher sehr gut ankommen, da die entsprechenden Funktionen doch häufiger nachgefragt werden.

Es gibt nun also neue Widgets für Bilder, Videos, Audio-Files und ein Widget mit dem kompletten WYSIWYG Editor von WordPress.

Diese neuen Widgets stellen auch die wichtigsten Neuerungen in WordPress 4.8 dar.

Endlich bessere Links

Nicht unbedingt eine großartige Neuerung, aber trotzdem super und auch hier mit hohem Wert für alle Autoren.

Es gab in den vorherigen WordPress Versionen immer dieses etwas nervige Verhalten, dass ein Text der direkt hinter einem Link eingegeben wurde ebenfalls zum Link wird. Genau dieses Verhalten ist nun geändert und man kann gefahrlos Texte hinter Links erweitern und verändern ohne das diese auch direkt zu einem Link werden.

Update kann problemlos installiert werden

Da das Update unter der Haube keine all zu umfangreichen Änderungen mit sich bringt, dürfte ein Update in vielen Fällen problemlos möglich sein.

Es könnte allerdings sein, dass die Darstellung der neuen Widgets gerade in älteren Themes noch nicht ganz ideal ist. Dieser Umstand sollte sich allerdings via Theme Update oder eigenen Nachbesserungen einfach umgehen lassen, falls es Probleme gibt.

Viel Erfolg mit WordPress 4.8.

Der Dialog für Bilder fragt in WordPress nach jedem Upload nach einem entsprechenden Alternativtext. In der Regel ist es daher meistens ein Versäumnis der Autoren, wenn hier Angaben nicht gesetzt werden oder in der Vergangenheit gesetzt wurden.

Auch wenn die Probleme nicht suchmaschinenfreundlicher Bilder und damit nicht optimierter Alternativtexte und Titel oftmals Versäumnisse der Nutzer sind oder Attribute einfach aus Unwissenheit in der Vergangenheit nicht gesetzt wurden und daher leicht durch entsprechende Aufmerksamkeit und Nachbesserung gelöst werden könnten,  gibt es hierfür jedoch elegantere Lösungen.

Suchmaschinenfreundliche Bilder für WordPress

Ich habe in den vergangenen Wochen an einigen größeren Portalen auf WordPress Basis gearbeitet. Bei diesen Portalen waren teilweise „Alt-Attribute“ gesetzt, dafür jedoch keine „Title“ oder genau umgekehrt.

In jedem Fall wäre ein manuelles Nachbessern für mehrere tausend Artikel und Seiten eine kaum praktikable Lösung gewesen. Weiterhin musste auch für künftige Artikel sichergestellt werden, dass entsprechende „Alt“ und „Title“ Attribute korrekt gesetzt werden.

Es gibt für WordPress bereits Plugins, welche sich dem automatischen Setzen von „Alt“ und „Title“ Tags annehmen. Diese haben für den obigen Fall allerdings keine ausreichenden Einstellungsmöglichkeiten. Entweder können Werte nach einem bestimmten Schema  überschrieben oder das „Alt“ Attribut automatisch in den „Title“ geschrieben werden. Hierbei wird jedoch nicht berücksichtigt, wenn es bereits einen „Title“ gibt. Es wird also hart überschrieben.

Für den oben genannten Fall und ganz allgemein ist dieses Verhalten für das automatische Befüllen von „Alt“ und „Title“ Attribut jedoch alles andere als optimal.

Alt und Title flexibel und automatisch setzen

Meine Vorstellung für eine optimale Lösung musste wesentlich flexibler sein. Wenn ein „Alt“ Attribut vorhanden ist soll daraus auch der „Title“ gebildet werden, sofern dieser leer ist. Im umgekehrten Fall, also leeres „Alt“ Attribut und gesetzter „Title“, sollte auch die automatische Befüllung umgekehrt funktionieren (Sync: Alt <=> Title gleichen sich gegenseitig ab).

Wenn beide Werte gesetzt sind, bleiben diese wie sie sind. Bei komplett fehlenden Werten sollen diese automatisch generiert werden.

Da es genau diese flexible Lösung bisher nicht gab und einige Plugins, welche zumindest in die richtige Richtung gingen aber stark veraltet waren (über 2 Jahre ohne Updates oder Pflege), habe ich ein eigenes Plugin entwickelt, welches die oben genannten flexiblen Ansprüche erfüllt und noch einige weitere Optionen bietet.

Plugin: PB SEO Friendly Images für WordPress

Meine Lösung für automatische und flexible „Alt“ sowie „Title“ Attribute für Bilder habe ich in Form eines WordPress Plugins als Open Source Version freigegeben.

Ich selber nutze das Plugin mittlerweile auf allen eigenen Webseiten und Portalen sowie auf den meisten Kundenwebseiten. Über diese Lösung ist sichergestellt, dass es immer optimale „Alt“ und „Title“ Attribute und damit suchmaschinenfreundliche Bilder für WordPress gibt, selbst wenn künftig oder in der Vergangenheit einige Attribute vergessen oder möglicherweise vernachlässigt wurden.

Die Feature im Überblick

• Sync: Synchronisation zwischen „Alt“ und „Title“ Attribut in beiden Richtungen.
• Override: Es besteht die Möglichkeit „Alt“ und/oder „Title“ nach einem selbst zu definierenden Benennungsschema zu überschreiben.
• Flexible Muster: Bilder können bei fehlenden Attributen flexibel durch Benennungsschemen ausgezeichnet werden, so wie dies mit dem Überschreiben der Fall ist.
• Für alle Bilder: Das Plugin greift für alle Bilder innerhalb von Seiten, Artikeln, Custom-Post-Types, Artikelbilder und auch Third-Party-Plugins wie z.B. AdvancedCustomFields.
• Lazy Load: Die Pro-Version des Plugins bietet mit unveil.js einen extrem schnellen Lazy Load, welcher aufgrund seiner Struktur und entsprechenden „noscript“ Alternativen ebenfalls sehr suchmaschinenfreundlich ist. Der Lazy Load greift, wie oben beschrieben, auch für alle Bilder.

Das Plugin ist kostenlos im WordPress Plugin Repository zu haben und funktioniert ab WordPress 3.8. Wer die Entwicklung unterstützen möchte und Interesse an ein paar mehr Funktionen hat, kann zur PB SEO Friendly Images Pro-Version greifen.

PB SEO Friendly Images auf WordPress.org

Die neue WordPress Version 4.7 beinhaltet ein paar interessante Neuerungen und wie üblich diverse Optimierungen und Sicherheitspatches. In diesem Artikel und Video möchte ich dir alle wichtigen Neuerungen vorstellen.

Twenty Seventeen

Die wohl größte und offensichtlichste Neuerung ist das neue Standard-Theme mit dem Namen „Twenty Seventeen“. Das neue Theme ist, wie seine Vorgänger auch, relativ schlicht, einfach und mehrheitlich verwendbar gehalten.

Das Theme verwendet die neue Video-Header Funktion von WordPress, womit Twenty Seventeen WordPress 4.7 voraussetzt und für die Verwendung alle Funktionen nicht mit älteren Versionen kompatibel ist.

Twenty Seventeen soll speziell für Business-Seiten und Showcases geeignet sein.

Eine Demo des neuen Themes ist hier zu finden: https://wordpress.org/themes/twentyseventeen/

Video-Vorstellung zu WordPress 4.7

Kurz und knapp alle Infos zu WordPress 4.7 im Video:

Weitere Neuerungen in WordPress 4.7

Im folgenden eine kurze Übersicht über die interessantesten neuen Funktionen in WordPress 4.7:

• REST API Endpoint ist final in den Core implementiert. WordPress 4.7 unterstützt jetzt REST API Endpunkte für Beiträge, Kommentare, Benutzer, Metadaten und Einstellungen. Die REST API ermöglicht den Fernzugriff- und Verwaltung deiner WordPress Installation und vereinheitlicht diese. Weiterhin ist ein allgemeiner Datenaustausch auch für interne Komponente wie Themes oder Plugins möglich.
• Themes können mit Starter-Content ausgestattet werden, um eine bessere Demo und Hilfe bei der Einrichtung eines neuen Themes darzustellen.
• Shortcuts im Theme-Customizer: Neben Elementen, welche im Theme-Customizer bearbeitet werden können, taucht ein kleines Icon zur direkten Bearbeitung auf.

• Video-Header: WordPress Themes können nun direkt aus WordPress und der Customization API Video-Header unterstützen. Die neuen Video-Header erweitern den bestehenden Custom Header Bereich. Die Videos werden per Standard geloopt und ohne Ton abgespielt.
• WordPress Navigation verbessert: Der Bereich rund um die Navigation wurde verbessert. In der neuen Version lassen sich Seiten direkt aus dem Navigations- / Menübereich erstellen. Somit können Strukturen für die Webseite direkt und wesentlich schneller als bisher aus dem Menübereich erstellt werden.

• Custom CSS Bereich direkt in WordPress, es ist kein Drittanbieter Plugin mehr dafür notwendig.

• Benutzer können ihre bevorzugte Sprache für das Backend direkt in ihrem eigenen Profil ändern.
• Die WordPress Mediathek unterstützt nun auch Vorschaubilder für PDF-Dateien, statt dem bisherigen einheitlichen Icon.
• Änderungen im Editor: Menü mit Formatierungen wie Überschriften und Absätzen wandert in die erste Zeile des Editors. Weiterhin werden im Tooltip zu jedem Element im Editor die Shortcuts angezeigt.

Zu den obigen Punkten gibt es noch diverse Neuerungen für Entwickler und auch Anpassungen unter der Haube. Eine vollständige Liste gibt es im WordPress Codex unter diesem Link.

Wichtig: Checkt vor einem Update des WordPress Cores erst einmal eure Plugin-Updates. Für ein paar Plugins, darunter auch das beliebte WordPress Jetpack, gibt es Patches, welche Probleme mit WordPress 4.7 beheben.

Vom JetPack Plugin sollte die Version 4.4.2 installiert werden, welche folgende Release-Notes aufführt:

This release improves Jetpack compatibility with WordPress 4.7.

Compatibility changes

• Custom CSS: Made the Custom CSS feature of Jetpack compatible with the CSS Customizer editor in WordPress 4.7.
• Sync: improved compatibility with the wp-missed-schedule plugin.

Bug fixes

• Featured Content: made sure there is no infinite loop when removing the featured tag from the tag list.
• Admin: made sure help tabs are not being hidden.
• Admin: made At a Glance page work nicely when there is no backup data yet.
• Sync: now making sure that needed classes are loaded, preventing errors.
• Sync: cleared out unneeded scheduled jobs.

Das WordPress Plugin setzt dabei auf das gleichnamige jQuery Plugin, welches ebenfalls schon hier im Blog vorgestellt wurde.

Mittlerweile habe ich das WordPress Plugin komplett überarbeitet und um hilfreiche und sinnvolle Funktionen erweitert.

So ist es nun zum Beispiel nicht mehr notwendig, dass jede E-Mail Adresse mit dem Shortcode des Plugins in die Seiten eingefügt wird. Der mit Version 2.0 eingeführte Automatikmodus erkennt E-Mail Adressen im Text und maskiert diese.

Der neue Automatikmodus ist dabei nicht nur in der Lage reine Plain-Text E-Mail Adressen in maskierte Links umzuwandeln, sondern kann ebenfalls bereits bestehende und von WordPress erzeugte E-Mails Links nachträglich maskieren.

Dank dieser neuen Funktion ist der Aufwand bei der Integration nun sehr gering, da im Prinzip nach der Installation und Aktivierung der Funktion keine händischen Anpassungen oder Shortcodes mehr notwendig sind.

Für die Verwendung auf Theme-Ebene, also im Template-Code, kann natürlich weiterhin der bewährte Shortcode verwendet werden:

name∂example.com

[mailcrypt email="name∂example.com" href="Alternative Kontaktseite (URL)" title="Title Attribut des A-Tags"] Linktext für E-Mail Link

Selbstverständlich steht der Shortcode überall in WordPress zur Verfügung und kann als Alternative zu oder auch zeitgleich neben dem Automatikmodus verwendet werden.

Dabei stehen folgende Parameter zur Verfügung:

• email = Pflicht
• href = Optional
• title = Optional

Wie funktioniert PB MailCrypt

PB MailCrypt basiert auf dem gleichnamigen jQuery Plugin MailCrypt. Der PHP-Part des Plugins maskiert den E-Mail Link mit Tags und ersetzt das @-Zeichen durch ein sehr ähnliches Zeichen.

Das JavaScript, welches von dem Plugin ebenfalls automatisch eingebunden wird, erzeugt dann einen entsprechenden E-Mail „mailto:“ Link und fügt das @-Zeichen wieder in den sichtbaren Teil des Links ein.

So ist die E-Mail Adresse im Quelltext und für Spambots nicht direkt zu erkennen. Besucher jedoch sehen die E-Mail Adressen wie gehabt ohne Einschränkungen. Sollte ein Nutzer die Webseite ohne JavaScript aufrufen, kann als Alternative auf ein Kontaktformular oder eine Informationsseite verlinkt werden. Das @-Zeichen wird dabei durch ein ähnliches Zeichen nachgestellt, für eine vollständige Anzeige und Funktion wird jedoch JavaScript im Browser benötigt.

MailCrypt installieren und die E-Mail Verschlüsselung einrichten

PB MailCrypt – AntiSpam E-Mail Encryption lässt sich am einfachsten direkt über WordPress installieren. Dazu wird im Administrationsbereich im Menü Plugins der Unterpunkt Installieren aufgerufen.

Im Suchfeld oben rechts kann dann am einfachsten direkt nach dem Plugin gesucht werden: „PB MailCrypt“.

Ist das Plugin gefunden, muss dieses nur noch installiert werden. Im darauffolgenden Fenster kann das Plugin dann auch direkt aktiviert werden.

Nach der Aktivierung leitet WordPress automatisch zur Übersicht über alle installierten Plugins weiter.

Von dort können dann auch direkt die Einstellungen für PB MailCrypt aufgerufen werden.

In den Einstellungen kann nun der oben bereits beschriebene Automatikmodus aktiviert oder der Shortcode für die spätere Verwendung kopiert werden.

Ebenso wirst du erfahren, wie man WordPress von Grund auf installiert und mit einem Theme einrichtet. Selbstverständlich wirst du diese Schritte ohne Entwicklerhintergrund oder anderweitiges tieferes technisches Grundwissen durchführen können.

Dieses Training bringt dir das weltweit meistverwendete Content-Management-System näher: WordPress. Über 60% aller Webseiten, deren CMS bekannt ist, nutzen WordPress zur Verwaltung der Inhalte.

Ich werde dir in diesem 6-stündigen Training alles zeigen, was du zu deinem gelungenen Einstieg in WordPress wissen musst.

Du wirst dich im Nu und von Null an, mit allen wichtigen Bereichen vertraut fühlen. Ein großer Fokus liegt hier vor allem auch auf der Verwendung von Themes, mit denen du deine Webseite ganz individuell anpassen kannst.

Was du in dem Training unter anderem lernen wirst:

• Vorbereitungen für die Verwendung von WordPress
• Funktionen des Dashboards
• Administration und Content-Management
• Umgang mit Medien
• Einrichtung und Installation von Themes
• WordPress-Backups anlegen
• Plugins einrichten und verwenden
• u.v.m.

Für wen ist dieses Training?

Die Zielgruppe dieses Trainings sind Redakteure, Autoren und Blogger sowie Verantwortliche aus den Bereichen Marketing und Öffentlichkeitsarbeit, die ohne spezielles Entwicklerwissen erfolgreich das CMS WordPress für ihre Website nutzen wollen.

Dieses Training ist optimiert für die Version 4.x von WordPress (und höher) – es ist eingeschränkt geeignet ab Version 3.5.

Auszug aus dem Video-Training WordPress für Einsteiger und Autoren: Design und Themes

In diesem Video-Training möchte ich dir zeigen, wie du in WordPress ein Theme für deine Webseite findest und wie dieses eingerichtet wird. Zusätzlich zeige ich dir alle wichtigen Funktionen des Live-Customizers.

Das komplette Video-Training „WordPress für Einsteiger und Autoren“ ist im Shop von PSD-Tutorials.de erhältlich und kostet 29,95 € als Download oder 34,95 € als DVD.

Ich wünsche dir viel Spaß mit dem Training und hoffe, dass es dir gefällt.

Gerade wenn WordPress als Content-Management-System und nicht „nur“ als Blog-System verwendet wird, sind die benutzerdefinierten Felder eine sinnvolle Erweiterung. Denn oftmals ist es nicht ausreichend die Inhalte nur in einem großen Editor speichern zu können.

In diesem Tutorial möchte ich euch die Basics der benutzerdefinierten Felder in WordPress erklären und zusätzlich zeigen, was mit Hilfe des Plugins Advanced Custom Fields noch alles möglich ist.

Wie funktionieren benutzerdefinierte Felder (Custom Fields) in WordPress

Die benutzerdefinierten Felder findet ihr direkt in der Ansicht von WordPress, in welcher ihr auch eure Artikel oder Seiten bearbeitet.

Falls der Bereich mit den benutzerdefinierten Feldern nicht von Anfang an sichtbar ist, müsst ihr diesen einblenden. Drückt dazu auf den „Optionen“ Button in der oberen rechten Ecke. In den Optionen setzt ihr nun einen Haken in der Checkbox bei „Benutzerdefinierte Felder“.

Danach sind die Felder unter dem Text-Editor zu finden. Die benutzerdefinierten Felder bestehen aus zwei Bereichen: Dem Namen und dem Wert.

Der Name identifiziert euren Wert in den meisten Fällen eindeutig. Es ist allerdings auch möglich, mehrere Werte mit dem selben Namen anzugeben. WordPress behandelt die Ausgabe in diesem Fall als Array, dieses Thema möchte ich für den einfachen Einstieg hier jedoch nicht tiefergehend beleuchten.

Namen, die im Verlauf der Nutzung schon einmal eingegeben wurden, können komfortabel aus einem Dropdown ausgewählt werden. Eine erneute Eingabe ist nicht erforderlich.

Theoretisch könnt ihr zu jedem Artikel oder jeder Seite beliebig viele Felder anlegen. Vielleicht gibt es in eurem Blog bzw. auf eurer Webseite auch bereits benutzerdefinierte Felder, die z.B. von Plugins für ihre entsprechenden Funktionen genutzt werden.

Ein Praxis-Beispiel für benutzerdefinierte Felder

Nehmen wir einmal an, ihr möchtet in eurem Blog bei bestimmten Artikeln einen Banner unter eurem Artikel anzeigen. Dann könnte diese Schaltung z.B. über die benutzerdefinierten Felder laufen.

Legt dazu bei dem gewünschten Artikel ein Feld mit dem Namen „banner“ und dem Wert „ja“ an. Statt ja könnte man natürlich auch „yes“, „true“, „1“ oder jeden anderen beliebigen Wert verwenden.

Das Feld alleine bewirkt rein gar nichts, denn dieses muss selbstverständlich noch in irgendeiner Form von eurem Theme verarbeite werden.

Für diesen Zweck gibt es die Funktion get_post_meta( $post_id, $key, $single ). Die Attribute müssen wie folgt gesetzt werden:

• $post_id: Entspricht der ID der Seite oder des Artikels, von welchem das Feld geladen werden soll. Die aktuelle ID einer Seite oder eines Artikels kann mit get_the_ID() abgerufen werden.
• $key: Steht für den Namen des benutzerdefinierten Feldes, den ihr selbst im Editor festgelegt habt (im Beispiel „banner“).
• $single: Erwartet einen booleschen Wert (true oder false). Hier könnt ihr steuern ob der Wert als String (true) oder Array zurückgeliefert wird. Letzteres ist dann sinnvoll, wenn ihr mehrere Werte / Felder mit dem selben Namen hinterlegt habt.

Um nun also unser „banner“-Feld auszulesen, benötigen wir folgende Funktion:

<?php $banner = get_post_meta( get_the_ID(), 'banner', true ); ?>

Jetzt ist in der Variable $banner der Wert gespeichert, welchen wir im WordPress Backend dem Feld zugewiesen haben. Der Rest ist mehr oder weniger nur noch Standard-Arbeit.

Wir können z.B. mit einer einfachen Abfrage prüfen, ob $banner den Wert „ja“ enthält und wenn dies der Fall ist, liefern wir das besagte Banner aus:

<?php
$banner = get_post_meta( get_the_ID(), 'banner', true );
if( $banner == 'ja' ) {
    echo '<a href="#"><img src="banner.jpg" alt="" /></a>';
}
?>

Sicher wäre es wesentlich einfacher, wenn es im Backend irgendwo eine Checkbox gäbe, mit der das Banner ein- oder ausgeschaltet werden könnte statt der Lösung mit Eintrag des Wortes „ja“. Doch genau diese Möglichkeit besteht, diese und noch vieles mehr.

Mit dem Plugin Advanced Custom Fields lassen sich unglaublich viele und auch sehr komplexe und umfangreiche individuelle Lösungen auf Basis von benutzerdefinierten Feldern entwickeln.

Die Möglichkeiten mit benutzerdefinierten Feldern und Advanced Custom Fields

Die Möglichkeiten beim Einsatz von benutzerdefinierten Feldern, vor allem in Kombination mit dem Plugin Advanced Custom Fields (zu deutsch erweiterte benutzerdefinierte Felder), sind schier unbegrenzt.

Generell lassen sich mit den Feldern bereits viele Funktionen umsetzen. Die Funktion, eigene Werte zu Inhalten zu speichern ist an sich bereits sehr wertvoll. Eine weitere, sehr hilfreiche Funktion ist die mögliche Filterung von Inhalten auf Basis der Werte in einem benutzerdefinierten Feld.

Es ist z.B. möglich über einen angepassten Query nur Inhalte anzuzeigen, die einen bestimmten Wert gesetzt haben, z.B.:

query_posts(array(
    'meta_key' => 'banner',
    'meta_value' => 'ja'
));

Weiterhin ist es möglich Vergleiche auf Basis der Felder durchzuführen, z.B. ob der Wert (erfordert entsprechend einen numerischen Wert) eines Feldes größer als 20 ist:

query_posts(array(
    'meta_key' => 'anzahl',
    'meta_value' => 20,
    'meta_compare' => '>',
    'orderby' => 'meta_value',
    'order' => 'ASC'
));

WordPress selbst bietet euch für die benutzerdefinierten Felder lediglich die Möglichkeit, einfache Texte oder Zahlen in einem Feld zu hinterlegen. Advanced Custom Fields steigert diesen Funktionsumfang um ein vielfaches.

Die Felder werden nicht nur um weitere Eingabemöglichkeiten, wie z.B. Select-Felder, URL-Felder, Checkboxen, Radio-Buttons, Bild-Uploads, Datei-Uploads, E-Mail Felder, Galerien, interne Links, Repeater uvm. erweitert, sondern es besteht auch die Möglichkeit, die Felder entsprechend zu validieren und an Bedingungen zu knüpfen.

Dabei handelt es sich natürlich um signifikante Verbesserungen, die gerade für Endkunden sehr wichtig sind. Denn wenn wir einmal ehrlich sind: Die einfache Eingabeform der benutzerdefinierten Felder, wie sie von WordPress gestellt wird, ist nicht sehr anwenderfreundlich, zumindest wenn komplexere Eingaben getätigt werden sollen.

Der Umfang von Advanced Custom Fields

Kurz vorweg: Für das Plugin Advanced Custom Fields (ACF) gibt es eine kostenpflichtige Pro-Version mit erweiterten Funktionen, die ich hier teilweise auch mit aufführen möchte.

Die im weiteren Verlauf gezeigten Funktionen und Beispiele lassen sich aber alle problemlos mit der kostenlosen Version des Plugins umsetzen bzw. ist der Umfang der kostenlosen Version bereits unglaublich hoch, so dass die Pro-Version tatsächlich als das typische Sahne-Topping zu sehen ist.

Advanced Custom Fields bietet unter anderem folgende Felder an:

• Text
• Textfeld
• Nummer
• E-Mail
• Url
• Passwort
• WYSIWYG-Editor
• Bild-Upload
• Datei-Upload
• Galerie
• Auswahlmenü
• Checkbox
• Radio-Button
• Ja/Nein Abfrage
• Beziehung zu einem Beitrag
• Link zu einer Seite oder Artikel
• Google Map Karte
• Farbauswahl (Color-Picker)
• Datum (mit jQuery Kalender-Funktion)
• und noch einige mehr …

Ihr seht also, dass ACF euch mit diesen Feldern eine riesengroße Auswahl an Möglichkeiten zur Gestaltung von Eingaben bietet.

Weiterhin können die Inhalte und Eingabemöglichkeiten nach bestimmten Regeln validiert oder an Bedingungen geknüpft werden. Hierdurch seid ihr noch flexibler mit der Verwendung der Eingabemöglichkeiten.

So funktioniert das WordPress Plugin Advanced Custom Fields (ACF)

Einen umfangreichen Einblick mit entsprechenden Beispielen habe ich euch als Video-Podcast / Screencast aufgezeichnet. Daher möchte ich im weiteren Verlauf nur noch die wichtigsten Basics erklären. Ein umfangreiches Tutorial findet ihr in diesem Video:

ACF organisiert die benutzerdefinierten Felder in sogenannten „Felder-Gruppen“. Diese Gruppen können über verschiedene Felder verfügen und über Bedingungen an bestimmte Templates, Post-Types, Kategorien und viele andere Bedingungen geknüpft werden.

Als erstes können verschiedene Felder zusammengestellt werden und zum Teil über Layout-Elemente, wie z.B. Tabs, optisch getrennt und besser gegliedert werden.

Pro Feld können verschiedene Einstellungen festgelegt werden, die je nach Funktion variieren. Auf dem Screenshot ist ein Textfeld zu sehen, welches noch die Möglichkeiten für Standardwerte, Filter für eine bedingte Anzeige und Eingrenzungen der Texte anbietet.

Der Feld-Name hat in ACF dieselbe Funktion, wie auch in den normalen benutzerdefinierten Feldern von WordPress. Er dient zur Identifikation der Felder.

Unterhalb der Felder wird die Gruppe mit einer Bedingung an Inhalte geknüpft. In diesem Beispiel wird die Felder Gruppe für alle Seiten angezeigt, die das Page-Template (Seiten-Vorlage) „Projekte“ verwenden.

Auf einer entsprechenden Seite würde das Ganze dann z.B. wie folgt aussehen:

Mit Hilfe von ACF könnt ihr euch also auf eine relativ bequeme Art & Weise eigene Eingabemasken für individuelle Inhalte zusammenbauen.

Diese müssen nun nur noch im Theme ausgelesen werden. Dies funktioniert ähnlich, wie auch mit den normalen benutzerdefinierten Feldern:

<?php the_field('feld-name'); ?>
<?php echo get_field('feld-name'); ?>

Nun könnt ihr mit den Werten der Felder so ziemlich alles anstellen! Ich persönlich verwende Advanced Custom Fields mittlerweile in fast jedem oder zumindest jedem zweiten Projekt, um die Eingabemöglichkeiten zu erweitern und einfach anwenderfreundlicher zu gestalten.

Nun wünsche ich euch viel Spaß mit dem obigen Video und beim Ausprobieren.

In diesem Artikel möchte ich euch zwei Tools vorstellen, mit denen ihr Grafiken und Fotos für Webseiten optimieren könnt. Die Tools eignen sich jedoch auch für jeden engagierten Fotografen, der die Sammlung an JPEG’s aus dem letzten Urlaub komprimieren möchte, um Speicherplatz auf der Festplatte zu sparen. Die Einsparungen können hier teilweise erheblich ausfallen, jedoch ist das Optimieren der Originaldateien einer gesamten Fotosammlung nicht jedermanns Sache.

Zwar werben beide Tools mit einer nahezu unsichtbaren Kompression ohne Qualitätsverluste, dennoch halte ich es für möglich, dass es unter bestimmten und nicht optimalen Bedingungen vielleicht doch Abstriche in der Qualität gibt.

Generell bin ich persönlich mit beiden Tools sehr zufrieden und verwende sie täglich um meine Bilder zu komprimieren. Mit JPEG Mini habe ich tatsächlich auch mein gesamtes Fotoarchiv an Urlaubsbildern komprimiert und mehrere Gigabyte an Daten gespart.

JPEG Mini

JPEG Mini ist eines der bekanntesten Tools zur Optimierung von JPEG-Bildern, hier liegt auch direkt der erste und einzige Nachteil. Das Tool kann lediglich JPEG bzw. JPG Bilder optimieren und komprimieren, alle anderen Formate bleiben außen vor.

Dafür ist die Qualität der komprimierten Bilder und die eingesparte Dateigröße überragend.

Auf der offiziellen Webseite wird JPEG Mini mit einer Kompression von bis zu 80% im Vergleich zur Originalbildgröße beworben und das ohne Qualitätsverluste. Nachdem ich mit dem Tool bereits einige tausend Bilder komprimiert habe, kann ich dies nur bestätigen. Eine Kompression um 80% ist zwar eher selten, aber bei einigen Bildern tatsächlich möglich.

JPEG Mini eignet sich hervorragend für die Optimierung großer Fotosammlungen und läuft auch bei großen Ordnern mit vielen Bildern sehr stabil. Die Software kann kostenlos getestet werden und dürfte mit den Funktionen der freien Version bereits viele Alltagsfälle abdecken. Mit der Lite Version können jedoch maximal 20 Bilder pro Tag optimiert werden.

Die Vollversion von JPEG Mini unterliegt dieser Einschränkung natürlich nicht und ist mit 19,99 USD meiner Meinung nach fair bepreist. Die Software kann sowohl unter Windows als auch Mac OS X verwendet werden.

Neben der zeitlich unbeschränkten Testversion JPEG Mini Lite gibt es auch einen Webdienst, mit dem ihr eure Bilder mittels JPEG Mini Server komprimieren könnt: JPEG Mini – Shrink Photos online.

ImageOptim und PNG Gauntlet

Beim ImageOptim handelt es sich, im Vergleich zu JPEG Mini, um ein komplett kostenloses Tool, welches einen ebenso großen Nutzen hat wie  JPEG Mini, eben auf seine Weise. Man kann und sollte beide Tools, JPEG Mini und ImageOptim, durchaus gemeinsam und kombiniert nutzen.

ImageOptim komprimiert und optimiert im Vergleich zu JPEG Mini alle gängigen Bildformate, die fürs Web relevant sind (JPEG, JPG, PNG, GIF) und ist damit nicht nur auf JPEG’s beschränkt.

Bereits auf der eigenen Webseite gibt der Hersteller des Tools eine wichtige Information, warum es sinnvoll ist ImageOptim gemeinsam mit anderer Komprimierungs-Software zu verwenden:

How does ImageOptim compare to TinyPNG and JPEGMini?
Tools like ImageAlpha/pngquant/TinyPNG and JPEGMini can make files much smaller by using lossy compression which (slightly) lowers image quality. ImageOptim is lossless — it compresses image files without changing pixels.

For best results use both, but the order is very important: first compress images using some lossy tool and then apply ImageOptim for even better compression.

Was sagt uns dieses Zitat jetzt also: ImageOptim komprimiert Bilder „losless“, also ohne Einfluss auf die direkte Darstellung des Bildes zu nehmen oder die Pixel zu verändern. Bei JPEG Mini handelt es sich um eine Lossy-Kompression, also eine verlustbehaftete Kompression der Bilder, wenn auch ohne sichtbare Qualitätsverluste.

ImageOptim ist ausschließlich für Nutzer von Mac OS X zu haben. Es gibt jedoch auch für Windows User eine entsprechende Alternative, die der Funktionsweise von ImageOptim ähnlich ist und ebenfalls losless optimiert. Dabei handelt es sich um die Software PNG Gauntlet, welche das technische Äquivalent von ImageOptim nur für Windows ist.

Es gibt lediglich eine Ausnahme: Nicht PNG-Bilder, die mit PNG Gauntlet komprimiert werden, unterziehen sich während der Optimierung einer Umwandlung ins PNG-Format.

Video-Podcast: Zwei Tools um Bilder fürs Web zu komprimieren bzw. zu optimieren

Fazit

Beide Tools, sowohl JPEG Mini als auch ImageOptim (oder alternativ PNG Gauntlet), sind vor allem in der kombinierten Nutzung großartige Tools, um die perfekte Bildkompression für die Verwendung auf Webseiten zu schaffen.

Wer es zu diesem Zeitpunkt vielleicht noch nicht wusste, dem sei noch kurz gesagt, dass die Performance und Ladezeit der Webseite auch wichtige Kriterien im Bereich der Suchmaschinenoptimierung sind.

Da die Kompression von Bildern mit diesen beiden Tools ein Kinderspiel ist, handelt es sich hier um einen sehr einfachen Schritt der Suchmaschinenoptimierung, welcher auf jeden Fall durchgeführt werden sollte.

Ich persönlich verwende beide Tools in der hier vorgestellten Kombination und bin mit der Kompression und dem Endergebnis mehr als zufrieden.

Hier alle Links zu den vorgestellten Tools:

• JPEG Mini
• ImageOptim
• PNG Gauntlet

Es gibt für Webseiten eine unglaubliche Menge an verschiedenen Tipps und Tricks um diese zu beschleunigen. Ein echtes Patentrezept, welches sich auf jede WordPress-Webseite anwenden lässt, gibt es jedoch nicht. Jedes Web-Projekt ist in der Regel individuell und sollte auch so behandelt werden.

Eine Technik, die bei der einen Seite funktioniert und einen guten Performance-Boost bringt, muss nicht auch zwangsweise bei einer anderen Webseite denselben Effekt hervorrufen.

In diesem Artikel und dem dazugehörigen Video möchte ich euch nun einige Techniken und Tricks vorstellen, die sich im Ansatz für fast jede WordPress basierende Webseite eignen.

Wer darüber hinaus Informationen zur Optimierung der Ladezeit sucht, kann sich gerne auch die weiteren Artikel im Blog ansehen, unter anderem zu finden in der Kategorie Webseitenoptimierung.

Kombinieren (combine), komprimieren (minify oder compress) und danach cachen

Combine, minify and cache – Diese drei Techniken lassen sich in WordPress verhältnismäßig einfach umsetzen, da es hier die verschiedensten Plugins gibt, die diese Arbeit übernehmen können.

Was verbirgt sich hinter den jeweiligen Techniken:

Kombinieren (combine)
Darunter versteht man das Zusammenlegen von Dateien. Nehmen wir einmal an, ihr benötigt für eure Webseite drei CSS-Dateien: Die style.css eures Themes und zwei weitere CSS-Dateien die von Plugins eingebunden werden.

Nun muss der Browser für alle drei Dateien jeweils eine neue Verbindung (HTTP-Request) zum Webserver aufbauen und diese Dateien einzeln herunterladen. Dieser Vorgang kostet wertvolle Zeit, welche vermieden werden könnte.

Um die HTTP-Requests nun von drei auf einen zu reduzieren, werden alle drei CSS-Dateien einfach in einer gemeinsamen Datei kombiniert und nur noch diese eine Datei geladen.

Komprimieren (minify oder compress)
Bei dem Vorgang der Kompression (compress) werden z.B. JavaScript, CSS und auch HTML Dateien um unnötige Zeilenumbrüche, Kommentare, Leerzeichen usw.  bereinigt, dadurch sinkt die Dateigröße.

Bei der Kompression unterscheidet man in der Regel zwischen zwei Varianten, der gerade genannten und beschriebenen „normalen“ Kompression und dem Minifying oder auch Minification.

Bei diesem letzten Vorgang werden nicht nur unnötige Zeichen entfernt sondern Dateien aktiv umgestaltet. In JavaScript werden z.B. Variablen und Funktionsnamen gekürzt, Kurzschreibweisen zur Verkleinerung von Abfragen verbaut uvm. In CSS verläuft der Prozess ähnlich, hier werden ebenfalls Kurzschreibweisen verwendet um den Code zu verschlanken und z.B. auch Farbcodes verkleinert. So wird aus dem HexCode für rot #ff0000 z.B. die kurze Version #f00.

Caching
Der Prozess des Caching kann uns in den verschiedensten Varianten begegnen. In der Regel dient ein Cache-System dazu, dass dynamisch erzeugte Dateien statisch gespeichert werden und somit schneller darauf zugegriffen werden kann.

Im Fall von WordPress und den oben genannten Beispielen, wäre in unserem Fall z.B. ein Cache für die folgenden Systeme relevant:

1. Ein Cache zum Zwischenspeichern der dynamisch erzeugten komprimierten und kombinierten Dateien. Müssten diese mit jedem Seitenaufruf dynamisch neu erzeugt werden, so könnte und würde der Geschwindigkeitsvorteil aufgrund der längeren Verarbeitungszeit der Dateien verpuffen.

2. Um WordPress zu entlasten, können auch hier fertig gerenderten HTML-Ausgaben in einem Cache gespeichert werden. Diese setzen sich aus den Widgets, Plugins und Inhalten der verschiedenen Seiten zusammen.

Auf diese Art und Weise muss die gesamte Seite nicht jedes Mal erneut dynamisch generiert werden und die verschiedenen Plugins, Widgets und Seiteninhalte geladen werden.

WordPress Plugins zur Performance-Optimierung

Für die obigen Punkte gibt es in WordPress eine Vielzahl an verschiedenen Plugins, die diese Aufgaben übernehmen können. Einige sind umfangreicher als andere und bieten teilweise auch einen komplett unterschiedlichen Funktionsumfang.

Eine pauschale Aussage, welches Plugin aus dieser Liste besser oder schlechter als ein anderes ist, kann man so nicht treffen. Je nach Wechselwirkung mit anderen Plugins, den eigenen Bedürfnissen, dem eigenen Erfahrungsstand, der verfügbaren Server Hard- und Software, usw. kann und sollte die Wahl des Plugins beeinflusst werden. Hier gilt vor allem: Probieren geht über studieren!

Folgende Plugins sind relativ bekannt und gut gepflegt: Ich persönliche setze in den meisten Fällen auf Cachify, Autoptimize und den WP-Super-Cache (nicht alle drei kombinieren, zwei Cache-Plugins sind z.B. überflüssig), habe aber auch mit den meisten anderen Plugins bereits gearbeitet.

• Cachify (Cache-System)
• WP-Super-Cache (Cache-System)
• W3 Total-Cache (Cache, Minify, Combination und andere Optimierungen)
• Autoptimize (Minify & Combination)
• WP-Minify (Minify & Combination)
• WP Optimize (Cache, Minify, Combination und andere Optimierungen)
• Hyper Cache (Cache, Minify, und Combination)

Diese Liste könnte man nun um viele weitere Links erweitern, da das Angebot an Plugins hier nahezu unendlich erscheint. Daher kann ich jedem nur empfehlen, die Plugins zu testen und für sich selbst das Richtige zu finden.

JavaScript und CSS nicht blockierend einbinden und die Darstellung „above the fold“ optimieren

Dieses Thema lässt sich zum Teil in der Kombination Bild und Ton etwas verständlicher erklären, als hier in der Schriftform. Daher möchte ich an dieser Stelle kurz auf das Video am Ende des Artikels aufmerksam machen, in welchem dieses Thema ausführlich behandelt wird.

Zusätzlich befinden sich zum Thema „JavaScript und CSS nicht blockierend einbinden“ bereits zwei weitere Artikel in der Freischaltungsschleife des Blogs, daher möchte ich hier nur kurz darauf eingehen und werde die Artikel verlinken, sobald diese online verfügbar sind.

Tipp: Wenn du die Artikel nicht verpassen möchtest, dann folge uns doch einfach auf Twitter, Facebook oder abonniere unseren Blog via E-Mail (rechts in der Sidebar möglich). Selbstverständlich kannst du auch unseren RSS-Feed abonnieren oder unseren anderen Social Network Kanälen folgen.

• jQuery Lazy Load für Webseiten und speziell für WordPress-Systeme
• jQuery.getScript() – Scripte asynchron und nur bei Bedarf nachladen
• Zwei Tools um Bilder fürs Web zu komprimieren bzw. zu optimieren
• Scripte nicht blockierend einbinden – HTML5 Attribute defer und async

Im Normalfall arbeitet der Browser ein HTML-Dokument von oben nach unten der Reihe nach ab. Stößt dieser nun z.B. im Head-Tag auf mehrere CSS und JavaScript Dateien, so werden auch diese der Reihe nach geladen, bevor der Verarbeitungsprozess fortgesetzt wird.

Es empfiehlt sich daher Scripte und auch CSS-Dateien, die nicht unmittelbar benötigt werden nachzuladen. Damit wird der Verarbeitungsprozess des Browsers bis zur Darstellung der Webseite beschleunigt. Google empfiehlt alle wichtigen CSS-Angaben für den Bereich „above the fold“ (ohne scrollen sichtbarer Inhalt) via Inline-Styles einzubinden. Andere CSS-Dateien sollen nach dem schließenden HTML-Tag oder über JavaScript nachgeladen werden.

Für JavaScript gelten dieselben Empfehlungen. Diese können ebenfalls bei Bedarf nachgeladen oder asynchron beim Seitenaufbau geladen werden. In HTML5 gibt es die Attribute „defer“ und „async“. Mit beiden Attributen kann dem Browser mitgeteilt werden, dass die Scripte asynchron zu laden sind und der Ladevorgang das weitere Rendering nicht blockieren soll.

Alles weitere zu diesem Thema erfahrt ihr in ein paar Tagen detailliert in den weiteren Artikeln.

WordPress entschlacken – CSS und JavaScripte der Plugins entfernen

Plugin sind in WordPress Fluch und Segen zugleich, jeder Betreiber einer WordPress Webseite kann sich über die kinderleichte Erweiterbarkeit seiner Webseite freuen und über die mittlerweile weit über 35.000 Plugins, die kostenfrei im WordPress Plugin Directory zu haben sind.

Mit jedem Plugin wächst jedoch der Performancebedarf von WordPress. Weiterhin binden viele Plugins eigene JavaScripte und CSS-Dateien in die Seiten ein, welche diese dann zusätzlich verlangsamen und in vielen Fällen gar nicht benötigt werden.

Nehmen wir als Beispiel einmal die Newsletter Box, welche von dem Mailchimp Plugin erzeugt wird. Hier werden z.B. für einige Funktionen und für das Styling CSS und JavaScript eingebunden.

In meinem Fall wird beides nicht benötigt, da die CSS-Angaben z.B. mit eigenen Angaben überschrieben werden und das JavaScript bereits in ähnlicher Form vorhanden ist.

In solchen Fällen sollte man in Ruhe prüfen, welche Dateien von den Plugins wirklich benötigt werden und welche nicht. Diese lassen sich dann z.B. über WordPress Hooks wieder entfernen.

Hier sind ein paar Beispiele für Plugins bei denen ich CSS oder JavaScripte entfernt habe, diese könnt ihr in eure functions.php einbinden:

MailChimp Plugin:

add_action( 'wp_enqueue_scripts', function(){
	wp_dequeue_script('jquery_scrollto');
    wp_deregister_script('jquery_scrollto');

    wp_dequeue_script('mailchimpSF_main_js');
    wp_deregister_script('mailchimpSF_main_js');

    wp_dequeue_script('datepicker');
    wp_deregister_script('datepicker');

    wp_dequeue_style('mailchimpSF_main_css');
    wp_deregister_style('mailchimpSF_main_css');

    wp_dequeue_style('mailchimpSF_ie_css');
    wp_deregister_style('mailchimpSF_ie_css');
});

YARPP – Yet Another Related Posts Plugin

add_action( 'wp_print_styles', function(){
    wp_dequeue_style('yarppWidgetCss');
    wp_dequeue_style('yarppRelatedCss');
    wp_deregister_style('yarppRelatedCss');
}, 1 );
add_action('wp_footer', function(){
    wp_dequeue_style('yarppRelatedCss');
    wp_deregister_style('yarppRelatedCss');
});

Jetpack:

add_filter( 'jetpack_implode_frontend_css', '__return_false' );
add_action( 'wp_footer', function(){
    // subscriptions
    wp_dequeue_style('jetpack-subscriptions');
    wp_deregister_style('jetpack-subscriptions');

    wp_dequeue_style('grunion.css');
    wp_deregister_style('grunion.css');

    wp_dequeue_script('devicepx');
});

Da das Jetpack sehr umfangreich ist, gibt es eine umfangreiche Liste aller Komponenten, die Einzeln oder im Gesamten entfernt werden können (funktioniert zum Teil nur bei älteren Jetpack-Versionen):

add_action( 'wp_enqueue_scripts', function(){
	wp_deregister_style('AtD_style'); // After the Deadline
    wp_deregister_style('jetpack-carousel'); // Carousel
    wp_deregister_style('grunion.css'); // Grunion contact form
    wp_deregister_style('the-neverending-homepage'); // Infinite Scroll
    wp_deregister_style('infinity-twentyten'); // Infinite Scroll - Twentyten Theme
    wp_deregister_style('infinity-twentyeleven'); // Infinite Scroll - Twentyeleven Theme
    wp_deregister_style('infinity-twentytwelve'); // Infinite Scroll - Twentytwelve Theme
    wp_deregister_style('noticons'); // Notes
    wp_deregister_style('post-by-email'); // Post by Email
    wp_deregister_style('publicize'); // Publicize
    wp_deregister_style('sharedaddy'); // Sharedaddy
    wp_deregister_style('sharing'); // Sharedaddy Sharing
    wp_deregister_style('stats_reports_css'); // Stats
    wp_deregister_style('jetpack-widgets'); // Widgets
});

Verschiedene Optimierungen über die functions.php eures Themes

Über die functions.php eures Themes könnt ihr zusätzlich zu den bereits genannten Anpassungen noch ein paar weitere Optimierungen vornehmen, welche ich euch nun zeigen möchte:

Query-Strings am Ende von Datei-URL’s können das Caching verhindern, daher macht es Sinn diese zu entfernen:

add_filter( 'script_loader_src', 'remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'remove_script_version', 15, 1 );

function remove_script_version($src)
{
    $parts = explode('?', $src);
    return $parts[0];
}

JPEG Kompression in WordPress festlegen:

add_filter( 'jpeg_quality', function($arg){return 80;} );

Scripte die von WordPress oder Plugins eingebunden werden um defer Attribut erweitern:

add_filter( 'script_loader_tag', function ( $tag, $handle ) {
    if( strstr($tag, 'syntaxhighlighter') ) {
        return $tag;
    }

    $tag = str_replace(' type=\'text/javascript\'', '', $tag);
    $tag = str_replace('\'', '"', $tag);
    return str_replace( ' src', ' defer="defer" src', $tag );
}, 10, 2);

Video-Podcast WordPress Performance-Optimierung

Zwar handelt es sich bei den gezeigten Tipps und Tricks nur um einen kleinen Teil einer schier unendlichen Liste an möglichen Optimierungen, mit diesen Basics seit ihr jedoch bereits gut gerüstet.

Wichtig ist vor allem, Erweiterungen bzw. Plugins mit Bedacht einzubinden und die Seite nicht zu überladen. Dies gilt nicht nur für WordPress Plugins sondern z.B. auch für jQuery Erweiterungen.

DigitalOcean $10 USD zum ausprobieren

Wer gerne etwas mit verschiedenen Server-Konfigurationen rumprobieren möchte, der kann dies z.B. mit den Cloud-Servern von  DigitalOcean. Die Abrechnung erfolgt stundengenau, daher können VPS für wenige Stunden zum Testen genutzt werden und danach wieder abgeschossen werden.

Natürlich ist auch ein durchgehendes Hosting zu einem monatlichen Preis möglich. Wer DigitalOcean testen möchte, kann sich über diesen Link anmelden und erhält  10 USD Startguthaben.

Nichtsdestotrotz ist es eine angenehme Entwicklung, dass auch Adobe nun ein Tool (PSD CSS-Extractor) herausgebracht hat, mit dem sich schnell und einfach online die entsprechenden CSS-Definitionen für PSD-Dateien kopieren lassen bzw. Ebenen oder gruppierte Elemente als Asset direkt herunterladen lassen.

Project Parfait ermöglicht es Webdesignern, die erstellten Layouts oder natürlich auch die von Auftraggebern in Form von PSD-Dateien zu dem Online-Dienst hochzuladen. Parfait ermöglicht es dann, die Elemente in der PSD-Datein einfach zu selektieren und den dazugehörigen CSS-Code zu kopieren.

Es ist ebenfalls möglich, Ebenen direkt als Bild herunterzuladen. Hiermit erspart man sich das Ausschneiden in Photoshop, wobei dieser Vorgang bereits über den Photoshop Bild-Asset-Generator (nur in der CC-Version verfügbar) sehr elegant gelöst wird. Meiner Meinung nach sogar besser und flexibler als über Project Parfait, da es direkt aus Photoshop heraus erledigt werden kann. Da Parfait allerdings einfachere Dialoge bietet, kann es für Anfänger oder nicht routinierte Nutzer durchaus die schnellere und vor allem einfachere Variante sein.

Photoshop CC bietet ebenfalls die Möglichkeit, CSS Code direkt aus der Ebenen-Palette zu kopieren. Dies funktioniert über einen »Rechtsklick« und anschließend im Kontextmenü mit „CSS kopieren“, daraufhin kopiert Photoshop CC den CSS-Code in die Zwischenablage. Hier wiederum ist Project Parfait wesentlich eleganter und generiert auch den besseren CSS-Code.

Zum Vergleich hier ein Beispiel-Code eines einfachen orangenen Buttons:

Der Code aus Photoshop CC sieht wie folgt aus:

.Rectangle_5_copy_2 {
  background-color: rgb( 204, 204, 204 );
  position: absolute;
  left: 932px;
  top: 703px;
  width: 142px;
  height: 37px;
  z-index: 9;
}

Derselbe Button, nur jetzt mit Code aus Project Parfait:

background-color:  #ff9c00;
width: 142px;
height: 37px;

Hier wird auf Anhieb klar, dass sich Parfait auf die wirklich relevanten Codes beschränkt und diese auch sauberer ausgibt. Photoshop CC sorgt im Vergleich für viel Müll-Code, den man in dieser Form besser nicht in die eigene CSS-Datei übernehmen sollte, schon gar nicht mit den absoluten Positionen.

Project Parfait befindet sich aktuell in einer offenen Beta-Version und kann von jedem, der es testen möchte, ausprobiert werden.

Podcast Info:
Titel: Adobe Project Parfait (Beta) – PSD-Dateien online in valides CSS umwandeln (PSD CSS-Extractor)
Autor: Pascal Bajorat
Länge: 11 Min
Dateigröße: 282 MB (1080p HD)

Dieses Video findet ihr ebenfalls in unserem Vimeo Kanal.

Anmerkung: In dem Video erzähle ich, dass die beiden Plugins CSS-Hat und Engima64, aus dem Hause madebysource.com, bei mir unter Photoshop CC nicht funktionieren. Nun habe ich von ein paar Kollegen erfahren, dass die Plugins bei ihnen auch unter der CC funktionieren, dies ist bei mir leider nicht der Fall, eine Neuinstallation und auch die Installation auf einem komplett anderen Rechner waren keine Lösung. Auf Support-Anfragen hat madebysource.com nicht reagiert, daher erkläre ich beide Plugins zumindest für mich weiterhin als tot und nicht benutzbar! Das Update, welches während der Video-Aufnahme angezeigt wurde brachte übrigens auch keine Verbesserung der Situation.

Themen des WordPress Webinars

Das Webinar behandelt folgende Themen (grober Überblick):

• WordPress Geschichte und Entstehung
• WordPress Standard-Funktionen
• Erweiterungen in Form von Themes und Plugins (Shop, Community, Galerie, usw.)
• WordPress Multisite
• Tipps und Tricks zu WordPress

Anschließend werden alle Teilnehmer die Möglichkeit haben Fragen zu WordPress zu stellen.

Weitere Informationen sind im original Artikel zum WordPress Webinar zu finden.

Podcast Info:
Titel: WordPress Webinar vom 13.09.2013
Autor: Pascal Bajorat
Länge: 50 Min (geschnitten)
Dateigröße: 768 MB (720p HD)

Der Bild-Asset Generator Assistent lässt sich über das Datei Menü in Photoshop aktivieren und deaktivieren „Datei > Generieren > Bild-Assets„. Ist diese Funktion erst einmal aktiv, wird sie mit jedem Speichervorgang die entsprechenden Bilder generieren.

Als Indikator dienen die Namen der Ebenen, diese müssen entsprechend ihres gewünschten Dateinamens und Formats benannt werden. Ein Logo ohne Hintergrund, also mit Transparenzen müsste also folgenden Ebenennamen tragen um als PNG gespeichert zu werden: „logo.png“. Soll das Logo als PNG 8 gesichert werden, muss einfach eine 8 hinter den Dateisuffix gehängt werden, also „logo.png8“.

Über den Ebenennamen lassen sich ebenfalls z.B. bei JPG’s die Qualitätsstufe festlegen, möchten wir z.B. den Header eines Web-Layouts als JPG mit Qualitätsstufe 6 bzw. 60% speichern, wird die Ebene wie folgt benannt: „header.jpg6“.

Wie das ganze genau funktioniert, möchte ich euch in einem kurzen Video zeigen, dass ihr ebenfalls über unseren Podcast Feed herunterladen könnt.

Podcast Info:
Titel: Adobe Bild-Asset Generator in Photoshop CC
Autor: Pascal Bajorat
Länge: 6:40 Min
Dateigröße: 97 MB (720p HD)

Dieses Video findet ihr ebenfalls in unserem Vimeo Kanal.

Der Angriff werde von einem Botnetz durchgeführt, berichtet Matthew Prince, Chef des Content Delivery Networks Cloudflare, im Unternehmensblog. Per Brute Force werde versucht, die Passwörter für den Nutzer Admin auszulesen: Es würden lange Listen von möglichen Passwörter ausprobiert, um in eine WordPress-Installation einzudringen. Das Botnetz umfasse mehrere zehntausend IP-Adressen. (Golem.de)

Brute Force Attacken sind in der Regel relativ einfach abzuwehren, gerade in WordPress ist die Sache mit ein paar Kniffen schnell erledigt. In dieser kurzen To-Do Liste möchte ich euch Tipps zur Absicherung eures WordPress-Systems geben:

Sichere Kennwörter verwenden

Das oberste Gebot gilt nicht nur für die Nutzung von WordPress, sondern generell für alle Online-Dienste: Verwendet immer sichere Kennwört. „Hallo“ oder „1234“ zählen definitiv nicht dazu, haltet euch eher an zufällig generierte Kennwörter, die dann z.B. mittels eines Tools, wie 1Password, abgespeichert werden.

So ein sicheres Kennwort könnte dann z.B. so aussehen: b33gkBDQ:vN2p,EE[CEg

Auf diese Weise wird es dem Angreifer schon fast unmöglich gemacht, dass Kennwort in einer realistischen Zeit zu „erraten“.

Admin Nutzer in WordPress nicht verwenden oder entfernen

Seit der WordPress Version 3.0 lässt sich der Benutzername „admin“ in der Installationsroutine entsprechend ändern. Eine nachträgliche Änderung ist über WordPress selber nicht möglich, er kann aber über die Datenbank angepasst werden.

Öffnet hierzu über phpMyAdmin eure WordPress Datenbank und sucht dort die Tabelle „wp_users“, dort solltet ihr euch den Eintrag mit der „ID“ 1 genauer ansehen, hier sollte im Feld „user_login“ der Name „admin“ stehen. Diesen müsst ihr jetzt über phpMyAdmin ändern, dass war es schon.

Login-Versuche einschränken mit Limit Login Attempts

Das WordPress Plugin „Limit Login Attempts“ schütz euren WordPress Login vor zu vielen ungültigen Logins. Es funktioniert relativ simpel, es sperrt einfach die entsprechende IP-Adressen, die sich mehrmals falsch anmelden, die entsprechenden Sperrzeiten und Login-Versuche lassen sich einfach konfigurieren.

Da das Botnetzwerk in dieser Angriffsserie mehr als 90,000 IP Adressen umfasst, ist ein alleiniger Schutz über Limit Login Attempts nicht ausreichend.

WordPress richtig absichern

WordPress ist von Haus aus ein sehr sicheres System, durch den offenen Quellcode werden Sicherheitslücken allerdings relativ schnell bekannt und auch aktiv ausgenutzt. Der erste Aspekt der Sicherheit sollte also ein zeitnahes Update-Verhalten sein. Selbiges gilt natürlich nicht nur für das WordPress-Kern-System, sondern auch für entsprechende Plug-Ins.

Neben den wichtigen Updates gibt es noch einige weitere Plug-Ins und Schritte, die ihr durchführen könnt, um die Sicherheit eures WordPress-Systems zu verbessern. Die wesentlichen Punkte möchte ich euch in diesem Video-Training vorstellen:

• Limit Login Attempts
• Snitch

Podcast Info:
Titel: WordPress richtig absichern
Autor: Pascal Bajorat
Länge: 12 Min
Dateigröße: 64 MB

Auf Vimeo ansehen

Du möchtest noch mehr über WordPress erfahren und lernen? Dann schau dir doch einmal mein beiden WordPress-Video-Training an. Diese behandeln die verschiedensten Themen rund um WordPress praxisnah und gut verständlich, wie z.B. Theme-Erstellung, MultiSite / Blognetzwerk, eigene Plugins, Custom-Post-Types, Suchmaschinenoptimierung, WordPress Security, Woocommerce und vieles mehr: WordPress-Video-Training Vol. 1 & WordPress-Video-Training Vol. 2 von Pascal Bajorat

Bild: fotolia.com – © vege

In diesem Artikel möchte ich euch sämtliche wichtigen Neuerungen vorstellen und auf einige Umstrukturierungen in den Einstellungen hinweisen. Neben dem Artikel ist am Ende des Beitrags noch ein ca. 15-minütiges Video, dass ebenfalls alle wichtigen Neuerungen aufzeigt.

Kurze Themen-Übersicht:

• Der neue WordPress Media Manager
• WordPress Standard-Theme Twenty Twelve
• Verbesserte / Überarbeitete Administrationsoberfläche in WordPress 3.5
• Updates unter der Haube…
• WordPress Aktualisieren – So geht’s…
• Video-Podcast zu allen Neuerungen in WordPress 3.5
• WordPress 3.5 Trailer

Der neue WordPress Media Manager

Der neue Media Manager spielt in WordPress eine zentrale Rolle, denn neben dem offensichtlichen neuen Standard Theme Twenty Twelve, dass nicht unbedingt jeder verwendet, handelt es sich hierbei um die wichtigste Neuerung. Im Gegensatz zu den früheren WordPress-Versionen öffnet sich der neue MediaManager in der Medathek-Ansicht und bietet so schnellen Zugriff auf bestehende Medien-Dateien.

Die Bilder lassen sich schnell und einfach im rechten Bereich des Media Managers anpassen:

Galerien lassen sich jetzt komfortabler erstellen, da sich entsprechende Bilder aus der gesamten Mediathek einfach wie Auswahlfeld markieren lassen. Die Sortierung funktioniert über ein einfaches Drag & Drop Interface. So hat sich das Mühsame bearbeiten der Galerien im Shortcode erledigt, definitiv eine große Erleichterung für Autoren, die sicht nicht großartig mit dem Code beschäftigen wollen.

Insgesamt macht der neue Media Manager einen sehr guten Eindruck und stellt gerade für Webmaster oder Blogger, die mit vielen Bildern oder generell Mediendateien arbeiten, eine enorme Erleichterung dar.

WordPress Standard-Theme Twenty Twelve

Das neue Theme Twenty Twelve löst das alte Theme Twenty Eleven aus WordPress 3.4 ab und folgt dem aktuellen Responsive Webdesign Trend. Soll heißen, dass sich das neue Theme immer der entsprechenden Displaygröße des Endgerätes anpasst. So wird eine gute Darstellung auf Desktop-Computern, Tablets und Smartphones gewährleistet.

Das Twenty Twelve theme verfügt über die selben und gut ausgeprägten Theme-Optionen und Einstellungsmöglichkeiten, wie auch die ältere Twenty Eleven Variante. In den Bereichen zum Anpassen des Themes kommt auch der neue Color-Picker zum Vorschein, der sich im Vergleich zum alten „Farbkreis“ wesentlich besser bedienen lässt.

Im WordPress Codex wird das neue Theme wie folgt beschrieben:

New Default Theme – Twenty Twelve

• Simple, flexible, elegant
• Mobile-first, responsive design
• Gorgeous Open Sans typeface
• Uses the latest Theme Features

Verbesserte / Überarbeitete Administrationsoberfläche in WordPress 3.5

Auch die Administrationsoberfläche wurde in WordPress 3.5 angepasst, wenn auch marginal: Es gibt einen neuen Willkommens-Bildschirm im Dashboard, nach der Erst-Installation und die vorher runden bzw. ovalen Buttons sind nun eher eckig mit abgerundeten Ecken.

Wer ein Gerät mit einem High-Resolution Display (HiDPI) oder auch Retina-Display sein eigen nennt, kann sich über eine entsprechend angepasste Administrationsoberfläche freuen, zu diesen Geräten zählen z.B. iPad mit Retina-Display oder die neuen Mac Book Pro’s.

Einstellungen wurden zusammengefasst

Erst auf den zweiten Blick fällt auf, dass im WordPress Backend die „Privatsphäre“ Einstellung fehlt, über die Suchmaschinen ausgesperrt werden konnten. Diese Einstellung wurde allerdings nicht entfernt, sondern lediglich verschoben. Sie befindet sich jetzt im Bereich „Einstellungen > Lesen“ und dort unter „Suchmaschinen-Sichtbarkeit“.

Eine weitere Einstellung die dem Update zum Opfer gefallen ist, trägt den Namen XML-RPC Schnittstelle, diese wird zum Beispiel für Zusatzsoftware oder die WordPress App benötigt. Die XML-RPC Schnittstelle ist jetzt standardmäßig immer aktiv und lässt sich auch nicht mehr über eine entsprechende Option abschalten.

Updates unter der Haube…

Unter der Haube wurden alle externen Bibliotheken, wie z.B. jQuery und andere Scripte auf die aktuellsten Versionen gebracht. Zusätzlich wurden einige Sicherheitsrelevante Funktionen überarbeitet bzw. bestehende erweitert, eine aktuell häufig auftauchende Fehlermeldung wird durch genau so eine Sicherheitsrelevante Änderung erzeugt: PHP Warning: Missing argument 2 for wpdb::prepare()

Informationen dazu gibt es im WordPress Blog: PHP Warning: Missing argument 2 for wpdb::prepare()

Alle weiteren Informationen die vor allem für Developer und Theme-Entwickler wichtig sind, findet ihr im WordPress Codex.

WordPress Aktualisieren – So geht’s…

Die Aktualisierung auf WordPress 3.5 ist wie immer kinderleicht und kann über die automatische Update-Funktion vollzogen werden. Bei meinen Seiten traten im Zusammenhang mit Plugins von Drittentwicklern keine Probleme auf.

Wer WordPress manuell updaten möchte kopiert und überschreibt einfach sämtliche Daten aus dem neuen Download-Paket, ausgenommen ist alles in eurem /wp-content/ Ordner und öffnet danach die Datei zum aktualisieren der Datenbank.

Entsprechende Informationen gibt es hier: WordPress Update

Video-Podcast zu allen Neuerungen in WordPress 3.5

Podcast Info:
Titel: Neuerungen in WordPress 3.5 mit Video
Autor: Pascal Bajorat
Länge: 15 Min
Dateigröße: 111 MB

Das Video ist ein Teil meins achtstündigen WordPress-Video-Trainings.

WordPress 3.5 Trailer

Hier der offizielle Video-Trailer zu WordPress 3.5.

Neben den Neuerungen in der Oberfläche möchte ich euch noch zeigen wie ihr die neuen Funktionen Custom-Header ( add_theme_support( ‚custom-header‘, $args ) ), register_default_headers() und Custom-Background ( add_theme_support( ‚custom-background‘ ) ) in eure Themes einbauen könnt.

Wie bereits erwähnt findet ihr alle Infos zu add_theme_support( ‚custom-header‘, $args ) und register_default_headers() in dem Artikel: WordPress 3.4 – Custom-Header mit add_theme_support() und natürlich in diesem Video-Podcast.

add_theme_support( ‚custom-background‘ )

Der Code für die Custom-Background Funktion ist extrem simpel, sieht wie folgt aus und muss in die functions.php integriert werden:

add_theme_support( 'custom-background', array(
	'default-color' => 'ffffff' /* Standard-Farbe für den Hintergrund */
) );

Den Rest übernimmt WordPress, wenn ein Custom-Background gesetzt ist, wird in der wp_head() Funktion automatisch der entsprechend Stil ausgegeben.

Podcast Info:
Titel: WordPress 3.4 (Green) Neuerungen: Custom-Header, Custom-Backgrounds, oEmbed und Live Theme Vorschau als Video-Training
Autor: Pascal Bajorat
Länge: 17 Min
Dateigröße: 143 MB

Auf Vimeo ansehen…

In diesem Tutorial möchte ich euch genau erklären wie ihr Custom-Post-Types verwendet, weiterhin findet ihr am Ende noch ein 40 minütiges Video-Training zu Custom-Post-Types, dieses entstammt meinem neuen WordPress-Video-Training.

Was sind Custom-Post-Types und wie funktionieren sie …

Stellen wir uns einmal vor, wir haben eine einfache Webseite von einer kleinen Firma: Die Webseite verfügt über einen Blog-Bereich (hier kommen Artikel und Kategorien zum Einsatz) und einige normale Seiten, wie z.B. Über uns, Partner, Kontakt und Impressum, diese Einzelseiten werden natürlich über die „Seiten“ Funktion von WordPress verwaltet.

Nun möchte der Seitenbetreiber neben den zwei Bereichen, Artikel und Seiten, noch einen weiteren Bereich Produkte in dem er nach Kategorien sortiert seine Produkte auflisten kann. Hier könnte man zwar die Artikel-Funktion missbrauchen, dass würde in diesem Fall aber nicht funktionieren, da diese ja bereits regulär für den Blog verwendet wird.

Genau hier würden nun Custom-Post-Types ins Spiel kommen, die prinzipiell genau so aufgebaut sind wie die Artikel in WordPress. Stellt auch also einfach vor ihr hättet eine zweite Artikel Funktion, die allerdings auch direkt Produkte heißt und einen eigenen Menüpunkt im Backend hat. Weiterhin sind die Artikel, die über den Custom-Post-Type Produkte eingefügt wurden, völlig unabhängig von den eigentlichen Artikeln.

Um das ganze etwas besser zu verdeutlichen seht euch einmal den beigefügten Screenshot an:

Auf dem Screenshot ist der in einem Plugin angelegte Custom-Post-Type Produkt zu sehen.

Tipp: Custom-Post-Types können auch für komplexere Funktionen verwendet werden, wie z.B. die Verwaltung einer Slideshow. Ein gutes Beispiel ist hier der NivoSlider, dessen Backend ebenfalls auf einem Custom-Post-Type basiert.

Custom-Post-Types als Plugin oder im Theme (functions.php)

Es gibt zwei Möglichkeiten Custom-Post-Types anzulegen, zum einen in der functions.php des aktiven Themes oder in einem einfachen kleinen Plugin. Beide Varianten haben wichtige Vor- und Nachteile.

Wann sollte man Custom-Post-Types in der functions.php definieren
Es macht nur dann Sinn Custom-Post-Types in einem Theme direkt in der functions.php zu definieren, wenn es sich dabei um Theme relevante Post-Types handelt, wie z.B. für eine Slideshow. Denn stellen wir uns einmal vor, wir würden die Produktverwaltung mit dem Theme verbinden und irgendwann das Theme wechseln, so wäre auch die Produktverwaltung wieder verschwunden. Man müsste nun die Custom-Post-Type Definition manuell in die functions.php des neuen Themes übernehmen, dass wäre nicht wirklich komfortabel.

Wann sollte man Custom-Post-Types in einem extra Plugin definieren
Wenn es sich um Inhaltsbezogene Post-Types handelt, die nicht direkt mit dem Theme zusammenhängen wie z.B. die Produktverwaltung. So kann man das Theme wechseln so oft man will, ohne das dies direkten Einfluss auf die definierten Custom-Post-Types hat.

Wie werden Custom-Post-Types in einem Theme definiert:
Falls noch nicht vorhanden legt euch einfach in eurem Theme Ordner ( /wp-content/themes/EUER-THEME-NAME/ ) eine neue PHP Datei namens functions.php an, dort könnt ihr dann die folgenden Funktion reinschreiben.

Wie werden Custom-Post-Types in einem Plugin definiert:
Legt euch in eurem Plugins Ordner ( /wp-content/plugins/ ) eine neue PHP Datei an, wie ihr diese Datei nennt bleibt euch überlassen. In diesem Beispiel nennen wir sie einfach passend zur Produktverwaltung products.php. Die products.php muss folgende Angaben beinhalten:

Ersetzt einfach die Daten aus dem Beispiel mit den euren.

Tipp: Noch mehr interessante WordPress Workshops findet ihr in meinem neuen WordPress-Video-Training.

Wie werden Custom-Post-Types angelegt

Um in WordPress Custom-Post-Types anzulegen wird die Funktion register_post_type() verwendet, schaut euch das folgende Beispiel aus der Produktverwaltung an:

 array(
         'name' => __('Produkte'),
         'singular_name' => __('Produkt'),
         'add_new' => __('Neues Produkt hinzufügen'),
         'add_new_item' => __('Neues Produkt hinzufügen'),
         'edit_item' => __('Produkt bearbeiten'),
         'new_item' => __('Neues Produkt'),
         'all_items' => __('Alle Produkte'),
         'view_item' => __('Produkt ansehen'),
         'search_items' => __('Produkt suchen'),
         'not_found' =>  __('Keine Produkte gefunden'),
         'not_found_in_trash' => __('Keine Produkte im Papierkorb gefunden'), 
         'menu_name' => __('Produkte')
      ),
      'public' => true,
      'publicly_queryable' => true,
      'show_ui' => true,
      'menu_position' => 5,
      'hierarchical' => true,
      /* Hier kann ein eigener URL Slug definiert werden, quasi die Permalink Struktur des Post-Types - hier www.domain.de/produkt/artikelname/ */
      'rewrite' => array('slug' => 'produkt'),
      /* Funktionen des Editors */
      'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'custom-fields', 'page-attributes' )
   )
   );
}
?>

Die Argumente die dem Post-Type mit übergeben werden sind eigentlich selbsterklärend, eine genaue Liste der Post-Type Funktionen ist in der WordPress Dokumentation zu finden:
http://codex.wordpress.org/Function_Reference/register_post_type#Arguments

Mit der oben gezeigten Funktion lassen sich einfache Post-Types anlegen die vom Funktionsprinzip den Seiten in WordPress ähneln. Um der Produktverwaltung nun noch Kategorien hinzufügen zu können, muss eine eigene Taxonomie für diesen Post-Type angelegt werden.

Taxonomie für Custom-Post-Types anlegen

Um eine Taxonomie zu erzeugen, wird die Funktion register_taxonomy() verwendet:

// WordPress Hook der die Funktion "create_product_taxonomies" beim initialisieren von WordPress aufruft
add_action( 'init', 'create_product_taxonomies', 0 );

// Selbst definierte Funktion die wir oben an den Hook übergeben
function create_product_taxonomies() 
{

// Die Labels sind für die Ausgaben im Backend zuständig
  $labels = array(
    'name' => __( 'Kategorien' ),
    'singular_name' => __( 'Kategorie' ),
    'search_items' =>  __( 'Kategorien durchsuchen' ),
    'all_items' => __( 'Alle Kategorien' ),
    'parent_item' => __( 'Hauptkategorie' ),
    'parent_item_colon' => __( 'Hauptkategorie:' ),
    'edit_item' => __( 'Kategorie bearbeiten' ), 
    'update_item' => __( 'Kategorie aktualisieren' ),
    'add_new_item' => __( 'Neue Kategorie hinzufügen' ),
    'new_item_name' => __( 'Neue Kategorie Name' ),
    'menu_name' => __( 'Kategorien' ),
  ); 	

// Name der Taxonomie - array('product') verbindet diese Taxonomie mit dem Post-Type product
  register_taxonomy('product_category',array('product'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'kategorie' ),
  ));

}

Die genauen Informationen zu den Argumenten könnt ihr der WordPress Dokumentation entnehmen: http://codex.wordpress.org/Function_Reference/register_taxonomy#Arguments

So einfach lassen sich Custom-Post-Types definieren, falls ihr weitere Informationen benötigt seht euch das folgende Video-Training an. In dem Video-Training wird auch gezeigt, wie die Post-Types im Theme wieder ausgegeben werden.

Custom-Post-Type im Theme ausgeben

Um Custom-Post-Types im Theme auszugeben wird folgender modifizierter Content-Loop benötigt:

 'product' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>

Custom-Post-Types Video-Training

Seit der WordPress-Version 3.0 gibt es die Möglichkeit, sogenannte Custom-Post-Types zu definieren. Bei diesen Custom-Post-Types handelt es sich um Inhaltsarten, die mit Artikeln vergleichbar sind, sie lassen sich allerdings einzeln im Theme abrufen und sind so flexibler für eigene Inhalte.

So lassen sich z.B. neben Artikeln auch DVD-Sammlungen, Bücher-Listen oder Mitglieder-Verwaltungen realisieren.

Weitere Informationen zu Custom-Post-Types gibt es unter: http://codex.wordpress.org/Post_Types#Custom_Types

Podcast Info:
Titel: Custom-Post-Types – was ist das, wozu kann man sie verwenden und wie funktionieren sie
Autor: Pascal Bajorat
Länge: 40 Min
Dateigröße: 280 MB

Das Video ist ein Teil meins achtstündigen WordPress-Video-Trainings.

Video auf Vimeo ansehen…

Durch den einfachen Funktionsaufbau bietet simpleCE ein umfangreiches Framework zur Bearbeitung von Webseiten.

Hier gibt es weiterführende Informationen zu simpleCE:

• simpleCE (mini CMS) auf CodeCanyon
• simpleCE Produktinformationen auf Pascal-Bajorat.com
• simpleCE – Das kleine und feine mini CMS (inkl. Video)
• simpleCE (mini CMS) jetzt auf CodeCanyon

Podcast Info:
Titel: simpleCE (mini CMS) Workshop – so werden statische Webseiten schnell und einfach bearbeitbar
Autor: Pascal Bajorat
Länge: 40 Min
Dateigröße: 350 MB

Das neue achtstündige HTML5 & CSS3 Video-Training ist nun das erste, dass ich als alleiniger Autor erstellt habe, daher möchte ich euch die DVD in diesem Artikel gerne kurz vorstellen und ein Training davon zum ausprobieren und antesten zeigen.

Als erstes fangen ich einmal damit an, was diese Lern-DVD / Video-Training von denen anderer unterscheidet. Ich selber mache mir bei solchen Projekten auch immer Gedanken, wie man bestimmte Sachen am Besten lernen kann. Letztendlich stand für mich fest, dass man am einfachsten lernen kann, wenn man den Einsatz von HTML5 und CSS3 nicht in Einzelnen kleinen Videos sieht, sondern in zusammenhängenden Praxis-Projekten.

Entsprechend werden in dem Video-Training drei ganze Webseiten in komplett unterschiedlichen Stilrichtungen vom leeren HTML-Dokument bis hin zur fertigen Webseite mit SlideShow und JavaScript spielereien umgesetzt und das Beste daran ist: Es wird wirklich kein Schritt übersprungen. So können sowohl Anfänger direkt mit HTML5 & CSS3 durchstarten, als auch Umsteiger ihr entsprechendes Wissen auf den neusten Stand bringen.

Neben den drei Praxis-Projekten sind noch über 10+ weitere Einzel-Workshops enthalten, diese decken unter anderem noch folgende weitere Themengebiete ab:

• Generelle Einleitung und Unterschiede zwischen XHTML / HTML4 gegenüber HTML5
• HTML5-Boilerplate – die beste Vorlage für HTML- und CSS3-Webseiten
• HTML5 Video Tag und eigene Video-Player mit JavaScript (video.js)
• HTML5 Audio Tag
• Formulare mit den neuen HTML5 Tags
• Animationen mit CSS3 (die sind echt verdammt cool )
• Typografie im Web mit CSS3, @font-face und Cufon
• Effektvolle Navigation mit HTML5 und CSS3 ( z.B. Verläufe und Transitions mittels CSS3  )
• Webseiten richtig testen / Browsertests ( damit es mit den neuen Standards auch keine bösen Überraschungen gibt )
• Die richtige Entwicklungsumgebung zum Erstellen von Webseiten ( vor allem für Anfänger gedacht, die sich zum ersten mal mit dem Thema HTML & CSS auseinandersetzen )
• Die besten Tools zum Erstellen von HTML5- und CSS3-Webseiten ( denn es kann nicht schaden, wenn man sich etwas Arbeit abnehmen lässt )

Ich denke mit dieser Aufstellung ist mir ein ausgeglichenes Lehrwerk zum Thema HTML5 & CSS3 gelungen, dass sowohl Anfänger, wie auch Umsteiger und Fortgeschrittene anspricht.

Da es für das Video-Training auch schon die ersten Käuferstimmen gibt und das Rating aktuell bei 5 von 5 Sternen liegt (was hoffentlich auch so bleibt) hier ein paar Kundenstimmen:

Hendrik Sommer – 5 von 5 Sterne vergeben
Ich habe mir bis jetzt erst die Einleitung angesehen und bin einfach nur begeistert! Ich habe schon lange keine so gute Lern-DVD mehr gesehen. Die Stimme ist sehr angenehm, das Tempo genau richtig und der gute Mann scheint wirklich Ahnung von dem zu haben, was er einem beibringen möchte. Insgesamt 5 von 5 Sternen!

mirrorme – 5 von 5 Sterne vergeben
Super! Ich bin wie immer von der Qualität eurer Produktionen begeistert.

Dagobert68 – 5 von 5 Sterne vergeben
Bereits nach kurzem Reinschauen war klar: das perfekte Tutorial! Anschaulich erklärt mit tollen Beispielen – einfach perfekt. Besonders gut gefällt mir auch die Auswahl der Einzelbeispiele. So wird an konkretem Beispiel ein schickes Menü erklärt, ein Formular mit clientseitiger Validierung und sogar auf Boilerplate wird ausführlich eingegangen. Genau so etwas hat mir gefehlt. Danke!

Hanspeter Vogt – 5 von 5 Sterne vergeben
Eine sehr gute und leicht verständliche Einführung, die ein breites Spektrum abdeckt.

Jürgen Hoffmann – 5 von 5 Sterne vergeben
Preis/Leistung super. Für ein Kursangebot für hunderte von Euro würde mir auch das Geld fehlen. So gibt es eine Menge Infos für 30 Euro – Danke.

Die Bewertungen entstammen dem Bewertungssystem vom PSD-Tutorials.de Shop.

Podcast Info:
Titel: Animationen mit CSS3
Autor: Pascal Bajorat
Länge: 18 Min
Dateigröße: 135 MB
Beschreibung: In diesem Video-Training zeige ich euch, wie ihr mittels der CSS3-@keyframes-Funktion einfache Animationen ganz ohne JavaScript bauen könnt. Die Beispiel-Datei aus dem Video ist ebenfalls als Arbeitsmaterial mit enthalten.

Das Material zu diesem Workshop gibt es zusammen mit dem HTML5 & CSS3 Video-Training.

Animationen mit CSS3 – Webdesign-Podcast.de from Pascal Bajorat on Vimeo.

Neben dem AJAX Content Loader wird noch ein netter Animations-Effekt programmiert, der die neuen Inhalte ansprechend in die Seite lädt.

Als Basis für dieses Video-Training steht ein Design für eine Hebamme von Matthias Petri. Das Video Training stammt von der neuen PSD-Tutorials.de Webdesign Workshop DVD Vol. 2 und soll euch einen Einstieg in die Möglichkeiten von HTML5 und CSS3 bieten.

Wenn ihr weiteres Lernmaterial zu moderner Webentwicklung sucht, dann kommt ihr um die neue DVD kaum herum, also einfach einmal anschauen: PSD-Tutorials.de Webdesign Workshop DVD Vol. 2. Ich habe die DVD bereits vor ein paar Wochen in einem ausführlichen Artikel vorgestellt.

Podcast Info:
Titel: Komplette Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen
Autor: Pascal Bajorat
Länge: 81 Min
Dateigröße: 360 MB
Beschreibung: In diesem Video-Training möchte ich euch zeigen, wie ihr eine komplette Webseite auf HTML5- und CSS3-Basis umsetzen könnt. Dabei verwenden wir natürlich nicht nur den neuen HTML5-Doctype, sondern auch einige der neuen HTML5-Tags und CSS3-Funktionen wie box-shadow, border-radius, text-shadow usw. Zusätzlich zeige ich euch, wie Ihr die Seite komplett auf AJAX-Basis aufbauen könnt. Das heißt: Content wird mittels AJAX geladen und nicht, indem man eine komplett neue HTML-Seite aufruft. Für die Umsetzung mit HTML5 und CSS3 verwende ich das HTML5Boilerplate: http://html5boilerplate.com/

Alle Arbeitsdateien zu dem Video-Training gibt es auf der neuen PSD-Tutorials.de Webdesign Workshop DVD Vol. 2

Eine Video zur Design-Erstellung gibt es hier: Website im kinderfreundlichen Look & Feel

Es ist nun genau ein Jahr her, dass Sascha und ich auf die Idee zum Webdesign-Podcast.de gekommen sind, diesen ersten Geburtstag möchten wir mit euch feiern und zwar mit einem großen Gewinnspiel, mit vielen Preisen in einem Gesamtwert von über 500€. Sascha und ich haben ein kleines Video aufgenommen in dem wir das vergangene Jahr noch einmal Revue passieren lassen.

Als erstes sollte natürlich die Frage geklärt werden was es zu gewinnen gibt:

Video2Brain

• 2x eine Power-Workshops: Webdesign mit Photoshop DVD – Produktseite
• 1x Online Training – WordPress – Websites mit WordPress umsetzen und pflegen – Produktseite
• 1x Online Training – Contao – Dynamische Websites mit dem Open Source CMS – Produktseite
• 1x Online Training – Die Website – Design und Programmierung lernen – Produktseite
• 1x Online Training – Dreamweaver CS5 – Produktseite

PSD-Tutorials.de

• 2x eine Photoshop-Workshop-DVD – Webdesign – Produktseite
• 2x eine CINEMA 4D-Workshop-DVD – Produktseite

Smashing Magazine

• 3x ein The Smashing Book #2 – Produktseite

Webstandards-Magazin

• 3x ein Jahres-Abos – Produktseite

An dieser Stelle noch einmal vielen Dank an die Sponsoren unseres Gewinnspiels.

Am Gewinnspiel teilnehmen

Die Teilnahme an dem Gewinnspiel ist relativ einfach, ihr habt zwei Möglichkeiten und dürft auch beide nutzen um eure Gewinnchance zu verdoppeln:

Via Facebook teilnehmen:
Werdert Fan unserer Facebook Fanpage und schreibt einen Eintrag auf die Pinnwand in dem ihr uns entweder Feedback zum Webdesign-Podcast.de direkt gebt oder sagt warum ihr einen der Preise haben möchtet. Dabei solltet ihr in jedem Fall anmerken welchen der Preise ihr gerne gewinnen möchtet, des Weiteren würden wir uns freuen wenn ihr noch den folgenden „gefällt mir“ Button anklickt.

Via Twitter teilnehmen:
Folgt uns auf Twitter @webdesigncast und schreibt einen kurzen Tweet mit einem Hinweis auf dieses Gewinnspiel, der Tweet sollte am Ende mit einem @webdesigncast versehen werden, damit wir eure Tweets sehen.

Für weitere Informationen einfach einmal das Video oben ansehen.

Das Gewinnspiel läuft bis zum 16.06.2011 23:59 Uhr.

Wir wünschen euch viel Spaß und Glück.

Video2Brain

Jetzt video2brain-Abo bestellen und ein Jahr vollen Zugriff auf alle Trainings genießen

Das Trainingsabonnement von video2brain (www.video2brain.com), dem führenden Anbieter hochwertiger, video-basierter Seminare, eröffnet ein Jahr lang unbeschränkten Zugang zu allen Originaltrainings – in komplettem Umfang und mit vollständiger Funktionalität. Aktuell stehen Ihnen als Abonnent über 480 videobasierte Seminare zur Verfügung und es kommen mehrmals im Monat aktuelle Inhalte dazu. So können Abonnenten jederzeit und überall ihr Können bedarfsgerecht erweitern und aktuell halten – mit wertvollem Wissen zu einem günstigen Einführungspreis.

Die Trainingsabonnements präsentieren ausschließlich Originalinhalte in bewährter video2brain-Qualität – führend in Technologie und Methodik sowie bei der Kompetenz der Trainer. Das Themenspektrum wird ständig erweitert und bietet derzeit Praxiswissen und Expertentipps für Kreativanwender, Fotografen, Softwareentwickler, Büroanwender, IT-Fachleute und technische Berufe. Die Standardvariante des Abonnements umfasst uneingeschränkte Online-Nutzung, die Premiumvariante zusätzliche Downloadmöglichkeit und Begleitmaterialien.

Die Trainingsabonnements bieten auf mehrfache Weise Investitions- und Planungssicherheit, denn die uneingeschränkt zugängliche video2brain-Trainingsbibliothek macht fit für die Zukunft. Neue Anforderungen erfüllen oder Qualifikationen erhöhen? Innerhalb der Abonnementslaufzeit geht das ohne Zusatzkosten. Sollen mehr Mitarbeiter trainieren können? Dann bleiben die Kosten klar kalkulierbar und in einem günstigen Rahmen. Wer neue Software testen möchte ohne gleich in teure Originalprogramme zu investieren, kann vorab anhand der Kurse das Leistungsvermögen und die Praxisrelevanz bestimmter Anwendungen recherchieren.

Die Trainingsabonnements ermöglichen selbstbestimmtes Lernen ohne Grenzen. Die Lernenden können selbst entscheiden, was für sie in ihrer persönlichen Situation wichtig ist, auch wenn dieses Wissen über mehrere Kurse hinweg verteilt ist. So lassen sich persönliche Ambitionen in die Tat umsetzen, Wissensvorsprung erarbeiten und Wettbewerbsvorteile erzielen – und gleichzeitig kommt die Freude am Lernen nicht zu kurz.

Premium-Abo: Zugriff auf alle DVD- und Online-Trainings inkl. Download und Rohmaterial:  298,-

Standard-Abo: Zugriff auf alle DVD- und Online-Trainings: 198,-

EDU-Abo: Zugriff auf alle DVD- und Online-Trainings für Schüler, Studierende, Auszubildende, Lehrer oder Professoren: 98,-

Bei dem einen Tool handelt es sich um das von mir entwickelte my code stock.com – Hier der Artikel: my code stock.com Public Beta – Code Verwaltung / Management und Sicherung

Das andere Tool ist prefixmycss.com, hier der entsprechende Artikel: Schneller CSS3 für alle Browser schreiben mit CSS3 Prefix Generator (Webservice)

Bei dem dritten Tool handelt es sich um einen netten Online-Generator für CSS3-Codes (css3generator.com)

Podcast Info:
Titel: Interessante Online-Tools für Webdesigner
Autor: Pascal Bajorat
Länge: 6 Min
Dateigröße: 60 MB

Am gestrigen Dienstag hat Microsoft den neuen Internet Explorer 9 veröffentlicht. Der unter den Webentwicklern eher verpönte Browser macht in der neuen Version einige große Schritte nach vorne. Microsoft scheint begriffen zu haben, dass es sich bei einem Webbrowser um eine wichtige Komponente des Betriebssystems handelt, die nicht vernachlässigt werden darf.

Der IE 9 kommt mit einer deutlich schnelleren JavaScript Engine daher, einer besseren Unterstützung von modernen Webstandards in Form von HTML5 und CSS3 und einer Hardwarebeschleunigung für schnellere Seitendarstellung. Gerade die Unterstützung der aktuellen Webstandards ist ein interessantes Thema, denn Microsoft hat diese zu Ungunsten der Abwärtskompatibilität von älteren Webseiten integriert. Das ist für Webentwickler nun nicht wirklich ein schock, denn vom Standpunkt eines Entwicklers sollten Webseiten sowieso einer gewissen Modernität entsprechen, aber das ist nicht immer der Standpunkt von Microsoft gewesen. Bereits im Internet Explorer 7 und 8 gab es Tools um eine bessere Abwärtskompatibilität zu gewährleisten, die Kompatibilitätsansicht, auch im Internet Explorer 9 ist dieser Modus wieder vorhanden.

Nichtsdestotrotz ist der Internet Explorer 9 ein wichtiger und meiner Meinung nach auch guter Schritt in die Zukunft im Browser-Markt, ich habe den IE 9 zum surfen getestet und muss zugeben, dass er sich bis jetzt ganz gut geschlagen hat.

Beim ACID 3 Test schafft der Internet Explorer 9 ein Ergebnis von 95 von 100 Punkten zum Vergleich Google Chrome und Opera bringen es auf 100. Der Internet Explorer 8 fiel bei dem Test gänzlich durch und erreichte nur 20 Punkte, aus dieser Sicht ein großer Fortschritt.

Hier ein kleines Video des Internet Explorer, er durchläuft die ACID 1-3 Tests und das SunSpider JavaScript Benchmarking:

Microsoft Internet Explorer 9 from Pascal Bajorat on Vimeo.

In dem zweiten Video gehe ich kurz auf ein paar Funktion des Internet Explorer 9 ein und stelle ihn euch vor:

Microsoft Internet Explorer 9 – Testbericht from Pascal Bajorat on Vimeo.

Weitere lesenswerte Testberichte, Videos und Bilder gibt es in dem Artikel von Golem.de

• Für viele Seiten nur noch ein WordPress Update
• Plugins müssen nur noch einmal installiert und geupdatet werden und sind in allen Seiten verfügbar
• Ein WordPress Backend für alle Seiten

In dieser Podcast-Folge möchte ich euch zeigen, wie ihr WordPress im MultiSite / Blognetzwerk Modus installiert.

Wer das ganze noch einmal nachlesen möchte findet den entsprechenden Artikel hier: WordPress Multisite (MU) installieren und konfigurieren

Du möchtest noch mehr über WordPress erfahren und lernen? Dann schau dir doch einmal mein achtstündiges WordPress-Video-Training an. Es behandelt die verschiedensten Themen rund um WordPress praxisnah und gut verständlich, wie z.B. Theme-Erstellung, MultiSite / Blognetzwerk, eigene Plugins, Custom-Post-Types, Suchmaschinenoptimierung und vieles mehr: WordPress-Video-Training von Pascal Bajorat

Dieser Podcast ist die 18 Folge vom Webdesign-Podcast.de und gleichzeitig auch das erste Video-Training auf WordPressTutorials.de

Podcast Info:
Titel: WordPress 3.1 MultiSite / Blognetzwerk Installation
Autor: Pascal Bajorat
Länge: 16 Min
Dateigröße: 107MB

WordPress 3.1 MultiSite Installation from Pascal Bajorat on Vimeo.

In diesem Video erkläre ich euch, wie ihr WordPress in der Version 3.1 im MultiSite Modus installieren und verwenden könnt.

Arbeitsdatei als PSD-File (205kb)

Podcast Info:
Titel: Schoko-Text mit Photoshop
Autor: Patrick Lohmann
Länge: 23 Min
Dateigröße: 90MB

Photoshop: Schoko-Text from Pascal Bajorat on Vimeo.

Über den Autor:
Mein Name ist Patrick Lohmann, bin 22 Jahre jung und im Bereich Print & Webmedien als Freelancer und Medienkünstler unterwegs.
Unter anderem erstelle ich Artworks oder gebe mein Wissen und die gesammelten Erfahrung an andere weiter. Ich bezeichne mich selber als Medienjongleur, da ich eigentlich vor nichts halt mache. Mit großem Interesse, Spaß und viel Energie gehe ich meiner Leidenschaft nach.

Text aus Steinen erstellen

• Mehr Kundenbindung und Kundenloyalität durch Social Media Marketing
• Facebook gefällt mir / like Button in Webseite einbinden
• Facebook “gefällt mir” / like und Open Graph
• Twitter ReTweet Button in Webseite integrieren

Besonders die drei Artikel in denen es um die Integration direkt geht sind bei auch so beliebt, dass ich mich entschlossen habe, die wichtigsten Aspekte dieser drei Artikel in einem Podcast festzuhalten. Wer tiefergreifende Informationen möchte, der klickt sich zusätzlich einfach durch die Linkliste (oben).

Podcast Info:
Titel: Social Media Integration in Webseiten
Autor: Pascal Bajorat
Länge: 21 Min
Dateigröße: 200MB

Video-Podcast in HD 720p über Vimeo ansehen:

Social Media Integration in Webseiten from Pascal Bajorat on Vimeo.

Nach unten springen, um das Video zu sehen.

Googles mod_pagespeed umfasst mehrere Anpassungen der Apache Konfiguration, die das Laden von Webseiten beschleunigen sollen. Dadurch werden Optimierungen umgesetzt, die Google seit geraumer Zeit im Rahmen seiner Pagespeed-Initiative propagiert. Das Apache Modul steht unter einer Open Source Lizenz und ist somit für jeden frei nutzbar. Jeder der über einen eigenen Root-Server verfügt, kann das Modul z.B. als rpm ganz einfach installieren. Wer seine Webseite auf einem Shared-Webspace hostet, hat es hier nicht ganz so einfach, denn in diesem Fall seid ihr auf euren Hoster angewiesen und das er dieses Modul installiert. mod_pagespeed Video auf YouTube

Kommen wir nun zu den Optimierungs-Möglichkeiten die ihr relativ einfach für eure eigene Webseite umsetzen könnt:

HTTP-Requests reduzieren

Ein HTTP-Request ist eine einfache Anfrage an den Webserver z.B. eine GET oder POST Methode. Anders gesagt, wenn ihr z.B. eine CSS oder JavaScript Datei via <link /> oder <script> Tag einbindet wird damit ein HTTP-Request ausgelöst. Das selbe gilt auch für das einbinden von Bildern via <img /> Tag oder wenn Bilder in der CSS-Datei mit Hilfe von background-image eingebunden werden, hierbei wird ebenfalls jedesmal ein HTTP-Request ausgeführt.

Je mehr HTTP-Requests eine Webseite ausführt um komplett geladen zu werden, umso langsamer wird sie, daher macht es Sinn diese HTTP-Requests auf ein Minimum zu reduzieren. Welche Möglichkeiten es da gibt, zeige ich euch in den folgenden Beispielen:

Zusammenlegen von CSS und JavaScript Dateien:
Eine Möglichkeit um HTTP-Requests zu reduzieren ist z.B. wenn ihr mehrere CSS und / oder JavaScript Dateien habt die in einzelne Dateien aufgeteilt sind, aber trotzdem auf allen Seiten geladen werden, diese einfach zusammenzulegen.

Als konkretes Beispiel stellen wir uns vor, dass wir in unserer Webseite die normale CSS und JavaScript Datei und zusätzlich noch zwei JavaScript Dateien und eine CSS Datei von der Lightbox integriert haben. So könnten wir nun die zwei CSS Dateien zu einer Datei bündeln und auch die insgesamt drei JavaScript Dateien in einer einzigen Datei zusammenführen. Auf diese einfache Art und Weise hätten wir bei diesem Beispiel drei HTTP-Requests gespart.

CSS Media Types in einer Datei bündeln:
Wenn ihr auf eurer Webseite mehrere CSS-Dateien mit unterschiedlichen Media Types verwendet besteht die Möglichkeit diese in einer Datei zu bündeln (wie oben bereits erwähnt). Hier gilt allerdings Obacht, denn eine Handheld CSS wird normalerweise nur geladen, wenn die Webseite auch mit einem mobilen Endgerät aufgerufen wird. Werden diese Dateien nun gebündelt und die Handheld CSS enthält z.B. über 50-100 Zeilen Code extra für Mobilgeräte, so wird dieser Code jedes mal mitgeladen auch wenn die Seite gar nicht von einem mobilen Endgerät geöffnet wurde. Würde unsere Handheld CSS nun aber z.B. nur aus 5-10 Zeilen bestehen, so wäre es kein Probleme diese in die normale Screen CSS mit aufzunehmen.

Hier ein Beispiel wie eine CSS-Datei mit mehreren Media Types auszusehen hat:

/* Der allgemeine CSS Code */
body{font-weight:bold;}

@media print {
  /* StyleSheet für den Druck der Webseite */
}

@media handheld {
  /* StyleSheet für Mobilgeräte */
}

Grafiken zusammenfügen zu einer großen Grafik:
Bei einem sehr grafiklastigen Layout habt ihr in der Regel viele Bilder die in der CSS Datei via background eingebunden werden. Das verursacht nicht nur eine enorme Menge an HTTP-Requests, sonden bedeutet auch eine Erhöhung der Gesamtgröße aller Bilder zusammen, z.B. wenn in jeder Grafik das ICC-Profil mit eingebunden wird.

Abhilfe schafft hier folgende Methode: Ihr verfrachtet soweit wie möglich alle PNG Bilder in ein großes PNG, alle JPG Bilder in eine einzige große JPG Datei usw. Hierbei sollte natürlich beachtet werden, dass sinvoll aufgeteilt wird: Nur weil z.B. eine PNG 24-Datei vorhanden ist die Transparenzen benötigt, sollten nicht auch die restlichen JPG Bilder in eine große PNG Datei gebündelt werden, denn ein PNG ist von der Dateigröße später viel größer als ein JPG es mit allen Grafiken wäre. In so einem Fall bleibt die PNG dann einfach als Einzelgrafik weiter bestehen bzw. wird mit anderen PNG-24 Grafiken gebündelt, sowie alle JPG Bilder in einer JPG Datei zusammengefasst werden.

Wenn ihr dann später eine Grafik aus diesem großen Paket als Hintergrund für einen Div-Container verwenden wollt, so könnt ihr via CSS background-position die Hintergrundgrafik soweit verschieben, dass auch nur der gewünschte Bereich zu sehen ist.

Durch diese Methode spart ihr euch eine Menge HTTP-Requests und reduziert die Dateigröße der Grafiken, da nicht in jeder Grafik aufs neue (z.B.) das ICC-Profil eingebunden wird.

Beispiel für CSS Background-Position:

/* 200px 250px ( X / Y ) */
background:url(images/layout.jpg) no-repeat 200px 250px;

Grafiken richtig komprimieren und speichern

Ihr solltet Grafiken im richtigen Format und mit entsprechend passender Kompression speichern. So sollte ein kleines Icon mit z.B. 64 Farben nicht als JPG gespeichert werden, sondern als GIF (bis zu 256 Farben möglich) Datei.

Des Weiteren bietet euch das JPG Format die Möglichkeit Bilder mit einem bestimmten Qualitätsfaktor (Kompression) zu speichern um die Dateigröße zu veringern.

Sehr hilfreich ist hier auch der Dialog „Für Web und Geräte speichern…“ in Photoshop, mehr dazu im Podcast.

Podcast Info:
Titel: Ladezeiten-Optimierung von Webseiten
Autor: Pascal Bajorat
Länge: 23 Min
Dateigröße: 120MB

Video-Podcast in HD 720p über Vimeo ansehen:

Ladezeiten-Optimierung von Webseiten from Pascal Bajorat on Vimeo.

Ich erkläre euch dabei 2 Methoden. Einmal die Erstellung über die Einstellungsebenen und zusätzlich mit fertigen Settings aus einem Filter von NIK-Software.

Das Video ist nicht das einzige was Ihr dazu bekommt, es gibt zusätzlich auch noch die Bearbeitung der Bilder als Aktion, sodass ihr ganz einfach die gezeigten Effekte nachmachen könnt und natürlich auch verändern könnt.

Die Aktion könnt ihr ganz einfach durch einen Doppelklick auf die Datei installieren und somit nutzen. Bei Fragen und Problemen meldet euch bitte in den Kommentaren:

Aktionen herunterladen (4Kb)

Podcast Info:
Titel: Pastel-Look/CrossProcess Look mit Photoshop, einfach und schnell
Autor: Tobias Bechtle
Länge: 14min
Dateigröße: 84MB

Video-Podcast in HD 720p über Vimeo ansehen:

Pastel-Look/Cross-Process Look from Pascal Bajorat on Vimeo.

Hier könnt ihr die Beispieldateien herunterladen…

In Kooperation mit Terrashop präsentieren wir euch in dieser Podcast-Folge das Buch Little Boxes Teil 0 von Peter Müller erschienen im Verlag Markt und Technik.

Auszug aus dem Buch:
Webseiten bauen beginnt nicht erst mit HTML & CSS. Sondern mit dem Wissen um den richtigen Einsatz von Text und Bild. Mit dem Wissen um den richtigen Aufbau Ihrer Website, damit Besucher und Suchmaschinen gern vorbeischauen. Mit der passenden Auswahl von Technologie, Webhoster und Werkzeugen. Und mit einem guten Plan für die Umsetzung Ihres Vorhabens. Kurz: Webseiten bauen beginnt mit den Grundlagen. Bei Null. Wie dieses Buch. weitere Informationen…

Das Buch könnt ihr bei Terrashop im Rahmen einer Aktion für 4,95€ bekommen anstatt der üblichen 17,95€, da kann man also nicht viel falsch machen -> Little Boxes Teil 0 auf Terrashop.de ansehen

Ein Exemplar des Buches könnt ihr hier bei uns im Rahmen einer Verlosung gewinnen.

Podcast-Info:
Titel: Navigation für Webseiten
Autor: Sascha Rudolph
Länge: ca. 19 Min
Dateigröße: 85 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Navigation erstellen in Photoshop from Pascal Bajorat on Vimeo.

Für das Tutorial verwende ich folgende Stockgrafiken aus dem Bildarchiv von StockXchange – sxc.hu:
http://www.sxc.hu/photo/1253789
http://www.sxc.hu/photo/1310577
http://www.sxc.hu/photo/1287251

Die Dateien zum Nachbauen findet ihr hier als *.zip Datei (64MB). Es sind zwei *.psd Dateien enthalten, die eine die ich zur Vorschau erstellt habe und die andere die ich während der Podcast-Folge erstellt habe. Tutorial Dateien herunterladen

In Kooperation mit Terrashop präsentieren wir euch in dieser Podcast-Folge das Buch Little Boxes Teil 0 von Peter Müller erschienen im Verlag Markt und Technik.

Auszug aus dem Buch:
Webseiten bauen beginnt nicht erst mit HTML & CSS. Sondern mit dem Wissen um den richtigen Einsatz von Text und Bild. Mit dem Wissen um den richtigen Aufbau Ihrer Website, damit Besucher und Suchmaschinen gern vorbeischauen. Mit der passenden Auswahl von Technologie, Webhoster und Werkzeugen. Und mit einem guten Plan für die Umsetzung Ihres Vorhabens. Kurz: Webseiten bauen beginnt mit den Grundlagen. Bei Null. Wie dieses Buch. weitere Informationen…

Das Buch könnt ihr bei Terrashop im Rahmen einer Aktion für 4,95€ bekommen anstatt der üblichen 17,95€, da kann man also nicht viel falsch machen -> Little Boxes Teil 0 auf Terrashop.de ansehen

Ein Exemplar des Buches könnt ihr hier bei uns im Rahmen einer Verlosung gewinnen.

Podcast-Info:
Titel: Header-Collage für Webseite
Autor: Sascha Rudolph
Länge: ca. 27 Min
Dateigröße: 160 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Header-Collage für Webseite from Pascal Bajorat on Vimeo.

In Kooperation mit Terrashop präsentieren wir euch in dieser Podcast-Folge das Buch Little Boxes Teil 0 von Peter Müller erschienen im Verlag Markt und Technik.

Auszug aus dem Buch:
Webseiten bauen beginnt nicht erst mit HTML & CSS. Sondern mit dem Wissen um den richtigen Einsatz von Text und Bild. Mit dem Wissen um den richtigen Aufbau Ihrer Website, damit Besucher und Suchmaschinen gern vorbeischauen. Mit der passenden Auswahl von Technologie, Webhoster und Werkzeugen. Und mit einem guten Plan für die Umsetzung Ihres Vorhabens. Kurz: Webseiten bauen beginnt mit den Grundlagen. Bei Null. Wie dieses Buch. weitere Informationen…

Das Buch könnt ihr bei Terrashop im Rahmen einer Aktion für 4,95€ bekommen anstatt der üblichen 17,95€, da kann man also nicht viel falsch machen -> Little Boxes Teil 0 auf Terrashop.de ansehen

Podcast-Info:
Titel: Panorama mit Photoshop erstellen
Autor: Sascha Rudolph
Länge: ca. 11 Min
Dateigröße: 76 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Panorama erstellen in Photoshop from Pascal Bajorat on Vimeo.

Das Download-Paket mit den Beispieldateien folgt heute Abend, bis dahin viel Spaß mit dem Video.

Rohmaterial / Stockmaterial von sxc.hu sowie die überarbeitete PSD-Datei

Outtakes: Da wir natürlich auch jede Menge Spaß bei der Produktion unserer Podcast-Folgen haben, gibt es in dieser Folge zum ersten Mal ein paar Outtakes. Die Outtakes befinden sich wie gewohnt ganz am Ende der Folge, viel Spaß.

Podcast-Info:
Titel: Haare freistellen mit Alpha-Kanälen
Autor: Sascha Rudolph
Länge: ca. 6 Min
Dateigröße: 46 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Haare freistellen mit Photoshop from Pascal Bajorat on Vimeo.

Das Tutorial zum nachlesen versteckt sich hinter diesem Link, Video gibt es in diesem Artikel

Die PSD-Datei zum Tutorial: candy-plastik-navigation.psd

Podcast-Info:
Titel: Candy / Plastik Navigation mit Photoshop
Autor: Pascal Bajorat
Länge: ca. 10 Min
Dateigröße: 59 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Candy / Plastik Navigation mit Photoshop from Pascal Bajorat on Vimeo.

Alle Dateien, die Ihr zum Nachbauen benötigt, findet ihr hier als *.zip Datei. Sollten ihr dazu noch Fragen haben, könnt ihr uns einfach über unser Kontaktformular oder in der Kommentarfunktion anschreiben. Viel spaß!

Das komplette Tutorial zum durchlesen findet ihr hier.

Photoshop Dateien und Grundelemente als .zip Datei zum Nachbauen herunterladen 21MB

Efeu Stock von sxc.hu

Podcast-Info:
Titel: Rustikale Elemente in Photoshop
Autor: Sascha Rudolph
Länge: ca. 25 Min
Dateigröße: 76 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Rustikale Elemente in Photoshop erstellen from Sascha Rudolph on Vimeo.

Google Analytics ist eine sehr mächte Analyse Software um die Statistiken einer Webseite auszuwerten. Doch seit einigen Tagen gibt es eine mindestens genau so gute OpenSource Lösung namens Piwik.

Piwik ist eine Open-Source (GPL lizenzierte) Echtzeit-Webanalyse-Software, die heruntergeladen werden und auf den eigenen Servern betrieben werden kann. Piwik bietet detaillierte Echtzeit-Berichte über die Besucher Ihrer Website, die genutzten Suchmaschinen und Suchbegriffe, die Sprache, Ihre beliebten Seiten, Herkunftsländer, SEO Ränge, und vieles mehr. Piwik lässt sich komfortable über ein Installations-Script innerhalb von 5-Minuten installieren… Den Artikel zu Piwik weiterlesen

Podcast-Info:
Titel: Piwik Analytics
Autor: Pascal Bajorat
Länge: ca. 9 Min
Dateigröße: 76 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Piwik Analytics, die OpenSource alternative zu Google Analytics from Pascal Bajorat on Vimeo.

In diesem Artikel geht es um den zweiten Teil – Syntactically Awesome Stylesheets (SASS) von Christian Kaula. Ein Paar Informationen zum Autor gibt es natürlich wieder vorweg:

Christian Kaula ist Diplom-Informatiker und bezeichnet sich selbst als „Lazy (Fauler) Coder“. Dies ist aber nicht als Nachteil zu sehen, ganz im Gegenteil, denn dadurch entdeckt er immer wieder interessante Tools, die Ihm, und auch Programmierern das Leben einfacher machen. Nach diesem kurzen Einstieg fangen wir jetzt an. Viel Spaß!

Wir suchen für unseren Blog und Podcast Projekt Webdesign-Podcast.de Redakteure für den Blogbereich, wie auch für den Screencast

Du bist begeisterter Webdesigner und kennst dich mit Layout-Programmen oder mit der Programmierung von Webseiten gut aus und möchtest dein Wissen nicht nur im dunklen Kämmerchen hüten? Dann bist du genau der richtige um uns bei unserem Webdesign-Podcast.de Projekt zu unterstützen.

Wir möchten mit unserem Projekt Anfänger wie auch Profis in Sachen Webdesign immer wieder neue und interessante Themen liefern und kostenlose Weiterbildungs- und Lernmöglichkeiten schaffen.
Webdesign-Podcast.de mitmachen

Den Artikel zu dieser Podcast Folge findet ihr hier.

Du kannst die Präsentation auch im Original Vortrags PDF mit verfolgen. PDF hier downloaden!

Podcast-Info:
Titel: Syntactically Awesome Stylesheets (SASS)
Autor: Pascal Bajorat
Vortrag von: Christian Kaula
Länge: ca. 61 Min
Dateigröße: 154 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Syntactically Awesome Stylesheets (SASS) from Pascal Bajorat on Vimeo.

In dieser Podcast-Folge möchten wir euch die Aufnahmen aus dem ersten CSS-Vortrag Vererbung und Kaskadierung bereitstellen. Gehalten wurde dieser von:

Regine Heidorn
Ausbildung: SAE Berlin Multimedia Creative Diploma
Abschlussarbeit: CSS und Barrierefreiheit
Seit 2006 selbständig

Ihr findet alle Informationen zu diesem Vortrag auch noch einmal in schriftlicher Form in unserem Blog:
https://www.webdesign-podcast.de/2010/08/18/css-vererbung-und-kaskadierung-2/

Leider ist die Ton-Qualität vom Vortrag nicht die Beste, dafür möchten wir uns im voraus bei euch entschuldigen.

Du kannst die Präsentation auch im Original Vortrags PDF mit verfolgen. PDF hier downloaden!

Podcast-Info:
Titel: Icon mit Adobe Photoshop
Autor: Pascal Bajorat
Vortrag von: Regine Heidorn
Länge: ca. 48 Min
Dateigröße: 125 MB

Video-Podcast in HD 720p über Vimeo ansehen:

CSS-Tag in Dresden (Vererbung & Kaskadierung) from Pascal Bajorat on Vimeo.

Datein zum Podcast 4 (PSD-Datei)

Podcast-Info:
Titel: Icon mit Adobe Photoshop
Autor: Sascha Rudolph
Länge: ca. 11 Min
Dateigröße: 45 MB

Video-Podcast in HD 720p über Vimeo ansehen:

Icon in Adobe Photoshop from Sascha Rudolph on Vimeo.

Wie genau das funktioniert erkläre ich euch in dieser Podcast Folge.

Hier findet Ihr die ganze Prozedur noch einmal als Text Tutorial.

JavaScript Daten zum Podcast 3

Podcast-Info:
Titel: Accordion mit jQuery
Autor: Pascal Bajorat
Länge: ca. 19 Min
Dateigröße: 89 MB

Podcast als *.mp4 (QuickTime Player) Datei laden

Video-Podcast in HD 720p über Vimeo ansehen:

Accordion mit jQuery from Pascal Bajorat on Vimeo.

Hier findet Ihr die ganze Prozedur noch einmal als Text / Bild Tutorial.

Podcast-Info:
Titel: Logo aufbessern in Photoshop
Autor: Sascha Rudolph
Länge: ca. 12 Min
Dateigröße: 50 MB

Podcast als *.mp4 (QuickTime Player) Datei laden

Video-Podcast in HD 720p über Vimeo ansehen:

Logo aufbessern in Photoshop from Sascha Rudolph on Vimeo.

Google Font Directory – http://code.google.com/webfonts
Den Blog Artikel zum Font Directory findet ihr hier.

Cufón – http://cufon.shoqolate.com
Den Blog Artikel zu Cufón findet ihr hier.

Podcast-Info:
Titel: Fonts in Webseiten einbinden
Autor: Pascal Bajorat
Länge: ca. 12 Min
Dateigröße: 70 MB

Beispieldateien, die ich im Podcast erstellt habe.

Podcast als *.mp4 (QuickTime Player) Datei laden

Video-Podcast in HD 720p über Vimeo ansehen:

Fonts in Webseiten einbinden from Pascal Bajorat on Vimeo.