Am Anfang steht die Frage: Was benötige ich überhaupt für Programme und kostet mich das etwas? Die Antwort: Am Anfang kann es Geld kosten, es muss aber nicht. Die meisten Programme für die Webentwicklung stehen kostenfrei zur Verfügung (solange diese im privaten Einsatz sind). Erst wenn es dann Öffentlich gehen soll kann es zu den ersten Kosten kommen. Jedoch können auch diese überschaubar gehalten werden. Es Gibt aber auch kostenpflichte Programme, welche dafür aber auch meist deutlich mehr Komfort bieten. Zur Übersicht möchte ich deshalb zunächst die kostenfreien Basics auflisten, im Anschluss werden dann auch noch einige kostenpflichte Programme gezeigt. Was ist also die Grundlage, welche ich benötige um loslegen zu können? Zunächst einmal ein PC oder ein Laptop. Das Betriebssystem ist hierbei zunächst egal, da egal ob Windows, Mac, Linux, Unix usw. auf allen ist es möglich Webseiten / WebApps und somit auch hybride Apps zu entwickeln. Die Programme unterscheiden sich hier meist, teilweise sogar auch nur im Namen oder in der Fülle an Funktionen.

Auswahl eines Editors:

Der Zentrale Ausgangspunkt um den ersten eigenen Code zu schreiben ist der Editor. Hierfür gibt es unterschiedliche Varianten, welche alle mehr oder weniger das gleiche Ziel verfolgen. Code zu schreiben und zu bearbeiten. Unter allen Betriebssystemen gibt es hierfür einen Standard Editor. Unter Windows ist dies beispielsweise Notepad. Möchte man allerdings etwas mehr Komfort so bieten sich unterschiedliche Möglichkeiten an kostenfreier Software. Notepad++ Ist ein einfacher, kostenfreier, Editor. Er stellt alle wichtigen Funktionen zur Verfügung. Beispielsweise Codehighlighting, so wie das Öffnen mehrerer Dateien in einzelnen Tabs. Eclipse Ist ein sehr umfangreicher Editor. Er bietet die Möglichkeit zwischen einzelnen Views für die unterschiedliche Programmiersprachen und somit ein angepasstes Codehighlighting. Es können Projekte in entsprechenden Datei- und Ordnerstrukturen Verwaltet werden. Zusätzlich bietet dieser Editor die Möglichkeit einen HTTP-Server (beispielsweise Apache) mit in ein Projekt aufzunehmen und dieses direkt mit dem Server zu starten. Eclipse ist ein weitverbreiteter Editor und man findet viel Hilfe über Google und entsprechende Communities Netbeans Bietet einen ähnlichen Umfang wie Eclipse Sublime Ist mein persönlicher Favorit. Dieser Editor bietet alle grundlegenden Funktionen um Code einfach und sicher zu bearbeiten. Es bietet die Möglichkeit Projekte in Datei und Ordnerstrukturen zu verwalten, ein sehr gutes Codehighlighting und man kann mehrerer Dateien gleichzeitig nebeneinander Öffnen, so dass es sehr angenehmen ist, wenn man beispielsweise in zwei oder drei Dateien gleichzeitig arbeiten möchte. Webstorm Webstorm ist ein kostenpflichtiger Editor. Dieser ist allerdings perfekt auf die Bedürfnisse von Webentwicklern abgestimmt. Er bietet sehr viele Funktionen, auch für die Entwicklung Hybrider Apps. Es lohnt sich auf jeden Fall auf die Seite zu schauen.

Fazit:

Die Auswahl des Editors ist, neben den funktionalen Anforderungen, eine persönliche Entscheidung. Mit allen Editoren kann man Code bearbeiten. Man muss sich selbst entscheiden in welchem Umfang der Editor einen dabei unterstützten soll bzw. kann.

Loaker Webserver mit XAMPP:

XAMPP

XAMPP ist eine vollständig kostenlose, leicht zu installierende Apache-Distribution, die MariaDB, PHP und Perl enthält. Das XAMPP Open-Source-Paket wurde für eine extrem einfache Installation und Nutzung eingerichtet.

Um beispielsweise PHP ausführen zu können wird ein Webserver benötigt, da in diesem Fall HTML auf dem Client, PHP allerdings auf dem Server ausgeführt wird. Somit kann eine *.php Datei nicht einfach gespeichert und im Browser geöffnet werden. Xampp bietet hier eine einfache und sehr gute Lösung aus dem eigenen PC einen Webserver zu machen. Keine Angst, dieser ist nicht für das ganze Web zu erreichen. Dieser kann wahlweise nur über den eigenen PC (localhost) oder über das private Netzwerk erreicht werden. Gleichzeitig liefert XAMPP MySQL (Datendank) mit. Diese ist ebenfalls wahlweise über den localhost oder über das private Netzwerk zu erreichen. XAMPP steht sowohl für Windows, MAC und Linux zur Verfügung.

Videoanleitung zur Installation von Xampp unter Windows

Erste Schritte sobald der Webserver läuft:

Nun haben wir einen Editor und wir haben unseren eigenen kleinen Webserver mit Datenbank (lokal). Jetzt kann es eigentlich auch schon losgehen mit der ersten eigenen Webseite. Das einzige was nun noch fehlt. Webseiten können gedebugged werden. Auch hierfür stehen unterschiedliche Tools zur Verfügung. Die zwei bekanntesten sind FireFox + FireBug und Google Chrome mit den Developertools.

Firebug

Chrome Developer Tools

Diese Tools können Webseiten überwachen und Fehler direkt anzeigen. Es bietet außerdem einen Inspektor, mit welchem einzelne Elemente von Webseiten unter die Lupe genommen werden können. Beide bieten außerdem die Möglichkeit zur Webseiten Manipulation. Der Code einer geladenen Webseite kann dabei Live im Browser verändert werden. Die Änderungen werden direkt dargestellt, haben aber keine Auswirkungen auf den eigentlichen Code der Webseite. Nach dem nächsten Neuladen sind diese lokalen Änderungen wieder verschwunden. Allerdings bietet diese Funktionen gerade im Bereich des Webseiten Stylings (CSS) die Möglichkeit Änderungen zu Testen ohne immer wieder die eigentliche Datei bearbeiten, speichern und neuladen zu müssen.

Auch hierbei ist es wieder eine eher persönliche Entscheidung welchen Browser und welches Tool man verwenden möchte. Ich selbst nutze beide, vor allem um sicherzustellen, dass meine Webseite und die Scripte sich in beiden gleich verhalten. Zum abschließenden testen einer Webseite sollte man auch weitere Browser testen. Damit der man selbst diese nicht alle installieren muss bieten sich ein Tool wie Browserstack an. Hier der Testen unterschiedliche virtuelle System mit verschiedenen Betriebssystemen und Browser (Browserversionen) starten und Seiten testen. Dies bietet sich vor allem bei Webseiten an. Hybride Apps kann man ebenfalls im Browser bzw. Browserstack testen. Dies alles soll einen kleinen und schnellen Überblick über die Basic Software und Programme zur Webentwicklung geben.

Im nächsten Teil dieser Reihe wird Informationen zu den unterschiedlichen Betriebssystem geben. Unteranderem die Unterschiede bei der Installation der benötigten Programme für die Entwicklung einer Hybriden App und die Frage, warum man für eine Hybride iOS App zwangsläufig einen Mac benötigt.