In 5 Schritten zur eigenen Website

Wichtel Im Wald - In 5 Schritten zur eigenen Website - pexels karsten madsen 18105

Aus gegebenem Anlass hier eine kurze und knappe Anleitung zum Anlegen neuer Websites. Hier nutzen wir dazu WordPress – weil einfach und flexibel.

Keine Sorge, das schafft jeder.

1. Die Basics

Zunächst brauchen wir einen Hoster / einen Platz wo unsere Internetseite zu finden sein soll. Dafür gibt es viele Alternativen:

  1. Einfach bei WordPress selbst kostenlos oder gar Premium starten,
  2. einen Provider mit eigener Domain und WordPress-Unterstützung z.B. IONOS oder STRATO
  3. oder einfach mal die Suchmaschine bzgl. „wordpress hosting“ anwerfen

Nach der Erstellung des Accounts kann die Installation von WordPress in der Regel über einfache Assistenten schnell erledigt werden. Meist dauert hier die Wahl des Namens bzw. Titels der neuen Seite am längsten.

HTTPS und SSL-Zertifikate

Idealerweise bietet unser auserkorene Provider direkt eine SSL-Zertifizierung unserer Website bzw. deren Adresse. Dies erlaubt die sichere Verbindung zwischen unserer Website und den Browsern unseres Publikums über HTTPS. Das „S“ ist entscheidend und sollte in keinem Link auf unsere Seite fehlen! Also immer „https://…“ angeben.

Ob ein solches Zertifikat installiert ist lässt sich beim ersten Zugriff auf unsere Seite ganz einfach feststellen. Bekommen beim Aufruf eine Warnung bzgl. einer unsicheren Verbindung fehlt ein solches Zertifikat. In diesem Fall müssen wir leider weiter die Konfiguration unseres Hosts bemühen. Die Zertifikate gibt es übrigens für unsere Bedürfnisse kostenfrei – z.B. bei Let’s Encrypt.

2. Look & Feel

Beim ersten Aufruf erscheint die Seite noch recht wenig beeindruckend. Hier kann über die Admin-Oberfläche aber leicht nachgeholfen werden.

Das Erscheinungsbild der Website kann bei WordPress mit Hilfe sogenannter Themes nach Herzenslust angepasst werden. Dazu einfach oben auf „Add New“ klicken und einen oder mehrere passende Themes installieren. Bei der Auswahl genügt es grob darauf zu achten, ob das Look&Feel den Vorstellungen entgegenkommt.

Wichtel Im Wald - In 5 Schritten zur eigenen Website - WordPressThemes
Das Look&Feel von WordPress wird über Themes den eigenen Wünschen angepasst.
Ich bevorzuge den kostenlosen Theme Twenty Seventeen vom WordPress team.

Die meisten Themes lassen sich noch gut den eigenen Wünschen anpassen. Dafür einfach unter Customize nach Lust und Laune experimentieren. Auch hier gilt: nicht erkünsteln! -> #ContentIsKing

Tipp: Beim Feinschliff helfen die folgenden kostenfreie Online-Angebote:

3. Sicher ist Sicher

Einer der wichtigsten Aspekte beim Betrieb einer Website ist die Sicherheit. Es gibt viele verschiedene Gefahren (z.B. SPAM, Bot-Netze, Viren, …), aber ebenso viele Möglichkeiten unsere neue Website davor zu schützen. Dies funktioniert in den meisten Fällen über die Installation geeigneter Sicherheits-PlugIns. Auch hier hat man die Qual der Wahl. Deshalb hier nun die für mich passendsten Sicherheits-PlugIns.

Antispam Bee

Antispam Bee ist ein einfach zu bedienender, aber leistungsstarker WordPress-Kommentar- und Trackback-Spam-Blocker. Keine Captchas, keine personenbezogenen Daten – es ist zu 100 % DSGVO-konform und sendet keine an Dienste von Drittanbietern.

Das PlugIn ist vollständig kostenfrei und lässt sich wie gewohnt über die WordPress-PlugIn-Suche installieren. Weitere Informationen findet ihr auf der Antispam Bee PlugIn-Homepage.

Wichtel Im Wald - In 5 Schritten zur eigenen Website - CleanShot 2022 02 24 at 17.55.32@2x
Unter dem Menüpunkt „Plugins“ einfach die gewünschten PlugIns suchen und installieren.

Nach der Installation nicht die Aktivierung des PlugIns vergessen und dann einmal konfigurieren.

Wichtel Im Wald - In 5 Schritten zur eigenen Website - CleanShot 2022 02 24 at 17.57.56@2x
Die meisten PlugIns müssen zu Beginn einmal richtig konfiguriert werden
– auch wenn die Standard-Einstellungen meist schon ganz gut passen.

Blackhole for Bad Bots

Viele Angriffe auf Websites erfolgen über Sicherheitslücken im Code. Um herauszufinden was alles auf unserer Webseite läuft, nutzen Angreifer häufig Bots die systematisch alle Verzeichnisse und Seiten durchsuchen. Da auch Suchmaschinen Bots nutzen gibt es eine Datei robots.txt, in welcher die Verhaltensregeln für unsere Website vermerkt sind. Allerdings halten sich die „bösen“ Bots meist nicht an Regeln – sie wollen ja genau die Schwachstellen finden – und greifen auch auf Seiten und Links zu, die eigentlich verboten sind.

Dies macht sich das kostenfreie PlugIn Blackhole for Bad Bots zunutze und baut einfach eine „Falle“ für die „bösen“ Bots ein. Greift ein Bot darauf zu – obwohl ja eigentlich verboten – wird er von der Seite gesperrt. Damit wird auch unser Angreifer von unserem Server ausgeschlossen.

Wichtel Im Wald - In 5 Schritten zur eigenen Website - CleanShot 2022 02 25 at 10.09.23@2x
Das PlugIn Blackhole for Bad Bots baut eine Fall und sperrt beim „Zuschnappen“ die IP des Angreifers.

Limit Login Attempts Reloaded

Ein anderes Risiko sind Angriffe auf unsere Zugangsdaten. Nachdem jeder auf unsere Login-Maske zugreifen kann, wäre es ein Leichtes einfach alle möglichen User- und Passwort-Kombinationen auszuprobieren. Dies lässt sich einfach mit Hilfe eines Skriptes umsetzen und dann wäre es nur noch eine Frage der Zeit, bis jemand sich unberechtigten Zugang zur Kommandozentrale unserer Website verschafft.

Durch eine einfache Beschränkung der möglichen Zugangsversuche pro Zeit, lässt sich ein zufälliges „Erraten“ von Zugangsinformationen effektiv verhindern. Genau dieses erledigt das PlugIn Limit Login Attempts Reloaded für uns.

Wichtel Im Wald - In 5 Schritten zur eigenen Website - CleanShot 2022 02 25 at 10.40.31@2x
Durch die Beschränkung der Anmeldeversuche pro Zeiteinheit
werden sogenannte Brute-Force-Angriffe effektiv abgewehrt

4. Juristisches 1×1

Weltweit gilt, dass jede Website gewisse juristische Angaben machen muss. Hierzu gehören insbesondere das Impressum und – nicht erst seit der „neuen“ DSVGO – die Datenschutzerklärung. Für diejenigen unter uns, die kein erfolgreich abgeschlossenes Jura-Studium vorweisen können, gibt es glücklicherweise auch hierfür bereits Abhilfe im Netz – für den persönlichen Gebrauch sogar kostenfrei.

Hierfür gilt es also unter dem Menü-Punkt „Pages“ / „Seiten“ zwei WordPress-Seiten anzulegen „Impressum“ und „Datenschutzerklärung“ oder „Privacy Policy“. Für den Inhalt der Seiten nutze ich meist einen der folgenden Generatoren:

Bitte beachtet, dass diese Seiten auch entsprechend verlinkt sein sollten. Am besten gleich im Footer unterbringen.

Cookie Monster

Nun müssen wir uns noch um die Cookies kümmern. Für deren Einsatz brauchen wir die Einwilligung unserer Website-Besucher. Auch wenn das Ziel natürlich ist, so wenig wie möglich Cookies oder andere Web-Dienste (insbesondere ausserhalb Europa) zu nutzen – ist der vollständige Verzicht sehr aufwendig und einschränkend. Vielleicht machen wir hierzu noch mal einen separaten Beitrag.

Details zu unserer Website – unter anderem welche Dienste und Cookies eingesetzt werden – können wir jederzeit über die „Entwickler-Ansicht“ unseres Browsers prüfen. Dies erfordert jedoch einiges an Expertise und/oder Erfahrung. Auch wenn das sicher einmal spannend ist, hilft uns hier wieder ein passendes PlugIn.

Real Cookie Banner

Aktuell am besten geeignet scheint mir der Real Cookie Banner. Das PlugIn durchforstet unsere Website nach externen Diensten und verwendeten Cookies. So können wir Cookies und/oder Dienste gezielt entfernen. Für die übrigen holt das PlugIn nicht nur aktiv die Zustimmung unserer Website-Gäste ein, sondern blockiert ggf. auch gleich die Verwendung der Dienste bei Ablehnung.

Wichtel Im Wald - In 5 Schritten zur eigenen Website - CleanShot 2022 02 25 at 08.46.56@2x
Das Real Cookie Banner PlugIn lässt sich komplett kostenlos verwenden,
bringt allerdings mit der Pro-Version noch Komfort und Features mit.

5. Content is King

Geschafft! Der Grundstein ist gelegt…

Nun geht es um Inhalt! Und das ist gewohnheitsmäßig sehr unterschiedlich… generell gibt es aber drei Kategorien. Bei einer eher statische Seite arbeiten wir am besten mit den Seiten / Pages von WordPress. Hier sollte man eine grobe Struktur vorab planen.

Soll es mehr um Nachrichten, Erfahrungsberichte und/oder Artikel gehen, bietet sich ein Blog an – dieser wird durch Posts realisiert. Hier am Besten von Anfang an mit Kategorien und Schlagwörtern / Tags arbeiten. Diese müssen nicht alle zu Beginn feststehen, sondern können mit unserer Seite mitwachsen.

Last but not least gibt es noch Thema Shop oder eCommerce. Hierfür gibt es bei WordPress das sogenannte WooCommerce PlugIn. Dieses erlaubt den Aufbau eines Produkt- und Service-Katalogs und natürlich den Vertrieb der selbigen. Allein für WooCommerce gibt es noch einmal unzählige Erweiterungen – ganz nach Belieben.

Viel Erfolg!

Wichtel Im Wald - In 5 Schritten zur eigenen Website - pexels judit peter 1766604

NFC-Tags kinderleicht beschreiben

Wichtel Im Wald - NFC-Tags kinderleicht beschreiben -

NFC-Tags sind kleine Karten, Aufkleber oder auch Schlüsselanhänger mit einem kleinen integriertem Chip. Tag steht dabei für Informationseinheit und NFC für Near-Field-Communication. NFC wird für die Kommunikation zwischen zwei Geräten im Umfeld – meist wenige Zentimeter genutzt. Die Technologie hat ein sehr großes Potential und hält immer mehr Einzug in unseren Alltag. So nutzen wir sie wahrscheinlich schon unbemerkt mit Kredit- oder EC-Karten, aber auch bei Hotel-Schlüsselkarten und Ski-Pässen.

So ist es bei NFC möglich, dass das Lesegerät der NFC-Karte/-Aufkleber/-Schlüsselanhänger kurz TAG die Energie zum Auslesen ohne Berührung zur Verfügung stellt. Das bedeutet, wir können auf Batterien verzichten und trotzdem gezielt Informationen auf elektronischem Weg zur Verfügung stellen. In der Regel nur eine einfache Zeichenfolge bzw. Nummer, aber immerhin.

Die Einsatzmöglichkeiten sind trotzdem vielfältig. Sei es das gezielte aktivieren von Szenen im Smart-Home oder das Hinterlegen einer Internetadresse (wie bei unserer Kinder-Notfall-Kontaktkarte). Hier hangeln wir uns am Beispiel einer modernen elektronischen Visitenkarte einmal durch das ganze Prozedere.

Unser Ziel für heute: das Erstellen einer NFC-Visitenkarte.

1. Der richtige NFC-Tag

Wie üblich, gibt es viele verschiedene NFC-Tag-Standards. Bei unserer NFC-Visitenkarte möchten wir ja möglichst kompatibel mit den gängigen Smartphones sein – deshalb nutzen wir einfach NTAG215 kompatible NFC-Tags. Nun gilt es das passende NFC-Tag für unsere „Visitenkarte“ zu wählen. Einfach den Lieblings-Lieferanten oder lokalen Elektronik-Händler aufsuchen und sich etwas passendes auswählen – wichtig ist NTAG215! Eine Auswahl bei Amazon habe ich hier einmal verlinkt:

2. Die richtige APP

Halten wir unseren NFC-Tag in der Hand – bei mir sind’s Sticker und bedruckbare NFC-Karten im Kreditkartenformat – gilt es die gewünschten Informationen auf den NFC-Tag zu schreiben. Hierfür genügt ein NFC-fähiges Smartphone – das dürften nahezu alle Modelle der letzten 5 Jahre sein. Für das Beschreiben selbst gibt es natürlich passende APPs. Hier eine Auswahl aus dem Apple-App-Store… die meisten Apps gibt es aber auch unter Android.

Das Schreiben funktioniert in allen Apps recht intuitiv. Zunächst legen wir fest was wir schreiben wollen und müssen uns hier zwischen verschiedenen Informations-Typen auswählen.

Wollen wir mit möglichst vielen Smartphones kompatibel sein, sollten wir uns auf eine URL, eine E-Mail, eine Telefonnummer oder einen Text beschränken. Android unterstützt beispielsweise auch WIFI-Hotspot-Konfigurationen, was bei iOS aktuell nur mit zusätzlichen APPs möglich ist. Speichern wir mehr als eine Information/Datensatz wird in den meisten Fällen nur der erste berücksichtigt.

Im Fall unserer Visitenkarte können wir einfach unser LinkedIn- oder jedes andere Social-Media-Profil verlinken. Dafür kopieren wir einfach die URL unseres Profils in einen URL-Datensatz, aktivieren das „Schreiben“ in der APP und halten die Karte kurz an das Geräte. Sobald unser NFC-Tag beschrieben ist bekommen wir eine kurze Bestätigung in der APP angezeigt. Beim iPhone ist der NFC-Chip übrigens oben im Notch und bei vielen Android Telefonen in der Mitte hinter dem Bildschirm – einfach ein wenig mit dem NFC-Tag am Gerät „suchen“.

3. Landing-Page

In vielen Fällen genügt es nicht, nur ein Soziales-Profil zu verlinken. So sollen vielleicht weitere Informationen ebenfalls mit auf den Tag. Dies ist über den Umweg einer Landing-Page am einfachsten zu realisieren. Wie schon bei unserer Kinder-Notfall-Kontaktkarte haben wir die Wahl einer eigenen Website oder wir nutzen das Angebot gängiger LandingPage-Provider (wie LinkTree) – hier ist meist eine Seite kostenfrei – und mehr brauchen wir ja auch nicht.

Nun gilt es – wie oben beschrieben – einfach die Adresse unserer Zielseite auf den NFC-Tag zu spielen und wir sind fertig. Treffen wir nun interessante Menschen genügt es unseren NFC-Tag zu zücken und an das Smartphone unseres Gegenübers zu halten, um unsere Kontaktdaten auszutauschen.


Solche NFC-Tag-Visitenkarten sind übrigens kein Nischen-Ding mehr für Nerds, sondern werden gerade auch in Social-Medien wie TikTok vorgestellt.

@brookebytes

Bought this on a whim once but I use it allllllll the time! #nfc #nfckeychain #lifehack #networking #conferencespeaker @LinkedIn #linkedinhacks

♬ original sound – BrookeBytes

2 Website-Inspektoren als Browser-Erweiterung

Wichtel Im Wald - 2 Website-Inspektoren als Browser-Erweiterung - jackson so t l5FFH8VA unsplash

Bei der Erstellung einer eigenen Seite beginnt man auch andere Seiten mit anderen Augen zu sehen. Natürlich kann man auf jeder Seite die Entwickler-Ansicht des Browsers aktivieren, aber dies ist meist mühsam und unübersichtlich. Wir wollen uns ja nur inspirieren lassen.

Ein spannendes Tool zum Anzeigen der verwendeten Farben, Schriftarten und Bilder ist CSS Pepper. Ein einfaches und übersichtliches Chrome-Browser-PlugIn.

Wichtel Im Wald - 2 Website-Inspektoren als Browser-Erweiterung - CleanShot 2022 03 01 at 08.55
Mit CSS Pepper stellt die Farben, Schriftarten und Bilder einer Website einfach und übersichtlich dar

Auch die verwendeten Frameworks und Tools einer Website lassen sich mit den richtigen Tools leicht ermitteln. So bietet Wappalizer PlugIns für die gängigsten Browser an. Das PlugIn ist kostenfrei und genügt so auch für unsere Zwecke.

Wichtel Im Wald - 2 Website-Inspektoren als Browser-Erweiterung - CleanShot 2022 03 01 at 09.05
Das Wappalyzer PlugIn ermittelt die verwendeten Frameworks und Bibliotheken einer Website

Insgesamt ist es auch spannend einmal die eigene Website unter die Lupe zu nehmen. So lassen sich beispielsweise Design-Optimierungen (z.B. gezielte Farbauswahl) gezielt durchführen. Aber auch die verwendeten PlugIns weiter optimieren.

Der Dank für die wertvollen Hinweise auf die PlugIns geht an: @pulpdigitalagency

Wichtel Im Wald Cookie Consent mit Real Cookie Banner