Programmier- und Auszeichnungssprachen lernen und verstehen

"Programmierung" stammt vom altgriechischem Wort prĂłgramma und bedeutet "öffentlich und schriftlich bekannt gemachte Nachricht, bzw. Befehl". Durch die Verwendung einer Programmiersprache, kannst du dem Rechner Anweisungen erteilen. Sie heißt Sprache, da man erst einmal lernen muss, wie man mit einem Rechner kommuniziert.

Welche Programmiersprache soll ich lernen?

In der Webentwicklung lernt man zunÀchst eine "Auszeichnungssprache", wie HTML oder XML. Da sie nur eine Struktur vorgeben, nennt man diese noch nicht "Programmiersprache".

Diesen Begriff liest im Zusammenhang mit der Webentwicklung seltener. Denn fĂŒr den Laien ist eine Programmiersprache immer gleich: Man fĂŒhrt Magie mit dem Rechner aus. Begriffe, die weniger in den Köpfen der breiten Masse sind, verwendet man ungern im Rahmen der Suchmaschinenoptimierung. Das ist leider ein Teufelskreis. (Gleiches gilt fĂŒr den Begriff "Webdesigner". Damit meint man eigentlich den "Webentwickler".)

Aber zurĂŒck zum Thema. Eine Auszeichnungssprache findet in der Strukturierung von Inhalten seinen Platz. Also: Wo wird welches Element platziert?

Das Aussehen wird wieder mit einer Formatierungs-Sprache definiert. Und schließlich kann man mit einer Script- oder Programmier-Sprache dynamik auf eine Webseite bringen.

HTML Programmierung lernen: Die Struktur einer Webseite

Auszeichnungssprachen werden wie bereits erklĂ€rt fĂŒr die Strukturierung verwendet. Dadurch kann man dem Browser anweisen, wo sich welches Element befinden soll.

Ich empfehle dir zuerst HTML zu lernen, bevor du dich in Programmiersprachen einliest. Denn im Browser basiert so gut wie alles auf der Darstellung.

Vorbereitung fĂŒr die HTML-Programmierung

Um deine erste HTML-Struktur zu erstellen, benötigst du nur den Texteditor deines Betriebssystems. Unter Windows heißt dieser schon "Editor".

Im nÀchsten Beitrag lernst du richtige Quellcode-Editoren kennen, die dir mit der Erstellung von Webseiten helfen.

Achte zudem darauf, dass die Dateiendungen sichtbar sind. Denn zunÀchst legen wir eine Textdatei mit dem Editor an. Die Endung ".txt" zu ".html" musst du nach dem Speichern nur noch Àndern. Dein Betriebssystem wird dir mitteilen, dass die Datei dadurch unbrauchbar wird. Aber das ist schon in Ordnung.

Schon kannst du deine HTML-Datei in einem Browser öffnen. Aber natĂŒrlich fehlt noch der ganze Inhalt.

HTML Programmierung fĂŒr AnfĂ€nger

Du findest im Internet tausende Plattformen, auf denen du HTML lernen kannst. Davon ist W3C einer der Besten. Zumindest meiner Meinung nach.

W3C bringt dir nicht nur alle gĂ€ngigen Websprachen bei, sondern sie legen auch Standards fĂŒr das Web fest. Irgendjemand muss das ja tun.

Einige AnfÀnger steigen auch mit der Lernplattform von SelfHTML.org ein. So habe ich auch die Webentwicklung gelernt.

SelfHTML.org bietet sehr einsteiger-freundliche Anleitungen. Dadurch kannst du HTML im Nu lernen.

Ich empfehle dir beide Plattformen anzusehen. Sie bieten Ă€hnlich gute Anleitungen. Dadurch ist es Geschmacksache, welche der beiden Plattformen du fĂŒr den Einstieg auswĂ€hlst.

Das umsteigen von der einen zur anderen Plattform kann nur ein bisschen verwirrend sein, da sie unterschiedliche Strukturen besitzen. Zudem werden die Lerninhalte in verschiedenen AblÀufen beigebracht.

HTML fĂŒr Fortgeschrittene

Eigne dir beim Einstieg in HTML auch XHTML an. Die beiden Auszeichnungssprachen unterscheiden sich nicht arg voneinander.

XHTML ist etwas straffer als HTML. Dadurch kannst du aber sicherstellen, dass alle Browser die Elemente verstehen.

Eines der wichtigsten Bedingungen von XHTML ist die richtige Verwendung der Tags. Zu jedem geöffnetem Tag muss es auch ein Schließendes geben. Einzelne Tags, wie <input> benötigen vor dem schließenden Zeichen ">" dringend einen Backslash "/".

Ob man eine Webseite in HTML oder XHTML programmiert, bleibt aber dem Webentwickler ĂŒberlassen.

Bring Farbe mit CSS in deine Struktur

CSS ist weder Programmier- noch Auszeichnungssprache. Sie ist eine Stylesheet-Sprache, die ĂŒberwiegend fĂŒr Webseiten verwendet wird.

Mit ihr kannst du den HTML-Elementen Form und Farbe verleihen. Dadurch wird eine moderne Webseite erst ansehnlich.

Mit CSS kannst du auch Animationen erstellen. Im Gegensatz zu JavaScript-Animationen laufen diese auch wesentlich flĂŒssiger, da sie weniger Leistung brauchen.

CSS verstehen und anwenden

SelfHTML.org hat einen eigenen Bereich, der das Thema CSS behandelt. Hier lernst du sehr einfach alle Aspekte der Stylesheet-Sprache.

Das Kaskadieren des "Cascading StyleSheets" behandelt SelfHTML.org ebenfalls. Leider beachten viele Webentwickler das Kaskadieren von CSS nicht. Deshalb tun sich manche Entwickler schwer Regeln zu ĂŒberschreiben, um einen Code eines anderen Entwicklers anzupassen.

Vermeide "!important" in CSS

Mit der Verwendung des Werts !important, kann die spÀtere Bearbeitung von Webseiten zu einem "Pain in the A**" werden (wie der EnglÀnder so schön sagt). Leider lernen Einsteiger die Kaskadierung nicht richtig, weshalb dieser Wert sehr hÀufig bei Semi-Professionellen Webseiten zum Einsatz kommt.

Durch den Befehl !important ist das Überschreiben eines CSS-Attributs zwar immer super einfach, aber man hat hinterher das Problem, dass sich diese Formatierung sehr schwer ĂŒberschreiben lĂ€sst. Verwende deshalb den Wert !important nur fĂŒr den Ă€ußersten Notfall!

Anfangs stellt die Verwendung eines !important keine große HĂŒrde da. Sobald du aber immer tiefer in die Materie einsteigst, kannst du zunehmend feststellen, dass die Regeln mit diesem Wert Probleme bereiten.

 

Webseite mit JavaScript erstellen

Mit der EinfĂŒhrung der Skriptsprache "JavaScript" konnte man nun erstmals eine Dynamik fĂŒr Webseiten erstellen. Zum ersten Mal konnten die Inhalte einer Webseite wĂ€hrend der Laufzeit bearbeitet werden. JavaScript kann auch Aktionen des Benutzers auswerten und je nach Fall Programme ausfĂŒhren.

Heute ist JavaScript nicht mehr wegzudenken. Es gibt nur noch sehr wenige Webseiten, die kein JavaScript verwenden. Alleine wenn die Webseite Google Analytics verwendet, benutzt sie dadurch JavaScript.

Der Name stammt von der Progrmmiersprache "Java". Jedoch haben die beiden Sprachen nichts miteinander gemein. WĂ€hrend JavaScript rein Skript-Basiert arbeitet, verwendet man in Java ausschließtlich Objekte, die von Klassen stammen.

Zudem wird Java ĂŒberwiegend in der Anwendungsentwicklung eingesetzt. JavaScript hingegen wird mehr in der Webentwicklung eingesetzt.

Man wollte mit dem Namen "JavaScript" die Bekanntheit von Java aufgreifen. Anscheinend hat das was gebracht.

JavaScript Bibliotheken einbinden

Du musst nicht alle JavaScript-Funktionen "From Scratch" entwickeln. Durch die Verwendung von Biliotheken kann man die Funktionen von JavaScript erweitern.

Eine Bibliothek ist eine Sammlung von Funktionen, die ein anderer Programmierer entwickelt. Damit kannst du dir einige Schritte deines gewĂŒnschten Programms sparen.

Die wohl bekannteste Sammlung von Funktionen ist wohl jQuery.

Der Trend bewegt sich aber immer weiter weg von diesem Script. Denn JavaScript hat im letzten Jahr einige Updates bekommen, um zum Beispiel Elemente wesentlich einfacher zu selektieren. Das war einer der HauptgrĂŒnde, warum jQuery bei vielen Webseiten ĂŒberhaupt zum Einsatz gekommen ist.

Die Webseite You Might Not Need jQuery hilft dir bei einigen Funktionen, die du sonst mit jQuery umgesetzt hÀttest.

  • Erstellung von Animationen der HTML-Elemente
  • Analysieren der Benutzereingaben fĂŒr bestimmte Felder und Bereiche
  • VerĂ€ndern der CSS-Formatierung wĂ€hrend der Laufzeit deiner Webseite
  • Entwicklung dynamischer Inhalte, wie die YouTube 2-Klick-Lösung

Spiele mit JavaScript programmieren

Hast du schon einmal ein Spiel im Browser gespielt? Vor einigen Jahren entwickelte man Browser-Spiele ausschließlich in Flash. Da Flash aber als unsicher gilt, musste eine andere Lösung her.

Mit der kostenlosen JavaScript-Bibliothek Phaser.io erhĂ€ltst du ein ganzes Ökosystem an Funktionen, die nur fĂŒr die Spieleentwicklung gedacht sind.

Aber auch ohne eine solche Bibliothek ist es Möglich ein JavaScript-Spiel zu entwickeln. Schau dir meinen Beitrag zum Einstieg in die Spiele-Entwicklung mit JavaScript an.

Der Beitrag zeigt dir nicht, wie du ein richtiges Spiel Programmierst, dass du verkaufen könntest. Es ist eine Einstiegshilfe, damit du lernst wie ein Spiel in JavaScript funktioniert.

Nach dieser Beitragsreiehe empfehle ich dir eine richtige Engine wie Phaser zu lernen. Damit kannst du jedes 2D-Spiel entwickeln, dass du dir vorstellst!

Serverseitiges JavaScript

Wenn du dich gegen die Verwendung von PHP entscheidest, stĂ¶ĂŸt du wahrscheinlich irgendwann auf NodeJS.

Stelle dir NodeJS als serverseitiges JavaScript vor. Dadurch kann der Browser und der Server in Echtzeit miteinander kommunizieren. Durch die Erweiterung Socket.IO ist es sogar möglich, dass der Server Daten an den Client sendet, ohne dass die Seite neu lÀdt.

Stelle dir einmal vor, dass du mit deinen Kindern im Auto fÀhrst. Deine Kinder werden dich stÀndig fragen, ob man schon da ist. Darauf antwortest du immer genervter "BALD!!!".

Nun stelle dir ein Chat-Fenster vor. Mit PHP wĂŒrde man typischerweise ein AJAX-Script (das Kind) entwickeln, dass den Server (der Vater) stĂ€ndig frĂ€gt, ob es eine Aktualisierung gibt. Sobald mehrere Browser den Server nach einer Aktualisierung fragen, kann das ganz schön auf die Leistung (oder Nerven) der Servers gehen. Zudem gibt es eine gewisse Latenz, da die Daten erst gesendet und danach wieder empfangen werden.

Besser wÀre es doch, wenn der Server automatisch bescheid gibt, sobald eine Aktualisierung vorliegt. Damit spart man sich auch einmal den Hinweg der Daten.

Wie schön das wÀre, wenn die Kinder wÀhrend der Fahrt einfach mal Still sind und erst dann reagieren, wenn du ihnen sagst: "Wir sind da!"

Desktop-Anwendungen mit JavaScript entwickeln

JavaScript ist verdammt vielseitig. Nun haben wir die Webentwicklung, die Spieleentwicklung und die Serverentwicklung durch.

Was, wenn ich dir sage, dass du sogar Desktop-Applikationen mit JavaScript erstellen kannst?

Vor 10 Jahren noch ein Ding der Unmöglichkeit, heute mit Electron leicht zu realisieren.

Kennst du Microsoft Teams? Oder Skype? Beide Programme wurden mit Electron entwickelt! Diese Wunderwaffe ist der Vater von noch so vielen weiteren bekannten Programmen.

Zudem (und das ist meiner Meinung nach ein ziemlich geniales Feature) ist Elector Cross-Plattform-FĂ€hig. Dadurch kannst du eine Applikation nicht nur fĂŒr den Desktop entwickeln, sondern auch fĂŒr jedes andere GerĂ€t bereitstellen. One Engine to Rule them all! 😉

 

In den spÀten 1990ern war der RPG Maker auch im Kommen. Mit diesem Programm konnten sogar Laien ohne Programmier-Kenntnisse ein Spiel entwickeln.

Das Programm wurde stetig weiterentwickelt und fĂŒr die Anforderungen der heutigen Zeit poliert. Die neueste Version RPG Maker MV basiert ebenfalls auf JavaScript.

Sofern du dich in JavaScript eingearbeitet hast, kannst du tolle Erweiterungen fĂŒr diese Engine entwickeln und das Spiel deiner TrĂ€ume entwickeln.

 

JavaScript wird allem Anschein nach noch lange nicht aussterben. Die Sprache wird immer weiterentwickelt und Erweiterungen gibt es auch immer mehr.

Meine Empfehlung: Auch wenn du deine Passion nicht in der Webentwicklung siehst, macht es dennoch Sinn JavaScript zu erlernen. Wer weiß, in welchen Bereichen JavaScript in Zukunft sonst noch Verwendung findet?

Daten sicher mit SQL bewahren

SQL ist eine Abfragesprache. Das bedeutet, dass du damit Abfragen erstellen kannst... Ziemlich blöde ErklÀrung... Aber lies weiter, dass spannende kommt noch!

Die Structured Query Language findet bei Datenbanken ihre Verwendung. Stelle dir einfach vor, du möchtest Daten deines Besuchers auf deiner Webseite speichern. Diese Daten sichert man in einer Datenbank.

Um an diese Daten heranzukommen benötigst du SQL. Egal ob du die Daten sichern, bearbeiten, löschen oder einfach nur abfragen möchtest.

Verstehst du nun, warum SQL eine "Abfragesprache" genannt wird?

Ich kenne kein Content Management System, dass keine Datenbank benötigt, um zu funktionieren. Und jedes dieser CMS verwendet auch SQL um die Daten zu verwalten.

SQL-Datenbanken in der Ausbildung

SQL macht einen Großteil der Ausbildung eines Informatikers aus. Dabei ist es irrelevant, ob man den Beruf des Systemintegrators oder den des Anwendungsentwicklers wĂ€hlt. Denn Datenbanken kommen nicht nur bei Webseiten vor, sondern auch in vielen Applikationen. Zudem werden Datenbanken auch fĂŒr als Basis einiger Programme benötigt. Das richtet in der Regel ein Integrator ein.

Die AbschlussprĂŒfung eines Informatikers endet mit einer mĂŒndlichen PrĂŒfung. In meinem Abschlussjahr wurde der Großteil aller Entwickler auf SQL abgefragt. Solltest du also gerade in der Ausbildung zum Entwickler sein, empfehle ich dir dich gut in SQL einzuarbeiten.

Was sind Datenbanken und wofĂŒr werden sie genutzt

Stelle dir Datenbank als eine Vielzahl von Excel-Tabellen vor. Eine Tabelle hat mehrere Zeilen und Spalten.

Eine Spalte beschreibt immer einen bestimmten Wert, wie einen Namen oder eine Adresse. Eine Zeile mit allen Spalten ist ein Datensatz. Und jeder Datensatz besitzt eine eindeutige Kennung: Die ID.

Damit du auf eine Spalte eines bestimmten Datensatzes zugreifen kannst, musst du zunĂ€chst die ID wissen. NatĂŒrlich kannst du auch alle DatensĂ€tze wĂ€hlen. Es ist auch Möglich alle DatensĂ€tze anzeigen zu lassen, deren Spalte "Name" mit "A" beginnt.

Im Gegensatz zu Excel kann eine Zelle aus einem bestimmten Typ bestehen. Dieser Typ ist zum Beispiel ein "bool'scher" Wert (wahr oder falsch). Es gibt auch Zeichenketten (String), ganze Zahlen (Integer), Gleitkommazahlen (Float) und noch mehr.

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 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 Anlaufstelle zum Erlernen von SQL.

Durch die ID kann man auch mehrere DatensĂ€tze oder sogar Tabellen miteinander verbinden. Das geschieht durch einen "Foreign Key", der mit dem "Primary Key" (unsere ID) verknĂŒpft ist.

Damit ist es Möglich einen Adresssatz in eine Tabelle "Adressen" abzulegen. Der entsprechende Datensatz in der Tabelle "Kunden" erhÀlt dann einen Foreign Key, der auf den Primary Key der Adresse zeigt.

Sollten nun mehrere Personen im gleichen Haushalt auf deiner Plattform angemeldet sein, erhalten sie alle einen Foreign Key zur gleichen Adresse. Dadurch kann man sich einiges an Daten in der Datenbank sparen. (Spoiler: So etwas kommt auch in der Berufschule vor!)

PHP Programmierung fĂŒr AnfĂ€nger

PHP ist ein rekursives Akronym fĂŒr PHP: Hypertext Preprocessor.

Es ist eine "Skriptsprache", um auf dem Server Funktionen auszufĂŒhren. Uunter Programmierern gibt es immer wieder Debatten, ob es wirklich nur eine Skriptsprache ist.

Da PHP Klassen und Objekte kennt, kann es nÀmlich genauso gut eine objektorientierte Programmiersprache sein.

Diese Debatte möchte ich in diesem Beitrag ungern aufgreifen. 🙂

PHP auf einem Server ausfĂŒhren

PHP ist im Gegensatz zu JavaScript oder HTML keine Sprache, die man einfach nur im Browser ausfĂŒhren kann. Du benötigst einen Server mit dem installierten PHP-Service, um es ausfĂŒhren zu können.

Die meisten Entwickler kaufen sich nicht extra einen eigenen Server, um PHP zu testen oder zu lernen. Du kannst auf deinem Windows-GerÀt auch XAMPP installieren. Mit diesem kostenlosen Programm verwandelst du deinen privaten Rechner in einen Server.

Solltest du Linux prÀferieren, kannst du LAMPP installieren. Beide Programme funktionieren Àhnlich.

Nachdem du ein PHP-Programm erstellt hast und es veröffentlichen möchtest, kannst du dir einen Webspace auf einem externen Server mieten. Die Preise variieren dabei stark. DafĂŒr benötigst du aber zusĂ€tlich eine Domain, die bei den meisten Anbietern aber bereits enthalten ist.

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.

Manche CMS unterstĂŒtzen auch NodeJS, aber den grĂ¶ĂŸten Marktanteil behĂ€lt PHP. Und das wird wahrscheinlich noch lĂ€nger andauern.

Beachte aber, dass es keinen anderen Grund gibt PHP zu lernen, außer die Programmierung von Webseiten oder Web-Applikationen. Zumindest ist mir kein anderer Anwendungsfall bekannt. Schreib gerne einen Kommentar, falls du noch einen Grund kennst, warum man PHP lernen sollte!

PHP mit SQL-Server verwenden

PHP und SQL gehen Hand in Hand. Solltest du PHP lernen, empfielt es sich auch SQL zu studieren.

Mit einer PHP-Funktion kannst du eine Verbindung zur Datenbank ĂŒber SQL aufbauen. Dadurch kannst du Daten abfragen und auf deiner Webseite projizieren.

Solltest du einen Login-Bereich fĂŒr deine Webseite vorsehen, kannst du die verschlĂŒsselten Zugangsdaten einfach mit PHP in der Datenbank hinterlegen. Bei einem Login-Versuch rufst du diese gesicherten Daten auf und vergleichst sie mit der Eingabe des Benutzers.

Stelle in diesem Fall bitte sicher, dass deine Benutzer sichere Passwörter verwenden. Das kannst du mit entsprechenden Abfragen bewerkstelligen. Zudem ist es sinnvoll deinen Benutzern einen sicheren Passwort Generator zur VerfĂŒgung zu stellen.

PHP Beispiele fĂŒr AnfĂ€nger

Schau mal bei Stack Overflow vorbei. Zu fast jedem PHP-Problem findest du hier eine Antwort.

Denn die meisten Probleme hatte bereits einige Entwickler vor dir schon einmal.

Damit du das Rad nicht neu erfinden musst, kannst du auch mal bei Plattformen wie Github vorbeischauen. Hier findest du unzÀhlige Projekte, die dir bei der Erstellung ganzer Webseiten oder Teilbereichen helfen.

Von fertigen Programmen kannst du immer was dazu lernen. Außerdem kannst du dir auch eine Menge Zeit sparen, indem du fertigen Code wiederverwendest.

 

Fun Fact zu PHP: UrsprĂŒnglich hat Rasmus Lerdorf im Jahr 1994 PHP entwickelt. Es sollte eigentlich 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