Kategorien
Content Management Systeme Shared Hosting Site Builder Webdesign

JavaScript

Die Erfindung der Sprache JavaScript ist mittlerweile 22 Jahre her.
Der damalige Browser Hersteller Netscape stand unter starkem Konkurrenzdruck. Microsoft befürchtete, dass sich Netscape als eine Art Middleware auf Windows durchsetzen würde. Damit wäre Microsofts damaliges Betriebssystem Monopol bei PCs gefährdet gewesen. Microsoft entwickelte 1995 einen eigenen Browser, nannte ihn Internet Explorer, und wollte ihn zum kostenlosen Standard Browser machen. Netscape hatte damals mehr als 80% Marktanteil und verkaufte seinen Browser an die Kunden! Der Netscape Browser bot die Möglichkeit Programme, die in „der“ Programmiersprache Java geschrieben waren, im Browser als sogenannte Applets darzustellen. Diese Applets hatten Schnittstellen zu herkömmlichen Java Programmen und zur HTML basierten Website in der sie eingebettet waren. So konnten „die Website“, „das Applet“ und „der Server“ miteinander kommunizieren. Microsoft hatte keine vergleichbare Technologie, konnte aber den Internet Explorer mit dem Windows Betriebssystem unter Missachtung gängiger Standards enger verzahnen als Netscape und hatte außerdem ein vergleichsweise endlos großes Budget. Netscape benötigte also auf Sicht ein weiteres Feature das Microsoft nicht hatte.

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
Infrastruktur seafolly.ch Server Shared Hosting Webdesign Wunschthema

Ein FTP Client im Browser – net2ftp

Das Dateiübertragungsprotokoll FTP (File Transfer Protokoll) definiert Regeln um Dateien von einem Client (FTP-Programm) zu einem Server (Web-Server) hoch- und herunterladen zu können. Verzeichnisse und Dateien können umbenannt und gelöscht werden. Verzeichnisse können angelegt werden. Das Protokoll wurde 1985 spezifiziert und ist auch heute noch sehr verbreitet.

Wenn du in deinem Browser beispielsweise die folgende Adressierung mit deinen FTP Zugangsdaten eingibst, erhältst du eine Liste deiner Dateien.

ftp://[ftp_benutzer[:ftp_pw]@]Servername[:Port]

ftp:// – Protokoll
ftp_benutzer – Der im Server konfigurierte Benutzername
ftp_pw – Passwort
Servername – Domainname oder IP Adresse des Servers
Port – 21 ist der unverschlüsselte Standard Port, 22 ist der Port für die verschlüsselte Variante (SFTP).

FTP-Verbindung im Browser (hier Opera)
Unverschlüsselte FTP-Verbindung im Browser (hier Opera)

Du kannst zwischen den Verzeichnissen wechseln und Dateien herunterladen. Einen praktischen Nutzen hat das für das Anbieten von freien Downloads.
Hier ein Beispiel für einen Server, der ältere Apple Software sammelt und zum Download anbietet (http://ftp.iinet.net.au/pub/apple/).

Hinweis: Aus naheliegenden Sicherheitsgründen sollte man immer SFTP benutzen, die sichere Variante des FTP Protokolls und Apple Software sollte man grundsätzlich nur bei Apple herunterladen 🙂

In den letzten Jahren wurden die meisten öffentlichen FTP Server durch Systeme in der Cloud ersetzt. Apple hat sein öffentliches FTP Angebot im Jahr 2015 eingestellt.

Chromebook

In vielen Firmen werden mittlerweile aus Kostengründen Chromebooks eingesetzt. Die Geräte sind auf den Webbrowser Chrome reduziert und jede Anwendung muss als Webanwendung im Browser laufen.

Das funktioniert prinzipiell auch ganz gut, hin und wieder benötigt man aber doch etwas mehr, wie beispielsweise eine sichere FTP Verbindung. Und damit sind wir endlich beim Hauptthema dieses Beitrags angekommen 🙂

Wie nutze ich FTP in einem Browser?

Wenn es nur um den reinen Download geht ist es kein Problem, wie aber lade ich beispielsweise Dateien hoch?

Hosting Provider

Die meisten Hosting Provider bieten einen FTP Client innerhalb der Verwaltungsoberfläche im Browser an. In unserem Fall ist das die Dateiverwaltung von cPanel. Es lässt sich überraschend gut damit arbeiten. Wenn du die Dateiverwaltung noch nie benutzt hast, solltest du sie mal ausprobieren.

cPanel-Dateiverwaltung
cPanel-Dateiverwaltung

Kundendateien per FTP

Wenn du beruflich oder privat mit Websites zu tun hast, musst du immer mal wieder Dateien irgendwo hochladen oder ändern. Meistens hast du eben nicht den Zugriff auf das komplette Provider Backend, sondern „nur“ die Zugangsdaten auf ein für dich eingerichtetes FTP Konto.

Solange du einen PC mit Microsoft Windows, Apple macOS oder Linux besitzt, ist das kein Problem. Du installierst einen FTP Client und stellst eine Verbindung her. Selbst die jeweiligen Datei Manager können FTP Verbindungen als Ordner einbinden.
Auf einem Chromebook geht das aber nicht.
Und da kommt das Projekt net2ftp ins Spiel

net2ftp

net2ftp ist ein freier FTP Client im Browser. Auf der Website net2ftp.com wird das Programm als Service betrieben. Du könntest die Zugangsdaten des gewünschten Servers dort eingeben und wärst dann per SFTP verbunden. Ich empfehle das allerdings aus Sicherheitsgründen ausdrücklich NICHT, weil ich nicht weiß, wer diesen Server betreibt.

Du kannst das Programm aber auch downloaden und selbst auf deinem Server installieren oder deinen Administrator darum bitten. Die Grundinstallation ist sehr einfach. Nach dem Download und dem Auspacken von net2ftp_v1.1.zip entsteht das Unterverzeichnis files_to_upload.

Diese Dateien müssen nur auf deinen Webserver geladen werden und das /temp Verzeichnis benötigt Schreib- und Ausführungsrechte (0777).

net2ftp - Dateien
net2ftp – Dateien

Danach ist net2ftp sofort einsatzbereit. Nach dem Aufruf über den Browser erscheinen die Anmeldeformulare. Achte darauf, die sichere SSH Anmeldung zu benutzen!

net2ftp - SSH Anmeldung
net2ftp – SSH Anmeldung

Du kannst nun in den Verzeichnissen navigieren und alle FTP Features nutzen. Dateien können bearbeitet werden.

net2ftp - seafolly
net2ftp – seafolly

Wenn du beispielsweise CSS oder PHP Dateien bearbeitest, wird der Code farblich hinterlegt.

net2ftp - Editor
net2ftp – Editor

In der Datei settings.inc.php lassen sich verschiedene Einstellungen vornehmen (E-Mail Adresse, Sprache). Wenn die Aktionen der Benutzer protokolliert und gegebenenfalls reglementiert werden sollen, musst du eine MySQL Datenbank anlegen, die mitgelieferte Datei create_tables.sql importieren und die Zugangsdaten in die settings.inc.php eintragen. Danach ist es möglich die Server Ressourcen zu begrenzen.

Fazit

Für den beschriebenen Anwendungszweck auf dem Chromebook ist net2ftp ein gute FTP Lösung.

Link

https://www.net2ftp.com


tl;dr: net2ftp ist ein web basierter FTP Client.

 

Save

Kategorien
Cloud Infrastruktur Shared Hosting

Die cPanel Web Disk

Jeder Web Hosting Account bei Novatrend verfügt über eine gewisse Menge Speicherplatz. Auf diesem Speicherplatz liegt deine Website. Diese Website kann aus ein paar Dateien oder einem Content Management System mit tausenden von Dateien und hochgeladenen Bildern und Dokumenten bestehen. Zwischen diesen beiden Extremen liegen, je nach Webhosting Paket, dutzende Gigabyte an Speicherplatz.

Die Web Disk von cPanel bietet Möglichkeiten diesen Speicherplatz zu nutzen.

Web Disk

Die Konfiguration der Webdisk befindet sich innerhalb der cPanel Administration. Die cPanel Administration lässt sich vom Kundencenter aus aufrufen.

cPanel - Web Disk
cPanel – Web Disk

Die Web Disk besteht aus einem Hauptkonto und beliebig vielen individuellen Zusatzkonten.

  • Das Hauptkonto umfasst den gesamten Speicherplatz und ist standardmässig eingerichtet. Es kann nicht gelöscht werden.
  • Ein Zusatzkonto bezieht sich immer auf den Inhalt eines Ordners. Es kann unterhalb des home Verzeichnisses, in meinem Fall /home/seafoll1 angelegt werden.

Achtung: Im /public_html Verzeichnis liegt deine öffentlich zugängliche Website. Auf Web Disk-Verzeichnisse, die unterhalb des /public_html Verzeichnisses angelegt werden, kann jeder Besucher über den Webbrowser zugreifen! 

Ich nutze beispielsweise ein Zusatzkonto im Verzeichnis /disk/hagen. Das Verzeichnis liegt oberhalb des /public_html Verzeichnisses und ist nicht öffentlich zugänglich.

Zusatzkonto erstellen
Zusatzkonto erstellen
Zusatzkonten verwalten
Zusatzkonten verwalten

Zugriff auf die Web Disk

Auf die Dateien der Web Disk kannst du von deinem PC oder deinem Smartphone aus zugreifen. Um Dateien hoch- und herunterzuladen musst du zunächst dein Betriebssystem darauf vorbereiten. Ein Klick auf den Link Web Disk aufrufen bringt dich in einen Bereich mit Anleitungen für Apple, Microsoft, Linux und Smartphone Betriebssysteme.

Anleitung zur Verbindungsherstellung
Anleitung zur Verbindungsherstellung

Ich habe ein MacBook mit macOS und dort geht die manuelle Verbindung folgendermaßen:

  1. Öffne den Finder.
  2. Wähle das Start Menü aus.
  3. Wähle die Option Mit Server verbinden aus.
  4. Gib in das Feld Serveradresse folgendes ein:
    https://srv11.tophost.ch:2078
  5. Klicke auf Verbinden
  6. Gib deinen Benutzernamen und das Kennwort des Web Disk-Kontos ein.
  7. Klicke auf Verbinden, um die Web Disk zu öffnen.

Jetzt kann du deine Web Disk wie eine Festplatte benutzen. Die Dateien sind allerdings nur in deinem Web Hosting gespeichert und nehmen keinen Platz auf deinem PC weg.

macOS - Finder
macOS – Finder

Smartphone App

Für iOS und Android gibt es Apps, die die Web Disk mit dem Telefon verbinden. In der App können beliebig viele Web Disks verwaltet werden.

Konfiguration - iOS App
Konfiguration – iOS App

Dateien können hoch- und heruntergeladen werden. Die App kann auch so konfiguriert werden, dass beispielsweise alle Fotos automatisch hochgeladen werden. Je nach Dokumententyp (PDF, JPG, etc) werden die Dateien in einer Vorschau auf dem Telefon angezeigt.

Viewer in der iOS App
Viewer in der iOS App

Browser

Last but not least besteht auch die Möglichkeit, die Dateien im Browser zu sehen und herunterzuladen. Einfach https://srv11.tophost.ch:2078 und die Zugangsdaten eingeben.

Fazit

Die Web Disk bietet die Grundfunktionalität eines Cloudspeichers. Mit PC und Smartphone kann auf die Daten lesend und schreibend zugegriffen werden.

Links


tl;dr: Den Speicherplatz deines Web Hostings kannst du auf unterschiedlichen Geräten mit der Web Disk verwalten.

Save