HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge)
Kowa (Diskussion | Beiträge)
 
(8 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-Anwendungen auf Basis von [[HTML5]], [[CSS]] und [[JavaScript]] erstellt.
interaktive Web-Systeme auf Basis von [[HTML5]], [[CSS]] und [[JavaScript]] erstellt.


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


In den ersten Semestern des Studiums wurden bereits Programmiererfahrung mit [[Processing]] und
Im ersten Semester des Studiums wurden bereits Programmiererfahrung mit [[Processing]] und
[[Java]] erworben: [[Modul:IAM 2006:Softwareentwicklung und Programmierung|Softwareentwicklung und Programmierung]].  
[[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  
[[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Gestaltung|Multimedia-Anwendungen/Gestaltung]] vermittelt,
[[Modul:IAM (SPO 2018):Grundlagen der Webtechnologien|Grundlagen der Webtechnologien]] im zweiten Semester vermittelt.
welche parallel zu MMProg angeboten wird. Im Rahmen dieses Tutoriums werden nur diejenigen HTML- und CSS-Kenntnisse
besprochen, die für das Verständnis der Inhalte notwendig sind.


[[Web-Server]], wie [[Web2py]], [[Apache]], [[Tomcat]], [[Node.js]] liefern HTML-Seiten, CSS-Dateien und JavaScript-Code nicht nur aus,  
<!--
[[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.  
Dies ist Inhalt der Vorlesung [[Lehrveranstaltung:IAM 2006:Netzwerktechnologien I|Netzwerktechnologien I]], die ebenfalls für Studierende des dritten Semesters angeboten wird.
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]] ...


Inhalt der Vorlesung MMProg ist die dynamische Veränderungen von HTML-Seiten auf dem Client (Browser).
Ich persönlich bevorzuge [[Postgres]], [[REST]], [[VUE]] und [[SCSS]]. Sie dürfen allerdings auch andere Komponenten/Frameworks verwenden.
Damit lassen sich beispielsweise [[Browserspiele]] realisieren. Dies geschieht mit Hilfe von JavaScript.


==Tutorium==
==Tutorium==
Zeile 31: Zeile 35:


==Quellen==
==Quellen==
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
# {{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: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]]

Aktuelle Version vom 21. April 2023, 17: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)

Vorlesung WebProg

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:

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

Tutorium

  1. Visual Studio Code: Einrichten einer Visual Studio Code-Umgebung.
  2. Node.js: Einrichten eines lokalen Node.js-Servers als Hilfswerkzeug bei der Entwicklung von Web-Anwendungen.

Quellen

  1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)