Programmier- und Auszeichnungssprachen lernen und verstehen

"Programmierung" stammt vom altgriechischem Wort prógramma und bedeutet "öffentlich und schriftlich bekannt gemachte Nachricht, Befehl". Eine "Programmiersprache" wird dazu verwendet dem Rechner oder einem bestimmten Programm auf einem Rechner zu sagen, wie es sich verhalten soll.

Welche Programmiersprache soll ich lernen?

Zum Beginn des Lernprozesses in der Webentwicklung sind die "Auszeichnungssprachen" wichtiger als richtige Programmiersprachen. Diesen Begriff liest man im Bereich der Entwicklung seltener als "Programmiersprache". Du bist aber bestimmt schon einmal ĂŒber die ein oder andere Auszeichnungssprache gestolpert. Eine Markup-Language wie XML oder HTML definiert eine Struktur oder ein Schema einer Ressource, wie zum Beispiel eine Webseite. Mit Ihnen erklĂ€rt man zum Beispiel einem Browser, wo welcher Inhalt gesetzt wird.

Die wichtigsten Programmier- und Auszeichnungssprachen, die Du kennen solltest, erklÀre ich dir hier etwas genauer und zeige Dir Quellen, wo du die jeweilige Sprache am besten lernen kannst.

HTML Programmierung lernen: Die Struktur einer Webseite

Wie bereits erwÀhnt ist HTML eine Auszeichnungssprache und wird im Web-Bereich verwendet, um Inhalte wie Texte und Bilder zu strukturieren. Ohne diese Sprache kann ein Web-Entwickler keine Webseite erstellen.

Vorbereitung fĂŒr die HTML-Programmierung

Um HTML-Code vorzubereiten benötigt man nur ein Programm, mit dem man unformatierten Text verfassen kann. Dabei reicht schon der vorinstallierte Texteditor in Windows. Fortgeschrittene Entwickler setzen aber in der Regel auf Quellcode-Editoren, die neben dem Syntax-Highlighting (das hervorheben von bestimmten Quellcode-Bereichen) viele weitere nĂŒtzliche Funktionen bieten. Die Aufbereitung durch das Highlighting des Quelltexts wird durch das setzen von Schriftfarbe leserlicher und kann zusammenhĂ€ngende Blöcke erkenntlicher machen.

HTML fĂŒr Fortgeschrittene

Ein weiterer wichtiger Begriff, der oftmals nur am Rande beim Einstieg in die Web-Entwicklung diskutiert wird ist XHTML. Diese Erweiterung von HTML beschreibt, dass der erstellte HTML-Code W3C-Konform ist. Das bedeutet, dass alle VorschlĂ€ge von W3C umgesetzt sind und es zu jedem geöffnetem Tag auch ein schließendes gibt. Eigene Attribut-Kreationen mĂŒssen zum Beispiel einer strikten W3C-Struktur folgen. Ob der Entwickler seine Webseite XHTML-Konform gestaltet oder nicht bleibt ihm selbst ĂŒberlassen.

HTML Programmierung fĂŒr AnfĂ€nger

Im Internet gibt es Hunderte Plattformen auf denen Du HTML lernen kannst. Eine der besten Webseiten ist die Lernplattform von W3C, die nicht nur alle gĂ€ngigen Websprachen beibringen, sondern auch die Standards fĂŒr das Web festlegen. Viele AnfĂ€nger vor dir steigen mit einer weiteren guten Lernplattform SelfHTML.org fĂŒr die Webentwicklung ein. SelfHTML.org bietet nicht nur einsteiger-freundliche HTML-Tutorials, sondern auch fĂŒr weitere Sprachen die ich weiter unten noch einmal verlinken werde.

Meine Empfehlung: Du solltest dir beide Webseiten ansehen und danach entscheiden, mit Welcher du deinen Einstieg in die Web-Programmierung beginnen möchtest.

Ein Wechsel zur jeweils anderen Seite wĂ€hrend des Lernprozesses ist zwar möglich, jedoch entscheiden sich die Plattformen strukturell und inhaltlich ein wenig, was bei einem Umstieg etwas verwirrend sein kann, wenn man sich an eine der Beiden gewöhnt hat. Du brauchst dir aber nicht viel Zeit fĂŒr eine Entscheidung nehmen. Beide Seiten sind super beschrieben und auch fĂŒr Einsteiger sehr gut geeignet.

Bring Farbe mit CSS in Deine Struktur

Das Cascading StyleSheet ist weder Programmier- noch Auszeichnungssprache, sondern eine sogenannte Stylesheet-Sprache. Sie geht Hand in Hand mit HTML, findet aber auch in anderen Bereichen Verwendung.

CSS verstehen und anwenden

Um zu verstehen wie CSS funktioniert empfehle ich Dir die Webseite von W3C oder SelfHTML aufzusuchen und die Beschreibungen durchzulesen. Viele AnfĂ€nger ĂŒberlesen gerne das "Cascading" in CSS, was so viel wie "kaskadieren" oder "herabstĂŒrzen" bedeutet. Durch das kaskadieren kannst du bestimmte Formatierungen einer CSS-Klasse durch eine höhere Kaskade ĂŒberschreiben.

Vermeide "!important" in CSS

Mit der Verwendung des Werts !important, dass von zu vielen Einsteigern zu hĂ€ufig Verwendung findet, kann die spĂ€tere Bearbeitung von Webseiten zu einem "Pain in the A**" werden (wie der EnglĂ€nder so schön sagt). Mit dem Befehl !important klappt das Überschreiben eines CSS-Attributs zwar immer super einfach, aber man hat hinterher immer das Problem, dass sich diese Formatierung wieder sehr schwer ĂŒberschreiben lĂ€sst. Viele Web-Entwickler raten dazu !important nur fĂŒr den Ă€ußersten Notfall zu verwenden.

Am Anfang des CSS-Learnings mag das keine hohe Bedeutung finden, jedoch wird dieses Thema immer interessanter, sobald Du als Entwickler auf schwierigere Formatierungen und damit grĂ¶ĂŸere HĂŒrden stĂ¶ĂŸt.

In einem der ersten Artikel ĂŒber CSS findest Du auf SelfHTML.org gute Beispiele zur Kaskadierung. Nimm Dir diesen Tipp von einem Entwickler zu Herzen, der in seinen AnfĂ€ngen genau diesen Fehler gemacht hat ;)

Webseite mit JavaScript erstellen

Die Skript-Sprache JavaScript wurde entwickelt um Elemente im Internet wÀhrend der Laufzeit im Browser zu Àndern, Benutzerinteraktionen auszuwerten und weitere Inhalte nachzuladen oder zu Àndern. Damit kann man zum Beispiel einen Passwort Generator erstellen oder die Bilder auf der Webseite nachladen lassen.

Man wollte mit dem Namen die Bekanntheit gleich zur Veröffentlichung steigern, da jeder Entwickler die Programmiersprache "Java" bereits bei der Erscheinung von JavaScript kannte. Die beiden Sprachen haben aber nicht viel gemeinsam. Java wird fĂŒr die Entwicklung von Anwendungen und JavaScript fĂŒr die Dynamisierung von Inhalten im Browser verwendet.

JavaScript Bibliotheken einbinden

Es gibt viele Bibliotheken, die dem Entwickler eine breite Palette an vorgefertigten Algorithmen bereitstellen, um die Programmierung zu vereinfachen. Eine der bekanntesten JavaScript-Bibliotheken fĂŒr Webseiten ist jQuery, das unter anderem die Selektierung von Elementen und AJAX-Abfragen deutlich erleichtert und bereits viele vorgefertigte Funktionen bereithĂ€lt, um zum Beispiel

  • CSS-Formatierungen wĂ€hrend der Laufzeit zu verĂ€ndern
  • Benutzereingaben fĂŒr bestimmte Felder und Bereiche zu analysieren
  • Animationen von Elementen zu erstellen
  • dynamische Inhalte, wie eine YouTube 2-Klick-Lösung zu entwickeln

Spiele mit JavaScript programmieren

Es gibt sogar JavaScript-Bibliotheken, die Funktionen zur Spiele-Programmierung bereithalten. Eines der bekanntesten und neuesten Game Engines fĂŒr JavaScript ist Phaser.io. Mit diesem Framework kann man Spiele nicht nur fĂŒr den Browser, sondern auch fĂŒr das Smartphone und Tablets entwickeln.

Kennst du schon meine Beitragsreihe zum Einstieg in die Spiele-Entwicklung mit JavaScript? Hier erklÀre ich, wie du ein einfaches Spiel ganz ohne Bibliothek oder Framework erstellen kannst. Dabei lernst du den grundsÀtzlichen Aufbau eines Spiels und kannst es nach der Beitragsreihe nach belieben anpassen.

Serverseitiges JavaScript

Solltest Du Dich gegen die Verwendung von PHP entschieden haben, wirst Du wahrscheinlich auf NodeJS stoßen. Du kannst Dir NodeJS als Server-Seitiges JavaScript vorstellen, dass mit dem Client Deiner Webseite in Echtzeit ĂŒber die NodeJS-Erweiterung socket.io kommunizieren kann. NatĂŒrlich enthĂ€lt NodeJS noch viele weitere Funktionen mit denen Du zum Beispiel Deine Webseite, einen Live-Chat, oder sogar ein Multiplayer-Spiel erstellen kannst.

Desktop-Anwendungen mit JavaScript

Aber nicht nur in der Web-Programmierung findet JavaScript seinen Platz, sondern mittlerweile in Programmen, wie den RPG Maker. Mit dieser Spiele-Entwicklungs-Software, die seit 1992 entwickelt wird, kannst Du ohne Kenntnisse in der Programmierung Dein eigenes Spiel im Stil der alten Final Fantasy Spiele oder Chrono Trigger erstellen. Fortgeschrittenere RPG-Maker-Entwickler können mit Ihren eigenen Skripten mit JavaScript noch mehr aus dem Spiel herausholen. In der neuesten Version RPG Maker MV werden alle verfĂŒgbaren Plugins von Drittanbietern ausschließlich mit JavaScript programmiert und zur Einbindung in Dein Spiel als .js-Dateien bereitgestellt. Der RPG Maker MV ist bereits ab 80 $ erhĂ€ltlich. Steam bietet sogar hin und wieder großzĂŒgige Rabatte fĂŒr die Software an.

Kleine Randinfo: Als ich 13 Jahre alt war, habe ich die ersten AnfÀge der Programmierung mit dem RPG Maker 2000 gemacht. Damit habe ich zwar nicht richtig programmiert, aber es hat mir beim Aufbau meiner Logik-Kenntnis sehr geholfen.

 

JavaScript wird allem Anschein nach lange nicht aussterben, da es immer weiter entwickelt wird und es immer mehr Erweiterungen und Bibliotheken gibt. Auch wenn Du kein Web-Entwickler werden möchtest macht es dennoch Sinn Dir diese Skript-Sprache anzueignen.

Daten sicher mit SQL bewahren

Die Abfragesprache SQL (Kurzform fĂŒr Structured Query Language) wird verwendet um Datenbanken zu Erstellen und zu Bearbeiten. Jedes Moderne CMS hat eine Datenbank-Anbindung, in der die Inhalte, Einstellungen und weitere Daten in verschiedene Formen gesichert sind. Auch reine PHP-Webseiten ohne CMS verwenden in den meisten FĂ€llen eine Datenbank um Informationen zu Benutzern zu speichern. Das kann zum Beispiel der Benutzername oder das Passwort sein.

SQL-Datenbanken in der Ausbildung

In der Ausbildung eines Informatikers ist SQL neben der Programmierung mit Java oder C#, eine der grĂ¶ĂŸten Themenbereiche. Sie beansprucht einen Großteil der Ausbildungszeit, da Datenbanken nicht nur bei Webseiten vorkommen, sondern ein Bestandteil von allen Anwendungen, Apps oder Ähnliches sein kann.

Nicht nur Programmierer lernen den Umgang mit Datenbanken, sondern auch Systemintegratoren. In beiden Ausbildungsberufen ist es wahrscheinlich, dass die Auszubildenden in der AbschlussprĂŒfung danach ausgefragt werden.

Vorsicht, Spoiler fĂŒr die AbschlussprĂŒfung: Gerade Auszubildende der Anwendungsentwicklung sollten sich sehr gut auf SQL vorbereiten.

Was sind Datenbanken und wofĂŒr werden sie genutzt

Datenbanken bestehen immer aus Tabellen, die wie in Excel Zeilen und Spalten haben. Um auf eine Spalte Zugriff zu bekommen muss ein Index der Zeile angesteuert und mit den richtigen Befehlen die entsprechende Spalte der Zeile gewÀhlt werden. Im Gegensatz zu Excel können Spalten unterschiedliche Typen besitzen, z.B. eine Zahl (Integer), oder eine Zeichenkette (String), oder einen bool'schen Wert (wahr oder falsch).

Hier siehst Du ein Beispiel einer einfachen Abfrage eines Datensatzes in SQL:

SELECT vorname FROM spieler WHERE id = 1;

Mit dieser Zeile erhĂ€lt man den Datensatz "vorname" einer Zeile mit der ID "1" aus der Tabelle "spieler". Das klingt anfangs vielleicht etwas befremdlich, aber wenn Du Dich einmal in SQL eingefunden hast sollte das kein Problem mehr fĂŒr Dich darstellen.

Auf SelfHTML.org oder W3C kannst Du Dir Grundkenntnisse zu SQL aneignen. Die Webseite sql-lernen.de bietet Dir auch eine gute und einfache Möglichkeit Dir die Abfragesprache zu erlernen.

Es ist Möglich mehrere DatensĂ€tze von unterschiedlichen Tabellen miteinander zu verknĂŒpfen. In diesem Fall verwendet man in der Stamm-Ressource einen sogenannten Primary Key (HauptschlĂŒssel) und in der zu verknĂŒpfenden Ressource einen Foreign Key (FremdschlĂŒssel). Damit kann man zum Beispiel den Adress-Satz einer Person in einer Tabelle auslagern und ihn mit dem Benutzer verknĂŒpfen, um die Daten Atomar zu trennen. Sollten sich dann Personen im gleichen Haushalt auf der Webseite oder der App anmelden kann der Adress-Datensatz mit beide Benutzer verknĂŒpft werden, um somit die GrĂ¶ĂŸe der Daten in der Tabelle zu reduzieren.

PHP Programmierung fĂŒr AnfĂ€nger

PHP ist ein rekursives Akronym fĂŒr PHP: Hypertext Preprocessor und ist eine Open-Source "Skriptsprache" die dazu verwendet wird auf dem Server Algorithmen auszufĂŒhren. Unter Programmierern gibt es immer wieder Debatten, ob PHP nun eine Skriptsprache oder eine Objekt-Orientierte-Sprache ist, da sie viele Merkmale des OOP's besitzt.

PHP auf einem Server ausfĂŒhren

Um PHP auf seinem Webserver ausfĂŒhren zu können, muss der Service darauf installiert und entsprechend konfiguriert werden. Falls Du kein Geld hast um dir einen Server oder einen Webspace zu mieten kannst Du auch mit XAMPP fĂŒr Windows oder LAMPP fĂŒr Linux einen lokalen PHP-Server installieren. Alternativ gibt es in unterschiedlichen Preiskategorien Webserver, die Du Dir zusammen mit einer Domain mieten kannst, um Deine Webseite zu erstellen. Du solltest beachten, dass PHP-Code nur mit einem entsprechenden Compiler ausgefĂŒhrt werden kann. Das bedeutet, dass Du PHP-Dateien nicht in Deinem Browser ohne einem geeignetem Webserver oder Service ausfĂŒhren kannst.

Content Management Systeme mit PHP

PHP kommt in fast jedem gĂ€ngigem Content Management System wie WordPress, Typo3, Magento oder Shopware vor. Wenn Du ein CMS fĂŒr Deine Webseite verwenden und Anpassungen vornehmen möchtest wirst Du um PHP nicht herum kommen.

PHP mit SQL-Server verwenden

Gerade mit der Verwendung von SQL wirst Du PHP benötigen. Mit einem PHP-Algorithmus kannst Du eine Verbindung zur Datenbank aufbauen und einen SQL-Befehl ĂŒbermitteln. Nachdem die Datenbank die passenden Daten zu Deinem Befehl herausgesucht oder bearbeitet hat erhĂ€ltst Du einen RĂŒckgabewert, der entweder Deine Daten oder eine Fehlermeldung enthĂ€lt.

PHP Beispiele fĂŒr AnfĂ€nger

Viele Entwickler veröffentlichen Ihre erstellten Klassen und Funktionen als OpenSource auf Plattformen wie Github oder Stack Overflow. Mit vorgefertigten Algorithmen kannst Du Dir als Entwickler immer eine Menge Arbeit sparen und vor allem von etablierten Programmierern lernen.

 

Fun Fact zu PHP: UrsprĂŒnglich wurde PHP von Rasmus Lerdorf im Jahr 1994 entwickelt. Es sollte nie eine vollwertige Programmiersprache werden. Lerdorf hatte sich eine Reihe an C-Programmen zusammengestellt, mit der er seine Webseite verwalten wollte.

 

Codepalm
Deine erste Webseite programmieren
Teil 1: Programmiersprachen fĂŒr Webseiten lernen