HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Unterschied zwischen den Versionen
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) |
||
| (10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 2: | Zeile 2: | ||
==Ziel== | ==Ziel== | ||
In diesem Tutorium wird beschrieben, wie man eine Entwicklungsumgebung für | In diesem Tutorium wird beschrieben, wie man eine Entwicklungsumgebung für | ||
interaktive Web- | interaktive Web-Systeme auf Basis von [[HTML5]], [[CSS]] und [[JavaScript]] erstellt. | ||
==Voraussetzungen== | ==Voraussetzungen== | ||
Dieses Tutorium wendet sich an Studierende des | Dieses Tutorium wendet sich an Studierende des vierten Semesters [[IAM|Interaktive Medien]]. | ||
Es | 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: | [[Java]] erworben: [[Modul:IAM_(SPO_2018):Grundlagen der Programmierung|Grundlagen der Programmierung]]. | ||
Daher werden einfache objektorientierte Programmierprinzipien | Daher werden einfache objektorientierte Programmierprinzipien | ||
([[If-Anweisung]]en, [[Schleife]]n, [[Objekt]]e, [[Methode]]n etc.) als bekannt vorausgesetzt. | ([[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 | 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]] | <!-- | ||
[[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. | 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== | ==Tutorium== | ||
# [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: | # [[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. | # [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js|Node.js]]: Einrichten eines lokalen [[Node.js]]-Servers als Hilfswerkzeug bei der Entwicklung von Web-Anwendungen. | ||
==Quellen== | ==Quellen== | ||
# {{Quelle|Kowarschick | # {{Quelle|Kowarschick (WebProg)}} | ||
<!--# [http://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/ Musterlösungen]--> | <!--# [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]] | |||
Aktuelle Version vom 21. April 2023, 18:00 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 2 (wichtige Fakten fehlen) |
Quellenangaben: 2 (wichtige Quellen fehlen) |
Quellenarten: 3 (gut) |
Konformität: 5 (ausgezeichnet) |
Inhalt | Visual Studio Code | Node.js
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 Interaktive Medien. Es wird im Rahmen der Lehrveranstaltung Web-Programmierung (WebProg) entwickelt.
Im ersten Semester des Studiums wurden bereits Programmiererfahrung mit Processing und Java erworben: Grundlagen der Programmierung. Daher werden einfache objektorientierte Programmierprinzipien (If-Anweisungen, Schleifen, Objekte, Methoden etc.) als bekannt vorausgesetzt.
Die Kenntnis von HTML und CSS wird ebenfalls vorausgesetzt. Diese Kenntnisse werden in der Veranstaltung Grundlagen der Webtechnologien im zweiten Semester vermittelt.
Inhalt der Vorlesung WebProg ist die Erstellung von Web-Anwendungen, bestehend aus bis zu vier Komponenten:
- Datenbank-System:
Postgres, MySQL, MongoDB ..., manchmal auch nur einfache JSON-Dateien - Backend-Server (Schnittstelle zwischen Datenbank und Frondend-Server):
Rest, GraphQL, ... - Frontend-Server (Dokumente aus: HTML-, CSS- und JavaScript-Code, Bilder, Fonts etc.):
Vue, React, Svelte ... - CSS-Transpiler:
SASS/SCSS, LESS ...
Ich persönlich bevorzuge Postgres, REST, VUE und SCSS. Sie dürfen allerdings auch andere Komponenten/Frameworks verwenden.
Tutorium
- Visual Studio Code: Einrichten einer Visual Studio Code-Umgebung.
- Node.js: Einrichten eines lokalen Node.js-Servers als Hilfswerkzeug bei der Entwicklung von Web-Anwendungen.
Quellen
- Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)
