Ich bin diese Woche in einer der WordPress-Gruppen auf Facebook über diese Frage gestoßen und dachte mir, ich mache einen ausführlichen Beitrag hier auf meinem Blog draus. Dieser Artikel richtet sich eher an Anfänger, die schon mal was mit WordPress (oder einem anderen System) gemacht haben. Wobei „gemacht haben“ sich auf so etwas wie Beiträge schreiben oder Plugins und Themes installieren und einrichten bezieht. Man kann mit WordPress schon sehr viel machen, ohne eine Zeile Code zu schreiben, aber über kurz oder lang kommt man einfach nicht „drum rum“. Beispielsweise, wenn du etwas in einem Theme ändern willst, was die Einstellungen nicht hergeben – da musst du an den Quellcode ran (nach Möglichkeit in einem Child-Theme, aber das würde den Rahmen jetzt hier sprengen).
Ich habe eine kurze Übersicht zusammengestellt mit den Sprachen, mit welchen du dich befassen solltest.
HTML (Hypertext Markup Language)
Das Skelett jeder Webseite
HTML ist DIE Grundlage für Webseiten. Dabei gibt es weitaus mehr als die <div> Container und die <p> Absätze. HTML ist dabei keine Programmiersprache, sondern eine Auszeichnungssprache. Die aktuelle Fassung ist HTML5, die gegenüber HTML4 und XHTML einige neue Elemente (bspw. Audio, Video, Section, Article, Aside) enthält. Eine tolle Ressource für Infos zu HTML, ist das Wiki von SELFHTML, auf das ich auch immer wieder zurückgreife.
Ein einfaches Beispiel:
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<p>Hallo Welt!</p>
</body>
</html>CSS (Cascading Style Sheets)
Damit es hübsch aussieht
Wenn du so grob weißt, wie eine Seite aufgebaut ist wirst du feststellen, dass diese gar nicht so schön aussieht, wie du es von vielen anderen Seiten gewohnt bist. Die Browser rendern das HTML ohne weitere Angaben zur Gestaltung sehr einfach und unspektakulär. Damit aus der Textwüste eine übersichtliche Seite wird, kommt die Stylesheet-Sprache CSS ins Spiel. Mit CSS kannst du nicht nur Farbe und Ausrichtung anpassen, sondern je nach Element viele weitere Dinge. Einen ersten Überblick kannst du dir im Wikipedia-Artikel zu CSS verschaffen. Auch bei SELFHTML gibt es einen großen Bereich zu dem Thema. Da nicht alle Browser alles unterstützen, gibt es die hilfreiche Seite Can I Use, auf der du zu jedem Feature abfragen kannst, ob die Browser das unterstützen.
Ein einfaches Beispiel:
body {
background-color: #444;
color: #fff;
}JavaScript
Die Skriptsprache (nicht nur) für das Frontend
Mit JavaScript – nicht zu verwechseln mit der Sprache Java – kommst du heute vermutlich als erstes im Frontend in Berührung. Wer kennt sie nicht, die Slider, Akkordeons, das Neuladen von Seiten, ohne das sich die Seite im Browser komplett lädt – all das lässt sich mit JavaScript clientseitig (also im Browser des Benutzers der Seite) realisieren. Für mehr Hintergrundwissen ist auch hier der Wikipedia-Artikel nicht verkehrt. Und auf SELFHTML möchte ich wieder verweisen, da du dort eine gute Übersicht über die nativen Elemente bekommst. Um JavaScript herum sind in den letzten Jahren viele Bibliotheken und Frameworks entstanden, z. B. jQuery, AngularJS, Backbone, React, Vue.js und noch viele mehr. Mit Node.js ist es möglich, JavaScript auch serverseitig auszuführen.
Ein einfaches Beispiel, mittels JavaScript etwas im Browser auszugeben:
<script type="text/javascript">
alert('Hallo Welt!');
</script>PHP (PHP: Hypertext Preprocessor)
Ohne PHP gäbe es kein WordPress
WordPress selbst basiert auf PHP, ebenso wie viele andere bekannte Systeme (z. B. Typo3, Joomla, Drupal, Contao). PHP wird komplett serverseitig ausgeführt. Auch hier ist für den ersten Überblick der Wikipedia-Artikel gut. Sehr ausführlich ist außerdem die PHP Dokumentation, die auf deutsch verfügbar ist. Die aktuelle Version ist PHP 7.1, die im Vergleich zur Vorgängerversion PHP 5.6 viele Neuerungen bereit hält und auch etwas schneller ist.
Ein einfaches Beispiel:
<?php echo 'Hallo Welt!'; ?>Was gibt es sonst noch für Sprachen?
Wenn wir bei der Webentwicklung bleiben wollen, sind Python und Ruby. Python und Ruby sind von der Syntax her schon etwas anders aufgebaut als PHP. Als bekannte Web Application Frameworks gibt es Django für Python und Ruby on Rails für Ruby. Natürlich gibt es noch viel mehr Sprachen, bei Wikipedia gibt es eine ganz schön lange Liste. 😉
Und wie lerne ich jetzt die ganzen Sachen?
Ich habe bewusst in dem Artikel nur auf Ressourcen verwiesen, nicht direkt auf Tutorials. Davon gibt es reichlich im Netz – ohne die mal selbst durchgearbeitet zu haben, kann ich da schwer sagen, welches Tutorial das Beste für dich ist. Auch Bücher gibt es reichlich zu diesen Themen. Ich persönlich habe sehr vieles durch learning by doing gelernt. Ich habe damals (anno 2003) mit einem Buch über HTML 4 angefangen. Vieles ist aber ausprobieren und recherchieren und wieder probieren und wieder recherchieren. Heute gibt es auch viele Video-Tutorials, falls du eher der Mensch für das Visuelle bist. Das Motto lautet eher: einfach ausprobieren, mit kleineren Änderungen anfangen und sich dann immer weiter steigern. Und: nicht davon abschrecken lassen, nicht alles bis ins Detail zu wissen. Ich weiß auch nicht alles und suche auch oft über Google nach einer Lösung oder frage jemanden, von dem ich weiß, dass er/sie Ahnung hat. 🙂
Kennst du noch weitere Ressourcen oder hast Tipps zu den einzelnen Sprachen? Was sind deine Erfahrungen mit dem Lernen der „Internet-Technik“?