Kategorien
Security Web Academy

IT-Sicherheit – wie verwundbar sind wir und wie wehrt man sich erfolgreich? 

Was technisch getan werden kann, um Ihren Account gegen Angriffe wirksam zu schützen, wurde von Novatrend mittels Einsatz der modernsten verfügbaren Technologien längst vorgekehrt. Was jedoch bleibt, ist der Faktor Mensch. Nach wie vor stellen unvorsichtige Anwender das grösste Sicherheitsrisiko dar.

Die dritte Ausgabe der Novatrend Academy befasste sich mit dem Thema „Die Welt ist gefährlich – Cyber-Risiken und Kriminalität“. Als Referent bei Novatrend zu Gast war dieses Mal der bekannte IT-Sicherheitsexperte und Professor für ICT System & Service Management an der Fachhochschule Nordwestschweiz (FHNW) und ehemalige ETH-Dozent Prof. Dr. Hannes Lubich.

Kategorien
Content Management Systeme Shared Hosting Soziale Netze Webdesign

Countdown für ein neues Projekt

Heute geht es um das Launcher Plugin in WordPress.

Wenn du eine Idee für ein neues Projekt hast, kommt der Tag, an dem es „ernst“ wird und du den Namen festlegst, eine Domain reservierst, Social Media Accounts anlegst und einen Starttermin festsetzt. Als nächstes möchtest deine Zielgruppe auf den Starttermin deines neuen Projekts hinweisen.

Das Wort Projekt kann dabei für vieles stehen. Ein neuer Service, eine neue App, ein Relaunch deiner Website oder vielleicht ein Event. Egal was du startest, eine eigene Website ist die Basis deiner Aktivitäten. Unter dem neuen Domainnamen möchtest du Informationen über das neue Projekt anzeigen, einen Countdown, der zum Starttermin herunter zählt, Kontaktinformationen und eine Möglichkeit für die Besucher, ihre E-Mail Adresse zu hinterlassen. Die E-Mail Adressen sollten gesammelt werden, damit du mit interessierten Besuchern einfach Kontakt aufnehmen kannst.

Das Launcher Plugin für WordPress ist genau das, drei fertige Templates mit einem Countdown, einem Kontaktformular und der Möglichkeit, E-Mail Adressen zu sammeln!

Installation

Innerhalb des WordPress Dashboards, unter Plugins, klickst du auf den Button Installieren und suchst nach Launcher. Durch einen weiteren Klick innerhalb der Vorschau wird das Plugin installiert.

WordPress - Launcher - Installation
WordPress – Launcher – Installation

Nach der Installation muss Launcher noch aktiviert werden.

Einstellungen

In den Einstellungen im Dashboard erscheint Launcher mit sieben konfigurierbaren Tabs.

Im General Tab wird Launcher per Checkbox eingeschaltet. Standardmäßig ist es nicht aktiv. Außerdem kannst du unter anderem den Seitentitel, individuellen Code für CSS, Kopf- und Fußbereich eingeben.

WordPress - Launcher - General
WordPress – Launcher – General

Im Template Tab wählst du dein gewünschtes Layout aus, im Countdown Timer Tab deinen Starttermin. Nun kannst du bereits deine Launcher Page sehen. Die Launcher Page wird allerdings nur den Besuchern gezeigt. Angemeldete Benutzer, so wie du, sehen sie nicht. Um die Seite zu sehen, hat Launcher in der Kopfzeile deines WordPress einen Vorschaulink eingefügt.

Alle Templates sind übrigens responsiv. Hier ein Beispiel:

WordPress - Launcher - Template
WordPress – Launcher – Template

Im Subscribe Tab kann ein E-Mail Marketing Service angegeben werden. Launcher unterstützt beispielsweise Mail Chimp. Wenn du den Service nutzt, musst du dir einen API Schlüssel erzeugen und eintragen. Die Formularfelder können mit individuellen Texten belegt werden.

Launcher - Subscribe Form
Launcher – Subscribe Form

Falls du bereits einen Twitter User für dein Projekt registriert hast, kannst du ihn im Twitter Feed Tab per API einbinden und auf deiner Launcher Page anzeigen. Du musst dazu eine API Schlüssel in Twitter erzeugen. Der Link dazu steht im Tab.

Im Contact Tab kannst du ein Kontaktformular konfigurieren. Dieses Formular steht allerdings nur im Launcher Template zur Verfügung.

WordPress - Launcher - Kontaktformular
WordPress – Launcher – Kontaktformular

Im Social Links Tab kannst du dann deine Social Media Konten eintragen. Vorgesehen sind Facebook Page, Twitter, Instagram, YouTube, LinkedIn, Google+ Page und RSS Feeds. Hier ein Beispiel mit einem anderen Template.

WordPress - Launcher - Social Links
WordPress – Launcher – Social Links

Fazit

Das Launcher Plugin ist einfach bedienbar und enthält alles Wesentliche. Jetzt haben du und dein Team Zeit, die eigentliche Website zu erstellen! Und falls diese nicht auf WordPress basiert, ist das auch ok 🙂

Links


tl;dr: Starte ein Projekt mit einer Launch Website

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 0.85; z-index: 8675309; display: none; cursor: pointer; top: 850px; left: 50px;">Save

Kategorien
Shared Hosting

CMS.js – Der JavaScript Site Generator

Diese dateibasierten Systeme (Seitengeneratoren) erzeugen, aus nach bestimmten Kriterien aufgebauten Dateien, eine Website. Wenn Änderungen an der Website vorgenommen werden, werden die Inhalte der Dateien geändert.

Ein sehr bekannter Seitengenerator ist das auf der Programmiersprache Ruby basierende Jekyll. Jekyll wird beim Online-Dienst GitHub seit längerer Zeit erfolgreich für die Erstellung von Websites genutzt. Der inhaltliche Schwerpunkt bei Github liegt dabei auf der Dokumentation von Softwareprojekten.

CMS.js

Ein neues „Helferlein“ ist CMS.js. Es erzeugt ebenfalls eine Website mit HTML, CSS und JavaScript aus einfachen Inhalten. Bei CMS.js ist aber kein auf dem Server installiertes PHP, Node.js, Ruby, Perl, etc erforderlich. Die Website wird im Browser des Betrachters mittels JavaScript erzeugt (gerendert, generiert).

Da Texte mit HTML Befehlen schwer schreibbar sind, erwartet CMS.js Inhalte in der vereinfachten Auszeichnungssprache Markdown. Markdown lässt sich nach einiger Zeit recht gut und flüssig schreiben. Einen Eindruck von Markdown erhältst du beispielsweise im Online Markdown Editor dillinger.io.

Die Dateien mit den Inhalten werden in Verzeichnissen mit den Namen pages oder posts gespeichert. Das pages und posts Prinzip kennst du vermutlich aus WordPress. Eine Page hat einen Link im Menü und ist etwas eher Zeitloses, beispielsweise eine About Seite. Ein Post ist dagegen ein Artikel, der mit einem Datum verknüpft und auf der Startseite in umgekehrt chronologischer Folge angezeigt wird (die neuesten Artikel oben).

Ein Inhalt in CMS.js besteht immer aus dem Kopf und dem eigentlichen Text. Im Kopf werden Parameter für das Layout übergeben (default für pages und post für posts) und die Überschrift (title). Bei einer Page ist der title die Bezeichnung des Menüeintrages. Die Parameter werden oben und untern durch — begrenzt.

---
layout: post
title: Mein erster Blogpost
---

Und hier ist mein erster Blogpost!
... weiterer Text ... 

Installation

Die Installation auf deinem Webspace ist denkbar einfach und besteht aus dem Herunterladen und Entpacken des wenigen Quellcodes. Entweder du lädst das Dateipakets auf deinen lokalen Rechner und dann per FTP auf den Webspace oder du führst auf der Kommandozeile den Befehl

git clone https://github.com/cdmedia/cms.js.git

aus. Danach musst du die Datei js/config.js entsprechend deinen Wünschen anpassen. Die Bedeutung der Parameter sind dabei gut dokumentiert.

CMS.js - js/config.js
CMS.js – js/config.js

Du kannst existierende GitHub Dateien oder deine auf dem Server gespeicherten Texte anzeigen lassen. In meinem Fall wähle ich Server aus.

    // Mode 'Github' for Github Pages, 'Server' for Self Hosted.
    mode: 'Server',

Die Verzeichnisstruktur ist sehr übersichtlich.

CMS.js - Verzeichnisstrukturen
CMS.js – Verzeichnisstrukturen

Pro Inhalt schreibst du eine neue Datei mit der Endung .md (markdown), beispielsweise about.md.
Ein Blogeintrag muss ein Datum im Dateinamen haben, damit CMS.js eine Sortierung vornehmen kann (2016-01-01_example-post.md).

Wenn die Website im Browser aufgerufen wird, wird auch die JavaScript und die CSS Datei geladen und erzeugt lokal innerhalb deines Browsers die Website.

CMS.js - Website
CMS.js – Website

Editieren

Im Gegensatz zu klassischen Content Management Systemen gibt es keine Möglichkeit über ein Administrationsinterface im Browser einen Text zu editieren. Dadurch ergeben sich natürlich Unterschiede im Workflow.

Ein grosser Vorteil bei dieser Vorgehensweise ist beispielsweise, dass die Texte unabhängig vom Layout abgespeichert und mit einem Versionskontrollsystem verwaltet werden können. Das bedeutet, dass beliebig viele Autoren an einem Text arbeiten können, wenn Sie über entsprechende Rechte im Versionskontrollsystem verfügen. Das Content Management findet dabei unabhängig von der Website in einer Art Content Pool statt!
Das Versionskontrollsystem wird dabei zu einem Teil des Content Management Systems.

Ein Editor kann völlig unabhängig vom Rest der Systeme eingesetzt werden. Das kann ein Editor wie Atom oder TextWrangler (auf dem Desktop), oder aber auch dillinger.io (im Browser) oder nano (auf der Konsole) sein.

Fazit

CMS.js ist ein Beispiel für einen verteilten Umgang bei der Erstellung und Auslieferung von Inhalten. Die eigentliche Website wird erst innerhalb des Browsers beim Besucher erzeugt.

Links


tl;dr: CMS.js ist ein minimalistischer Website Generator

Kategorien
seafolly.ch Shared Hosting

Ein Webhosting Paket für das #kunstprojekt

Vielleicht haben Sie bereits unser Kunstprojekt seafolly.ch bemerkt. Es soll einerseits in diesem Blog als Beispiel dienen und zum anderen tatsächlich ein Kunstprojekt sein. Das Twitterkonto @seafollych und die Facebook Seite sind schon eine Weile aktiv. Die Website seafolly.ch läuft momentan auf unserem Testserver mit dem CMS Yellow.

In diesem Artikel soll seafolly.ch nun einen eigenen NOVATREND Hosting Account erhalten. Wir haben uns für das Paket Webhosting Top entschieden. Das Angebot ist insofern interessant, weil es die wesentlichen Anforderungen abdeckt. Sie können Ihre Website per FTP hochladen, per Sitebuilder online erstellen oder sich mit dem sogenannten Installatron per Klick ein gängiges Open Source Projekt (z.B. Joomla oder WordPress) installieren.

ACHTUNG: Seit November 2017 benutzen wir anstelle des Installatrons das Tool Softaculous. Im Beitrag Automatisierte Installation mit Softaculous beschreibe ich die grundlegenden Vorgehensweisen.

Zusätzlich ist die Groupware OX App Suite enthalten. Sie enthält Apps für die Online-Bearbeitung von Texten, E-Mails, Kontakten, Aufgaben und Terminen. Wir haben die OX App bereits kurz im Blog vorgestellt (OX App Suite für unsere Hosting-Kunden).

Webhosting Paket bestellen

Zunächst klicken Sie auf der Website von Novatrend auf Webhosting und wählen ein Angebot aus. Ich habe das „Top“ Hosting bestellt und trage den Domainnamen ein.

Bestellung
Bestellung

Das Bestellsystem merkt, dass die Domain bereits registriert ist und weist darauf hin. Ich klicke auf Ja, weiter.

Domainabfrage
Domainabfrage

Ich könnte jetzt weitere Domains bestellen, will ich aber nicht und klicke deshalb auf Nein, fortfahren.

Weitere Domains bestellen
Weitere Domains bestellen

Die nächste Abfrage ist wichtig, da vermutlich jede Website bald über ein SSL Zertifikat abgesichert werden wird. SSL ist die Abkürzung für Secure Sockets Layer. Es ist ein Verschlüsselungsprotokoll für die Datenübertragung im Internet (siehe auch Zertifikate, SSL, TLS und HTTPS – ein Crashkurs). Heute überspringe ich die Auswahl, ich kann das auch später nachinstallieren und klicke auf Weiter zur Kasse.

Zertifikatsabfrage
Zertifikatsabfrage

Nun werden noch Ihre Kontaktdaten abgefragt. Vielleicht haben Sie schon ein NOVATREND Konto? Falls ja, loggen Sie sich mit Ihrer Kundennummer und Ihrem Passwort ein. Ansonsten füllen Sie einfach das Formular mit Ihren Kontaktdaten aus.

Kontaktdaten
Kontaktdaten

Wählen Sie die gewünschte Zahlungsart aus, tragen Sie einen eventuellen Coupon Code ein und schicken Sie das Formular ab.

Zahlungsart
Zahlungsart

NOVATREND sagt Besten Dank und Sie erhalten normalerweise innerhalb von ein paar Minuten vier E-Mails.

Besten Dank
Besten Dank

Das sind die E-Mails

  1. Besten Dank für Ihre Bestellung (Diese E-Mail wird sofort verschickt)
  2. Zugangsdaten für seafolly.ch (In dieser E-Mail steht drin, welchen Nameserver Sie bei Ihrem Domainprovider eintragen müssen, damit die Domain auf das gerade gekaufte Webhosting zeigt)
  3. NOVATREND Rechnung (bitte zügig bezahlen 🙂 )
  4. Zugangsdaten für das NOVATREND Kundencenter

Im Kundencenter können Sie Ihr Webhosting konfigurieren. Die Startseite sieht folgendermassen aus:

novatrend.ch Dashboard
novatrend.ch Dashboard

Damit ist die Bestellung auf NOVATREND Seite erledigt.

Domain konfigurieren

In meinem Fall ist die Domain seafolly.ch bei der Firma amenic registriert. Damit die Domain auf das Webhosting zeigt, müssen die Nameserver, wie in der E-Mail beschrieben, angepasst werden. Hier die Konfiguration vorher …

amenic.ch Dashboard
amenic.ch Dashboard

… und hier die entsprechende Änderung (ns11.tophost.ch, ns12.tophost.ch)

Neuer Nameserver
Neuer Nameserver

Das seafolly.ch Projekt hat nun einen Heimathafen bei NOVATREND und wir werden alles ausprobieren, inklusive der Kunst 🙂


tl;dr: Ausser einer Domain benötigt man ein Hostingpaket um eine Website zu betreiben. Die Domain muss mit dem Paket verbunden werden.

Kategorien
Content Management Systeme Webdesign

Themes basierend auf Bootstrap in Drupal

Wie sie sicher schon bemerkt haben, steckt hinter dem NovaTrend Blog das Content Management System Drupal. Das Theme basiert auf dem HTML, CSS und JavaScript Framework Bootstrap. Die Struktur einer solchen Site lässt sich erstaunlich einfach erstellen und bietet grosse Flexibilität beim Design.

In diesem Artikel möchte ich Ihnen zeigen, wie Sie eine Drupal Website mit Bootstrap aufsetzen können.

Bezüglich der Software Versionen ist eigentlich nie die richtige Zeit einen Artikel darüber zu schreiben, steht doch immer schon die neue Version vor der Tür.
Die Veröffentlichung von Drupal 8 findet seit gefühlten 2 Jahren statt und Bootstrap brachte gerade eine Version 4 Alpha heraus.

Hier im Blog benutzen wir Drupal 7.x und Bootstrap 3.x und vermutlich ist diese Kombination recht gebräuchlich.
Bei drupal.org werden mehr als 70.000 aktive Websites angegeben, die Bootstrap einsetzen (Quelle).

Drupal - Bootstrap - Installationen - 2012 - 2015
Drupal – Bootstrap – Installationen – 2012 – 2015

Aber der Reihe nach.
Zunächst stellt sich die Frage, warum ich das benutzen soll.

Die Nutzung eines Content Management Systems ist ab einer gewissen Komplexität Ihrer Website zwingend. Ob es nun unbedingt Drupal sein muss, sei dahingestellt. Drupal eignet sich für diesen Artikel, weil wir unser Blog damit betreiben. Sie können Bootstrap ebenfalls in Joomla, Typo3, WordPress und vermutlich den meisten anderen CMS nutzen, teilweise ist es bereits enthalten.

Was ist Bootstrap?

Bootstrap ist ein freies und sehr häufig verwendetes CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente, sowie zusätzliche, optionale JavaScript-Erweiterungen.

Bootstrap - Komponenten (Auswahl)
Bootstrap – Komponenten (Auswahl)

Sie können mit Hilfe dieser Elemente eine Website entwickeln und später dann bei Bedarf ein CMS „darunterlegen“.

Wenn ich das so schreibe, dann höre ich den Webdesigner protestieren und sehe den Programmierer zusammenzucken. In der harten Realität läuft es aber ziemlich oft genau so ab. Der grosse Vorteil bei dieser Vorgehensweise ist die Flexibilität und die unglaubliche Verbreitung von Bootstrap. Sie müssen sich nicht sofort festlegen, mit welchen Tools die Site letztlich realisiert wird. Es wird „einfach“ möglich Prototypen der Website in unterschiedlichen CMS zu realisieren und Workflows zu optimieren.

Es gibt Dateien mit Konfigurationsanweisungen für Bootstrap, die das komplette Design der Website beschreiben und einfach austausch- und veränderbar sind. Bekanntestes Beispiel dafür ist der Service bootstrap.com. Jedes der angebotenen Themes lässt sich „per Mausklick“ integrieren. Hier der Screenshot eines Beispielthemes im Flatdesign:

Bootswatch - Flatly
Bootswatch – Flatly

Installation

Installieren Sie sich das aktuelle Drupal 7 (Installation der 5 meistverbreiteten Content Management Systeme). Um mit Bootstrap arbeiten zu können, benötigen eine aktuellere jQuery Version als der Standard in Drupal 7. Glücklicherweise gibt es dafür natürlich ein Modul 🙂

Installieren und aktivieren Sie die Module bootstrap und jquery_update

Sie können die Installation per Konsole mit Drush erledigen

drush dl bootstrap jquery_update
drush en bootstrap jquery_update

oder über den Browser in /admin/modules/install

Drupal - Modul installieren
Drupal – Modul installieren

Konfiguration

Das jQuery Modul kann zunächst ohne Konfiguration genutzt werden, bei Bedarf können Sie in /admin/config/development/jquery_update unterschiedliche jQuery Versionen und ein CDN konfigurieren.

Das Bootstrap Theme kommt mit einem Starterkit für ein eigenes Subtheme, Sie können es am Anfang aber auch „einfach so“ nutzen und mit einem Bootswatch Design kombinieren. Nehmen wir das Bootstrap Flatly Beispiel.

Zunächst müssen Sie das neu installierte Bootstrap Theme aktivieren und als Standard festlegen (/admin/appearance).

Drupal - Theme aktivieren
Drupal – Theme aktivieren

Ihre Website hat dann das responsive Bootstrap Design.
Wenn Sie die Grösse des Browserfensters verkleinern, sehen Sie, was ich meine.

Drupal - Startseite
Drupal – Startseite

Um nun das Boostrap Flatly Design zu erhalten, müssen Sie in den Theme-Einstellungen Flatly auswählen (/admin/appearance/settings/bootstrap). Sie können sich alle Boostrap Themes hier in einer Vorschau ansehen.

Bootstrap - Flatly wählen
Bootstrap – Flatly wählen

Wenn Sie im Tab Components die Navigationsleiste (NAVBAR) nun noch auf „Static Top“ setzen …

Bootstrap - Navigation
Bootstrap – Navigation

sieht Ihre Drupalsite so aus:

Drupal - Bootstrap - Flatly
Drupal – Bootstrap – Flatly

Flatdesign … ganz einfach!
Wenn die Farben für Ihr Projekt passen, ist Ihre Arbeit hier beendet.

Ein eigenes Sub-Theme

Wenn Sie einen Kunden haben, soll die Site natürlich in den Farben, Schriften und Einstellungen der Corporate Identity sein. Um das zu realisieren, müssen Sie sich ein Sub-Theme erstellen. Das ist nicht schwer und wird hier (Bootstrap sub-theming „how to“) detailliert beschrieben. Grundsätzlich erstellen Sie sich einen eigenen Theme-Ordner, kopieren die Bootstrap Quelldateien dort hinein und ändern die theme.info Datei ab. Ausserdem benötigen Sie einen LESS Compiler. Ich nutze dafür die node.js Umgebung unter Mac OS und kann dort einfach einen LESS Compiler installieren (npm install -g less).
Hier ist eine detailierte Beschreibung (How to Use Bootswatch Themes in Drupal 7).

Je nachdem, ob Sie unter Windows, Linux oder Mac OS arbeiten sind die Schritte ein wenig anders, daher möchte ich es beim Link auf die Erklärungen belassen.

Wenn Sie sich Ihre Entwicklungsumgebung eingerichtet haben, müssen Sie für einfache Anpassungen nur die Datei variable.less bearbeiten und danach mit lessc kompilieren. In der variable.less stehen alle Parameter eines Bootswatch Themes und Sie können diese Datei downloaden (http://bootswatch.com/flatly/).

Bootstrap - Flatly - variable.less
Bootstrap – Flatly – variable.less

Nach kurzer Zeit sieht Ihr Drupal dann so aus:

Drupal - NovaTrend Design
Drupal – NovaTrend Design

In diesem Fall musste noch eine Drupal Template Datei überschrieben werden, aber die wesentlichen Änderungen waren tatsächlich nur in der Datei variable.less vorzunehmen!

Fazit

Mit dem Bootsstrap Framework können Sie Standardsites in sehr kurzer Zeit erstellen. Für individualisierte Sites benötigen Sie etwas mehr Aufwand und Know-How, sind allerdings extrem flexibel im Design. In Kombination mit den Template-Systemen der CMS können Sie wirklich jeden Bootstrap basierten Entwurf „in endlicher“ Zeit realisieren 🙂

Links


tl;dr: Die Nutzung des Bootstrap Framework wird immer beliebter – hier ein Beispiel in Kombination mit Drupal.