42 episodes

Der Webdesign-Podcast.de ist ein Blog und Video-Podcast (Screencast) von Pascal Bajorat und Sascha Rudolph. Gemeinsam möchten wir euch in den Screencasts Tutorials zu den verschiedensten Themen im Web- und Grafikbereich zeigen. Neben den Tutorials und Anleitung erhaltet ihr auch immer wieder Neuigkeiten aus dem Bereich der Technik und Software.



Weitere Informationen erhaltet ihr auch auf unserer Webseite: www.webdesign-podcast.de - Feedback könnt ihr uns gerne über das Kontaktformular oder direkt via E-Mail zukommen lassen.

Webdesign-Podcast.de Pascal Bajorat

    • Technology

Der Webdesign-Podcast.de ist ein Blog und Video-Podcast (Screencast) von Pascal Bajorat und Sascha Rudolph. Gemeinsam möchten wir euch in den Screencasts Tutorials zu den verschiedensten Themen im Web- und Grafikbereich zeigen. Neben den Tutorials und Anleitung erhaltet ihr auch immer wieder Neuigkeiten aus dem Bereich der Technik und Software.



Weitere Informationen erhaltet ihr auch auf unserer Webseite: www.webdesign-podcast.de - Feedback könnt ihr uns gerne über das Kontaktformular oder direkt via E-Mail zukommen lassen.

    • video
    Google Analytics datenschutzkonform und rechtssicher integrieren

    Google Analytics datenschutzkonform und rechtssicher integrieren

    Dank diverser Regelungen und Vorgaben ist es mittlerweile gar nicht mehr so einfach Google Analytics datenschutzkonform und rechtssicher in Webseiten zu integrieren.

    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.



    Anzeige:











    (adsbygoogle = window.adsbygoogle || []).push({});











    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.

    • 7 min
    • video
    Bootstrap 4 Komplettkurs – Jetzt 50% Einführungsrabatt sichern

    Bootstrap 4 Komplettkurs – Jetzt 50% Einführungsrabatt sichern

    Bootstrap ist das weltweit bekannteste und auch meistgenutzte Frontend-Framework. In unserem kürzlich veröffentlichten Bootstrap 4 Kurs, möchten wir dir praxisnah die Schritt-für-Schritt-Umsetzung einer vollständigen Webseite mit Bootstrap 4 und allen dazugehörigen Komponenten erklären. Dabei zeigen wir dir nur das, was du brauchst, um schnell Ergebnisse zu erzielen und sofort loszulegen.

    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.



    Anzeige:











    (adsbygoogle = window.adsbygoogle || []).push({});







    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.

    • 7 min
    • video
    WordPress-Online-Kurs jetzt mit exklusivem Rabatt

    WordPress-Online-Kurs jetzt mit exklusivem Rabatt

    Seit wenigen Wochen ist mein neuer WordPress-Online-Kurs für Macher und Anwender nun zu haben. Zum Ende dieser Woche möchte ich zur Feier von mittlerweile über 100 Teilnehmern, allen Webdesign-Podcast.de Lesern einen exklusiven Rabatt für den Kurs anbieten.

    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.



    Anzeige:











    (adsbygoogle = window.adsbygoogle || []).push({});







    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.

    a class="download-button" title="WordPress-Online-Kurs jetzt mit exklusivem Rabatt" href="https://goo.

    • 34 min
    • video
    WordPress 4.8 ist da – das sind die neuen Funktionen

    WordPress 4.8 ist da – das sind die neuen Funktionen

    Seit kurzem steht WordPress 4.8 zum Download bereit. In diesem Artikel stelle ich die neuen Funktionen inkl. Video kurz vor.

    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“.



    Anzeige:











    (adsbygoogle = window.adsbygoogle || []).push({});









    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.

    • 4 min
    • video
    Suchmaschinenfreundliche Bilder für WordPress – PB SEO Friendly Images

    Suchmaschinenfreundliche Bilder für WordPress – PB SEO Friendly Images

    WordPress ist von Haus aus auf eine suchmaschinenfreundliche Struktur ausgelegt. Diese Tatsache gilt selbstverständlich auch für Bilder. Das Problem bei nicht korrekt optimierten oder gar nicht vorhandenen Alternativtexten oder Titeln (welche für suchmaschinenfreundliche Bilder relevant sind) liegt oftmals eher im Bereich des Anwenders.

    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.



    Anzeige:











    (adsbygoogle = window.adsbygoogle || []).push({});







    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 wurd...

    • 8 min
    • video
    WordPress 4.7 ist ab jetzt verfügbar!

    WordPress 4.7 ist ab jetzt verfügbar!

    Pünktlich zum Nikolaus wurde WordPress 4.7 veröffentlicht. Wie immer ist auch diese neue Version einem Jazzmusiker gewidmet. In diesem Fall gilt die Ehre der in den 90er Jahren verstorbenen Sarah „Sassy“ Vaughan aus New Jersey.

    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.



    Anzeige:











    (adsbygoogle = window.adsbygoogle || []).push({});







    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.

    • 13 min