Andreas Unkelbach
Logo Andreas-Unkelbach.de

Artikel zum Stichwort Webdesign

Alle folgende Artikel sind unter den angegeben Stichwort (TAG) einsortiert. Sollte der gesuchte Artikel nicht dabei sein kann hier auch die Artikelsuche weiter helfen.

Oft sind aber auch die aktuellen Artikel in der jeweiligen Kategorie im Menü interessant.
Espresso Tutorial - die digitale SAP Bibliothek

SAP Fachliteratur ist unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.



Sonntag, 19. März 2017
09:30 Uhr

Kommentarfunktion im Blog Umgang mit Spam auch unter Beachtung des Datenschutz

Letztes Jahr hatte ich hier im Artikel "Traffic Spam oder Möglichkeiten einer IP-Sperrliste für Webangebote" schon einmal davon berichtet, dass dieses Blog eine unerwartet hohe Zugriffszahl an Traffic erhalten hatte und dieses relativ eindeutig an automatisierte Kommentaren mit Spaminhalten zugeordnet werden konnte.

Der Artikel im c't Magazin "Mit Kommentaren im eigenen Blog umgehen" hat hier schon einige Möglichkeiten zur Vorgehensweise gegen solche Kommentare vorgestellt.

Eine der auch hier im Blog verwendeten Maßnahmen ist eine Zeit die vergehen muss, bis ein Kommentar abgesetzt werden kann, wie an folgender Meldung nach einen recht schnellen Kommentar zu sehen ist.
Etwas schnell kommentiert

Die Meldung besagt beschreibt dabei schon sehr deutlich diese Maßnahme.

Das war ein bisschen schnell. Als Spamschutz wird überprüft, ob Sie sich lange genug auf dieser Seite aufgehalten haben. Bitte senden Sie Ihren Kommentar nach einer kurzen Wartezeit erneut ab.
 

Nach einiger Zeit kann dann tatsächlich der Kommentar abgesandt werden (es handelt sich beim Zeitlimit um wenige Sekunden, was im Grunde auch der Zeit entspricht in der ein Artikel gelesen wird.

Bei manchen Artikeln habe ich durch das hohe Spamaufkommen die Kommentarfunktion komplett deaktiviert, so dass nach den schon vorhandenen Kommentaren folgende Meldung erscheint.

Keine Kommentare
Auch hier hoffe ich, dass die Meldung nicht abschreckend wirkt.

Für diesen Beitrag ist die Kommentarfunktion gesperrt. Sollten Sie eine Anmerkung oder Frage zu diesen Artikel haben freue ich mich über eine Rückmeldung per Mail. Meine Kontaktdaten finden Sie unter Kontakt aber auch am Ende dieser Seite. Neben Mail stehen hier auch verschiedene "soziale Netzwerke" zur Verfügung.

In den letzten Wochen hat allerdings das Volumen derart zugenommen, dass ich tageweise über 100 Kommentare im Blog erhalten habe, die zwar teilweise durch einen Wortfilter geblockt worden sind, aber dennoch einzeln betrachtet und teils auch gelöscht werden mussten. Ich vermute, dass bei größeren Blogs hier ein etwas höheres Kommentaraufkommen sein dürfte... aber für dieses Blog war das dann doch eine etwas ungewöhnlich hohe Zahl an Kommentaren die sich dann auch primär um die Themen Glücksspiel und andere Webangebote ausserhalb des Themenbereich der hier veröffentlichten Artikel drehten.

Der Einsatz einer Diskussionsplattform wie Disqus kommt für mich nicht in Frage, da ich ungern die Kommentare außerhalb des Blogs hosten möchte. Ebenso mag ich ungern, unter anderen auch aus Datenschutzgründen, einen externen Dienst zur Überprüfung von Kommentaren verwenden. Zum Thema "Rechtssichere Spamabwehr" mag ich gerne auf den Artikel "Akismet Privacy Policies" – Rechtssichere Spamabwehr in WordPress" von Rechtsanwalt Dr. Thomas Schwenke verweisen.
 

Kommentar-IP-Adresse

Trotzdem habe ich mittlerweile das Kommentarsystem umgestellt, so dass mir bei Kommentaren die IP des Verfassers mitgeteilt wird und ich hier über den Kommentar informiert werde und entsprechende Maßnahmen zur Spamabwehr ergreifen kann. Daneben wurde auch die Datenschutzerklärung im Blog um den Punkt zur kurzfristigen Speicherung der IP Adresse erweitert.

Technisch bekomme ich die IP per Mail mitgeteilt und diese wird nicht im Blogsystem selbst gespeichert.

IP Adresse in PHP auselesen

Die IP Adresse kann mit PHP in eine Variable durch den Code $_SERVER["REMOTE_ADDR"]; gespeichert werden und wird hier in der Benachrichtigungsmail von Kommentaren ergänzt.


Nach Lesen des Kommentars wird diese Benachrichtigung auch direkt gelöscht, was in der Regel relativ schnell erfolgt. Einen entsprechenden Hinweis habe ich unter "XII. Fremde Nutzung / Kommentarfunktion" in der Datenschutzerklärung sowie im Kommentarfeld ergänzt.

Beim Versenden eines Kommentars wird mir ihre IP mitgeteilt. Diese wird jedoch nicht dauerhaft gespeichert (siehe auch XII. Fremde Nutzung / Kommentarfunktion in der Datenschutzerklärung).


Hier habe ich tatsächlich den Vorteil, dass das eingesetzte Blog eine Eigenentwicklung ist und auf aktuelle Gegebenheiten auch angepasst werden kann.

Zukunft der Kommentarfunktion

Tatsächlich sind "echte" Kommentare hier im Blog relativ selten, aber hin und wieder werden Artikel tatsächlich durch eine rege Diskussion und einen entsprechenden Austausch bereichert. Teilweise sind hier Kommentare sogar ausführlicher als der Artikel selbst, was sich auch durch Rückfragen und entsprechende Antworten und neue Aspekte in ein Thema ergeben kann.

Durch eine Umstellung im Kommentarsystem ist gestern tatsächlich der Inhalt des Kommentars nicht übermittelt worden, was mich dann tatsächlich vor die Frage stellt, ob eine technische oder eine andere Lösung nicht effektiver das Problem an gehen könnte.

Für mich ist hier die Überlegung noch nicht abgeschlossen, aber ich überlege tatsächlich, die Kommentarfunktion komplett in den Artikeln zu sperren und auf meine Mailadresse für Rückmeldungen hinzuweisen und den Artikel dann entsprechend zu aktualisieren.

Die Artikel hier im Blog sind relativ zeitlos, so dass es auch wenig Sinn machen würde in einzelnen Artikel, die älter als zwei Monate sind, automatisch keine Kommentare zuzulassen.

Hier würde mich tatsächlich die Rückmeldung von hier ebenfalls hin und wieder lesenden anderen Blogbetreiebnden interessieren.

Kommunikation außerhalb der Kommentare

Bei Kolleginnen und Kollegen ist mir immerhin schon aus guter Erfahrung bekannt, dass diese ohnehin eher zum Telefon oder zur Mail bei Rückfragen zu Artikeln greifen... An dieser Stelle übrigens viele Grüße an die ein oder andere Hochschule :-)). Aber auch sonst freue ich mich immer über die ein oder andere Mail aus der nicht nur schon Artikel entstanden sind sondern auch großartige gemeinsame Projekte oder auch spannende Diskussionen.

Eine endgültige Meinung habe ich mir für dieses Blog noch nicht gebildet, werde aber erst einmal schauen, wie sich die Kommentare die nächsten Monate entwickeln.

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Montag, 6. Februar 2017
19:24 Uhr

Technikupdate im Blog, Feedly und Syntaxhighlighting

Nachdem der Umzug meiner Seite abgeschlossen war (siehe "Webhosterwechsel und Umstellung von http:// auf https:// (SSL Verschlüsselung) und VG Wort Zählmarken") habe ich nun noch einen kleinen Fehler behoben.

Innerhalb der Kategorien dieser Seite oder auch im Blog selbst, wenn nicht direkt ein Artikel aufgerufen wurde, kann über die Schaltflächen  "Frühere Artikel" und "Spätere Artikel" zwischen jeweils fünf Artikeln einer Kategorie oder innerhalb des Blogs geblättert werden, so dass nun auch wieder alte Artikel aufgerufen werden können.

Navigation um zwischen einzelnen Artikeln zu wechseln

Auch hier lag die Ursache im Wechsel der PHP Version in der eine Anpassung erforderlich war. Ursprünglich bin ich ja der Meinung gewesen, dass Feedly den Wechsel von HTTP auf HTTPS nicht mitbekommen würde (siehe auch meinen Hinweis unter "Domainumzug" ) aber tatsächlich wurde ich heute von Feedly auf einen neuen Artikel in beiden RSS-Feed überrascht.

Feedly RSS Feed funktioniert

In beiden RSS Feed sind tatsächlich neue Artikel aufgeführt.

Sofern Feed Reader nicht bekannt sein sollten kann ich hier meinen Artikel "Infotainment oder Nachrichtenapps für Android" empfehlen. Wobei ich mich auch sehr über Besuche direkt auf der Seite freue.

Um  noch mehr überrascht zu werden konnte ich beim Webhoster die Schaltfläche zum Aufrufen der Web FTP Oberfläche aufrufen und hier begeistert den Webeditor zu nutzen. Innerhalb des KAS (Kundenadministrationssystem) kann über die Schaltfläche Login die WebFTP Oberfläche aufgerufen werden.

 
Werbung
ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Von hier können dann auch online Dateien bearbeitet werden. Wie im folgender Abbildung zu sehen, kann hier auch ein Syntaxhighlighting genutzt werden. All-Inkl benutzt dabei CodeMirror einen auf JavaScript basierenden Quelltext-Editor zur Syntaxhervorhebung.

Web FTP Editor

Gerade ein Syntaxhervorhebung ist ebenso wie ein WYSIWYG Editor (siehe zum Beispiel im Artikel "Dokuwiki Plugin CKGEdit und Hochladen von PDF, Excel oder andere Medien") ist eine echte Arbeitserleichterung und auch etwas, dass ich in der Oberfläche meines Blog (zum Verfassen von Artikeln) ebenfalls sehr schätze. Immerhin besteht hierdurch auch die Möglichkeit direkt Fehler zu beheben oder auch schneller Code zu verstehen.

Ein schönes Beispiel wie viel besser Coding mit Hervorhebung zu lesen ist kann auch auf der Seite meiner Frau zum Thema "PHP - Ein kleiner Kalender mit date, strtotime, einer for-Schleife und ein paar ifs" nachvollzogen werden.

Als eines von mehreren Projekten kann hier zum Beispiel GeSHi (Generic Syntax Highlighter) verwendet werden, was eine Syntaxhervorhebung  für unterschiedliche Programmiersprachen (so auch PHP) ermöglicht. Diese ist dann mit CSS umgesetzt und wird auch in größeren Webprojekten (bspw. auch Dokuwiki) eingesetzt. Dieser wird nicht in JavaScript sondern durch PHP Code verwirklicht.

Gerade beim Coding ist es hier tatsächlich hilfreich entsprechende Tools zur besseren Lesbarkeit des Coding aber auch der Kommentare zu nutzen. Somit habe ich nun auch online einen Editor der vergleichbar schöne Funktionen wie PS Pad (siehe (Software)-tools), Ein weiterer Vorteil ist noch, dass jederzeit die Datensicherung lokal bleibt und im Livebetrieb Änderungen vorgenommen werden können.

An dieser Stelle mag ich auch noch einmal das saubere Coding und die Dokumentation von Claudia erwähnen und bin sehr froh darüber, dass diese Seite technisch sehr stark vom Know-How durch Claudia unter anderen Autorin des Buch "PHP für dich" profitiert. Was aber auch schon bei der Umstellung dieser Seite in ein responsives Design (siehe Artikel "In eigener Sache: Updates der Seite (Technik und Design) - Fokus auf Responsives Webdesign und pagespeed") und an vielen anderen Stellen der Fall war und ist.

Das ist dann vielleicht schon ein Unterschied zum reinen HTML Coding. :-) Wie auch immer nun dürften aber auch wieder alle Artikel zu den Themen dieser Seite aufgerufen werden.... diese sind ja auch als Kategorien auf der linken Seite zu finden... :-)

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Samstag, 14. Januar 2017
16:52 Uhr

Webhosterwechsel und Umstellung von http:// auf https:// (SSL Verschlüsselung) und VG Wort Zählmarken

Wie schon im Jahresrückblick erwähnt stand für mich Ende des Jahres nicht nur ein Wechsel  des Mailanbieters an sondern auch ein Umzug mehrere Seiten zu einen neuen Webhoster an. Mein damaliger Webhoster hatte den Geschäftsbereich Webhosting aufgegeben, so dass ich mir ein neues digitales Zuhause gesucht und mittlerweile auch gefunden habe.

Sollte mein Blog per Feed aboniert worden sein ist auch ein neues Abo erforderlich, da ich meine Seite auf https umstellen werde und so zumindest unter Feedly ein erneutes Abo unter https://www.andreas-unkelbach.de/blog/rss.xml erforderlich ist. Andere RSS-Feedleser scheinen mit einer Umleitung des RSS-Feed wesentlich besser klar zu kommen.

Auswahl Webhoster

Sehr hilfreich war hier die Gegenüberstellung einzelner Webhosting-Pakete im c't magazin auch wenn mittlerweile Strato mit 1&1 zusammengelegt wurde und Hosteurope (wo mein ehemaliger Webhoster Reseller war) nun zu GoDaddy gehört. Mein PLUS Abo des c't magazin zahlt sich aber gerade bei solchen Themen als extrem positiv auf, da ich hier einen Zugriff auf eines der letzten Hefte habe und der Artikel auf http://heise.de/-3318728 eine sehr gute Grundlage bietet um sich für ein Angebot zu entscheiden.

Gelandet bin ich hier mittlerweile bei "ALL-INKL.COM - Neue Medien Münnich" * und bin derzeit auch vom Umzug und den Angebot recht angetan.

Gründe für all-inkl waren, dass ich hier viel Gutes vom Hoster gehört habe und auch vom Angebot her mich die angebotene Technik aber auch die Möglichkeit eines Testaccount sehr angesprochen hat. Für mich war ein wichtiger Punkt, dass sowohl Mailverteiler als auch einige andere Techniken vom Server funktionieren und ich mich hier weniger um die Technik kümmern muss (im Sinne von Serverwartung). Neben PHP und MySQL waren hier also insbesondere auch die Einstellungsmöglichkeiten zur Mail wichtig sowie die Domainverwaltung. Besonders wichtig waren mir hier auch große Postfächer auch wenn ich mittlerweile durch Posteo (wozu ich bei Gelegenheit einmal mehr zu schreibe) eine echte Alternative gefunden habe.

 
Werbung
ALL-INKL.COM - Webhosting Server Hosting Domain Provider


Sofern man sich auch etwas intensiver mit Serverkonfiguration und der Basistechnik rund um Webhosting kümmern macht aber auch Uberspace.de einen spannenden Eindruck.

Datenschutz durch HTTPS / SSL und anonymisierte Logfiles

Im folgenden Artikel möchte ich einige Punkte an sprechen, die an Aufgaben beim Umzug meiner Seiten erforderlich waren und da ich gleichzeitig auch technisch das ein oder andere auf meiner Seite geändert habe auch auf allgemeine Themen im Zusammenhang mit PHP 7 sowie Wechsel von http:// auf https:// (SSL Verschlüsselung) meiner Seite eingehen. Dieses ist ab PrivatPlus ebenfalls kostenlos bei all-inkl möglich.

Warum eine SSL Verschlüsselung auch für "normale" Internetseiten sinnvoll ist dürfte die Verbreitung von WLAN bspw. im Hotel oder auch an anderen Stellen belegen. Gesetzlich wird diese, zumindest  bei Kontaktformularen, auf Basis von § 13 Absatz 7 Telemediengesetz als sicher anerkanntes Verschlüsselungsverfahrens anzubieten gefordert. Im Artikel "Sicher ist sicher: Warum HTTPS für deine Website sinnvoll ist" auf drweb.de werden hier auch einige weitere Gründe mit aufgeführt.

Juristische Aspekte der SSL Verschlüsselung

Die jurisitschen Aspekte sind von Rechtsanwalt Dr. Thomas Schwenke im Artikel "Gastbeitrag: Warum Sie Ihre Website auf https umstellen sollten" auf der Seite der Kanzlei Plutte beschrieben worden. An dieser Stelle mag ich auch sehr gerne auf die von mir gerne gehörten Jura-Podcast (siehe Videoblogs und Podcast ) hinweisen.

Weiter unten bin ich im Abschnitt "Umstellung http:// auf https:// (SSL Verschlüsselung)" auch auf das Thema Warnmeldung wegen mangelnde Zertifikatsprüfung  im Browser eingegangen, was aber eher ein technischer Aspekt im Zusammenhang mit erfolgreichen Wechsel auf SSL bzw. HTTPS eingegangen. Immerhin ist dieses durch HTML relativ leicht zu verhindern :-).
 

Datenschutz und Serverlogfiles

Grundsätzlich bietet diese Verschlüsselung auch einen Gewinn im Bereich Datenschutz, so dass ich dieses mit der Möglichkeit der Anonymisierung oder gar Deaktivierung von Serverlogfiles als einen datenschutzrechtlichen Fortschritt beim neuen Anbieter ansehe. Das Thema Datenschutz ist auch ein Grund, warum ich die nun gewonnene Möglichkeit der Anonymisierung von Serverlogfiles nutze und diese auch in meiner Datenschutzerklärung unter den Punkt Serverlogfiles zusammenfasse.

Die angesprochenen Themen sind dabei allerdings unabhängig vom Anbieter und so hoffe ich, dass dieser Artikel auch für andere interessant sein dürfte.

Umzug der Domain - administrativ

Früher, das ist nun auch schon über zehnJahre her,  war für den Umzug einer Domain tatsächlich ein Brief (oder Fax) erforderlich und es wurde ein unterschriebener KK-Antrag zum Wechsel eines Providers für  eine Domain den neuen Hoster zugesandt und es wurde danach die Domain übertragen. Seit 2008 hat sich hier aber das Verfahren erheblich geändert und es wird vom bisherigen Provider ein AUTH-Code  beantragt und mit diesen wird (ohne Unterschrift) dann die Freigabe und Übertragung der Domain angestoßen.  Dieses funktioniert auch wunderbar bei .DE Domains die bei der Denic registriert sind.

Bei internationalen Domains  (.com, .net, .org, .info, .biz, .name) ist darüber hinaus aber auch eine Bestätigung durch den Domaininhaber erforderlich ist. Hierzu wird eine Mail an den eingetragenen Domaineigentümer  (ADMIN-C Kontakt) gesandt in der ein Bestätigungslink für die Zustimmung oder Ablehung des Transfer gegeben werden kann. Entsprechend wichtig ist es, dass die Mailanschrift bei den WHOIS Daten der Domain aktuell sind (daher bekommt man auch einmal jährlich eine Erinnerung an die hinterlegte Mailanschrift). Sollte die Mail nicht mehr nutzbar sein, kann aber auch immer noch ein Fax genutzt werden.

Sobald der FOA-Service ("Form of Authorisation") abgeschlossen ist wird die Domain nach 14 Tagen übertragen und die Domain dann auf den neuen Server übertragen. Später erfolgt auch noch ein weiteres Bestätigungsverfahren, sollten sich im Rahmen des Umzugs auch Kontaktdaten des ADMIN-C geändert haben. Dieses dann aber über eine Mail zur Domain-Validation, die auch sonst einmal im Jahr zwecks Kontrolle der hinterlegten Daten mich anschrieb.

Umzug der Domain - technisch

Das letzte Mal, dass ich mich intensiver mit der Technik rund ums Blog und dieser Seite auseinander gesetzt habe war im Artikel "In eigener Sache: Updates der Seite (Technik und Design) - Fokus auf Responsives Webdesign und pagespeed" vor fast vier Jahren.

Entsprechend positiv empfand ich, dass ich erst einmal nur das Webhostingpaket ohne Domains bestellen konnte und meine Seiten erst einmal ohne übertragene Domains anlegen konnte.

Allinkl bietet neben einer Vertragsverwaltung (Members Area) in der Domains tatsächlich bestellt werden können und die Vertragsdaten verwaltet werden auch Kundenadministrationssystem  (KAS) unter den eine technische Administration des Accounts vorgenommen werden kann.

Hierdurch ist es möglich  erst einmal alle Daten  zu übertragen und erst zum Schluss Ihre die Domains tatsächlich umziehen zu lassen. Dieses ist besonders dadurch interessant, dass so auch schon IMAP Konten eingerichtet werden können und in der Webmailoberfläche auch von bestehenden Mailkonten sowohl Mails als auch Ordner mit importiert werden können.

Statt einer Domain kann über eine Übergangsdomain  (URL) die eigene Seite aufgerufen werden. Hierbei sind die einzelnen Domains Unterordner des Webspace zugeordnet und die Seite kann über eine Subdomain aufgerufen werden auch wenn die Domain aus irgendwelchen Gründen noch nicht normal erreichbar ist.

Wechsel PHP 5.5  auf PHP 7

Im Rahmen des Serverumzugs habe ich mich auch mit einen Wechsel von PHP 5.5 auf PHP 7 beschäftigen dürfen und doch das ein oder andere Projekt anpassen müssen. Aber zumindest das Blog und auch einige andere Seiten von mir waren dafür schon sehr gut dank schattenbaum.net auf einen Umzug vorbereitet.
 

PHP Code Anpassungen bspw. bei Fehlermeldung von DokuWiki

Gerade wenn auch gleichzeitig ein Wechsel der PHP Version anstand ist dieses sehr praktisch, da erst einmal der Code hier angepasst werden kann und auch beim von mir eingesetzten WikiSystem Dokuwiki konnte ich bei der Fehlermeldung "Declaration of action_plugin_wikicalendar::register(&$controller) should be compatible with DokuWiki_Action_Plugin::register(Doku_Event_Handler $controller) in" feststellen, dass einige Plugins nicht mit der neuesten PHP Version kompatibel sind. Insgesamt verlief besonders der Umzug von Dokuwiki wesentlich einfacher als das 2013 (da allerdings nur von einen auf den anderen Server beim gleichen Webhoster siehe Artikel "Was ist zu beachten beim Serverumzug?".
 

Unterstützung durch PHP für dich :-)

Glücklicherweise habe ich die Autorin von "PHP für dich" geheiratet und so war mit ihrer Hilfe auch der PHP Code und das von ihr entwickelte Blogsystem schnell auf die aktuellste PHP Version angepasst.

Einige wichtige Punkte sind auch auf ihrer Seite unter anderen auch auf erläutert worden aber auch sonst war das ein oder andere Anpassen erforderlich.

Nun aber zum Thema des Zertifikat und Verschlüsselung von Internetseiten.

Umstellung http:// auf https:// (SSL Verschlüsselung)

Der Wechsel des Webhoster ist auch gleichzeitig mit einer Aktivierung der SSL Verschlüsselung für Internetseiten an. Dabei kann hier die Datenübertragung per SSL verschlüsselt werden und so ein Mehr an Sicherheit angeboten werden.

Hier kann im KAS unter Domains beim Eintrag in der Domain unter den Punkt SSL-Schutz ein kostenloses Zertifikat von "Let's Encrypt" beantragt werden (siehe Abbildung).

SSL Zertifikat beantragen

Hier kümmert sich dann künftig ALL-INKL um die Verlängerung des Zertifkates.Bei dieser Form des Zertifikates handelt es sich um eine Domain-Validierung (Domain Validation), womit sichergestellt wird, dass die Kommunikation auch tatsächlich über andreas-unkelbach.de verschlüsselt läuft. Daneben gibt es auch noch  Organisation-Validierung (Organisation Validation) wodurch zusäztlich noch Inhaberdaten (personenbezogen) mit angegeben werden.

Zum Hintergrund der Zertifikat von "Let's Encrypt" kann auch der Artikel "https:// für alles! Die Initiative Let’s Encrypt revolutioniert mit kostenlosen SSL-Zertifikaten das Web" des CT-Magazin weiterhelfen.


Dieses bietet sich  für Organisationen an und ist besonders bei Banken oder Onlineshops im Einsatz.

Der Vorteil von SSL verschlüsselten Internetseiten ist, dass die Daten hier geschützt zwischen Browser und Webserver übertragen werden.

Die gesicherte Verbindung ist auch in der Adressleiste durch die URL https://www.andreas-unkelbach.de wie in folgenden Bild zu sehen ersichtlich.

HTTPS mit SSL okay

Hier sind tatsächlich alle Elemente der Seite verschlüsselt übertragen und die Verbindung gilt als sicher.

Problematisch ist es, sofern Teile der Seite noch per http:// eingebunden sind, was sowohl durch externe Skripte oder auch durch Bilder der Fall sein kann, die hier mit ihrer absoluten URL eingebunden werden.

Hier gibt die Adressleiste eines Browser eine entsprechende Warnmeldung aus, wie ebenfalls in der folgenden Abbildung zu sehen ist.

HTTPS SSL mit Warnmeldung

Hier sind gemischte (also verschlüsselte und unverschlüsselte Inhalte) auf einer Seite eingebunden worden. Je nach Browser können diese dann auch blockiert und damit nicht angezeigt werden.

Setzen von protokoll-relativen Pfaden in Blogartikeln per SQL oder Suchen und Ersetzen


Für eigene Bilder oder interne Links bietet sich hier eine relative Verlinkung an. Hier werden einzelne Artikel oder Bilder mit relativen Pfaden bspw. /andreas.php verlinkt statt mit der vollständigen URL https://www.andreas-unkelbach.de/andreas.php .Besonders bei eingebundenen Bildern bietet sich jedoch eine protokoll-relative Verlinkung an. Hierbei werden statt http:// oder https:// nur // zur Verlinkung angegeben.

Diese Vorgehensweise ist auch im SELFHTML Wiki im Abschnitt "Mit protokoll-relativen URIs referenzieren" beschrieben und es war relativ einfach möglich die entsprechenden URL in der Datenbank meines Blogs durch Suchen und Ersetzen anzupassen. Dieses war natürlich durch den Umzug besonders einfach, da ich hier einfach die Exportdatei der Datenbank anpassen konnte und nicht das passende SQL Statement verwenden musste.

Wobei auch per

UPDATE tabelle_blogartikel SET spalte_artikeltext = REPLACE(spalte_artikeltext ,"http://www.andreas-unkelbach.de","//");

eine entsprechende Anpassung möglich gewesen wäre... allerdings ist es mir nie ganz geheuer direkt in der Datenbankverwaltung  (siehe PHP für dich - Tabellen anlegen mit phpMyAdmin) zu arbeiten.
 

Einbindung VG Wort Zählmarken einer SSL verschlüsselten Webseite (https)


Ein weiteres Problem kann noch die Einbindung von VG Wort Zählmarken (siehe Impressum) sein. Hier hat Daniel Weihmann im Blogartikel "VG Wort unter SSL/ HTTPS nutzen" darauf hingweisen, dass die Zählmarken  per http eingebunden werden und es einer speziellen Subdomain benötigt um hier entsprechende sichere Verbindungen aufzubauen und auch die Zählpixel ordentlich einzubinden. Nun stellte sich für mich die Frage, ob auch die einzelnen URL zur jeweiligen Zählmarke aktualisiert werden muss und ob sowohl die HTTP als auch die HTTPS Variante angegeben werden muss.

Auf Rückfrage an die Verwertungsgesellschaft Wort habe ich dazu ebenfalls folgende Antwort erhalten:


Sehr geehrter Herr Unkelbach,
für eine Verwendung in einer SSL verschlüsselten Webseite, muss die Zähldomäne in der Zählmarke in der Tat durch https://ssl-vg03.met.vgwort.de/ ersetzt werden. Der Rest des IMG Tags bleibt identisch zur bisher verwendeten Fassung.

Bitte beachten Sie, dass hier NUR die vg03 Domäne verwendet werden kann, wie angegeben. Nur dort können die Zugriffe auf eine ssl - verschlüsselte Seite korrekt gezählt werden.

Nachlesen können Sie das auch unter https://tom.vgwort.de/Documents/pdfs/dokumentation/metis/DOC_Urhebermeldung.pdf im Kapitel 8.2.4

Und nein, ich kann bei der Korrektur von Meldungen damit umgehen, wenn sich nur das Zertifikat ändert, der Rest der URL aber weiterhin der gleich ist. Einen neuen Webbereich müssen Sie nur melden,wenn sich die URL als ganzes ändert.

Hier hätte auch ein Blick in die Dokumentation ausgereicht in der konkret steht, dass die Angabe einer URL nur dazu dient, die spätere Meldung zu erleichtern.“ die eigentliche Meldung ist von der Angabe der URL unabhängig.

Somit spricht eigentlich nichts mehr gegen eine Verwendung von SSL bzw. der https:// Variante meiner Internetseite auch weil so aus Datenschutzgründen nicht mehr die übertragenen Daten mit ausgelesen werden können.

Dieses ist auch der Grund warum Google (aber auch andere Suchmaschinen) dazu übergehen mehr und mehr Seiten mit der https Variante zu indizieren.

Hierzu sind im Google Webmasterblog die Artikel " Standardmäßig HTTPS-Seiten indexieren " und "  HTTPS als Ranking-Signal " oder auch die Hilfeseite " Website mit HTTPS sichern " lesenswert.

Künftig soll auch der Browser Chrome (ebenfalls von Google) darauf hinweisen, dass eine Seite nicht mit SSL verschlüsselt ist (durch ein rotes X in der Adressleiste).

Bevorzugte Domain / Internetadresse in .htaccess festlegen

Nachdem ich meine Seite nun erfolgreich umgezogen habe biete ich bis zum 16. Januar sowohl eine http:// als auch eine https:// Variante meiner Seite an. Da ich aber ungern doppelt Inhalte ins Netz stelle werde ich dauerhaft meine Seite auf die Variante https://www.andreas-unkelbach.de umleiten. Leider scheint mit dieser Variante feedly etwas Probleme zu haben, daher oben auch der Hinweis dazu.

Hierzu wird eine Weiterleitung per 301 Moved Permanently empfohlen. Da ich selbst immer wieder zur Konfiguration solcher Weiterleitungen in die Hilfe schauen muss, kann ich hier tatsächlich die Seite www.htaccessredirect.de empfehlen in der die meisten Anwendungsfälle vorgestellt sind.

.HTACCESS Redirect und Rewrite Generator

Für umfangreichere Einstellungen isd er Konfigurationsdatei kann auch der online nutzbare "Simple Htaccess Redirects & Rewrite Generator" von Aleyda Solís hilfreich sein.


Sofern keine Weiterleitung eingestellt ist kann zum Beispiel dieser Artikel direkt über vier URL aufgerufen werden:
  1. http://andreas-unkelbach.de/blog/?go=show&id=790
  2. https://andreas-unkelbach.de/blog/?go=show&id=790
  3. http://www.andreas-unkelbach.de/blog/?go=show&id=790
  4. https://www.andreas-unkelbach.de/blog/?go=show&id=790
Auf der Seite seorch.de kann neben anderer SEO Website Check und OnPage SEO Tools auch dieses im Abschnitt "Seite unter mehreren URLs zu erreichen (Duplicate Content)" überprüft werden. Generell kann ich diese Seite als Test immer wieder mit guten Gewissen empfehlen.

Meine Weiterleitung per .HTACCESS sieht im übrigen wie folgt aus:

RewriteEngine On

RewriteCond %{HTTP_HOST} !^www.andreas-unkelbach.de$ [NC]
RewriteRule ^(.*)$ https://www.andreas-unkelbach.de/$1 [L,R=301]

RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Der erste Abschnitt sorgt dafür, dass die Domain immer mit www. aufgerufen wird (bevorzugt www-Domain verwenden) der zweite Abschnitt überprüft ob das HTTPS Protokoll ausgeschaltet ist und leitet sofern dieses der Fall ist auf die https Seite weiter.
 
Für obiges Beispiel erhalten die URL unter 1 bis 3 als HTTP Status Code 301 und die Weiterleitung auf die https Variane und die letzte URL wird per HTTP Status Code 200 als okay ausgeleifert.


Im Ergebnis ist damit die Seite immer in der Form https://www.andreas-unkelbach.de aufgerufen da alle anderen URL durch den 301 Status Code umgeleitet werden, während die gewünschte URL per 200 als okay zählt und die Daten werden immer verschlüsselt übertragen

Website Analytics - Meta tag referrer

Eine interessante Info für andere Seitenbetreibende dürfte noch sein, dass Links von einer mit https:// verlinkende Seite auf eine http:// Seite als direkter Aufruf gezählt werden, da hierdurch der Referrer-Link nicht übertragen wird.

Hier gibt es jedoch einen W3C-Spezifikation eines Meta-Tag durch das weiterhin auch der Referrer Link übergeben wird. Hier regelt "§ 3. Referrer Policies".

Über den, im HEAD Bereich befindlichen Metatag kann die Übertragung des Referrer eingestellt werden. Dabei sind mehrere Möglichkeiten vorhanden:
  • <meta name="referrer" content="origin">
    Hierdurch wird zumindest die Domain als Referrer mit übergeben.
  • <meta name="referrer" content="unsafe-url">
    Hierdurch wird die komplette URL mit übertragen
  • <meta name="referrer" content="no-referrer-when-downgrade">
    Dieses ist die Vorbelegung der Spezifikation. Sofern eine https auf eine http Seite verweist wird kein Referrer übertragen, allerdings erfolgt eine Übertragung von https auf https ebenso wie von http auf https
  • daneben gibt es noch weitere Möglichkeiten auf die ich durch die Spezifikation verweise.
Da ich persönlich es als wichtig empfinde zu sehen, woher Seiten verlinken habe ich bei Einzelseiten und Artikeln die Variante der Übertragung der Seite gewählt und bei Übersichtseiten die sich auch ändern können lediglich die Domain mit übertragen. Aktuelle Browser halten sich wohl auch an diesen Meta-Tag.
 

Fazit

Insgesamt war der ganze Umzug dann tatsächlich erfolgreich, wobei tatsächlich einige Einstellungen noch nachgebessert worden sind (sowohl durch PHP Code als auch was die Einführung von SSL anbelangt). Hier bin ich sehr dankbar, dass meine Frau ruhig und kompetent das entsprechende Coding angepasst hat aber auch der Transfer meiner Seiten recht problemlos funktionierte. Mittlerweile dürfte auch Mailempfang wieder funktionieren und selbst die Twitter-Integration (die tatsächlich etwas arg kompliziert war) hat problemlos funktioniert. Ich würde mich freuen, wenn auch weiterhin mein Blog interessant ist und die Umstellung keine Probleme macht. Bekannt ist mir tatsächlich nur, dass in manchen Feedreadern der RSS Feed erneut abonniert werden muss, daher ist ein Besuch auf dieser Seite sicherlich hilfreich :-)
 

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Sonntag, 26. Juni 2016
14:35 Uhr

Traffic Spam oder Möglichkeiten einer IP-Sperrliste für Webangebote

Während ich normalerweise relativ konstant wenige Gigabyte an Webtraffic auf dieser Internetseite habe konnte ich diesen Monat plötzlich hohe zweistellige Zugriffsmengen verzeichnen. Dieses ist schon dadurch erstaunlich, da meine Seite (und besonders Blogartikel) in der Hauptsache aus Text und sehr selten aus Bildern bestehen.

Entsprechend erstaunt war ich, dass dann eine einzelne IP plötzlich fast 1 Gigabyte an Datenmengen durch Zugriff und Senden verursacht hat und es sich dabei nicht um einen Proxy-Server einer Hochschule handelt. Letzteres wäre ja erklärbar, da ich doch die Vermutung habe, dass einige Besuchende dieser Seite aus den Hochschulumfeld kommen.

Ein intensiverer Blick ins Serverlogfile offenbarte dann auch noch, dass diese IP immer wieder ein und dieselbe Seite aufgerufen hatte um hier möglicherweise Kommentare zu einen Blogartikel abzusetzen.

Datenschutz bei IP Adressen in Logfiles

Wie in der Datenschutzerklärung zu dieser Seite festgehalten, werden beim Besuch auf dieser Seite grundsätzlich Daten sehr sparsam und wenn möglich anonymisiert erfasst. Eine Ausnahme stellen hier die Logfiles des Servers da (siehe Abschnitt "V. Allgemeine Daten".

Die tatsächlichen Logfiles werden seitens des Webhoster regelmäßig gelöscht und die zugrundeliegenden Daten aus technischen aber auch abrechnungstechnischen Gründen zur Verfügung gestellt.

Somit werden diese Daten gem. § 37 BDSG nur zu Zwecken Sicherheit (bspw. Vermeidung von DDOS Angriffen oder Spamvermeidung) aber auch zu Abrechnungszwecken gegenüber meinen Webhoster erhoben.

Eine dauerhafte Zuordnung von Person und IP (Profilerstellung) ist daher hier nicht möglich und in der Statistik erhalte ich für Daten außerhalb des Zeitraums der Logfiles (nach wenigen Tagen) nur den vorhandenen Traffic der Seite. Eine Auswertung wer welche Seite besucht hat ist mir hier nicht möglich.

Für eine ausführliche Analyse der Besuchendendaten nutze ich eine anonymisierte Version von Google Analytics (siehe Datenschutzerklärung zum Punkt "VII. Google Analytics")

 

Maßnahmen gegen Kommentarspam im Blog

Da ich hier tatsächlich Schutzmaßnahmen gegen Blogkommentarspam ergriffen habe werden hier allerdings keine Kommentare abgesetzt sondern die IP oder das Skript scheitert immer wieder beim Versuch eben solche abzusetzen. Im Artikel des ctMagazin "Was Ihr so meint - Mit Kommentaren im eigenen Blog umgehen" sind einige Möglichkeiten des Verhinderns von Spam-Kommentaren auf technischer Ebene vorgestellt. Einen Teil dieser Anregung hat mir Claudia (gerne nutze ich hier die Gelegenheit das Buch  "PHP für dich" zu empfehlen) glücklicherweise auch in diesen Blog umgesetzt :-).
 
PHP für dich, Version 2014: So einfach war PHP-lernen noch nie!
Cover PHP für dich
Verlag: BOD
Auflage Version 2014

Taschenbuch

Für etwa 17,90 € bei Amazon bestellen

ebook/Kindle

Für etwa 10,99 € bei Amazon bestellen

Eine ausführliche Beschreibung ist unter "PHP für dich, Version 2014: So einfach war PHP-lernen noch nie!" zu finden.
 

Trafficanalyse einzelner IP


Trotzdem bleibt hier der ansteigende Traffic auf der Seite, so dass ich mich entschlossen habe diese IP entsprechend einen Zugriff aufs Blog zu sperren.

Hierzu musste ich jedoch als erstes sehen um welche IP es sich handelt und ob diese tatsächlich mit SPAM in Verbindung steht oder tatsächlich einen berechtigten Grund hat regelmäßig auf der Seite nachzusehen. Ein Blick in die Serverstatistik ist hier sehr hilfreich. Alternativ könnte man per Excel oder anderen Tools das Logfile des Servers auswerten.

Am frühen Nachmittag sah meine Statistik wie folgt aus:
Tagestraffic am Nachmittag
Hier hatten also einzelne IP (oder Server) eine Datenmenge von rund um die 700 MB an einen Tag abgerufen. Das entspricht (wie in der Statistik angegeben) etwa 11.215 Seiten und entsprechend viele Zugriffe.

IP Sperren okay, aber bitte nicht FEEDLY :-)

Nun stellts ich allerdings die Frage, wo eine ebensolche IP zuzuordnen ist und ob es sich dabei um eine gute oder eher weniger gute URL handelt. Als Beispiel möchte ich natürlich nicht Feedly als RSS Reader (siehe meinen Artikel "Infotainment oder Nachrichtenapps für Android" davon abhalten meine Seite zu besuchen.

Hier gibt Feedly selbst zur Auskunft, dass sich die IP Adresse ihres Crawler von Zeit zu Zeit ändert, so dass dieser eher am Useragent "user-agent: Feedly/1.0." zu identifizieren ist.

Glücklicherweise sind obige IP Adressen nicht mit Feedly in Verbindung zu setzen , was der Blick in ein aktuell vorliegendes Logfile offenbart.

Logfile Feedly/1.0 IP

Entsprechend stellt sich die Frage, was hinter obiger IP Adresse steckt.

Hier kann ich dann tatsächlich die von Heise Netze betriebene IP Spam Listenabfrage empfehlen. Auf der URL heise.de/netze/tools/spam-listen/ können mehrere Listen abgefragt werden, ob die entsprechend kritische URL schon bekannt ist.

Zugriffsperre für einzelne IP Ranges

Danach können in der .httaccess Datei des Webspace diese IP durch folgende Regeln gesperrt werden.

order allow,deny
Deny from BADIP
allow from all

Dabei können konkrete IP Adressen oder auch Bereiche gesperrt werden. Als Beispiel könnte die Uni Gießen durch 134.176.247.... vom Zugriff auf dieser Seite komplett gesperrt werden...was ich aus hoffentlich nachvollziehbaren Gründen nicht möchte.

Die Pflege einer solchen umfangreichen httaccess Einstellung kann sehr umfangreich sein. Daher empfinde ich es als einen großartigen Service dass die Firma "BeforeSunrise Internetagentur e.K."  auf der Seite ip-bannliste.de einen Service betreibt in der eine umfangreiche Bannlist für sogenannte "bad bots" betrieben wird.

Die Liste beinhaltet IP-Adressen und Adressbereiche (IP Ranges), die über das simple einzubinden einer .htaccess-Datei keinen Zutritt zu Ihren Onlineangeboten mehr erhalten.  Interessant dabei ist, dass die Liste als Service auch eine Autoupdate Funktion beinhaltet, so dass diese regelmäßig aktualisiert werden kann.

Daneben kann im Angebot aber auch die aktuelle Liste direkt eingesehen werden um diese im eigenen Angebot zu nutzen.

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Freitag, 26. Februar 2016
18:22 Uhr

Video2brain - Onlineschulung per Videostreaming unter Android, Windows, iOS und Web

An vielen Hochschulbibliotheken wird ein Zugang für Video2brain für Hochschulangehörige angeboten, aber auch als Nichthochschulangehöriger kann diese Onlineplattform interessant sein. Das Unternehmen gehört zum Linkedin Austria Konzern und hat seinen Unternehmenssitz in Graz.

Kurzbeschreibung Angebot

Das Angebot umfasst mehr als 1.600 deutschsprachige Lehr- und Trainingsvideos aus den Bereichen Informatik, Business, Lifestyle, Bildbearbeitung Fotografie und Webdesign.
Video-Streaming-Portal: mehr als 1.600 deutsche Lehr- und Trainingsvideos aus den Bereichen Informatik, Business, Lifestyle, Bildbearbeitung, Fotografie und Webdesign. Hierbei werden die Schulungen in verschiedene Kategorien zusammengefasst und können sowohl nach Software als auch Hersteller durchsucht werden.

Hinweis: Tag der offenen Türo bei video2brain - Probegucken

Zum Schnuppern dürfte der 29. Februar 2016 interessant sein, da hier ein Tag der offenen Tür mit freien Zugang zu allen Kursen angeboten wird. Auf sind nähere Informationen zu finden. Das Angebot kann von 28. Februar 2016 11:00 Uhr bis 01. März um 11:00 Uhr genutzt werden.

Nebenbei ist dieser Terminhinweis auch gleichzeitig ein Beispiel für Terminangaben wie im Artikel "Strukturierte Daten auf Website oder Semantisches Web (schema.org)" beschrieben.

Neben der reinen Weboberfläche von der die Videos abgerufen werden können, werden vom Anbieter aber auch Apps für Android, Apple iOS, Windows und Mac angeboten.

Für die Registrierung kann entweder eine E-Mailadresse verwendet werden (was besonders dann zu empfehlen ist, wenn die Hochschule oder die Firma ein Abo anbietet) oder aber per Linkedin, Facebook oder Google+ verwendet werden.

Sollte ihre Hochschule ebenfalls ein Abo von video2brain anbieten ist ein Besuch der Seite https://www.video2brain.com/de/education hier eine gute Anlaufstelle ansonsten kann sich unter https://www.video2brain.com/de/registrierung angemeldet werden.

Während der Rheinwerk Verlag und auch Espresso Tutorials eine eigene Onlineplattform nutzen bieten vor allem Addison-Wesley und Markt+Techni, die zur Mediengruppe Pearson gehören im Rahmen einer Kooperation Schulungsvideos an. Ebenfalls finden sich viele Kurse zu Adobe Produkten im Angebot.

Dozenten können sich bei video2brain bewerben und nach erfolgreicher Annahme wird in Graz das Video von video2brain gedreht. Einen spannenden Artikel zu den Hintergruünden als Dozent schildert hier Tim Schürmann im Artikel "Video2brain: Eine Alternative zu Udemy? Video-Trainings bei Video2brain veröffentlichen" auf trainerbibel.de.

Während ich die Website ein wenig unübersichtlich empfand bin ich gerade am Testen des Angebot per Android App und hier wesentlich zufriedener.

Video2brain

App Video2brain
Marketlink: Eine Onlineregistrierung ist aus den oben beschriebenen Gründen per Weboberfläche sinnvoll.

Anmeldung und Registrierung

Nachdem die App installiert ist kann sich hier mit den Zugangsdaten angemeldet werden.
Bei der Anmeldung kann sich entweder als Person oder im Rahmen eines Unternehmens (oder Hochschule) auch per Organisation angemeldet werden.

Anmeldung als Person


Anmeldung als Privatperson

Wie beschrieben können sich "Privatpersonen" entweder per Social Webdienst (also Linkedin, Facebook, Google+) oder aber mit ihren Benutzernamen und Passwort anmelden. Letzteres ist für Hochschulangehörige auch nach Registrierung außerhalb des Hochschulnetzes möglich, sofern die Hochschule eine entsprechende Zugangsberechtigung hat.

Anmeldung als Organisation

Anmeldung als Organisation bei Brain2Video

Für einen Organisationszugang kann man nun die entsprechende Organisation auswählen und sich über die IP-Standortlizenz anmelden. Hierdurch sind keine Benutzerdaten erhoben, jedoch ist eine Anmeldung nur innerhalb des Hochschulnetzes (ggf. VPN) möglich. Als Beispiel ist hier die Universitäts- und Stadtbibliothek Köln ausgewählt.

Bibliothek und Trainingsverlauf

Mit einen Benutzer besteht die Möglichkeit auf Videos Lesezeichen zu setzen oder auch über den Trainingsverlauf in ein gesehenes Video wieder einzusteigen.

Hierbei ist die Bibliothek in Oberkategorien eingeteilt, die auch wieder Unterkategorien hat.
Ein kurzer Überblick dürfte hier die Hauptkategorie bieten.

Video2brain Bibliothek Hauptübersicht

Unterhalb der Hauptkategorie sind dann noch weitere Unterkategorien und auch beliebte Softwareprodukte ausgewiesen. Ferner kann auch über das gesamte Angebot die Lupe zur Suche verwendet werden. Interessant ist auch die Schaltfläche Trainingsverlauf.

Video2brain Trainingsverlauf

Über den Trainingsverlauf kann jederzeit in ein schon begonnenes Training erneut eingestiegen werden.

Aufbau der Schulungsvideos

Die einzelnen Videotutorials oder Trainings sind in kleine Trainingseinheiten von einigen Minuten eingeteilt, so dass hier entweder ein spezielles Thema angesteuert werden kann oder auch das Training nach einer Einheit abgebrochen und erneut fortgesetzt werden.

Ein gutes Beispiel ist hier in meinen Augen der Verlauf bei der Schulung zum Thema Matrixformeln.

Video2brain Excelschulung zu Matrixformeln

Während im oberen Bereich das Video läuft kann weiter unten die einzelne Kapitel aufgerufen werden, die Kursbeschreibung oder Hintergrundinfos zum Autoren oder auch weitere vorgeschlagene Videos zum Thema angezeigt werden.

Preise, Abomodelle, Einzelabruf

Neben dem Abomodell, welches monatlich kündbar (für 19,99 Euro) oder zu unterschiedlichen Jahresgebühren verfügbar ist (siehe Abos im Vergleich) können einzelne Schulungen auch käuflich erworben werden und dann dauerhaft betrachtet werden.

Nach der Registrierung stehen aber auch teilweise Gratiskurse zur Verfügung und zu jedem Video kann die Einleitung und teilweise auch das ein oder andere Probekapitel betrachtet werden.

Empfehlenswerte Office-Schulungen

Der von mir angesprochene Excelkurs "Excel: Matrixformeln Formeln für Fortgeschrittene" kann zum Beispiel auch für 39,95 Euro erworben werden.

Wenn man ohnehin schon ein Abo abgeschlossen hat ist auch der Kurs "Excel 2010: Datenanalyse Listen, Tabellen und Datenbanken auswerten" (29,95 Euro) sehenswert.

Derzeit habe ich noch "Excel 2010: Diagramme - So präsentieren Sie Ihre Zahlen professionell und verständlich" (39,95 Euro) und "Excel 2010: Dynamische Diagramme - Intelligente Zahlenpräsentation für Fortgeschrittene" (29,95 Euro) auf meiner Liste und bin hier von einigen Anregungen sehr angetan.

Gerade wenn der Wechsel in Richtung einer neuen Office Version geht, kann ich aber auch den Kurs "Von Office 2010 auf Office 2016 umsteigen" (29,95 Euro)

Hier ist es einfach eine Rechenfrage, ob sich nur ein einzelner Kurs lohnt, oder ob man sich für einen Monat immer mal wieder ein Einzelabo oder direkt Jahresabo nutzt.

SAP Schulungen

Für SAP sind in der Hauptsache zu Business One und Netweaver Kurse zu finden. Für die Kernmodule und SAP ERP sind leider weniger Kurse vorhanden. Allerdings bietet der Anbieter auch eine Themenwunschliste und vielleicht erweitert sich hier ja noch das Angebot.

Alternativ kann ich für SAP natürlich auch das Flatrate-Angebot von Espresso Tutorials empfehlen, dass neben Bücher auch Videos im Angebot hat.
Espresso Tutorial - Die digitale SAP Bibliothek

Auf der Seite "Espresso Tutorials - die digitale Bibliothek" kann das Angebot von Espresso Tutorials betrachtet werden. Für einen Jahresbetrag erhält man Zugriff auf den Bestand an eBooks des Verlags zu unterschiedlichen SAP Themen. Auf dieser Seite kann sich auch ein Überblick über die vorhandenen Medien verschafft werden.

Fazit

Auch wenn ich persönlich in Bezug auf Videotutorials sehr skeptisch bin, muss ich zugeben, dass ich sehr froh bin, dass mich ein Kollege auf dieses Angebot hingewiesen hat und die Qualität der Videos ebenso wie der vermittelte Stoff überzeugen mich durchaus. Allerdings sollte man ernsthaft darüber nachdenken, welche Kurse für einen interessant sind und eventuell dann tatsächlich nur ein Monatsabo oder eben einen einzelnen Kurs kaufen.

Als Alternative zum bewegten Bild sind für mich einfach auch heute noch Buchstaben sehr hilfreich, aber wie schon im Artikel "Onleihe - mein Weg zur digitalen Bibliothek" beschrieben kann ein neues Medium tatsächlich auch den Einstieg in ein bisher noch nciht erlerntes Thema sehr hilfreich sein. Dieses hatte ich ja auch erst beim Thema "Mindmapping und Sketchnotes im Beruf nutzen für Brainstorming oder Mind Mapping mit XMIND" bemerkt. In anderen Bereichen (Blogs, Zeitschriften etc.) ist mir ja ohnehin der Umgang mit "Infotainment oder Nachrichtenapps für Android" vertraut und ich möchte heutzutage nicht mehr darauf verzichten.

Videostreaming auf Monitor / Smart-TV

Ich nutze tatsächlich das Angebot am Tablet und bin davon sehr angetan. Für Personen die gerne am heimischen Smart-TV (bspw. per Amazon Fire TV oder Google Chromecast wobei hier durch Browser Plugin die Weboberfläche an das Smart-TV gesandt werden kann... ebenso gibt es die Möglichkeiten per Miracast das Tablet am Smart-TV zu streamen.... allerdings bin ich hier nicht so wirklich überzeugt und tatsächlich froh über ein Tablet.

Tatsächlich unterstützt Video2Brain auch direkt Chromecast, so dass die App im Hintergrund läuft und eine Schulung in der Statusleiste pausiert (bzw. gesteuert) werden kann und direkt an Google Chromecast gestreamt werden kann. Hierdurch ist die Überlegung naheliegend ein solches Angebot auch auf einen großen Monitor ablaufen zu lassen bspw. für eine Gruppenschulung.

Für mich ist dieses auch eine gute Option um nebenbei am Rechner einzelne Schritte nachvollziehen zu können.

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Samstag, 22. August 2015
16:58 Uhr

Praktische Nutzung von social media Diensten für meinen Arbeitsalltag

Wenn ich mich an die Anfangszeit des Webs (die bei mir um die 1997 lag) erinnere stellt sich die Kommunikation zwischen Betreibern einer Seite und die "Gäste" in der Hauptsache in Form von Gästebücher auf Homepages dar. Diese wurden regelmäßig besucht und es gab einen tatsächlichen Austausch zwischen den einzelnen Internetseiten. Später kamen Onlineforen hinzu und Kommentare in Internettagebüchern. Einige Jahre später hatten sich diese Internettagebücher in Blogs verwandelt und statt Gästebücher gibt es die Möglichkeit Kommentare zu einzelnen Artikeln zu hinterlassen. Irgendwo dazwischen entstanden die Onlineforen (wobei es davor natürlich Usenet und Fido gab). Noch einige Jahre danach war dann das sogenannte "social web" mit allen möglichen Diensten, Portalen etc. geboren. Man könnte beinahe meinen, dass das Blog von den diversen Plattformen abgelöst wurde und kaum noch ein Interesse an einzelne Seiten sondern eher am Stream besteht.

Vollkommen ist auch an mir dieser Trend nicht vorbei gegangen und so möchte ich ein wenig die von mir, neben dieser Seite, vorhandenen Web 2.0 Dienste vorstellen, die ebenfalls mit dieser Seite in irgendeiner Weise im Zusammenhang stehen.

Im folgenden Artikel möchte ich einige für mich interessanten Aspekte des Web 2.0 festhalten.
  • Als erstes möchte ich einen kurzen Überblick über die von mir genutzten Social Web Dienste geben und hier meine persönlichen Erfahrungen und meine Nutzung beschreiben
    • XING - ein eher auf berufliche Kontakte gerichtetes Netzwerk
    • Twitter - ein Kurznachrichtendienst (vielleicht wie ein Espresso, es braucht seine Zeit um diesen mit Genuss zu nutzen)
    • Google + - das Netzwerk von Google
    • Facebook - sollte bekannt sein, selbst wenn man es selbst nicht nutzt
    • Blogs -  sind immer noch für mich eine der wichtigsten Austauschplattformen im Internet
  • Danach möchte ich im Abschnitt Wissensmanagement auf die Chancen von solchen Diensten für den internen Austausch an der Arbeit eingehen. Sicherlich ist hier der erste Gedanke tatsächlich Profile mit Kontaktdaten und Fähigkeiten einzelner Kollegen festzuhalten, aber der Schritt zum  kollaboratives Wissensmanagement  geht noch einen Schritt weiter. Hier sind mir Gedanken zu Themen wie Onlineforen oder Wikisysteme wichtig.
Auch wenn gerade letzter Abschnitt ein klein wenig technisch ist glaube ich doch, dass solche Dienste auch beruflich ihre Berechtigung haben und sicherlich eine gute Ergänzung zum strukturierten Erfassen von Wissen der einzelnen Beschäftigten dienen können. Ausserdem sollten hierdurch auch alle beteiligten Personen profitieren.

Sofern eine solche Plattform auch extern zugängig sein soll (und nicht rein intern betrieben wird) sollten aber auch juristische Aspekte zum Einsatz von social media berücksichtigt werden.

Insgesamt bietet dieser Artikel eine kleine Einführung, aber ich würde mich freuen wenn daraus auch in weiterer Zukunft noch die ein oder andere praktische Umsetzung entstehen kann.

Als Ergänzung möchte ich noch auf eine Serie zum Thema "Bewerbung 3.0 - Selbstpräsentation in Social Media"  auf http://berufundkarriereseite.de verweisen. Dieses habe ich im Abschnitt Social Media und Bewerbung verlinkt und beschrieben.

 

Genutzte Plattformen des Web 2.0 oder social web

Im folgenden Abschnitt möchte ich einige der von mir genutzten Plattformen im Bezug auf meine derzeitige Nutzung vorstellen verbunden mit Überlegungen, wie diese auch im Arbeitsalltag genutzt werden kann.


XING

Mein Profil: https://www.xing.com/profile/Andreas_Unkelbach

Beschreibung:
XING (bis Ende 2006 openBC für Open Business Club) ist eher ein Netzwerk um berufliche Kontakte zu sammeln. Hier besteht die Möglichkeit ein berufliches Profil anzulegen und sich teilweise auch in Fachforen auszutauschen.

Persönliche Nutzung:
Da es vergleichbar zur internationalen Plattform linkedin sehr stark auf berufliche Beziehungen aufsetzt ist es vermutlich nicht weiter verwunderlich, dass hier der eigene beurfliche Werdegang (von der Ausbildung bis zur Berufserfahrung) sowie die eigenen (beruflichen) Qualifikationen im Vordergrund stehen. Persönlich benutze ich es ein klein wenig als sich selbst aktualisierendes Adressbuch, das mich auch über Veränderungen im Bekanntenkreis auf den Laufenden hält, selbst wenn man sich selbst ein wenig aus den Augen verloren hat. Hierbei unterscheidet XING zwischen  kostenlosen Basismitgliedschaften (die für meine Verwendung ausreichen) und Premium-Mitgliedschaften durch die man auch sieht, wer das persönliche Profil aufgerufen hat oder auch weitergehende Funktionen freigeschaltet bekommt. Sofern Interesse besteht kann über folgenden Link ein XING Premiummonat für Neumitglieder erhalten werden.

Fazit:
Im Bereich der beruflichen Neuorientierung kann diese Plattform interessant sein, auch wenn hier eher Personalvermittungsagenturen aktiv sind. Leider wirkt sich dieses auch auf die meisten Gruppen (Onlineforen) aus, so dass hier vielfach interessante Themen durch Stellenanzeigen unterbrochen werden. Dennoch dürfte ein Profil hier ein Baustein zur eigenen Webputation sein und zumindest schadet ein kostenloses Profil nicht. Da es auch die Möglichkeit gibt beim aktuellen Karierestatus zwischen "Ich bin derzeit auf Jobsuche", "Ich bin zwar icht auf Jobsuche, aber offen für Angebote" und  "Ich bin derzeit nicht an Angeboten interessiert" zu wählen (und ggf. Gehaltsvorstellungen) zu hinterlegen eignet sich diese Einstellung auch um von überraschenden Angeboten verschont zu bleiben. Interessant ist dabei noch, dass diese Auswahl auf "nur Recruiter", "Kontakte und Recruiter" sowie auf "alle XING-Mitglieder" eingeschränkt werden kann. Insgesamt hat sich hier XING in den letzten Jahren vom Kontaktenetzwerk ein wenig hin zu einer Personalbörse entwickelt. Dennoch sind auch hier schon die ein oder anderen Kontakte entstanden mit denen man sich auch beruflich austauschen kann.



Twitter

Mein Profil: http://twitter.com/AUnkelbach

Beschreibung
Der Kurznachrichtendienst Twitter wird von mir eher als kurzen Überblick über interessante Artikel im Netz gewählt. Es können hier 140 Zeichen lange Nachrichten (sogenannte Tweets) über das eigene Twitterprofil versandt werden und mit #Schlagworten versehen werden. Ferner können auch Unterhaltungen (Antwort auf Tweets) geführt werden oder interessante Tweets retweetet (geteilt) werden.

Persönliche Nutzung:
Echte Diskussionen und Gespräche sind mir innerhalb Twitter noch nicht zugängig, so dass ich auch für diese Seite lediglich die API nutze um Kurzlinks zu Artikeln als Ankündigung zu setzen. Dieses mag auch daran liegen, dass 140 Zeichen relativ kurz sind und Gespräche im Gezwitscher (Tweetstream) oftmals verloren gehen. Von daher ist es auch nicht verwunderlich, dass mein aktuellster Tweet hier als Ankündigung auf der Startseite eingebunden wird. Ferner nutze ich Twitter um auch auf mein XING Profil im Register "Weitere Profile im Netz" auf aktuelle Artikel hinzuweisen.

Fazit:
Dennoch finde ich hin und wieder interessante Hinweise oder lesenswerte Tweets, über die ich dann selbst erstaunt bin. Ich glaube für einen kurzen Überblick über neue Artikel ist Twitter sicherlich die erste Wahl um über das Geschehen auf dieser Seite auf den Laufenden zu bleiben. Entsprechend sind hier sowohl die Bundesregierung, das Land Hessen aber auch Personen oder Internetseiten unter den Profilen denen ich folge und deren Tweets dann in meiner Timeline (zeitliche Abfolge von Nachrichten) auftauchen. Was mit Twitter als Informationsquelle möglich ist kann sehr anschaulich auf der Seite "Die Timelines als Milchvieh betrachtet" von Herzdamensgeschichten betrachtet werden. Wobei dieses Blog nicht nur durch den Wirtschaftsteil immer wieder eine Überraschung inne hat.


Google+

Mein Profil https://plus.google.com/+AndreasUnkelbach/

Beschreibung:
Auch Google hat seit 2011 ein soziales Netzwerk im Angebot. Hier können eigene Profile angelegt werden (und Websiten damit verknüpft werden), aber auch Beiträge veröffentlicht, Personen zu Kreisen zusammengefasst und entsprechend Informationen zielgerichtet verteilt aber auch empfangen werden. Ein wenig scheint Google Plus auch viele vorhandene Dienste hier mit diesen Netzwerk zu verknüpfen. So landen Veranstaltungen (Events) zu denen man eine Zusage gegeben hat gleichzeitig in Google Kalender und auch sonst fühlen sich die Dienste sehr stark verknüpft an. Es besteht sogar die Möglichkeit seinen eigenen Standort mit bestimmten Personen zu teilen oder auch sonst sehr fein Berechtigungen zu steuern.

Persönliche Nutzung:
Google Plus ist mir da schon ein klein wenig zugänglicher. Durch die Kreise kann ich hier nicht nur Termine für einen monatlich stattfindenden Computerstammtisch (noch aus Fido-Zeiten) planen, Standorte teilen und sowohl öffentliche als auch personebezogen (oder eher kreisbezogen) Artikel veröffentlichen. Hier nutze ich auch tatsächlich selbst die Teilenfunktion dieses Blogs (siehe Artikel "Eine Tasse Kaffee als Feedback für gelungene Blogartikel" oder "Blog: 2 Klicks für mehr Datenschutz") und ergänze oftmals den Artikel um zusätzliche Informationen bzgl. der Entstehung. Hin und wieder sind hier auch kleine Notizen zu Blogideen oder sonstige Quellen zu finden.

Fazit:
In den Medien wird, auch heute noch, Google Plus ein wenig als Geisterstadt bezeichnet, die sich selbst immer wieder zum Leben zu erwecken versucht. Immerhin geht das Netzwerk mit Gruppen (Communities) einen spannenden Weg und trotz einiger zu kritisierender Punkte finde ich hier doch hin und wieder sehr spannende Artikel, die ich in dieser Form in anderen Netzwerken erst sehr viel später wahrnehme. Dieses mag aber auch an den Personen liegen deren Profile ich aboniert habe.


Facebook

Mein Profil: https://www.facebook.com/Unkelbach

Beschreibung:
Facebook dürfte durch verschiedene Nachrichten wohl jeden bekannt sein. Neben privaten Profilen gibt es hier auch die Möglichkeit sich eine Fanpage einzurichten. Dieses habe ich für mein Blog auch aus technischer Spielerei umgesetzt und wollte einmal sehen, wie ich Facebook künftig nutzen werde.

Persönliche Nutzung:
Eigentlich war ich lange Zeit kein sonderlich großer Freund von Facebook aber mittlerweile nutze ich dieses (trotz relativ weniger Follower) verhältnismäßig intensiv. Anfangs war ich hier recht skeptisch doch mittlerweile ist es sehr praktisch über dieses Medium auch andere Blogs (oder auch Ideen) zu verlinken und etwas ausführlichere Gedanken festzuhalten. Da ich auch auf obiger Facebook Seite gerne meine Blogartikel bekannt geben mag, nutze ich hier den Dienst IFTT, den ich auch im Artikel "Facebook Seite mit RSS Feed / Blogartikel versehen" näher beschrieben habe.

Fazit:
Bisher habe ich zu einzelnen Beiträgen von mir tatsächlich schon Rückfragen über Facebook erhalten (und auch etwas ausführlichere Nachrichten getauscht). Dennoch hält sich die Zahl der Menschen, die dieses Profil folgen etwas im unteren einstelligen Bereich. Dieses mag auch daran liegen, dass ich die Seite nicht aktiv bewerbe und hier tatsächlich, zur Zeit in der Hauptsache nutze um kleinere Ideen oder gute Artikel rund um mein Arbeitsgebiet zu veröffentlichen.


Blogs

Beschreibung:
Auch heute noch sind Blogs für mich eine wichtige Informationsquelle. In meiner Wahrnehmung ist das Blog (oder auch Weblog) aus den damals vorhandenen Internettagebüchern hervorgegangen (die natürlich auch heute noch vorhanden sind). Hier wurden chronologisch aktuelle Ereignisse festgehalten und meistens gab es mehrere Themengebiete mit denen sich ein Blog beschäftigt hat. Heutzutage wandeln sich Blogs eher zu einer fachlichen Richtung, so dass es hier Darstellung von Berufen, bestimmte Themengebiete (oftmals IT) oder auch Unternehmensblog gibt.

Persönliche Nutzung:
Einige der von mir gern gelesenen Blogs (mit Arbeitsbezug) sind in meiner Blogroll festgehalten. Hier sind die Links zu einigen interessanten Blogs hinterlegt die ich regelmäßig lese. Da ich selbst gerne Blogs per Feed aboniere (und in einen online RSS Reader (feedly) lese bin ich selbst ein Verfechter des Fulltext-RSS Feeds. Leider stellen viele Seiten mittlerweile ihre Feeds auf eine gekürzte Beschreibung um, so dass Artikel nur kurz beschrieben werden und man auf die Blogseite wechseln sollte. Ich kann dieses zwar von den Websitebetreibern nachvollziehen empfinde dieses aber oft auch als sehr schade.

Eine recht ausführliche Beschreibung meines Blogleseverhaltens und sonstige Informationsquellen habe ich im Artikel "Infotainment oder Nachrichtenapps für Android" bechrieben.

Fazit:
Mittlerweile überlegt wohl auch Facebook einen eigenen Blogdienst aufzusetzen (siehe Artikel auf heise online "Bloggen mit Facebook: Notiz-Funktion ausgebaut") was positiv als Blogs sind immer noch vorhanden aber negativ auch so gelesen werden kann, dass man noch weniger die Facebook Seite verlassen sollte.

Nachdem Google ihren Reader für RSS Feeds eingestellt haben und gleichzeitig Google Kiosk angeboten haben mti der Möglichkeit den eigenen RSS Feed hier in ein Magazin einzubinden, hatte ich meine Gedanken schon im Artikel "Google Currents (Google Kiosk) oder die Assimilation ins google Kollektiv" festgehalten.

Wissensmanagement oder interne Austauschsplattform

Ein großer Vorteil an meiner Arbeit ist der Austausch mit anderen Hochschulen. Entsprechend wird das von mir zu Studiumzeiten angelegte Blog mittlerweile auch an der Arbeit hin und wieder genutzt und so manche hier vorgestellte Lösung fand dann auch in einer anderen Hochschule Anwendung. Daher möchte ich auch noch weitere Medien vorstellen, die für eine Zusammenarbeit hilfreich sind und mir damals wie heute schon das ein oder andere Mal geholfen haben.


Onlineforen und Wiki

Der Gedanke an ein Onlinewiki hatte mich schon im Artikel "Erste Erfahrungen mit Dokuwiki Konzept + Herangehensweise (Grundlagen)" gepackt und zwischenzeitlich ist ein Wikisystem auch eingerichtet.

Der Grundgedanke kam schon, als eine Stadtverwaltung ein recht umfangreiches Wiki zum Thema SAP in der öffentlichen Verwaltung betrieben hatte und hier einige hilfreiche Dokumente zu PSM-FM veröffentlich hatte. Derzeit ist mir leider nur das von  René Eberstein (freiberuflicher SAP-Entwickler) betriebene SAP-Wiki  berater-wiki.de bekannt, welches einen eindeutigen Schwerpunkt auf Entwicklung und weniger Anwendung hat.

Trotzdem könnte ich mir vorstellen, dass solch ein Wiki eine echte Alternative zu sehr vielen an unterschiedlichen Stellen abgelegten Handbüchern bieten kann.

Eine andere Alternative wären hier Onlineforen über die sich, meistens besser als per Mailingliste, zu konkreten Problemen ausgetauscht werden kann.

Während ich auf meiner Seite zum BWL Studium (mittlerweile ist diese Seite offline) ein Onlineforum betrieben habe über das sich unser (aber auch andere) Semester ausgetauscht haben ist es heute eher so, dass ich aktiv bei anderen Seiten Teilnehmer eines Forums bin.

Hierbei sind besonders die drei SAP Foren dv-treff-community.de, fico-forum.de sowie (wenn auch eher seltener) apentia-forum.de erwähnenswert. Leider gibt es heute kaum noch übergreifende Foren, aber dennoch bin ich von der Idee eines Austausch per Onlineforum sehr angetan und könnte mir das ebenso wie ein Onlinewiki auch als Plattform zum Austausch mit Kolleginnen und Kollegen vorstellen. Der Nachteil ist, insbesondere bei der Pflege eines Wiki, jedoch, dass dieses zeitintensiv ist und erst eine kritische Masse angelegt sein sollte, so dass sich andere dann ebenfalls trauen hier aktiv zu werden.

Dazu ist nicht nur eine technische Plattform und Artikelstruktur erforderlich sondern auch eine Menge an Abstimmung. Trotzdem wäre eine interne Plattform sicherlich immer noch eine sehr gute Idee.

Zum Schluss: Juristische Aspekte beim Einsatz von social media


Egal für welches Medium zur Wissensvermittlung man sich auch entscheidet so wird hier auch immer der juristische Raum betreten. Hierbei kann sowohl eine europäische Verordnung (siehe Artikel "Umsetzung EU Cookie-Hinweis Richtline 2009/136/EG bzw. Richtlinie zur Nutzereinwilligung") als auch aktuelle Artikel zum Medienrecht weiterhelfen.

Hier empfinde ich sowohl das Social Media Recht Blog als auch das Blog I LAW it - Rechtsanwaltskanzlei Schwenke sehr angenehm in der Schreibweise als auch verständlich in der Wissensvermittlung.


Social Media und Bewerbung

In der Artikelserie "Bewerbung 3.0 - Selbstpräsentation Social Media" werden von Christine Schramm-Spehrer  Aspekte der Nutzung von Social Media im Umfeld der Bewerbung und Selbstpräsentation im Web beschrieben. Die dort dargestellte Reihe ist ein Auszug der Präsenz-Seminare der Social Media Managerin Christine Schramm-Spehrer für das Hochschulteam der Arbeitsagentur Gießen und setzt gekonnt einige Themen rund um die Nutzung von Social Media im Berufsalltag aber auch im Bewerbungsprozess ein.

Inhaltlich empfinde ich hier einige angesprochene Punkte überdenkenswert und könnte mir vorstellen, dass der besuch einer solchen Veranstaltung ebenfalls einen Nutzen auch außerhalb des Bewerbungsprozess hat.

Natürlich könnte man hier kritische Punkte wie das optimierte digitale Ego anführen, oder auch die fehlende Möglichkeit selbst spielerisch und experimentierend das Netz zu erfahren, aber dieses ändert ja nichts an der Realität in der wir uns befinden... Außerdem muss ich hier ganz ehrlich an meine eigene Nase fassen und darauf hinweisen, dass Aspekte für diese Seite die Webputation und auch eine klassische Bewerbungsseite (siehe Lebenslauf oder auch meine Autorenwebsite bei Amazon und die mittlerweile teilweise eingestellten privaten Homepages die ich vor Jahren noch relativ unbedarft betrieben habe..

Entsprechend lesenswert betrachte ich diese Serie und im direkten Gespräch sind hier ebenfalls einige interessanten Aspekte schon in diese Serie mit eingeflossen :-). Sollten Sie die Möglichkeit zum Besuch dieser Veranstaltung in Gießen haben, kann ich nur auf die Seminarangebotsseite unter http://www.hp.berufundkarriereseite.de/ verweisen.

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Donnerstag, 30. Juli 2015
18:00 Uhr

Umsetzung EU Cookie-Hinweis Richtline 2009/136/EG bzw. Richtlinie zur Nutzereinwilligung

Heutzutage ist das Betreiben einer Internetseite (oder auch eines Blogs) mit einer Vielzahl von rechtlichen Besonderheiten verbunden, so dass es eigentlich kein Wunder ist, dass zum Beispiel das Thema Impressumspflicht, Datenschutzerklärung und mittlerweile auch EU Recht einen Eintrag ins Pflichtenheft diverser Seitenbetreiber gefunden hat.

Wie stark Recht und Netz miteinander verknüpft sind kann schon der verschiedenen Veröffentlichungen in letzter Zeit durch die c't sowohl anhand der FAQ zum Thema "Rechtssicheres Blog" als auch zur "Impressumspflicht bei Websites" und zum Thema "Datenschutz auf Websites".

Durch eine Rundmail von Google wurde das Thema nochmals ins Bewustsein von Seitenbetreibenden gesetzt, so dass es kein Wunder ist, dass immer mehr Seiten nun einen Cookiehinweis integriert haben und sich teilweise auch die Seiten zu diesen Thema häufen. Aus Interesse habe ich mich ebenfalls damit auseinander gesetzt und möchte in diesen Artikel hilfreiche Seiten empfehlen und gleichzeitig die von mir genutzte Lösung (sowie etwaige Anpassungen) beschreiben. Ich denke, dass die verlinkten Seite die aktuelle Lage sehr gut darstellen und mir bei der Umsetzung auf dieser Seite sehr geholfen haben.

Rechtlicher Hintergrund

Der rechtliche Hintergrund zu dieser Systematik wurde schon von Rechtsanwalt Dr. Bahr im Aufsatz "Die EU-Cookie-Richtlinie & Datenschutz im Social Media" recht ausführlich beschrieben. Auch wenn die Umsetzung der als "Cookie-Richtlinie" bezeichneten EU Richtlinie 2009/136/EG (2009/136/EC (ePrivacy Directive)) mit entsprechenden Cookiehinweis nicht zwingend in Deutschland erforderlich war, schildert Rechtsanwalt Thomas Schwenke dankenswerterweise in seinen Artikel "Google macht Cookie-Hinweise zur Pflicht – Handlungsempfehlung für Website- und Appanbieter" warum ein solcher Hinweis bei Nutzung von Google Produkten wie Google AdSense, DoubleClick for Publishers und DoubleClick Ad Exchange sinnvoll und von Google mittlerweile auch aktiv eingefordert wird. Ein entsprechender Hinweis ist auch im Google Adsense Blog unter "Neue Richtlinie zur Nutzereinwilligung" zu finden.

Dieses war auch der Grund, warum ich ergänzend zum Impressum sowie der Datenschutzerklärung auch diesen Hinweis mit eingebaut habe.

Technische Umsetzung Cookie Hinweis

Ich hatte mich daran erinnert, dass Google selbst hier eine Skriptlösung angeboten hatte und ging davon aus, dass diese auch auf der Seite cookiechoices.org angeboten hatte. Allerdings sind hier zwischenzeitlich nur noch externe Projekte verlinkt die eine entsprechende Lösung anbieten (immerhin darunter auch eine Informationsseite der Europäischen Kommission).

Die eigentlich von mir in Erinnerung befindliche Google Lösung war auf den ersten Blick hier nicht ersichtlich. Glücklicherweise hatte hier das Blog von Herr Yeah Ende 2014 die Lösung im Artikel "Google bietet Tool zum Einholen der Zustimmung für Cookies" ausführlicher beschrieben, so dass auch ein Link auf das entsprechende Skript und eine Einbauanleitung problemlos möglich ist.

Für Internetseiten erkläre ich weiter unten (im Abschnitt "Anpassungen Code und Datenschutzerklärung") wie ich diese Lösung entsprechend für meine Bedürfnisse angepasst habe.

Positiv an dieser Lösung ist in meinen Augen, dass diese auch mobil funktioniert.

Screenshot Cookie Hinweis gem. EU Richtinie responsiv  Diese Seite verwendet Cookies. Mit der Nutzung erklären Sei sich damit einverstanden, dass Cookies genutzt werden



Wie zu sehen, kommt es hier zum Zeilenumbruch. Daher ist es sicherlich sinnvoll nicht allzuviel Text als Hinweis zu schreiben.

Im Beispiel wird hier das Menü der Seite überschrieben. Dieses ist auch der Grund, weswegen ich den Text auf "Die Seite nutzt Cookies.Mit Nutzung erklären Sie sich einverstanden." sowie "Info+OptOut" und "OK" geändert habe. Dieses ist auch in kleinster Auflösung so wenig Text, dass weiterhin das Menü eingeblendet wird aber gleichzeitig alle notwendigen Informationen (sogar ein Hinweis auf OptOut) mit aufgeführt wird. Weitere Informationen sind ja auch im hinterlegten Link "Info+OptOut" aufgeführt, der sowohl mobil als auch bei großer Auflösung dargestellt werden kann.Damit ist zwar immer noch ein Zeilenumbruch vorhanden, jedoch kann weiterhin das Menü aufgerufen werden.

Kurzer Cookie Hinweis Text


Derzeit liegt der Anteil der Smartphonenutzer auf dieser Seite bei etwa 8 %, daher sollen auch diese trotz EU Hinweis weiterhin auf dieser Seite navigieren können.
Eine andere Alternative wäre es gewesen den Cookiehinweis ans Ende der Seite zu stellen, dieses erschien mir aber aus verschiedenen Gründen nicht richtig, so dass mir der verkürzte Text als eine pragmatische aber aussagekräftige Lösung erscheint.

Amüsantes am Rande

Eine kreative Lösung bezüglich des Cookiehinweis hat hier Amazon gefunden. Der Hinweistext lautet "Amazon nutzt Cookies" und als Link "Was sind Cookies?" :-) Ich glaube viel kürzer ist es gar nicht möglich und regt tatsächlich dazu an, hier ebenfalls eine solche Lösung zu erstellen.
 

Anpassungen Code und Datenschutzerklärung

Auch wenn die Datenschutzerklärung an und für sich schon recht ausführlich ist, habe ich mich dazu entschlossen basierend auf  den angebotenen " template to create your own cookie notice page" der EU Kommission (siehe Cookie Consent Kit) nochmals ausführlicher zu beschreiben, wozu Cookies auf dieser Seite eingsetzt werden und was Cookies eigentlich sind. Da der Aufwand der Anpassung bzgl. Datenschutzerklärung für Google Analytics und Google Adsense ohnehin schon betrieben wurde war es dann relativ einfach auf die entsprechenden Bereiche der Datenschutzerklärung zu verlinken.

Ferner habe ich auf die Opt-Out Möglichkeiten von Google Adsense und Google Analytics hingewiesen.

Dieses dürfte nun auch der Grund sein, warum oberhalb der Seite (nicht nur im Blog) der Cookiehinweisbalken eingeblendet ist und erst verschwindet, wenn mittels Zustimmen ein Cookie gesetzt wird, dass man den Hinweis gelesen hat.

Das Cookie "displayCookieConsent" mit Wert y bleibt dabei für 12 Monate gespeichert und verhindert damit das Einblenden des oberen Hinweisbalken.

Grundsätzlich ist es zur Nutzung des Cookiehinweis damit getan sich das Skript unter https://www.cookiechoices.org/cookiechoices.zip herunterzuladen und innerhalb des BODY der HTML Seite den entsprechenden Code mit einzufügen.

Hierzu ist die Datei cookiechoices.js aus der ZIP Datei in das Hauptverzeichnis der Internetseite zu speichern und im HTML Code der Seite nach
<body> der folgende Code (siehe zweiten folgenden Absatz) einzubinden.

Die Benachrichtigungsleiste kann über die Anweisung showCookieConsentBar entsprechend eingeblendet werden. Ich empfinde diese als mittlere Lösung bezeichnete Variante sehr angenehm und besser geeignet als die Option des Splashscreens, der die gesamte Seite bedeckt.

Entsprechend ist folgender Code bei mir in der Seite eingefügt;
<script src="/cookiechoices.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    cookieChoices.showCookieConsentBar('Diese Seite verwendet Cookies. 
Mit der Nutzung  erklären Sie sich damit einverstanden, dass Cookies genutzt werden.'
,'Zustimmen', 'Mehr erfahren (inkl. Opt-Out)', 
'/impressum.php#cookies');
  });
</script>

 

Cookie-Hinweis ans Ende der Seite

Nun gibt es aber Seiten, auf denen ein Einblenden am oberen Rand der Seite die Navigation bedeckt oder auch aus anderen Gründen eher ungeschick erscheint. Da der Code den Hinweisbalken fixiert (er ist auch beim Scrollen immer betrachtbar) kann die Datei cookiechoices.js noch passend angepasst werden.

Durch die Codeanweisung top:0 wird der entsprechende Balken am Anfang der Seite eingebunden. Sofern eine Anzeige am Ende der Seite gewünscht ist, kann hier top:0 durch bottom:0 ersetzt werden.


Vielleicht ist es keine elegante aber immerhin eine funktionale Anpassung des Skriptes... :-)

Kein Cookiehinweis in der Druckausgabe

Sofern der Cookiehinweis nicht in der Druckausgabe erscheinen soll besteht die Möglichkeit diesen per CSS auszublenden.

Vorraussetzung dafür ist, dass eine extra format.css für die Druckausgabe erstellt wird.

Diese kann im Header der Seite bspw. per:


<link rel="stylesheet" type="text/css" media="print" href="druckausgabe.css" />

eingebunden werden.

Innerhalb der CSS Datei, in unseren Fall "druckausgabe.css" , kann nun das Element #cookieChoiceInfo die Eigenschaften erhalten nicht ausgegeben zu werden.

#cookieChoiceInfo
{
  display: none;
}


Damit erscheint der Cookiehinweis in der Webversion, aber nicht mehr in der Druckausgabe. Dieses kann gerne anhand der Blogartikel auf dieser Seite getestet werden ;-)
 

Fazit - Bedeutung der Cookierichtline für diese Seite

Da mir das Thema Datenschutz wichtig ist und durchaus ein Interesse an neuen Themen vorhanden ist, ist auf dieser Seite nicht nur ein datenschutzfreundliches Einbinden der social web Empfehlungen vorhanden (siehe hierzu auch Blog: 2 Klicks für mehr Datenschutz ) sondern auch der Einsatz der beiden erwähnten Google Dienste sind entsprechend umgesetzt.

Gerade was Werbung im Netz anbelangt ist für den informierten Verbraucher sicherlich auch die Möglichkeit der Deaktivierung von personenbezogener Werbung interessant (siehe Abschnitt XI. Google Adsense in der Datenschutzerklärung) aber auch die anonyme Erfassung der Besuchenden dieser Seite und entsprechende datenschutzkonforme Analyse (siehe Abschnitt VII. Google Analytics) sind mir wichtig. Die meisten Dienste bieten auch schon entsprechende datenschutzkonforme Lösungen an (siehe zum Beispiel der Abschnitt VI. VG Wort Zählpixel), so dass es auch im Interesse der Seitenbetreiber liegen kann hier einen entsrechenden Hinweis anzubieten.

Persönlich muss ich allerdings sagen, dass mir die Hinweise auf Cookies auf vielen Seiten eher als störend als aufklärend erscheinen und es ist schon eine gewiße Ironie, dass durch das Setzen eines Cookies die Information über Cookies abgenickt wird.

Optisch bin ich jedoch froh, dass der Balken durch ein einfaches "ZUSTIMMEN" zumindest für einige Zeit ausgeblendet wird. Gerade bei vielen mobilen Seiten raubt ein solcher Hinweis oftmals dann doch das Lesevergnügen.....
 

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Freitag, 30. Januar 2015
14:20 Uhr

Socialmedia Buttons für Profile per CSS Sprites oder CSS Box für XING, Google+, Twitter und Facebook

Auf der Seite designyourweb.info ist ein gut erklärter Artikel zur Erstellung von CSS Sprites ("Mit CSS Sprites die Website Performance steigern" leider derzeit nur per archive.org erreichbar) von Sascha Geperrt zu finden. CSS Sprites werden heutzutage häufig genutzt um die Ladezeit von Seiten zu minimieren. Hierbei werden Grafikelemente einer Seite in eine Datei gepackt und mittels der CSS Eigenschaften background-image und background-position ein- beziehungsweise ausgeblendet. Sofern man nicht selbst die Grafikdateien zurecht basteln möchte, bieten sich Webangebote wie SpritePad von wearekiss an.

Das  Blog mit Artikeln rund um das Thema Web-Design wurde im Rahmen einer Vorlesung "Online-Marketing - Search Engine Optimization" der Hochschule Heilbronn erstellt und wird derzeit wohl von drei Autoren betreut wird, so das hier wohl auch künftig noch weitere Artikel zu finden sind.

Ursprünglich bin ich auf diese Seite gelandet, da ich nach einer Möglichkeit gesucht hatte social media buttons für verschiedene Dienste ins Blog einzubinden, so dass hier ein Zugriff auf die einzelnen Profile wie XING, Facebook, Twitter oder auch Google Plus möglich ist.

Alternative: CSS Box für Link zu Profilen im "social web"

Da ich aber auch nicht einfach einen Link auf das jeweilige Profil setzen wollte, habe ich mich dazu entschlossen hier mittels CSS Buttons zu erstellen, die auch für den jeweiligen Dienst mit passenden Farben geeignet sind.

Entsprechend sind auf manche Unterseiten folgende Profilbuttons zu finden:

Social Media Buttons mit Hovereffekt in CSS
Dabei sind in der ersten Reihe die Buttons im Normalzustand zu sehen und in der zweiten Reihe werden diese etwas belichtet, wenn die Maus über den jeweiligen Button fährt. Hierzu erfolgte die Formatierung dieser Links jedoch nicht über Grafiken sondern per CSS- Klassen. Über die CSS Eigenschaften padding wurde um den eigentlichen Link ein Rahmen gesetzt und über border-radius die Ecken des Rahmen abgerundet. Hierbei wurde aus Kompatibilitätsgründen die CSS3 Eigenschaft border-radius um moz-border-radius für Mozilla (bspw. Firefox) und webkit-border-radius für Safari (Apples Browser) ergänzt. Ferner wurde über die Eigenschaft background: entsprechende Hintergrundfarben des jeweiligen Dienstes hinterlegt.

Die einzelnen Eigenschaften sind als Klassen in einer zentralen CSS Datei eingebunden:

Button für Facebook:

.btnfb {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #46629E;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btnfb:hover {
  background: #5C7DC1;
  color: #ffffff;
  text-decoration: none;
}
Button für XING (* XING Premiummonat für Neumitglieder)
.btnxing {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #006567;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btnxing:hover {
  background: #D5D700;
  color: #006567;
  text-decoration: none;
}
Button für Twitter:
.btntw {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #0084B4;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btntw:hover {
  background: #007EAC;
  color: #ffffff;
  text-decoration: none;
}
Button für Google Plus:
.btngp {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #C83F2F;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btngp:hover {
  background: #D45C4C;
  color: #ffffff;
  text-decoration: none;
}
Button für RSS Feed
.btnrss {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  color: #ffffff;
  background: #F38C29;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
}
.btnrss:hover {
  background: #FB9E3D;
  color: #ffffff;
  text-decoration: none;
}
Durch den Hover Effekt ändert sich dann die Hintergrundfarbe (bei XING auch die entsprechenden Textfarbe geändert). Dabei wurde sich bei den Farben auch an den einzelnen Farbcodes der jeweiligen Internetseite orientiert. Sehr hilfreich für eine solche Aufgabe ist das Addon ColorZilla für Firefox bzw. Google Chrome. Dieses integriert eine Pipete im Browser durch die der entsprechende Farbcode übernommen werden kann.

Zum Setzen eines Links kann nun im HTML Code mittels <a href="..." class="btnrss">Linkbeschreibung</a> ein Link mit entsprechenden abgerundeten Kasten dargestellt werden.

Beim RSS Link wurde ferner noch das RSS Symbol miteingefügt. Dieses ist über eine Webfont verwirklicht worden und im Artikel "Fontello - Icons als Webfonts per CSS einfügen" beschrieben.

Im Blog selbst wird das Ergebnis dann wie folgt angezeigt:

Aktuelle Infos und sonstige Profile

Facebook Twitter Google+ XING* RSS-Feed

* XING Premiummonat für Neumitglieder

Sollten Sie das Blog per RSS lesen, erfolgt leider keine Darstellung mit Formatierung.

Pagespeed, Socialshareprivacy und CSS Sprites für Sharebuttons

Weitere Informationen zur Ladezeitoptimierung einer Seite sind auch im Artikel "In eigener Sache: Updates der Seite (Technik und Design) - Fokus auf Responsives Webdesign und pagespeed" beschrieben.

Gerade in Sachen pagespeed bieten sich die eingangs erwähnten CSS Sprites durchaus an, da hier statt mehrere Verbindungen zum Server aufzubauen (um einzelne Grafiken zu laden) nur eine Datei geladen werden muss, die dann entsprechend eingebunden wird.
So haben auf dieser Seite auch die Socialshare Buttons zum Teilen der Beiträge in soziale Netzwerke ein gewisses Optimierungspotential und würden sich als Sprites anbieten.

Da auch hier im Blog schon die Teilen Funktion über die 2 Klicks für mehr Datenschutz unterhalb eines jeden Einzelartikel umgesetzt ist (siehe Artikel "Blog: 2 Klicks für mehr Datenschutz") wollte ich natürlich auch keine Folgenfunktion des jeweiligen Anbieters einbinden.

Zur Erinnerung: Handhabung des Social Share Plugins
Unter jeden Artikel findet sich eine Symbolleiste mit ausgeblendeten Funktionen der drei sozialen Webdienste (Facebook, Twitter und Google+).

Deaktivierte Share Dienste / Teilenfunktion

Sofern nun auf den Schalter oder das Icon geklickt wird, wird der entsprechende Dienst aktiviert.

Aktivierte Share Dienste / Teilenfunktion

Durch einen erneuten Klick können diese Daten dann in das jeweilige "soziale" Netzwerk als Posting / Tweet geteilt werden.


Theoretisch würde sich hier im Blog ebenfalls einbinden die 2 Klicks für mehr Datenschutz-Buttons als Sprites anzulegen und entsprechend die Ladezeit zu kürzen. Da hier aber die Seite ohnehin schon recht flott lädt (und ich das Javascript nicht erneut anpassen mag) sehe ich davon ab und habe lieber durch die RSS Lösung auf der Seite entsprechende Buttons eingefügt.

Für neuere Projekte könnte allerdings das Nachfolgeprojekt zu "2 Klicks für mehr Datenschutz" der c’t interessant sein. Hier wird auf eine "1 Klick für mehr Datenschutz" Lösung gesetzt. Diese Lösung "SHARIFF" ist im Artikel "Schützen und teilen Social-Media-Buttons datenschutzkonform nutzen" auf http://heise.de/-2463330 veröffentlicht.

 

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Sonntag, 4. August 2013
10:05 Uhr

Facebook Seite mit RSS Feed / Blogartikel versehen

Ausgangslage
Anhand der Anleitung auf stadt-bremerhaven.de hatte ich mich dann doch einmal im Gestalten einer Facebook Seite zum Blog andreas-unkelbach.de bei facebook versucht auch um mir einmal die Möglichkeiten anzusehen, wie hier wohl Artikel als Statusmeldung veröffentlicht werden können.

Für Betreiber eines Blogs stellt sich die Frage, ob hier nur eine kurze Ankündigung oder eine komplette Zweitveröffentlichung von Artikeln erfolgen soll.

Ich bin selbst ein Fan vom Volltext-RSS-Feed bin aber der Meinung, dass der Wert der eigenen Homepage dennoch erhalten bleiben sollte und habe mich daher entschieden auf der Fanpage nur Artikel anzukündigen. Aber vielleicht ist dieses doch für den ein oder anderen eine Idee um über aktuelle Artikel informiert zu werden.

Einbinden Blogartikel auf eigene Seite bei Facebook

Zur Einbindung von Artikeln bei Facebook habe ich grundsätzlich drei Möglichkeiten gefunden.
  • 1. Webdienst IFTTT.com
  • 2. Statusmeldung per phpMail
  • 3. Android App Seitenmanager
Diese Möglichkeiten möchte ich kurz erläutern.

1. IFTTT.com

Über einen Webdienst können RSS Feeds direkt auf eine Facebook Seite veröffentlicht werden. Hierzu ist es jedoch erforderlich, dass dieser Webdienst einen Zugriff auf die Seite erhält.

Die Internetseite ifttt.com bietet die Möglichkeit Rezepte nach den Muster if [this] then [that] anzulegen.

Hierbei können verschiedene Quellen als Auslöser [THIS] definiert werden und als [that] dann ebenfalls über verschiedene Quellen (Channels) Aktionen ausgeführt werden. Diese Aktionen können dann auch mit entsprechenden Zutaten (ingredient) angereichert werden.

Ein mögliches Rezept wäre zum Beispiel:

IF (Feed URL) than (Create a status message on Facebook Page) wobei diese Statusmitteilung mit verschiedenen Zutaten (Bestandteilen des Feeds angereichert werden kann.

Beispiel:
Neuer Blogeintrag zum Thema "{{EntryTitle}} " von {{EntryAuthor}} auf {{EntryUrl}}

Daneben könnte aber auch der gesamte Artikel (über {{EntryContent}}) eingebunden werden.

Das fertige Rezept sieht dann wie folgt aus:
If this than that

  • Vorteile
    • einfache Einrichtung
    • Direktes Posten auf der Facebook Seite
    • Keine Codeanpassung im eigenen Blog, sofern ein RSS Feed vorhanden ist
  • Nachteile
    • Der Webdienst hat Zugriff auf die eigene Seite
    • Als {{EntryUrl}} legt IFTTT.com eine Kurz-URL von bit.ly an, wodurch kein direkter Link erzeugt wird und auch kein Vorschaubild im Artikel möglich ist


2.Artikel an Facebook Seite mailen

Innerhalb des Administationsbereich der Facebook Seite findet sich unter Seite bearbeiten der Punkt Administrationsrechte verwalten.

Seite bearbeiten->Administrationsrechte bearbeiten

Von hier kann unter Mehr auf den Punkt Handy gewechselt werden.

Mit Handy Mail auf facebook page posten

Hier wird seitens Facebook eine Mailanschrift für die Facebook-Seite angelegt an der alle Artikel veröffentlicht werden können.

Hier können sowohl Statusmeldungen (als Betreffzeile) oder auch Fotos (Bilduntschrift als Betreffzeile) gepostet werden. Das Textfeld der Mail sollte in beiden Fällen leer bleiben.

Dieses ist eigentlich die flexibelste Möglichkeit um auch auf einer Facebook Seite Artikel anzukündigen.

Das entsprechende PHP Coding ist unter schattenbaum.net/php/ oder im Buch PHP für dich im Kapitel eMail-Versand beschrieben.


Bevor eine solche Mail aktiv genutzt wird, sollte mit ein paar Testeinträgen nachgesehen werden, ob das Posting problemlos funktioniert. Hier sendet Facebook an die Absendermailanschrift entsprechende Fehlercodes und eine Seite in der diese eingesehen werden können.

Die einzelnen Fehlermeldungen sind bei Facebook auf "SMTP Response Codes" aufgeführt.

Beispiel:
POL-P6 The message contains a url that has been blocked by Facebook.
Wird beim Erstellen einer Statusmeldung eine eigene Kurz-URL (zum Beispiel über bit.ly) per Mail gesendet, so wird diese Statusmeldung abgelehnt.

Da aber Statusmeldungen bei Facebook nicht auf eine bestimmte Zeichenanzahl beschränkt sind kann problemlos auch die tatsächliche URL des Artikels veröffentlicht werden.
  • Vorteile
    • flexible Einrichtung
    • Direktes Posten auf der Facebook Seite
    • Individuelle Gestatltung möglich
  • Nachteile
    • Codeanpassung im eigenen Blog
    • PHP Kenntnisse erforderlich


3. Teilen über Android Seitenmanager

Sofern ein RSS Reader (zum Beispiel feedly) genutzt wird kann innerhalb Android auch die Teilen Funktion genutzt werden und für die eigene Seite die App Seitenmanager von Facebook verwendet werden.

  • Vorteile
    • maximale Individualität
    • Teilen von verschiedenen Quellen auf Facebook Seite möglich
    • Individuelle Gestatltung möglich
    • Integration in Android "Teilen" Funktion
  • Nachteile
    • Manuelles Teilen von Artikeln
    • Eigentlich kein Unterschied zur Nutzung der Facebook Oberfläche



Fazit:

Sinn und Zweck einer Facebook Seite für ein Blog kann umstritten sein, aber auf diese Weise ist eine einfache Benachrichtigung (außerhalb) des RSS Feed über aktuelle Blogartikel möglich.

Das umgesetzte Beispiel kann auf der Facebook Seite andreas-unkelbach.de betrachtet werden.



Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Mittwoch, 12. Juni 2013
15:40 Uhr

Drei Varianten um Fehlermeldung bei PHP anzuzeigen

Sofern, meistens aus Sicherheitsgründen, die Ausgabe von Fehlermeldungen bei PHP deaktiviert ist, gibt es neben der Einstellungen innerhalb der Serverkonfiguration (PHP.INI) auch weitere Möglichkeiten diese zu aktivieren, sofern dieses unterstützt wird.

a) php.ini
Hier wäre die Einstellung auf

error_reporting = E_ALL
display_errors = On


zu ändern.

b) .httaccess
Hier kann über PHP Flags die Ausgabe von Fehlern wiederum aktiviert werden.

php_value display_errors 1
php_value error_reporting 6143


Zur Erklärung:
display_errors 1 schaltet die Fehlerausgabe auf an und error_reporting 6143 steht für alle Fehler.

Sofern der Server diese Konfiguration nicht unterstützt kann es zu einen unerwarteten Serverfehler kommen (HTTP-Statuscode 500)

c) innerhalb des PHP Skripts

Durch folgenden PHP Code innerhalb einer PHP Anweisung kann ebenfalls die Ausgabe von Fehlern aktiviert werden:

error_reporting(E_ALL);
ini_set('display_errors', 1);


Auch hier werden wiederum alle Fehler berichtet und per ini_set dann auch ausgegeben.

Eine Übersicht über die möglichen Werte sind auf php.net untererrorfunc.constants.php beschrieben.

Die sicherste Variante dürfte daher c) und die Angabe innerhalb eines PHP Skriptes sein. Aus Sicherheitsgründen sollte dieser Codeblock nach erfolgreichen Test aber wieder entfernt werden, da ansonsten anhand der Fehlermeldung auch Informationen zum Aufbau der Seite ausgelesen werden können.

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Mittwoch, 22. Mai 2013
17:33 Uhr

Strukturierte Daten auf Website oder Semantisches Web (schema.org)

Mittlerweile bieten die Webmaster-Tools ein Hilfsprogramm zur Auszeichnung strukturierter Daten um Internetseiten bei der Erstellung von Mikroformaten zu helfen. Die Suchmaschinen Bing, Google, Yahoo! und Yandex haben sich auf der Seite schema.org auf bestimmte HTML Tags geeinigt die nicht nur zur näheren Beschreibung von Personen oder Events genutzt werden können sondern auch Dinge wie "creative work" worunter bspw. Artikel, Blogs oder auch Musik oder andere Medien fallen.

Auf der Seite schema-creator.org wird anhand der Beispiele
  • Person - Personen
  • Product - Produkte
  • Event - Veranstaltungen
  • Organization - Organisationen
  • Movie - Filme
  • Book - Bücher
  • Review - Bewertungen
erläutert wie dieses funktionieren kann.

Bisher hatte ich meine Seite nur über einen Link mit rel="author" mit meinen GooglePlus Profil verlinkt (bzw. im Beispiel mit einer Seite auf der mein GooglePlus Profil mit rel="me" verlinkt worden ist. Auf diese Weise kann google neben den Suchergebnisen auch verschiedene Informationen zu meiner Person mit veröffentlichen.

Durch die Mikroformate sind jedoch wesentlich aussagekräftigere Angaben zu einer Seite möglich. Dieses ist eines der Bestandteile des sogenannten Semantisches Web

Im Wesentlichen werden diese Mikroformate wie folgt aufgebaut.

Innerhalb eines HTML Tag werden die ergänzenden Eigenschaften
itemscope und itemtype hinterlegt.

Meistens werden hier die Tags span oder div genommen.

So kann bspw. die Eigenschaften eines Artikels wie folgt beschrieben werden:

itemscope itemtype="http://schema.org/Article"

Durch itemscope wird ein Mikrodatenset deklariert und der Typ Articel auf Basis der Definitionen auf schema.org zugewiesen.

Auf Schema.org sind verschiedene "Klassen" von Beschreibungen vorhanden.


Die einzelnen Schemata sind unter Organization of Schemas zu finden. Dieses kann sowohl Personen, Dinge oder auch speziellere Sachen wie Orte, Organisationen oder auch Blogpostings beinhalten.

Über die Ergänzung eines Tags (wiederum bspw. span oder div) um

itemprop="articleSection"

können einzelne Attribute des Schematas innerhalb der HTML Tags zugewiesen werden. Im oberen Beispiel ist dieses der Artikelbereich.

Die einzelnen Attribute können aber wiederum auf weitere Schemata mit entsprechenden Eigenschaften verweisen.

itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Person"

Hier wird die Eigenschaft copyrightHolder mit den Schema Person ausgezeichnet, so dass darauf die einzelnen Attribute zu einer Person verwendet werden können.

Als Beispiel können hier Kontaktdaten oder Namensangaben zählen.

itemprop="name"
Hiermit kann der Name des Copyrightinhabers hinterlegt werden.

Auch dieses Schema kann wiederum auf andere Schemata verweisen.

So könnte zum Beispiel das HTML Tag address um das schemata PostalAddress erweitert werden um eine entsprechende Postanschrift zu hinterlegen.


itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"

Auf diese Weise kann eine Seite in mehrere weitere Dimensionen beschrieben werden. Ein Praxisbeispiel können hier Kochrezepte, Rezensionen oder auch Produkte sein die dann wesentlich leichter und strukturierter auffindbar sind.

Ein vergleichbares System hat auch Facebook im Angebot mit der open graph Definition.

Da beide Schemata auch gemischt werden können, kann es sinnvoll sein, diese innerhalb der Metatags (im Head Bereich einer Seite) mit anzugeben.

Hierbei habe ich die einzelnen Artikelseiten relativ minimalistisch beschrieben.
  • meta property="og:type" content="blog"
  • meta property="og:url" content="Url des Artikels"
  • meta property="og:description" content="Kurzbeschreibung des Artikels"
  • meta property="og:site_name" content="Seitenname der Internetseite"


Was mich dabei verwunderte ist, dass og:description scheinbar einen höheren Rang bei der Darstellung von Suchergebnissen hat als das bekannte metatag name="Description". Zumindest bei diesen Artikeln im Blog wird bei nicht Vorhandensein von og:description ein Artikelauszug angezeigt, obgleich innerhalb meta name="Description" unter Zuhilfenahme der Überschrift und der Tags eines Artikels eine Kurzbeschreibung hinterlegt ist.

Ein weiterer Punkt ist das Vorschaubild beim Teilen einer Seite (dieses wird sowohl bei Google Plus als auch Facebook) als Platzhalter angeboten und kann über og:image eingebunden werden.

Beispiel:
  • meta property="og:image" content="http://andreas-unkelbach.de/andreas.gif"
Nähere Informationen zum Aufbau des Open Graph Protocoll sind auf http://ogp.me/ zu finden.

Sind alle Eigenschaften eingetragen kann über das Test-Tool für strukturierte Daten innerhalb der Webmastertools die es ermöglichen zu überprüfen, ob Google die Auszeichnung der strukturierten Daten richtig parsen und in den Suchergebnissen anzeigen kann.

Als Beispiel kann hier folgendes Rezept gelten:
Mit # sind die Codierungen markiert und mit der Maus drüber bekommt man die Erläuterung dazu.
#

#
#Mein Morgenkaffee

von ##
#Ein kleines Morgenritual ist stets die Zubereitung meines Kaffees. Daher eignet sich dieses natürlich hervorragend als Beispiel.
#Insgesamt brauche ich morgens nur #wenige Minuten um die Kaffeemaschine anzuschalten und im Büro mir eine #1 Kapsel Nespresso Arpegio zu holen.
Danach lege ich die Kapsel in die Maschine, #starte den Brühvorgang und erfreue mich am Duft des frischen Kaffees. Auf Wunsch kann ich diese dann noch mit #1 Schuß Milch aufgießen, so dass ich dann den Tag mit #einer Tasse Kaffee beginnen kann. Insgesamt bin ich hier schon ehr froh, mich damals für eine ## für die Arbeit entschieden zu haben.




Der Extrakt der strukturierten Daten sieht dabei wie folgt aus:
type:http://schema.org/recipe
property:
image://www.andreas-unkelbach.de/up.gif
name:Mein Morgenkaffee
author:Andreas Unkelbach
datepublished:2013-05-23
description:Ein kleines Morgenritual ist stets die Zubereitung meines Kaffees. Daher eignet sich dieses natürlich hervorragend als Beispiel.
recipeinstructions:Insgesamt brauche ich morgens nur wenige Minuten um die Kaffeemaschine anzuschalten und im Büro mir eine 1 Kapsel Nespresso Arpegio zu holen. Danach lege ich die Kapsel in die Maschine, starte...
preptime:PT2M
ingredients:1 Kapsel Nespresso Arpegio
cooktime:PT1M
ingredients:1 Schuß Milch
recipeyield:einer Tasse
ingredients:Kaffeemaschine
url:Kaffeemaschine


Vielleicht kann durch ein solches semantisches Web tatsächlich irgendwann einmal auf Basis von Zutaten ein Rezept gefunden werden aber auch sonst sind Daten an sich ohnehin dafür gedacht in eine klare und verständliche Struktur gebracht zu werden.

Dieses gilt sicherlich für Menschen, also warum sollte dieses nicht auch für Maschinen gelten.

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Mittwoch, 1. Mai 2013
19:00 Uhr

In eigener Sache: Updates der Seite (Technik und Design) - Fokus auf Responsives Webdesign und pagespeed

Nachrichten aus dem Maschinenraum


Im Laufe der Zeit hat sich auch das Layout und die zugrundeliegende Technik dieser Seite gewandelt. Einige Änderungen möchte ich hier vorstellen, beziehungsweise einige Links dazu sammeln.

0. AMP - Accelerated Mobile Pages (Nachtrag 2016)

Mittlerweile gewinnt das Thema Mobile Website auch eine höhere Bedeutung für Google bzw. generell im Netz. Ich erinnere mich noch recht gut an erste Versuche mit WML, aber heutzutage scheint hier mit AMP ("Accelerated Mobile Pages") das Thema noch weiter vorangetrieben zu werden. Eine ausführliche Einführung in dieses Thema ist im Artikel "Wie Google mit AMP das offene Web retten will" in der c't 03/2016, S. 158 zu finden. Ein klein wenig erinnert mich hier die Strategie an meine Anfangszeiten mit htmling.net, hier gab es damals schon Aufschreie wenn eine Internetseite > 48 KB wurde... :-) Ich stehe der Technik etwas skeptisch gegenüber, da hier große Teile des Designs und der Funktionalität ausgelagert und eingeschränkt wird. Dennoch ist für den ein oder anderen dieses Thema sicher interessant.

 

1. Responsives Webdesign

Unter responsives Webdesign ist die Anpassbarkeit der Größe und Auflösung einer Seite abhängig vom Endgerät zu verstehen. Wobei hier das Endgerät als Synonym für die am Display vorhandene Auflösung zu verstehen ist.

Ein Problem stellen hierbei Browser auf Tablets oder Smartphones dar, welche eine gewisse Displaygröße vorgeben, obgleich diese gar nicht gegeben ist.

Durch die Meta-Tag Angabe viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

werden Smartphones nicht mehr eine simulierte sondern die tatsächliche Displaybreite liefern.

Innerhalb einer CSS Datei können dann über Mediaqueries

bspw. per:

@media screen and (min-width: px) and (max-width: px)

entsprechende CSS Tags neue Eigenschaften vererbt bekommen, so dass Elemente der Seite ausgeblendet werden können (durch die CSS Anweisung display:none; ) oder auf eine andere Position innerhalb des CSS Design gesetzt werden können.

Diese Möglichkeit in CSS3 ermöglicht es dann ein sich anpassendes Design zu entwickeln, welches je nach Auflösung dann die Seite unterschiedlich darstellt.

Dank Claudia bietet diese Seite nun verschiedene Darstellunsgformen:
  • Gesamtsicht
  • verkleinerte Tagcloud
  • ohne Tagcloud
  • ohne Bild, mit Menü links
  • Menü als CSS Aufklappmenü am Seitenkopfrand

Auch die Hauptseite bietet nun eine entsprechende Anpassung je nach Bildschirmgröße, bzw. Darstellungsform der Seite. Vielen Dank für die Erklärung und natürlich auch Umsetzung :-).

Dieses ist gerade zur Darstellung von mobilen Websites sehr hilfreich und wird mittlerweile von Google als Rankingfaktor gewertet. Auf der MobileFriendly-Seite oder innerhalb der Webmastertools von Google kann ihre eigene Seite dahingehend überprüft werden, ob diese auch auf Smartphones oder anderen mobilen Geräten ordentlich dargestellt wird.

2. Navigation - Kategorien der Blogartikel

Das Menü (Unterseiten und Blogkategorien) ist nun auf der gesamten Seite einsehbar, so dass hier von jeder Seite auf etwaige Unterseiten gewechselt werden kann. Ferner sind die Kategorien (Android, SAP, Beruf, ...) und die einzelnen Tags aufgeräumt, so dass hier eine bessere Übersicht erlangt werden kann. Sollten Artikel nicht auf Anhieb gefunden werden, empfiehlt sich die Artikelsuche. Hier sind alle Blogartikel auffindbar. Neben einer Kategorisierung sind die einzelnen Beiträge auch verschlagwortet (TAGS), so dass Sie, zumindest in der Desktopansicht auf der rechten Seite eine Tagcloud haben in der Sie nach Stichworten suchen können.

3. Ladegeschwindigkeit - Pagespeed

Google bietet mit dem Webservice Google Page Speed die Möglichkeit an, eine Seite zu analysieren und Verbesserungsmöglichkeiten im Bereich des Optimierung der Ladezeit ausgegeben.

Mittlerweile bietet der Pagespeed-Test von Google optimierte Bild-, JavaScript- und CSS-Ressourcen für die getestete Seite zum Herunterladen an. Hierbei sollte jedoch vorher kontrolliert werden, ob diese tatsächlich kleiner als die ursprünglich verwendeten Ressourcen sind. Unschön ist, dass bei JavaScript Dateien die Kommentare entfernet werden und damit auch Copyright Hinweise zum Skript. Die CSS Dateien sind oftmals unproblematisch, da hier einfach nur die Leerzeichen entfernt werden.... hier ist der Spagat zwischen Lesbarkeit und schnelles Laden zu schaffen... Möglicherweise kann es hilfreich sein online eine komprimierte und offline eine gut lesbare Version des CSS zur Verfügung zu haben.

Leider sind hier die Hinweise sehr technisch, so dass ich sehr dankbar für die Seite Page-speed.net bin welche einige Tipps Ladezeit und Performance Optimierung zusammenfasst und anhand von Codebeispielen erläutert. Auf dieser Seite sind neben Pagespeed von Google auch andere Tools und PHP Skripts zur Kontrolle der Ladezeit einer Website mit aufgeführt.


Für die Verwendung von Grafiken (PNG, JPG oder GIF) wurde ja schon im Beitrag RIOT Bilder fürs Web optimieren (Plugin für Irfanview) der Unterschied und etwaige Empfehlungen zum Bildformat verlinkt.

Wesentliche Änderungen sind zum einen die Anpassung der .httaccess in der charset und caching der einzelnen Medientypen ausgegeben werden.
Beispiel:
.httaccess
AddDefaultCharset iso-8859-1
:
ExpiresActive On
ExpiresDefault "access plus 7 days"
ExpiresByType text/html "access plus 6 hours"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"

Daneben werden die einzelnen Seiten per PHP als gzip komprimiert und entsprechend ausgeliefert, sofern der Browser Encoding unterstützt, um dann im Browser entpackt zu werden.
Beispiel:
PHP Code
if(extension_loaded("zlib") AND strstr($_SERVER["HTTP_ACCEPT_ENCODING"],"gzip"))
@ob_start("ob_gzhandler");


Entsprechend kleiner sind die Übertragungen und (hoffentlich) schneller die Übertragung. Eine solche Komprimierung ist auch bei CSS Dateien möglich, wie auf page-speed.net beschrieben.
 

4. JQuery - CDN Content Distrubitation Network zum Auslagern von Bibliotheken

Für die Verwendung des socialshareprivacy Plugins nutze ich bei der Anzeige von Artikeln auch die Java-Script Bibliothek JQuery. Da ich auf meinen Webhosting nicht die Möglichkeit des Apache Moduls mod_deflate nutzen kann, bietet es sich an, die JQuery Bibliothek über einen CDN einzubinden. Hier bietet jQuery selbst unter Using jQuery with a CDN verschiedene Anbieter an, die Jquery komprimiert hosten. Darunter fallen Google und Microsoft. Hier können alle bisherigen Versionen von jQuery in das eigene Projekt eingebunden werden.

Eine Einbindung über einen CDN hat auch den Vorteil, dass dieses auch bei anderen Seiten der Fall sein kann und sich diese Bibliothek entsprechend im Cache der Besucher befindet und nicht separat geladen werden muss.

5. Socialshareprivacy - 2 Klicks für mehr Datenschutz optimieren

Mit der jQuery Version 1.9 sind verschiedene Änderungen in jQuery aktiv geworden, wodurch einige Variablen nicht mehr funktionieren. Eine sehr gute Zusammenstellung zu diesem Thema ist auf der Seite jQuery FAQ for Plugin Developers von dokuwiki.org sind einige dieser Änderungen und mögliche Fehlerquellen beiveralteten Varianten erläutert.

Da ich auch im Blog: 2 Klicks für mehr Datenschutz einsetze ist eine entsprechende Anpassung von socialshareprivacy erforderlich.

Leider befindet sich auf der Seite der CT nur eine Version, die mit jQuery 1.7.1 kompatibel ist (Heise selbst setzt auf ihrer Seite ebenfalls diese Version ein, so dass eine Nutzung mit jQuery 1.9 problematisch ist. Jedoch hat Patrick Heck auf github eine gepatchte Version Version 1.4.1 des Plugins zur Verfügung gestellt, welches auch mit jQuery 1.9 kompatible ist.

Ein weiterer Vorteil der Version 1.4.1 ist, dass diese auch CSS-Sprites einsetzt. Hier werden viele kleine Grafikelemente (die Empfehlenbuttons im Beispiel) zu einer Grafikdatei zusammengefasst und über die CSS Eigenschaften background-image und background-position ein- beziehungsweise ausgeblendet.

Eventuell ist dieses eine gute Grundlage für andere Projekte, die ebenfalls dieses Plugin einsetzen.

Hierbei wird das Addon auch durch Patrick Heck weiterhin angepasst, so dass auch die aktuelle Änderungen der Heise Version 1.5 (u.a. wird hier das Plugin um den ShareButton von Facebook erweitert) geplant sind mit einzuarbeiten (siehe Beitrag "New upstream release: 1.5" auf Github.com).


In dieser Version verweist die Zeile 96 noch von
  • 'img' : 'socialshareprivacy/images/dummy_facebook_share_active_de.png'
auf
  • 'img' : 'socialshareprivacy/images/facebook_share_de.png'
geändert werden.

Sofern längere URLs für Blogartikel verwendet werden kann in der Zeile 258
folgende Anweisung
  • + text +
durch
  • +
ersetzt werden.
Hierdurch wird nur die URL getwittert und der Iframe postet den Twitterbutton nur mit einen Tweet der URL. Wenn Text und URL zu lang sind, wird hier ansonsten kein Tweetbutton angezeigt.

Über die Seite jscompress.com kann die geänderte Datei jquery.socialshareprivacy.js nochmals komprimiert werden. Hierbei sollten dann jedoch die Copyrighthinweise wieder eingefügt werden, da im Rahmen der Komprimierung auch alle Kommentare entfernt werden.

Vorher sollte jedoch in Zeile 93, 94 die Anweisung
  • 'sharer' : {
    'status' : 'off',
auf
  • 'sharer' : {
    'status' : 'on',
geändert werden. Hierdurch wird die Facebook share Option von Like auf Share geändert.


Vielen Dank für die damit verbundene Mühe und Pflege des Projektes...

5.CSS Sprite für Social Media Buttons

Eine weitere Möglichkeit zur Verbesserung der Ladegeschwindigkeit und der Handhabung im Blog habe ich im Artikel "Socialmedia Buttons für Profile per CSS Sprites oder CSS Box für XING, Google+, Twitter und Facebook" beschrieben.

6. SSL Verschlüsselung

Ein weiterer Punkt ist auch in Hinblick auf Datenschutz im Artikel "Webhosterwechsel und Umstellung von http:// auf https:// (SSL Verschlüsselung) und VG Wort Zählmarken" sowie bzgl. der Cookie Richtlinie der EU im Artikel "Umsetzung EU Cookie-Hinweis Richtline 2009 136 EG bzw. Richtlinie zur Nutzereinwilligung" beschrieben und evtl. ebenfalls interessant.


 

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Dienstag, 16. April 2013
19:26 Uhr

Fontello - Icons als Webfonts per CSS einfügen

Ausgangslage
Zur Darstellung von Webicons (bspw. als Navigationselemente oder als sonstige Hervorhebungen zum Beispiel können Webfonts genutzt werden. Hierbei werden per CSS bestimmte Zeichen in einer anderen Schriftart dargestellt, so dass hier entsprechende Symbole dargestellt werden. Da Internetseiten aber oftmals nicht auf einen Betriebssystem dargestellt werden ist die Schriftart "Windings" als Beispiel nicht auf jeden System vorhanden, so dass die Zeichen nicht die gewünschte Darstellung haben.

Lösung
Die Seite www.fontello.com bietet einen Icon-Font-Generator an, über den eine Webfont zusammengestellt und heruntergeladen werden kann. Hierbei können die gewünschten Icons ausgewählt und über "file name" ein Schriftartname ausgewählt werden.

Jedem Zeichen wird dabei ein Unicode zugewiesen, über den es anschließend im HTML-Code verwendet werden kann (Unicode wird über ODE; eingebunden). Die Schriftart wird dabei als EOT, SVG, TTF und WOFF zur Verfügung gestellt.

Über edit names können statt der Unicodes auch CSS Classen für die einzelnen Icons festgelegt werden, die dann per CSS-Anweisung eingefügt werden können. Über Edit Code können die Unicodes eingesehen und gegebenenfalls angepasst werden.

Per Download Webfonts können die Schriftarten sowie die CSS Dateien und Lizensinformationen heruntergeladen werden.

Die Icons sind von den jeweiligen Designer großteils unter CC BY oder SIL lizenziert, so dass bei Verwendung eine Namensnennung erforderlich ist.

Diese Informationen sind auf dieser Seite im Impressum zu finden.

Umsetzung
In der CSS Datei filename.css im Ordner css kann die Anweisung font-face übernommen werden. Hier wird die erstellt Schriftart per src einen entsprechenden Pfad zugewiesen. Die Anweisung liegt in mehreren Dateiformaten vor, so dass dieses auch mit unterschiedlichen Browsern funktioniert.

Beispiel:
@font-face
{
font-family: 'andreas-unkelbach';
src: url("
...
font-weight: normal;
font-style: normal;
}

Anstatt "..." sind hier die einzelnen Schriftartdateien referenziert.

Am Ende der CSS Anweisung kann dann noch eine Unterklasse definiert werden die dann auf den Schriftnamen verweist.

.symbol
{
font-family: 'andreas-unkelbach';
}

Nun kann per Unicode auf eines der in der Schriftart hinterlegten Symbole Bezug genommen werden.

So ergibt die HTML Anweisung <span class="symbol">&#x0e800;</span> das Websymbol . Über die ebenfalls im Ordner abgespeicherte Datei demo.html können die einzelnen Unicodes entnommen werden. Hierbei kann es sein, dass die ersten zwei Zeichen 0x miteinander vertauscht werden müssen.

Über die Funktion "Import config.json" kann die vorgenommene Auswahl an Icons importiert werden und die zu erstellende Schriftart erweitert werden.

Als weitere Beispiel sind einige Icons auf der andreas-unkelbach.de in der Navigation eingebunden.

Derzeit eingebundene Symbole:

x0e800 icon-smile

x0e805 icon-windows

x0e802 icon-traurig

x0e808 icon-kaffee

x01f4be icon-software 💾

x02302 icon-home

x0e801 icon-zwinker

x0e73a icon-rss

x01f30e icon-web 🌎

x0f50d icon-suche2

x026 icon-android &

x01f4d6 icon-blog 📖

Informationen zu den einzeln verwendeten Schriftarten (im Beispiel) sind im Impressum im Punkt IX. Websymbole hinterlegt.

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Samstag, 23. März 2013
17:43 Uhr

Google Suche und Tagclouds oder Teile einer Seite nicht indizieren lassen

Ausgangslage
Neben den eigentlichen Artikel bieten viele Seiten auch Tagclouds (Schlagwortwolken) an die einen schnellen Überblick zu verschiedenen Artikeln auf einer Seite anbieten. Auch diese Seite bietet eine tagcloud (der Kasten auf der rechten Seite) an.

Einzelne Artikel des Blogs werden mit einen (oder mehrere Tags) versehen und diese werden alphabetisch und je nach Häufigkeit in unterschiedlicher Schriftgröße ausgegeben.

Auf diese Weise können zwei Dimensionen (alphabetische Sortierung und die Gewichtung) dargestellt werden und auf einen Blick erfasst werden.

Bei der Einbindung einer benutzerdefinierten Suche von google ist mir jedoch aufgefallen, dass nicht nur die einzelnen Artikelseiten sondern auch die Tagcloud als Suchergebnis gewertet wird.

Lösung
Eine Lösung wäre nun Google als Information mitzuteilen, dass bestimmte Teile einer Seite nicht als Suchergebnis aufgenommen werden sollen. Vergleichbar zur Metangabe

<meta name="Robots" content="noindex, follow" >

zum Ausschliessen bzw.

<meta name="Robots" content="index, follow" >

zur Aufnahme einer Seite durch Robots bietet Google die Möglichkeit auch Teile einer Seite nicht zu indizieren. Hierzu kann über einen spezielen Kommentar im Quelltext einer Seite bestimmte Bestandteile einer Seite ausgeschlossen werden.

Beispiel:
<!--googleoff: index-->
Hier wird die Tagcloud eingebunden
<!--googleon: index-->

Dieses Verfahren ist auf developers.google.com beschrieben.

Google liest zwar auch weiterhin die komplette Seite (inklusive der Links in der Tagcloud) aber bei der Suche werden die Tags an der Seite (im Gegensatz zu den Tags im Artikel) nicht als Treffer gewertet, so dass in der hier eingebundenen Seite auch nur noch die Artikel gefunden werden sollten.

Ein interessanter Artikel auf googlewebmastercentral-de.blogspot.de aus 2010 geht der Frage nach, ob Tag Clouds nützlich oder nachteilig für SEO sind oder gar keinen Effekt haben.


Nachtrag:

Leider scheint die Google Suche wie durch Marian Steinbach auf sendung.de im Beitrag "Ein SEO Test mit googleon/googleoff" beschrieben diese Tags zu ignorieren.

Hier habe ich mich, da die einzelnen Elemente im Blog ohnehin, wie im Artikel In eigener Sache: Updates der Seite (Technik und Design) - Fokus auf Responsives Webdesign und pagespeed beschrieben, responsiv gestaltet sind und damit die Tagcloud durch CSS ausgerichtet wird ist es sinnvoll, diese auch erst ans Ende der Seite zu setzen. Somit wird dann auch als erstes der Artikel (und ggf. die Navigation) von Suchmaschienen indiziert.


Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Samstag, 8. Dezember 2012
18:05 Uhr

RIOT Bilder fürs Web optimieren (Plugin für Irfanview)

Bei der Überlegung, ob Screenshots nun besser als JPG, PNG oder GIF gespeichert werden sollen ist sicherlich nicht nur die Dateigröße sondern auch die Lesbarkeit mehr als ein Faktor der hier wichtig ist.

Eine wirklich gute Unterscheidung zwischen den Bildformaten JPG, GIF und PNG ist auf der Seite webstandard.kulando.de (aus 2010) zu finden.

Eine elegante Variante um das ideale Bildformat zu wählen bietet Radical Image Optimization Tool (RIOT for short). Dieses Toool ist sowohl als Anwendung als auch als DLL verfügbar. Innerhalb des Programm Irfanview ist es auch in den Plugins verhanden und bietet so die Möglichkeit das passende Dateiformat mit entsprechenden Optionen auszuwählen und zeigt dabei auch die optimierte Dateigröße und das Bildergebnis an.

Sicherlich kann mit professionellen Bildbearbeitungsprogrammen ein mögliches besseres Ergebnis erzielt werden, aber auf diese Weise kann auf eine einfache und schnelle Weise aus einer 690 KB JPG eine 38 KB große und vor allen noch lesbare GIF Datei werden, was bei einer Internetseite dann schon ein recht angenehmer Unterschied ist, auch wenn die Zeiten, dass Seiten inklusive Bilder maximal 48 KB groß sein dürfen dank DSL oder andere Breitbandanschlüssen kein Problem mehr sein dürften ;-).

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Montag, 24. Dezember 2007
17:11 Uhr

Bildgestaltung / Tipps und Tricks beim Fotografieren

Die Buxtehuder Fotofreunde haben auf Ihrer Internetseite nicht nur Ihre Fotos und sich ins Netz gestellt sondern auch hilfreiche Tipps & Tricks zur Gestaltung eines Fotos.

Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Mittwoch, 19. Oktober 2005
11:02 Uhr

Accessibility Toolbar

Webforall.info bietet eine Accessibility Toolbar zur Installation im IE an.

Die Web Accessibility Toolbar wird vom AIS-Team (Accessible Information Solutions - Barrierefreie Informationslösungen) des Nationalen Informations- und Bibliotheksdienstes (NILS), Australien, zur Verfügung gestellt.

Die Web Accessibility Toolbar wurde entwickelt, um die nicht-automatische Überprüfung von Webseiten hinsichtlich verschiedener Aspekte der Barrierefreiheit zu unterstützen. Die Toolbar besteht aus einer Reihe von Funktionen, die:

* die Komponenten einer Webseite erkennen
* es vereinfachen, Online-Anwendungen von Drittherstellern zu verwenden
* die Wahrnehmung von Benutzern simulieren
* Links zu zusätzlichen Referenzen und Ressourcen bieten

Möglicherweise kann diese Toolbar einen Blick wert sein. :-)


Hinweis: Aktuelle Buchempfehlungen besonders SAP Fachbücher sind unter Buchempfehlungen inklusive ausführlicher Rezenssionen und Bestellmöglichkeit zu finden.
Diesen und weitere Texte von Andreas Unkelbach finden Sie auf http://www.andreas-unkelbach.de


Hinauf




Werbung


Logo Andreas-Unkelbach.de
© 2004 - 2017 Andreas Unkelbach
Andreas Unkelbach

Stichwortverzeichnis
(Tagcloud)


Aktuelle Infos (Abo)

Facebook Twitter Google+

»Schnelleinstieg ins SAP Controlling (CO)« und »Berichtswesen im SAP ® ERP Controlling«
Privates

Kaffeekasse 📖 Wunschliste