Webapplications
Dieser Themenblock widmete sich dem Design sowie der Programmierung von Homepages und Webapplikationen sowie der allgemeinen Webarchitektur zwischen Clients und Servern, welche das komplexe Informationsgebilde des Internets prägen und definieren. So wurden zu Beginn beispielsweise allgemeine Erklärungen gesucht, wie das Internet auf Serverbasis überhaupt funktionieren kann und wie unterschiedliche Protokolle diverse Dienste, wie z.B. E-Mails oder den Audio- und Videostream steuern können. Nachdem geklärt wurde, wie ein Seitenaufruf eines Clients von einem Webserver abgearbeitet wird (HTTP Request und Response), konnte noch auf die wichtigsten Programmiersprachen innerhalb der Webentwicklung eingegangen werden. So wurde unter anderem die HTML Hypertext Markup Language thematisiert, welche den Aufbau sowie die Inhalte einer Seite näher beschreibt. Neben den Erklärungen zu HTML wurde auch bereits an der ersten eigenen Webapp gearbeitet und das Grundgerüst zur Seite programmiert. Damit die Applikation noch etwas Farbe bekam und allgemein schöner aussieht, wurde im nächsten Schritt das Design mittels CSS Cascading Stylesheets vorgestellt. In diesem Sinne wurde der Unterschied zwischen HTML und CSS erläutert und festgestellt, dass CSS-Code aufgrund der Lesbarkeit niemals in HTML-Dateien geschrieben wird. Nachdem das CSS3 Box Model vorgestellt und die Zusammenfassung gewisser Elemente mit CSS-Selektoren nähergebracht wurde, konnte noch auf die wichtige Thematik des Responsive Webdesigns hingewiesen werden. Hierfür wurde das Prinzip sogenannter Fluid Grids besprochen und die Auswahl mit Hilfe von Media-Queries (für unterschiedliche Displaygrößen) ausprobiert. Um die dabei entstandene Webseite auch mittels Webserver steuern zu können und mehr Funktionalität durch die Anbindung einer Datenbank hervorzurufen, wurde die HTML-Website anschließend komplett auf PHP umgerüstet. Nachdem die technischen Details rund um PHP (PHP: Hypertext Preprocessor - rekursives Akronym) sowie Webserver (Apache) und Datenbankserver (MySQLi) oder virtuelle Serverapplikationen wie XAMPP oder MAMP besprochen wurden, konnte schlussendlich die erste PHP-Datei erstellt und der erste echo-Befehl ausgegeben werden. Zusätzlich dazu wurden auch eigene Dateien für den Header und den Footer erstellt, um diese anschließend in den Seitendateien mit der require_once() Funktion einzubinden. Abschließend musste noch ein HTML-Formular sowie ein passendes Anmelde- und Verbindungsskript erstellt werden, um bereits bekannte Kontrollstrukturen in PHP zu übersetzen und den Umgang mit PHP-Variablen und -Funktionen sowie SQL-Abfragen zu trainieren.
Kompetenzen
- Ich verstehe für was man die Programmiersprachen HTML, CSS, PHP und SQL innerhalb der Webentwicklung verwendet.
- Ich kenne unterschiedliche Serverdienste sowie deren Protokolle wie z.B. HTTP, FTP, SMTP oder POP.
- Ich kenne diverse HTML5-Tags und kann diese den Seitenelementen <head> und <body> zuordnen.
- Ich weiß wie ein Standard Website Layout konzipiert ist und verstehe wie das CSS3 Box Model funktioniert.
- Ich kenne diverse CSS-Befehle und kann diese mit unterschiedlichen Selectors innerhalb einer Datei anwenden.
- Ich verstehe wie ich neue Klassenelemente bzw. ID-Elemente erzeugen kann und wie diese in CSS aufzurufen sind.
- Ich weiß was der Begriff „Responsive Webdesign“ bedeutet und kann erklären, weshalb er in der Webentwicklung so wichtig ist.
- Ich verstehe für was man Media Queries innerhalb von CSS-Dokumenten verwendet und kann diese mit Fluid Grids verbinden.
- Ich verstehe wie Webserver und Datenbankserver im Hintergrund einer Webseite arbeiten und kenne virtuelle Applikationen.
- Ich kann kleinere PHP-Skripts erstellen und die Ergebnisse dieser mit Hilfe des echo Befehls ausgeben lassen.
- Ich kann Kontrollstrukturen wie Verzweigungen oder Schleifen in PHP programmieren und verstehe das Prinzip hinter ihnen.
- Ich weiß wofür Visual Studio Code verwendet wird und wie man mit diesem erweiterbaren Code-Editor umgeht.
Weiterführende Links