Podcast
Webdesign-Podcast.de
Hosted by Pascal Bajorat · GERMAN
Webdesign-Podcast.de – Deine Anlaufstelle für Tutorials und Video-Workshops zu Webdesign und Programmierung
42episodes
Episodes
Newest firstAll episodes
Google Analytics datenschutzkonform und rechtssicher integrieren
Feb 10, 201800:07:33Tap to summarizeDank 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. 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 Wirt...
Transcribe →Bootstrap 4 Komplettkurs – Jetzt 50% Einführungsrabatt sichern
Oct 20, 201700:07:33Tap to summarizeBootstrap 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({}); Der große Bootstrap 4 Komplettkurs 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: Bootstrap 4 Komplettkurs – Beispielwebseite 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. Boostrap 4 Referenzkarte 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 Ähnliche Artikel: <a href="https://www.webdesign-podcast.de/2017/07/28/wordpr...
Transcribe →WordPress-Online-Kurs jetzt mit exklusivem Rabatt
Jul 28, 201700:34:43Tap to summarizeSeit 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. 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. Ähnliche Artikel: WordPress-Trainings im Doppelpack extrem reduziert WordPress für Einsteiger und Autoren Suchmaschinenfreundliche Bilder für WordPress – PB SEO Friendly Images
Transcribe →WordPress 4.8 ist da – das sind die neuen Funktionen
Jun 8, 201700:04:48Tap to summarizeSeit 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. WordPress 4.8 – Neue Widgets 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. Ähnliche Artikel: WordPress für Einsteiger und Autoren 10 professionelle und kostenlose WordPress Themes 10 kostenlose und außergewöhnliche WordPress Themes
Transcribe →Suchmaschinenfreundliche Bilder für WordPress – PB SEO Friendly Images
Jan 23, 201700:08:47Tap to summarizeWordPress 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. PB SEO Friendly Images 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. Einstellungen von PB SEO Friendly Images (auch in deutsch verfügbar) 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 Ähnliche Artikel: Suchmaschinenoptimierung (SEO) für WordPress WordPress Performance-Optimierung an einem Praxis-Beispiel WordPress auf HTTPS umstellen, so gelingt der Umstieg auf die SSL-Verschlüsselung
Transcribe →WordPress 4.7 ist ab jetzt verfügbar!
Dec 7, 201600:13:41Tap to summarizePü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. Twenty Seventeen 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. Theme-Customizer Shortcuts 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. WordPress 4.7: Neuer Menübereich Custom CSS Bereich direkt in WordPress, es ist kein Drittanbieter Plugin mehr dafür notwendig. Custom CSS in WordPress 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. Ähnliche Artikel: Angriffe auf Admin-Konten von WordPress-Systemen WordPress für Einsteiger und Autoren Post Thumbnails in WordPress verwenden
Transcribe →E-Mail-Verschlüsselung für WordPress mit dem MailCrypt AntiSpam Plugin
Jan 18, 201600:13:23Tap to summarizeVor rund drei Jahren habe ich an dieser Stelle im Blog meine Lösung zur Spam-Abwehr vorgestellt. Das WordPress Plugin PB MailCrypt – AntiSpam E-Mail Encryption, welches die E-Mail Adressen in WordPress mittels Shortcode maskiert und so vor Spam-Bots schützen soll. Das WordPress Plugin setzt dabei auf das gleichnamige jQuery Plugin, welches ebenfalls schon hier im Blog vorgestellt wurde. Anzeige: (adsbygoogle = window.adsbygoogle || []).push({}); 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. PB MailCrypt – AntiSpam E-Mail Encryption 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 oder mit einem anderen Linktext als der E-Mail Adresse: [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“. MailCrypt installieren Ist das Plugin gefunden, muss dieses nur noch installiert werden. Im darauffolgenden Fenster kann das Plugin dann auch direkt aktiviert werden. MailCrypt aktivieren Nach der Aktivierung leitet WordPress automatisch zur Übersicht über alle installierten Plugins weiter. MailCrypt Einstellungen öffnen Von dort können dann auch direkt die Einstellungen für PB MailCrypt aufgerufen werden. MailCrypt konfigurieren In den Einstellungen kann nun der oben bereits beschriebene Automatikmodus aktiviert oder der Shortcode für die spätere Verwendung kopiert werden. Ähnliche Artikel: jQuery Plugin MailCrypt Effektive Email-Verschlüsselung – Email Schutz vor Spambots E-Mail Bots bekämpfen – E-Mail Adressen maskieren Angriffswelle auf WordPress-Webseiten (Jetpack Plugin)
Transcribe →WordPress für Einsteiger und Autoren
Aug 4, 201500:27:50Tap to summarizeDu willst WordPress für deine Website nutzen, bist aber noch Einsteiger oder Anwender ohne Entwicklerhintergrund? In meinem neuen Video-Training „WordPress für Einsteiger und Autoren” möchte ich dir alle Grundlagen von WordPress erklären, die du für deine tägliche Arbeit mit dem System benötigst. 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. Anzeige: (adsbygoogle = window.adsbygoogle || []).push({}); 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. Ähnliche Artikel: 10 professionelle und kostenlose WordPress Themes WordPress-Trainings im Doppelpack extrem reduziert 10 kostenlose und außergewöhnliche WordPress Themes
Transcribe →WordPress benutzerdefinierte Felder mit Advanced Custom Fields meistern
Mar 23, 201500:24:09Tap to summarizeBenutzerdefinierte Felder oder auch Custom Fields sind in WordPress sehr hilfreich, um zusätzliche Inhalte und Daten zu Seiten, Artikeln oder auch eigenen Inhalts-Typen (Custom-Post-Types) zu speichern. 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. Anzeige: (adsbygoogle = window.adsbygoogle || []).push({}); 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“. Benutzerdefinierte Felder einblenden 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. Benutzerdefinierte Felder 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. Custom-Field mit Beispiel-Wert 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,...
Transcribe →Zwei Tools um Bilder fürs Web zu komprimieren bzw. zu optimieren
Mar 5, 201500:06:52Tap to summarizeDass Bilder in vielen Fällen einen großen Teil der Datenmenge moderner Webseiten ausmachen, ist allseits bekannt. Es ist jedoch oftmals nicht ausreichend, wenn die Bilder nur über die Photoshop Funktion „Für Web speichern…“ gesichert und optimiert werden. Oftmals lässt sich über andere Tools ein noch wesentlich höherer Gewinn an Dateigröße einsparen. 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. Anzeige: (adsbygoogle = window.adsbygoogle || []).push({}); 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 – Screenshot 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. ImageOptim – Screenshot 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. PNG Gauntlet – Screenshot 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 Ähnliche Artikel: <l...
Transcribe →