dsfsdf

Responsive Webdesign & Mobile First – Einstieg

Sie möchten ein eigenes Webprojekt umsetzen und sind sich nicht ganz sicher, welche Programmiersprache Sie benötigen? Welche Anforderungen müssen Sie erfüllen? Und wie funktioniert eigentlich Webentwicklung? Kein Problem, ich erkläre Ihnen, wie es geht. Hallo und herzlich willkommen, liebe Xperts, in einem neuen Basiswissen-Video wollen wir heute ein paar grundlegende Fragen zur Webentwicklung klären.

Wir schauen uns an: Wie funktioniert eine Website überhaupt? Was macht ein Webserver, was macht der Browser? Muss ich überhaupt programmieren können? Wenn ja, in welcher Sprache? Die Grundfrage aller Fragen!

Wie und womit fange ich an? Vor allem: Brauche ich eine spezielle Software und brauche ich einen eigenen Webserver? Wenn ihr wollt, könnt ihr auch direkt zu einer Frage singen, natürlich werde ich die Links in der Videobeschreibung für euch einfügen. Fangen wir mit der allerersten Frage an: Wie funktioniert eine Website? Nun, es sollte jedem klar sein, dass man als Benutzer eine Webadresse in einen Browser eingibt.

Dieser Browser kontaktiert dann den Webserver und fordert den Inhalt vom Server an.

Der Server stellt die Informationen zur Verfügung und berechnet alle dynamischen Inhalte für den einzelnen Benutzer. Als Antwort liefert der Server dann den berechneten Inhalt – als einfachen Text. Der Browser übernimmt dann die Aufgabe, diesen Inhalt entsprechend der Anweisung darzustellen. Der Benutzer interagiert nun mit Ihrer Website und jedes Mal, wenn ein Link angeklickt wird, beginnt das ganze Programm von vorne.

Für uns bedeutet das: Eine Website ist zunächst nichts anderes als ein Textdokument, das mit speziellen Markierungen versehen ist. Das nennt man „Hyper-Text“ und könnte so aussehen. In den spitzen Klammern sehen Sie einzelne Anweisungen, die der Browser umsetzt, z.B. ein „a“-Tag, das dafür sorgt, dass dieser Inhalt als so genannter Link angezeigt wird, damit der Nutzer ihn anklicken kann.

 

Sie können auch Medieninhalte in eine Website einbetten, im Beispiel das „img“ oder „image“ Tag, das dafür sorgt, dass das einzelne Bild an dieser Stelle in die Website geladen wird. Das war schon die erste Frage, mit diesem Grundwissen können wir uns dann der Frage aller Fragen widmen. Aber keine Sorge, wir schauen uns natürlich nicht jede einzelne Programmiersprache an, sondern beschränken uns auf die so genannten webfähigen Programmiersprachen. Diese lassen sich zunächst einmal in Auszeichnungssprachen unterteilen, die dazu da sind, den Inhalt für den Browser so zu gestalten, dass er dargestellt werden kann. Dazu gehören HMTL, die Hypertext Markup Language und CSS (Cascading Style Sheets).

Letztere sorgen dafür, dass der Inhalt so dargestellt wird, wie Sie ihn sich vorstellen, und nicht, wie es der Browser standardmäßig tun würde. So können Sie bestimmen, welche Farben, Textarten und Schriftarten verwendet werden. Weiter geht es mit den eigentlichen Programmiersprachen. Während bei den Auszeichnungssprachen der Inhalt nicht verändert werden kann, können Programmiersprachen den Inhalt dynamisch gestalten.

Wir unterscheiden diese zunächst nach dem Ort der Ausführung.

Bei den browserseitigen Sprachen gibt es in der Webentwicklung eigentlich nur JavaScript. Dafür gibt es eine ganze Reihe von serverseitigen Programmiersprachen. Zum Beispiel: PHP, Perl , Microsofts eigene Sprache ASP.NET und Ruby, die vor allem bei der Entwicklung von mobilen Apps beliebt ist. Zur Verdeutlichung hier ein kleines Beispiel für dynamische Inhalte.

In unserem Beispiel soll der Nutzer der Website je nach Tageszeit, zu der er sie besucht, mit Guten Morgen, Guten Abend, Guten Tag begrüßt werden – je nach Tageszeit. Wie gehen Sie nun vor? Eigentlich genauso wie in jeder anderen Sprache. Zuerst formulieren wir einen Bedingungssatz, eine Bedingung. Die Bedingung wäre hier zum Beispiel: „Wenn es 11 Uhr oder früher ist, dann sollte ‚Guten Morgen‘ gesagt werden.

“ Ich werde dieses Skript jetzt nicht genau erklären, das Einzige ist, dass Sie das Schlüsselwort „if“ oder „wenn“ in der Programmiersprache finden können. Dieses Skript wird nun direkt im Browser ausgeführt.

Das heißt, wir haben keine Rechenlast für unseren eigenen Webserver. Allerdings ist der Code auch für den Benutzer sichtbar und er könnte ihn umgehen, z.B.

indem er seine eigene Systemuhr umstellt. In der serverseitigen Programmiersprache PHP würde es so aussehen. Auch hier fällt das Schlüsselwort „if“ auf. Diese „Konditionierbarkeit“ ist übrigens das markanteste Beispiel für eine Programmiersprache. Im Gegensatz zu JavaScript wird PHP nun direkt auf dem Server ausgeführt.

Das bedeutet, dass der Browser nur den Quelltext erhält, der bereits generiert und von ihm fertiggestellt wurde. Unser Nutzer kann den Code nicht sehen, alle Mechanismen sind vor ihm verborgen und die ganze Geschichte wird dadurch ein wenig sicherer. Welche Sprache verwende ich nun? Nun, HTML, CSS und eventuell JavaScript sind Standards der Programmierung, um die wir nicht herumkommen werden.

Je nach Anwendung kann es auch sinnvoll sein, die Berechnungen direkt im Browser des Nutzers durchführen zu lassen.

Außerdem ist es weit verbreitet, was bedeutet, dass Sie im Internet viele Anleitungen und Hilfen finden können. Außerdem ganze Codeschnipsel oder Bibliotheken, die man einfach in sein Projekt importieren kann. Dann bleibt nur noch eine Frage zu klären, wie und womit fange ich überhaupt an? Nun, die Softwareanforderungen zum Erlernen einer Programmiersprache sind in diesem Fall sehr gering. Sie brauchen zunächst nicht mehr als einen einfachen Texteditor.

Ja, eigentlich einen einfachen Microsoft-, Apple- oder Linux-Texteditor, der standardmäßig mit dem Betriebssystem mitgeliefert wird. Nicht mehr. Besser wäre natürlich ein Editor mit Code-Highlighting, der dafür sorgt, dass man sich nicht im eigenen Quellcode verirrt.

Auch hierfür gibt es viele kostenlose Alternativen. Darüber hinaus gibt es eine Entwicklungsumgebung, die PHP verarbeiten kann.

Für den Anfang könnten Sie z.B. XAMMPP auf Ihrem System installieren. Wie das genau funktioniert, haben wir bereits in einem Video gezeigt, das ich jetzt in der Infokarte verlinke. Eine solche Entwicklungsumgebung wird nur für dynamische Sprachen benötigt. Für einfaches HTML und CSS reicht es, Ihren Browser zu benutzen. Wenn Sie Ihre Entwicklung mit der Welt teilen wollen, brauchen Sie auch ein FTP-Programm.

 

FTP, das File Transfer Protocol, sorgt dafür, dass Ihre Inhalte von Ihrem Computer auf den Webserver übertragen werden. Auch hier gibt es zahlreiche kostenlose Programme. Last but not least die Frage: Brauche ich überhaupt einen eigenen Server? Ganz klar: Nein! Auch wenn wir immer von einem Server sprechen, brauchen Sie keinen ganzen eigenen Server.

Ein Webspace ist erst einmal ausreichend. Ein Server ist ein eigenständiger Rechner, der irgendwo in einem Rechenzentrum steht und für Sie persönlich reserviert ist. Das bedeutet aber auch, dass Sie ihn selbst warten müssen; Updates installieren, um nicht anfällig für Sicherheitslücken zu sein.

Beim Webspace übernimmt das der Hosting-Anbieter für Sie und stellt Ihnen auf seinem Server einen Speicherplatz zur Verfügung, der völlig ausreicht, um Ihr Projekt dort zu speichern. Dieser Webspace reicht auch aus, um Ihre Website zum ersten Mal verfügbar zu machen.

Sie können sie noch mit einer eigenen Internetadresse, d.h. einer Top-Level-Domain, versehen. Achten Sie bei der Wahl Ihres Webspace darauf, dass er Ihre dynamische Sprache unterstützt. Dieser Markt ist so hart umkämpft, dass es sehr günstige Angebote der einzelnen Anbieter gibt.