Quelltext der Seite HTML5-Tutorium: JavaScript: Entwicklungsumgebung

{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}}
==Ziel==
In diesem Tutorium wird beschrieben, wie man eine Entwicklungsumgebung für
interaktive Web-Systeme auf Basis von [[HTML5]], [[CSS]] und [[JavaScript]] erstellt.

==Voraussetzungen==
Dieses Tutorium wendet sich an Studierende des vierten Semesters [[IAM|Interaktive Medien]].
Es wird im Rahmen der Lehrveranstaltung  
[[Modul:IAM_(SPO_2018):Web-Programmierung|Web-Programmierung]] (WebProg) entwickelt.

Im ersten Semester des Studiums wurden bereits Programmiererfahrung mit [[Processing]] und
[[Java]] erworben: [[Modul:IAM_(SPO_2018):Grundlagen der Programmierung|Grundlagen der Programmierung]]. 
Daher werden einfache objektorientierte Programmierprinzipien 
([[If-Anweisung]]en, [[Schleife]]n, [[Objekt]]e, [[Methode]]n etc.) als bekannt vorausgesetzt. 

Die Kenntnis von [[HTML]] und [[CSS]] wird ebenfalls vorausgesetzt. Diese Kenntnisse werden in der Veranstaltung 
[[Modul:IAM (SPO 2018):Grundlagen der Webtechnologien|Grundlagen der Webtechnologien]] im zweiten Semester vermittelt.

<!--
[[Web-Server]], wie [[Web2py]], [[Apache]] oder [[Tomcat]] liefern HTML-Seiten, CSS-Dateien und JavaScript-Code nicht nur aus, 
sondern können auch dazu verwendet werden, derartige Dokumente dynamisch zu erstellen, das heißt im Moment der Anforderung durch den Benutzer. 
In dieser Veranstaltung konzentrieren wir uns auf Web-Server, die auf Basis [[Node.js]] laufen. 
-->
Inhalt der Vorlesung WebProg ist die Erstellung von Web-Anwendungen, bestehend aus bis zu vier Komponenten:
* Datenbank-System:<br/>[[Postgres]], [[MySQL]], [[MongoDB]] ..., manchmal auch nur einfache [[JSON-Dateien]]
* Backend-Server (Schnittstelle zwischen Datenbank und Frondend-Server):<br/>[[Rest]], [[GraphQL]], ...
* Frontend-Server (Dokumente aus: HTML-, CSS- und JavaScript-Code, Bilder, Fonts etc.):<br/>[[Vue]], [[React]], [[Svelte]] ...
* CSS-Transpiler:<br/>[[SASS]]/[[SCSS]], [[LESS]] ...

Ich persönlich bevorzuge [[Postgres]], [[REST]], [[VUE]] und [[SCSS]]. Sie dürfen allerdings auch andere Komponenten/Frameworks verwenden.

==Tutorium==
# [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Visual Studio Code|Visual Studio Code]]: Einrichten einer [[Visual Studio Code]]-Umgebung.
# [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js|Node.js]]: Einrichten eines lokalen [[Node.js]]-Servers als Hilfswerkzeug bei der Entwicklung von Web-Anwendungen.

==Quellen==
# {{Quelle|Kowarschick (WebProg)}}
<!--# [http://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/ Musterlösungen]-->
[[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]]
[[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
[[Kategorie:Praktikum:MMProg]]
[[Kategorie:Web-Programmierung-HowTo]]