Programme und Anwendungen die jeder Entwickler kennen sollte
Es gibt sehr viele Programme auf dem Markt, die dir dabei helfen dein Web-Projekt oder dein Programm umzusetzen.
Ich möchte dir einige sehr nützliche Programme zeigen, die ich in meinen Projekten ständig verwende und nicht vermissen möchte.
Programmierung
Bei der Entwicklung eines Projekts helfen nicht nur Programme zur Erstellung von Quellcode, sondern auch weitere Anwendungen auf dem Rechner, die die Programmierung erleichtern und effizienter gestalten können.
Git
Git ist ein Versionierungs-Tool, das dir dabei hilft den Code deiner Webseite, oder deines Programms genau nachzuvollziehen und bei Bedarf auf einen älteren Stand zurückzusetzen.
Du programmierst wie gewohnt auf deinem Rechner und schiebst die geänderten Dateien regelmäßig in Github, oder GitLab.
Bei der Entwicklung in einem Team ist die Versionierung nicht mehr weg zu denken. Auch für einzelne Entwickler lohnt sich Git.
Viele angehende Entwickler sträuben sich etwas gegen die Verwendung einer Versionierung, da die Entwicklungszeit etwas verlängert wird.
Wenn man aber bedenkt, dass Fehler sehr viel schneller reproduziert werden können, oder eine alte Version des Programms sehr einfach wiederhergestellt werden kann, spart man sich als Programmierer schlussendlich Nerven und viel Zeit.
WinMerge
Mit WinMerge kannst du 2 Quellcodes miteinander vergleichen. Moderne Quellcode-Editoren können mit einem ähnlichen Algorithmus ausgestattet werden, ohne den WinMerge zu benötigen.
Solltest du aber darauf bestehen, mit dem Texteditor oder Notepad++ zu programmieren, wirst du dieses Programm lieben lernen.
MySQL Workbench
Mit MySQL Workbench von Oracle kann auf eine Datenbank zugegriffen und mit SQL-Befehlen Daten in Tabellen bearbeitet, angezeigt und angelegt werden.
Dieses Programm ist meine persönliche Empfehlung. Es gibt natürlich noch viele weitere Anwendungen, die das Erstellen und Bearbeiten von Datenbanken ermöglichen.
Auch sehr Hilfreich ist der Adminer, der direkt in das Web-Verzeichnis deiner Webseite gelegt werden kann. Mit einer einzelnen Datei können Datenbanken manipuliert, erweitert, exportiert und importiert werden.
Dieses Programm sollte man aber mit Vorsicht genießen. Die Datei sollte nach der Benutzung dringend gelöscht werden. Zudem sollte man wissen was man macht, denn die Webseite könnte durch eine fehlerhafte Eingabe irreparabel zerstört werden, sofern man vorher kein Backup gemacht hat.
Übertragung
Sobald der Quellcode erstellt wurde, muss das Web-Projekt auf einen öffentlichen Server gelegt werden. Für diesen Zweck gibt es einige Programme, um deine Dateien auf einen Live-Server hochzuladen. In dieser Rubrik findest du zudem noch Hilfsmittel zur Verwaltung deines Servers.
FileZilla
FileZilla ist ein Programm zum übertragen von Dateien vom Rechner auf einen Server. Über einen Hostname (oder IP-Adresse) und die Angabe eines Benutzernamen und Passworts kann man sich mit dem Server verbinden, Dateien hochladen, löschen oder ändern. Je nach Server-Einstellungen benötigt man zudem einen anderen Port als die Standards "21" oder "22".
Dieses Programm ist nur notwendig, wenn man sich einen Server oder einen Webspace gemietet hat. Sofern man XAMPP auf seinem lokalen Rechner als Test-Umgebung verwendet, kann man die Dateien auch einfach über den Explorer in den jeweiligen Ordner verschieben.
Putty
In vielen Fällen hat ein Server keinen Monitor und steht auch nicht im gleichen Gebäude, in dem an ihm gearbeitet wird. Daher benötigt man eine passende Software, die die Konsole des Servers über einen externen Rechner bedienbar macht.
Für diesen Anwendungsbereich kommt Putty ins Spiel. Dieser nützliche Helfer zeigt die Linux oder Windows-Konsole des Servers am eigenen Rechner an und überträgt eingegebene Befehle direkt an den Server. Diese Befehle werden durch eine sichere SSH-Verbindung von Putty auf den Server übertragen.
WinSCP
Ähnlich wie FileZilla wird dieses Programm zum Übertragen von Dateien auf einen entfernten Server verwendet. Die größten Unterschiede zu FileZilla sind die Bedienbarkeit und die Erzwingung eines SSH-Protokols. Wie FileZilla ist dieses Programm kostenlos auf der Herstellerseite von WinSCP erhältlich.
Testing
Da deine potentiellen Besucher eine Webseite vorfinden möchten, die auf ihrem Rechner funktioniert, musst du dein Projekt umfangreich testen. Dazu benötigst du einen Server, der entweder auf deinem lokalen Rechner läuft oder auf einem öffentlichen Server mit Passwort-Schutz.
Viele Entwickler haben nicht das Budget, um ein Projekt auf einem öffentlichen, passwortgeschützten Server zu testen. Deshalb wird in der Regel ein lokaler Server auf dem eigenen Rechner eingerichtet.
Zudem wirst du verschiedene Browser benötigen, um deine Webseite so umfangreich wie möglich zu untersuchen.
XAMPP
XAMPP wird dazu verwendet eine Lokale Test-Umgebung für eine Webseite zu erstellen. Dadurch ist kein eigener physikalischer Server zum Erstellen einer Webseite notwendig.
Dieses Programm wird mit ein paar Erweiterungen mitgeliefert. XAMPP enthält einen Mail-Service, PHP und Perl, MariaDB und weitere nützliche Services und Programme.
Da das Programm nur auf Windows- und Apple-Geräten läuft, gibt es für Linux eine Alternative: LAMPP.
VMWare Workstation
Eine Virtuelle Maschine wird dazu verwendet, um "einen Rechner auf einem Rechner" zu simulieren. Das bedeutet, dass du zum Beispiel ein Linux-System wie "Debian" auf einem Windows-Rechner installieren kannst, um einen lokalen Test-Server zu erstellen. Debian wird am häufigsten für die Erstellung eines Webservers verwendet. Das Betriebssystem enthält bereits einige nützliche Anwendungen, die die Konfiguration von einem Server vereinfachen. Zudem ist das Betriebssytem kostenlos, so wie alle Linux-Distributionen.
VMWare Workstation Pro ist eines der beliebtesten, aber mit ca. 275,- € auch ein recht teures VM-Programm für das Testen und Entwickeln.
Eine kostenlose Alternative bietet VM Virtualbox von Oracle.
Browser
Natürlich hast du schon einen Browser auf deinem Rechner. Aber hast du dir schon einmal Gedanken gemacht, ob die Besucher deiner Webseite den gleichen Browser verwenden?
Da es viele verschiedene Browser gibt, die alle gleichermaßen verwendet werden, solltest du deine Webseite auf diesen Browsern auf Fehler testen:
Mir ist bewusst, dass dieser Schritt viel Zeit in Anspruch nehmen kann. Wenn es aber auf nur einem dieser Browser einen größeren Fehler gibt, wirst du einen Anteil deiner Zielgruppe verlieren.
Zur "Haupt-Entwicklung" verwende ich persönlich am liebsten Google Chrome oder Mozilla Firefox, da diese beiden Browser eine sehr umfangreiche Entwickler-Konsole bei der Installation mitliefern. Zudem bleiben die beiden Browser immer auf dem neuesten Stand und werden am häufigsten verwendet.
Safari auf einem Windows-System zu verwenden ist für das Testing nicht relevant. Apple hat die Unterstützung für andere Betriebssysteme eingestellt. Das bedeutet, dass der Safari-Browser auf anderen Betriebssystemen, wie Windows oder Linux, veraltet ist. Die Erstellung einer VM mit Mac auf einem Windows- oder Linux-Gerät ist aufwändig und unnötig kompliziert. Apple macht es einem Webentwickler leider nicht einfach, die Webseite zu testen.
Developer Console
Die Developer Console (oder auch Entwickler-Werkzeuge genannt) werden mit modernen Browsern mit der Installation mitgeliefert. In den meisten Browsern, kann man dieses praktische Werkzeug über die Taste "F12" öffnen.
In diesem Fenster kann der HTML-Quellcode, JavaScripte und CSS-Formatierungen geprüft werden. Bei JavaScript, oder serverseitigen Problemen, erscheinen Fehlermeldungen in der Konsole. Formatierungen können überprüft und angepasst werden, bevor die Änderung veröffentlicht wird und die HTML-Struktur kann genau auf Fehler und Inhalt geprüft werden. Das ist vor allem nützlich, wenn Inhalte während der Laufzeit per JavaScript geändert werden.
Zudem können Cookies geprüft und die Netzwerkauslastung (bzw. die Performance) getestet werden. Es gibt noch viele weitere nützliche Funktionen, die dieses Tool bietet.
Bild-Bearbeitung
Neben der Erstellung von Quellcode besteht eine Webseite in den meisten Fällen auch aus anderen Inhalten. Eine der wichtigsten Ressourcen deiner Webseite sind Bilder, um das Geschriebene visuell zu unterstreichen.
Wenn du eine Grafik hast, solltest du sie für deine Webseite optimal vorbereiten, damit die Ressource so hochauflösend wie Möglich dargestellt wird, aber auch schnell lädt. Die bekanntesten Bildbearbeitungs-Programme und Quellen für Bilder findest du hier.
GIMP
GIMP ist ein OpenSource Bildbearbeitungs-Programm, dass stetig weiterentwickelt wird. Leider hinkt das Programm hinter Photoshop immer ein klein wenig hinterher und die Oberfläche ist nicht so einfach aufgebaut, wie andere Programme. Dafür, dass es ein kostenloses Programm ist, hast du dennoch ein sehr breites Spektrum an Hilfsmitteln, um deine Bilder zu bearbeiten und für deine Webseite zu optimieren.
Photoshop
Adobe Photoshop ist zwar eine der teuersten Bildbearbeitungs-Programme, aber auch das Mächtigste. Es gibt wohl keinen professionellen Grafiker, der nicht mit Photoshop arbeitet.
Auf der Hersteller-Seite von Photoshop kann man die aktuelle Version "CC" für rund 12,- € im Monat kaufen. Das ist die günstigste Photoshop CC Version, die einen Cloud-Speicher von 20 GB beinhaltet.
Mit der Cloud-Anbindung kannst du das Programm auf mehreren Rechnern ausführen und kannst die Bild-Dateien immer und überall herunterladen und bearbeiten.
Piskel
Wenn du 2D-Spiele Programmierst, wirst du einen Spritesheet- und Pixel-Editor benötigen. Piskel ist eine der vielen Pixel-Editoren, die dir dabei helfen eine 2D-Animation oder ein Spritesheet zu erstellen.
In diesem Programm wird etwas anders gearbeitet, als mit herkömmlichen Bildbearbeitungs-Programmen wie Photoshop oder GIMP. Denn die Bilder werden Pixel für Pixel erstellt. Auch kleinere GIF's oder animierte Emojis können mit diesem Programm erstellt werden.
Stock-Images
Stock-Images sind Bilder, die auf verschiedenen Plattformen, wie Fotolia (Heißt mittlerweile "Adobe Stock") oder Shutterstock gekauft und unter bestimmten Bedingungen verwendet werden können.
Je nach dem, wie die Plattform oder der Fotograf sein Bild lizenziert, kannst du das Bild entweder nur für digitale Inhalte, wie deine Webseite verwenden, oder mit einer erweiterten Lizenz auch auf Produkte drucken.
Viele dieser Plattformen möchten auch, dass du den Fotografen des Bildes mit einer Verlinkung angibst. Das kann entweder direkt unter dem Bild passieren, oder auf einer Impressum-Seite.
Das variiert sehr stark von Anbieter zu Anbieter. Im besten Fall liest du dir die Lizenzvereinbarungen immer vor dem Kauf eines Bildes genau durch, oder verwendest CC0-Bilder.
CC0 Bilder
CC0 ist eine Lizenzart. Sie definiert, dass ein Bild ohne der Angabe eines Copyrights oder des Fotografen verwendet werden darf. Die größten Restriktionen dieser Lizenz sind recht leicht erklärt: du darfst das Bild nicht als dein eigenes ausgeben und darfst es nicht als Bild verkaufen.
Das bedeutet, dass du ein CC0-Bild auf kommerzielle Webseiten, Spiele, Flyer oder andere Produkte abbilden darfst, ohne die Quelle zu nennen. Ich empfehle jedoch immer die Quelle der Ressource zu sichern, damit du bei einer Prüfung beweisen kannst, dass das Bild eine CC0-Datei ist.
Diese Art der Lizenz machen sich sehr viele kleinere Firmen oder Privat-Entwickler zunutze, um Kosten zu sparen. Mittlerweile gibt es auch einige Plattformen, auf der du qualitativ Hochwertige CC0-Bilder herunterladen kannst. Meine 3 Favoriten sind Pexels, Unsplash und Pixabay.
Sei dir bei der Verwendung von CC0-Bildern aber bewusst, dass diese Bilder auf sehr vielen Seiten eingefügt werden. Dadurch wird deine Webseite in der Google Bilder-Suche unter gehen. Das kannst du am besten prüfen, indem du ein Bild von einer der 3 Plattformen herunterlädst und eine umgekehrte Bildersuche startest.
Auch wenn du mit der Verwendung eines CC0-Bildes nicht sehr innovativ bist oder aus der Masse hervor stichst, hast du dennoch sehr schöne Bilder, die deinen Besuchern ins Auge fallen werden.
Weitere
Neben den oben genannten Programmen gibt es noch weitere hilfreiche Tools, die ich dir kurz vorstellen möchte, damit du einen guten Einstieg in die Web-Programmierung bekommst.
7-Zip
Es gibt sehr viele Anwendungsfälle, in denen du ein Programm benötigst, dass Dateien packen und komprimieren kann. 7-zip ist der aktuelle Führer der Komprimierungs-Programmen.
Mit dieser kostenlosen Anwendung lassen sich Dateien einfach in ZIP-Dateien (oder andere Formate) packen, komprimieren und verschlüsseln.
Gerade wenn du Dateien zwischen deinem Kunden austauschen möchtest, ist es empfehlenswert diese Dateien gepackt zuzusenden. Das reduziert die Wahrscheinlichkeit, dass der entfernte Mail-Server die Größe deiner E-Mail nicht gefällt und sie blockiert.
WeTransfer
WeTransfer ist eine Plattform, um Dateien zu übertragen. Mit der kostenlosen Version kannst du bis zu 2GB auf einmal versenden. Die Dateien werden 2 Wochen gesichert und im Anschluss gelöscht.
Die Plattform bietet den Versand per E-Mail oder die Erstellung eines Download-Links. Den Link kannst du dir kopieren und in deine individualisierte E-Mail einfügen.
Für Firmen gibt es zudem eine White-Label Lösung. Damit kannst du einen individuellen Stil zur WeTransfer-Downloadseite hinzufügen. Du kannst bis zu 100 GB auf dem WeTransfer-Server sichern und selbst verwalten, wann welche Datei gelöscht werden soll. Statt 2 GB Up- und Download-Größe bietet dir die Plus-Version 20 GB pro Download.
PoEdit
WordPress Templates und Plugins, werden üblicherweise in mehreren Sprachen geliefert. Auch andere CMS-, CMR- oder Shop-Systeme benötigen Übersetzungs-Dateien, die in einer bestimmten Struktur vorliegen.
Für WordPress benötigt man eine "po"-Datei, die die übersetzten Zeichenketten beinhalten. PoEdit ist eine Software um po- und mo-Dateien zu erstellen und zu bearbeiten.
Die Pro-Version des PoEdits kann sogar einen kompletten Ordner auf übersetzbare Strings kontrollieren und automatisch eine Datei mit allen benötigten Zeichenketten erstellen.
Solltest du selbst ein WordPress-Template erstellen wollen, wirst du nicht an eine Pro-Version vorbeikommen. Diese ist mit ca. $30 noch erschwinglich. Leider erhält man mit der One-Time-Payment Lizenz nur Updates der Version 2. Sobald die Version 3 auf dem Markt kommen sollte, wirst du eine neue Lizenz benötigen.
TeamViewer
Das kostenlose Programm TeamViewer sollte auf keinem Rechner fehlen.
Mit diesem praktischen Programm kann eine Verbindung zwischen zwei oder mehr Rechnern hergestellt werden. Die gegenüberliegende Person hat dann Zugriff auf den Rechner, sieht den aktuellen Desktop und kann auch die Maus und Tastatur von seinem eigenen Rechner bedienen.
Das ist extrem hilfreich, wenn ein Experte einem Laien etwas zeigen und erklären möchte.
Auch ein Zugriff auf einen Server (meistens auf einem Windows-Server) wird dadurch problemlos ermöglicht. Die integrierte Konferenz-Schaltung von TeamViewer ist gerade für Firmen und Freelancer ein sehr nützliches Instrument, um Schulungen zu geben oder ein Projekt zu planen.
Search Replace DB
Mit dem Search Replace DB Tool von interconnect/it kannst du Bestandteile einer Datenbank ersetzen.
Webseiten meiner Kunden werden von mir zuerst auf einem Test-System umgesetzt, bevor es veröffentlicht wird. Durch das htaccess-geschützte Test-System kann sich der Kunde die Webseite während der Entwicklung ansehen.
Das setzt aber eine Test-Domain voraus, wie z.B. kundenprojekt.test.example.com.
Da diese Domain in den meisten CMS-Systemen in der Datenbank enthalten ist, sollte diese bereinigt werden, wenn das Projekt auf das Live-System gestellt wird.
Sobald also die Datenbank auf dem Live-Server liegt, kann ich das Tool über die Live-Domain aufrufen und die Test-Domain durch die Live-Domain ersetzen.
Webseiten-Baukastensysteme
Baukasten-Systeme sind heutzutage sehr populär. Mit ihnen kann eine einfache Webseite innerhalb weniger Minuten erstellt werden.
Für den Start einer Firma mag das ein sehr interessanter Weg darstellen, jedoch stößt man mit diesen Systemen schnell an seine Grenzen. Sobald eine individuelle Funktion zur Webseite hinzugefügt werden soll, müssen iFrames mit einem externen Webspace eingesetzt werden.
Einer meiner Kunden wollte auf seiner Baukasten-Webseiten einen Vergleichs-Rechner integriert haben. Da der Anbieter des Baukasten-Systems keinen Fernzugriff auf den Webspace ermöglichte, musste mein Kunde einen zusätzlichen Webspace für den Quellcode des Rechners mieten. Dieser konnte nur über einen iFrame auf die Webseite integriert werden. Zudem hat er eine zusätzliche Domain und ein SSL-Zertifikat dafür benötigt. Inzwischen erstellt er sich eine WordPress-Webseite, weil er unzufrieden mit dem Baukasten-System ist.
Richtige Content Management Systeme wie WordPress oder Typo3 können zu Beginn recht kompliziert sein, da man sich ein wenig Know-How aneignen muss, um eine eigene Webseite zu Erstellen und zu Verwalten. Jedoch sind sie Nachhaltiger und Anpassbarer als jedes Baukasten-System auf dem Markt. Das liegt vor allem daran, dass der Quellcode ein CMS angefasst werden kann und sowohl für Programmierer, als auch für Redakteure gedacht ist.
Nimm dir bitte die Zeit ein CMS zu erlernen, bevor du eine Webseite erstellst, die dir nicht die Möglichkeiten bietet die du benötigst.
Zum Schluss noch ein gut gemeinter Rat: Versuche so gut wie nur möglich darauf zu achten, von welchem Anbieter du Software herunterlädtst. Es kam schon häufiger vor, dass Drittanbieter einen eigenen "Installer" verwenden, der neben der gewünschten Software weitere Programme installieren, wenn man nicht vorsichtig beim Klick auf den "Weiter"- oder "Installieren"-Button ist.
Das kann zum Beispiel AdWare, Malware oder anderes sein. Stelle sicher, dass du die Installations-Dateien immer vom Hersteller beziehst. Selbst Plattformen, denen man vertraut, können irgendwann einen eigenen Installer mit "Zusatz-Software" anbieten.
Kennst du noch weitere Programme, die dir bei der Programmierung deiner Projekte helfen? Teile uns mit, mit welchen Programmen du arbeitest du welche Erfahrungen du gemacht hast.
Teil 5: Nützliche Programme und Anwendungen
Fortsetzung folgt ...
Das konnte dich auch interessieren
![The Great Book of Cooking [Code] - Vol.1 | Chap.1](https://static.codepalm.de/wp-content/uploads/2023/03/Great-Book-of-Cooking-Code-Volume-1-Chapter-1-EN-Itch-1.png)
Kommentare
Sei der Erste, der einen Kommentar erstellt!