Kategorien
Frameworks Webdesign

Vue.js

Heute soll es um Vue.js gehen. Das sagt Wikipedia:

Vue.js ist ein Webframework zum Erstellen von Single-Page-Webanwendungen nach dem MVVM Muster. Vue.js gilt als progressiv und inkrementell adaptierter sowie less opinionated im Vergleich zu anderen Webframeworks.

Wenn du, so wie ich, gehofft hast, dass man das verständlicher erklären kann, hier ein Versuch:

Webframework: Wenn du bereits HTML, CSS und JavaScript „kannst“, dann hilft dir ein Webframework bestimmte Aufgaben schneller zu erledigen. Bekannte Webframeworks sind beispielsweise Bootstrap, AngularJS, Ember.js, jQuery, MooTools und React.

Single-Page Anwendung: Darunter versteht man eine Webanwendung, die aus einem einzigen HTML Dokument besteht, dessen Inhalte dynamisch nachgeladen werden.

MVVM-Muster: MVVM ist die Abkürzung von ModelView ViewModel und ist eine Variante des Entwurfsmusters Model View Controller (MVC).

Entwurfsmuster: Ein Entwurfsmuster ist eine bewährte Lösungsschablone für wiederkehrende Probleme in der Softwareentwicklung und übrigens auch in der Architektur.
In der Architektur ist beispielsweise ein „Fensterplatz“ ein Entwurfsmuster in einem Haus. Jeder freut sich über einen gemütlichen Platz am Fenster.  

… gilt als progressiv … : Unter einer progressiven Web App (PWA) versteht man eine responsive Website, die sich wie eine native App „anfühlt“. PWAs können auch offline bedient werden und setzen zwingend das HTTPS-Protokoll ein. Eine gute PWA kombiniert die Website, die mobile Version der Website und die native App und spart dadurch erhebliche Entwicklungskosten.

Kategorien
Allgemein Betriebssysteme Cloud Content Management Systeme Datenbanken E-Commerce Editoren Frameworks Groupware Infrastruktur Open-Xchange OX Performance Security Services Shared Hosting Site Builder Tools Verschlüsselung Webdesign Webserver

Was umfasst eigentlich ein Shared Hosting?

Wir versuchen die Features unserer Services kurz und prägnant zu erklären, beispielsweise mit Einheiten wie Gigabyte. Leider ist ein Gigabyte eine sehr abstrakte Grösse. Ich selbst habe, ehrlich gesagt, keine wirkliche Vorstellung von einem Gigabyte. Ich weiss, dass ein Gigabyte etwa einer Milliarde Zeichen entspricht. Aber was bedeutet eine Milliarde?

Nimm einen Würfel mit Kantenlänge von einem Meter. Teile ihn dir im Kopf in kleine Würfel von einem Millimeter Kantenlänge. In jeden dieser kleinen Würfel passt nun die Kugel aus der Spitze eines Kugelschreibers (oder ein Zeichen). In den Würfel passen 1000 (Breite) mal 1000 (Länge) mal 1000 (Höhe) Kugeln – eine Milliarde! Die würden dann etwa 4 Tonnen wiegen. Unser kleinstes Hosting Angebot (Standard) hat 10 Gigabyte Webspace, was 10,000,000,000 Kugeln mit einem Gewicht von 40 Tonnen entspräche. Das grösste Paket (Speed) bietet 200 Gigabyte oder 200,000,000,000 Kugeln, die dann 800 Tonnen wiegen würden. Man bräuchte 32 LKW um die Kugeln zu transportieren.
Der Vergleich ist zwar beeindruckend, hilft mir allerdings auch nicht wirklich weiter. Ich bemerke die Einheit Gigabyte, wenn mir mein Telefon eine Nachricht anzeigt, aus der hervorgeht, dass bald kein Platz mehr zur Verfügung steht und ich keine Fotos mehr speichern kann. Gigabytes sind auch relevant beim Internet auf dem Telefon. Nach einer gewissen Menge Traffic überträgt es keine Daten mehr oder nur noch sehr langsam. Der Traffic in unseren Webhostings ist übrigens unlimitiert. Das heisst, beliebig viele Menschen können auf deine Website zugreifen. Beliebig viele Menschen! Also mehr als eine Milliarde.

Worauf ich hinaus will ist die Vielfalt, die so ein Webhosting heutzutage bietet. War vielleicht früher die reine Menge an Speicherplatz interessant, so sind es heute eher andere Fragen. Wie kompliziert oder wie einfach kann ich Software installieren und vor allem welche? Wer hilft mir, wenn ich nicht weiterkomme?

Und deswegen schreibe ich in diesem Artikel mal alles zusammen, was ich in den letzten 3 Jahren, die ich dieses Blog schreibe, so an Features in unserem mittleren Webhosting Paket (Premium) bemerkt habe. Ich vermute mal, dass es noch viel mehr Features gibt, die ich dann demnächst entdecken werde.

Kategorien
Content Management Systeme Frameworks Shared Hosting Site Builder Webdesign Webserver

Contenta CMS

In der letzten Woche habe ich über JavaScript geschrieben und wie man interaktive Elemente beispielsweise in einen WordPress Artikel einbinden kann.

Ein CMS wie WordPress hat ein Backend (den Administrationsbereich) und ein Frontend (die Website). Die JavaScript Befehle im Artikel der letzten Woche wurden zwar im Backend eingegeben und mit dem Artikel gespeichert, ausgeführt werden sie allerdings im Browser des Besuchers. Das ist ein möglicher Ansatz, ein bereits existierendes Frontend mit interaktiven Elementen anzureichern.

Die Anforderungen an Websites und Content Management Systeme verändern sich seit ein paar Jahren. Der Trend geht hin zu viel mehr Interaktionen im Frontend und vielfältigerer Nutzung der Daten des Backends (Multi Channel). Daher ist ein anderer Ansatz, die Trennung von Backend und Frontend, immer häufiger anzutreffen. Man spricht dann von Decoupled oder Headless CMS. In WordPress ist das möglich über die REST API, aber es ist noch nicht so wirklich verbreitet. Da Drupal seine Stärken im Backend Bereich hat, entwickelt sich dort gerade eine Tendenz zu decoupled Drupal Projekten.

Kategorien
Content Management Systeme Frameworks Infrastruktur Shared Hosting Site Builder Tools Webdesign

Website Design im Browser untersuchen und testen

Wenn du eine Website erstellst oder veränderst, hast du es entweder mit einem Baukastensystem oder einer komplett individuell erstellten Lösung zu tun. Ein Baukastensystem kann ein Content Management System wie WordPress und Joomla sein, oft mit Datenbankanbindung und Benutzerverwaltung, oder ein Web Framework wie Bootstrap.
Wikipedia listet eine Menge dieser Systeme auf:

Alle Baukästensysteme und Frameworks, die zur Erstellung von Websites genutzt werden, erzeugen letztendlich HTML, CSS und JavaScript, das dann an den Browser des Benutzers gesendet und dort zu einer Website gerendert wird.

Bei der Erstellung und dem Design einer Website geht es immer um diese drei Techniken. Bei der Performance einer Website geht es immer um die Ladezeiten dieser Dateien und der darin dargestellten Bilder und Videos.

Darüber hinaus gibt es dutzende Faktoren, die ebenfalls mit Design und Performance zu tun haben. Die wirklich wichtigen Faktoren sind allerdings auch hier HTML, CSS und JavaScript.

Typische Herausforderungen bei der technischen Umsetzung einer Website sind Wünsche wie:

Ich möchte die Überschrift in einer anderen Größe (Schriftart, Farbe) sehen.

Die Abstände zwischen [Boxen, Überschriften, Text, Absätzen] sind zu [groß, klein].

Im Hintergrund soll ein [Bild, Video] erscheinen.

Auf dem [Telefon, Tablet, PC, Beamer] ist die Überschrift zu [groß, klein].

Der Aufbau der Website ist zu langsam.

Je besser man das Layout und das Design der zukünftigen Website vorbereitet, desto weniger dieser Fragen werden auftauchen.

Während des Aufbaus der Website muss man immer wieder testen, wie dieses oder jenes im Browser aussieht. Alle Browser bringen daher eine Möglichkeit zur Untersuchung der Website mit. In Mozilla Firefox und Google Chrome ist dieser Seiteninspektor mit einem Rechtsklick aufrufbar. Wenn ich beispielsweise etwas über die Überschrift wissen will, so markiere ich sie, klicke mit der rechte Maustaste und wähle den Menüpunkt Untersuchen (Google Chrome), bzw. Element untersuchen (Mozilla Firefox) aus.

Google Chrome - Untersuchen
Google Chrome – Untersuchen
Firefox - Element untersuchen
Firefox – Element untersuchen

Auch in Apples Safari Browser gibt es einen Seiteninspektor. Du musst allerdings zunächst den entsprechenden Menü-Link in den Safari Einstellungen einschalten.

Safari - Entwicklermenu einschalten
Safari – Entwicklermenu einschalten

Danach erscheint nach einem Rechtsklick auf die Überschrift der Link Element-Informationen.

Safari - Element Informationen
Safari – Element-Informationen

Seiteninspektoren

Die eigentlichen Informationen sind in allen Browser ähnlich. Als Beispiel zeige ich den Google Chrome Inspektor, da er mir am besten gefällt. Nach dem Rechtsklick auf durchsuchen erscheint ein dreigeteilter Bereich. Da du auswählen kannst, ob horizontal oder vertikal geteilt wird, kann es sein, dass es bei dir ein wenig anders aussieht. Im meinem Fall erscheint links die Website, in der Mitte der HTML Code und im rechten Bereich der CSS Code.

Chrome - Seiteninspektor
Chrome – Seiteninspektor

Im Website Fenster kannst du das Gerät auswählen, dessen Ausgabe du untersuchen willst. Außerdem kannst du die Auflösung in Pixel angeben und die Skalierung im Browserfenster. Sogar die Ausrichtung in Hoch- oder Querformat ist wählbar.

Chrome - Ausgabegeräte
Chrome – Ausgabegeräte

Im HTML und CSS können live Änderungen vorgenommen werden. Das ist nützlich, wenn man beispielsweise die Wirkung unterschiedlicher HTML Attribute ausprobieren möchte. Manchmal benötigt man nur eine zusätzliche Klasse. In diesem Fall lösche ich die entry-title Klasse und die Größe der Überschrift verändert sich. Wenn du mit Frameworks wie Bootstrap oder gekauften Themes arbeitest, kann das sehr nützlich sein.

HTML - Änderung
HTML – Änderung

Auch CSS lässt sich live verändern. Ich färbe mal die Überschrift rot.

CSS - Änderung
CSS – Änderung

Auf diese Art kannst du viele Dinge auf deiner Website ausprobieren.

Achtung: Alle Änderungen sind natürlich lokal und beim nächsten Reload der Seite wieder verschwunden. Du musst die von dir ausprobierten Änderungen in den entsprechenden CSS Dateien, deren Name und betroffenen Zeilennummer im CSS Fenster angezeigt werden, nachvollziehen.

Außer Änderungen an HTML und CSS kannst du weitere Informationen aus dem Seiteninspektor erhalten. Da die Möglichkeiten wirklich sehr umfassend sind, hier noch ein Video für den Einstieg.

Fazit

Wenn du noch nicht mit einem Seiteninspektor arbeitest, solltest du es sofort ausprobieren. Gerade bei komplexeren Problemen wie Menüstrukturen ist es oft kaum möglich, die Stelle, an der man etwas ändern möchte, zu finden.


tl;dr: Ein Seiteninspektor ist wirklich hilfreich um die Strukturen einer Website zu verstehen und zu verändern.

Save

Kategorien
Frameworks Webdesign Webserver

Node.js

Node.js gibt es seit mittlerweile 8 Jahren. Das .js steht für JavaScript und diese Sprache wird immer beliebter. Mit Node.js können Entwickler JavaScript auf dem Client und auf dem Server verwenden. Es läuft unter Windows, macOS, Linux und gilt heute als ausgereifte Technologie.

In diesem Blogeintrag wollen wir ein paar erste Schritte wagen.

Installation

Zur Installation musst du dir das gewünschte Paket aus dem Download Bereich des Node.js Projekts laden und installieren. Die neuesten Features finden sich in der Version 8.x..  Unter macOS gibt es die Möglichkeit, Node.js über Homebrew zu installieren.

$ brew install node

Nach der Installation kannst du im Terminal Fenster mit dem Befehl node –version überprüfen, ob alles korrekt installiert wurde. Wenn dir die Versionsnummer angezeigt wird, war die Installation erfolgreich.

$ node --version
v8.1.2

Node Konsole

Mit dem Befehl node startest du die Node.js Konsole. Mit dem Befehl console.log(‚Hallo Welt!‘); können wir auch gleich ein „Hallo Welt“ ausprobieren.

$ node
> console.log('Hallo Welt!');
Hallo Welt!
undefined
>

Mit dem Befehl .exit verlässt du die Konsole wieder.

Node Server Prozess

Mit Node.js lassen sich Server Prozesse starten. Hier ein Beispiel für einen einfachen Webserver:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hallo Welt!\n');
}).listen(8124, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8124');

Wie beim ersten vorherigen Programm gibt es auch hier einen console.log() Befehl, der die Nachricht ausgibt. Darüber wird allerdings mit dem Befehl http.createServer()… ein Webserver erzeugt und mit … listen() zum „lauschen“ auf der IP Adresse 127.0.0.1, Port 8124 gebracht. Deswegen endet dieses Programm auch nicht einfach nach dem Aufruf, sondern läuft solange, bis du es wieder abbrichst.
Schreibe die Befehle in eine Datei (server.js) und rufe sie mit dem Befehl node server.js auf.

$ node server.js
Server running at http://127.0.0.1:8124

Du hast jetzt einen lokalen Webserver auf Port 8184 laufen. Wenn du im Browser den URL aufrufst, siehst du die „Hallo Welt!“ Ausgabe.

Hallo Welt
Hallo Welt

Dieser Server läuft, solange du das Terminalfenster nicht schließt. Mit CTRL-C kannst du den Server Prozess stoppen.

Paket Manager NPM

Node.js bringt einen Paketmanager mit (NPM) um die vorhandenen Module wie http zu ergänzen. Mittlerweile gibt es mehrere hunderttausend Module! NPM vereinfacht den Download und die Nutzung von Zusatzmodulen. Module werden im aktuellen Verzeichnis in /node_modules gespeichert (npm install [Modulname]). Sie können auch mit dem -g Flag global installiert werden. Bei einer globalen Installation landen sie im globalen /node_modules Verzeichnis und können aus jedem anderen Verzeichnis ebenfalls aufgerufen werden.

Wenn ich beispielsweise

$ sudo npm install -g hexy

aufrufe

$ sudo npm install -g hexy
/usr/local/bin/hexy -> /usr/local/lib/node_modules/hexy/bin/hexy_cmd.js
+ hexy@0.2.9
added 1 package in 0.732s

wird der Hex-Dumper hexy installiert.

Das Kommando

$ hexy --width 12 server.js

zeigt mir dann die Datei server.js im Hexadezimalformat

00000000: 7661 7220 6874 7470 203d 2072 var.http.=.r
0000000c: 6571 7569 7265 2827 6874 7470 equire('http
00000018: 2729 3b0a 6874 7470 2e63 7265 ');.http.cre
00000024: 6174 6553 6572 7665 7228 6675 ateServer(fu
00000030: 6e63 7469 6f6e 2028 7265 712c nction.(req,
0000003c: 2072 6573 2920 7b0a 2020 7265 .res).{...re
00000048: 732e 7772 6974 6548 6561 6428 s.writeHead(
00000054: 3230 302c 207b 2743 6f6e 7465 200,.{'Conte
00000060: 6e74 2d54 7970 6527 3a20 2774 nt-Type':.'t
0000006c: 6578 742f 706c 6169 6e27 7d29 ext/plain'}

Mit dem Befehl

$ sudo npm uninstall -g hexy

lässt sich das Modul wieder entfernen.

Zugriff auf das Dateisystem

Mit Node.js lässt sich problemlos auf das Dateisystem zugreifen. Der folgende Code (ls.js) zeigt die Dateien im aktuellen Verzeichnis an:

var fs = require('fs');
var dir = '.';
if (process.argv[2]) dir = process.argv[2];
var files = fs.readdirSync(dir);
for (fn in files) {
  console.log(files[fn]);
}
$ node ls.js
ls.js
server.js

Fazit

Der Einstieg in Node.js ist, wie bei PHP auch, sehr einfach. Die Möglichkeiten, die sich mit Node.js auftun sind endlos. In den Bereichen Web-APIs und Single-Page-Apps eignet sich Node.js hervorragend und es macht Spaß damit zu arbeiten.

Links


tl;dr: Node.js ermöglicht JavaScript Programmierung auf dem Client und auf dem Server.

Save