Multimedia-Programmierung: Best Practices - Versionsgeschichte

Kowa: /* Minimierung */

2025-03-13T08:24:29Z

Minimierung

← Nächstältere Version		Version vom 13. März 2025, 08:24 Uhr
Zeile 34:		Zeile 34:
	** Jedes Modul greift auf möglichst wenige andere Module zu.		** Jedes Modul greift auf möglichst wenige andere Module zu.
	* Halte den Code-Umfang eines jeden Moduls möglichst gering, damit der Code schnell geladen werden kann und bei mobilen Endgeräte kein unnötigen Kosten verursacht (vgl. KISS).		* Halte den Code-Umfang eines jeden Moduls möglichst gering, damit der Code schnell geladen werden kann und bei mobilen Endgeräte kein unnötigen Kosten verursacht (vgl. KISS).

	~~==Minimierung==~~
	* Füge in JavaScript-Code stets alle notwendigen Strichpunkte ein (auch wenn JavaScript fehlende Strichpunkte oft automatisch ergänzt), da anderenfalls der Code nach einer Komprimierung, bei der überflüssige Leerzeichen und Leerzeilen entfernt werden, evtl. nicht mehr funktioniert.

	==Quellen==		==Quellen==

Kowa: /* CSS */

2025-03-13T08:23:46Z

CSS

← Nächstältere Version		Version vom 13. März 2025, 08:23 Uhr
Zeile 9:		Zeile 9:

	* Es gibt CSS-Code, der zu Beginn geladen werden muss, damit der Bereich „above the fold“<ref>https://de.onpage.org/wiki/Above_the_fold</ref>, also der Bereich, der im größten denkbaren Monitor zu Beginn zu sehen ist, korrekt dargestellt wird. Dieser CSS-Code wird explizit in den HTML-Head-Bereich eingefügt. Es muss möglichst klein sein. (Mittels [[vite]] oder eines vergleichbaren Tools kann man dafür sorgen, dass deren Inhalt ''automatisch'' in ein <code>style</code>-Element eingefügt wird.)		* Es gibt CSS-Code, der zu Beginn geladen werden muss, damit der Bereich „above the fold“<ref>https://de.onpage.org/wiki/Above_the_fold</ref>, also der Bereich, der im größten denkbaren Monitor zu Beginn zu sehen ist, korrekt dargestellt wird. Dieser CSS-Code wird explizit in den HTML-Head-Bereich eingefügt. Es muss möglichst klein sein. (Mittels [[vite]] oder eines vergleichbaren Tools kann man dafür sorgen, dass deren Inhalt ''automatisch'' in ein <code>style</code>-Element eingefügt wird.)
	* Der restliche CSS-Code wird CSS-Dateien bereitgestellt, die eindeutig benannt sind. Diese werden bei Bedarf rechtzeitig dynamisch geladen.		* Der restliche CSS-Code wird CSS-Dateien bereitgestellt, die eindeutig benannt sind. Diese werden bei Bedarf rechtzeitig dynamisch geladen. Die Namen ändern sich im Laufe der Zeit nicht, um Browser-Caching zu unterstützen..
	* Verschiedene HTML-Seiten teilen sich möglichst viele CSS-Dateien. Eine CSS-Datei, die unter einem eindeutigen Namen vom Browser einmal geladen wurde, wird üblicherweise im Browser-[[Cache]] gehalten und muss daher kein zweites Mal geladen werden, wenn sie nochmals verwendet wird.		* Verschiedene HTML-Seiten teilen sich möglichst viele CSS-Dateien. Eine CSS-Datei, die unter einem eindeutigen Namen vom Browser einmal geladen wurde, wird üblicherweise im Browser-[[Cache]] gehalten und muss daher kein zweites Mal geladen werden, wenn sie nochmals verwendet wird.
	* CSS-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren CSS-Komprimierungstools.		* CSS-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren CSS-Komprimierungstools.

Kowa: /* JavaScript */

2025-03-13T08:23:15Z

JavaScript

← Nächstältere Version		Version vom 13. März 2025, 08:23 Uhr
Zeile 15:		Zeile 15:
	==JavaScript==		==JavaScript==

	* JavaScript-Code wird niemals explizit in den HTML-Code eingefügt (weder in [[HTML-Tag]]s noch mittels des <code>script</code>-Elements). Er wird immer in JavaScript-Dateien bereitgestellt, die eindeutig benannt sind. Die Namen ändern sich im Laufe der Zeit nicht.		* JavaScript-Code wird niemals explizit in den HTML-Code eingefügt (weder in [[HTML-Tag]]s noch mittels des <code>script</code>-Elements). Er wird immer in JavaScript-Dateien bereitgestellt, die eindeutig benannt sind. Die Namen ändern sich im Laufe der Zeit nicht, um Browser-Caching zu unterstützen.
	* ~~Die <code>script</code>-Tags zum Einbinden von JavaScriptdateien stehen am Ende der Datei vor dem schließenden <code>body</code>~~-~~Tag~~.		* JavaScript-Code wird wann immer möglich asynchron geladen.
	* Es ist auch ~~üblich~~, bestimmte JavaScript-Datein erst bei Bedarf dynamisch mittels JavaScript nachzuladen.		* Es ist auch sinnvoll, bestimmte JavaScript-Datein erst bei Bedarf dynamisch mittels JavaScript nachzuladen.
	* JavaScript-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt; Variablennamen, Funktionsnamen, Parameternamen werden durch kürzere Namen ersetzt, soweit dies möglich ist). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren JavaScript-Komprimierungs-Tools.		* JavaScript-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt; Variablennamen, Funktionsnamen, Parameternamen werden durch kürzere Namen ersetzt, soweit dies möglich ist). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren JavaScript-Komprimierungs-Tools.

Kowa: /* CSS */

2025-03-13T08:20:50Z

CSS

← Nächstältere Version		Version vom 13. März 2025, 08:20 Uhr
Zeile 6:		Zeile 6:
	\|conformance = 3		\|conformance = 3
	}}		}}
	==CSS==		== CSS ==

	* CSS-Code ~~wird niemals explizit in den HTML-Code eingefügt (weder in [[HTML-Tag]]s noch mittels des <code>style</code>-Elements). Er wird immer in CSS-Dateien bereitgestellt~~, ~~die eindeutig benannt sind. Die Namen ändern sich im Laufe~~ der ~~Zeit nicht.~~		* Es gibt CSS-Code, der zu Beginn geladen werden muss, damit der Bereich „above the fold“<ref>https://de.onpage.org/wiki/Above_the_fold</ref>, also der Bereich, der im größten denkbaren Monitor zu Beginn zu sehen ist, korrekt dargestellt wird. Dieser CSS-Code wird explizit in den HTML-Head-Bereich eingefügt. Es muss möglichst klein sein. (Mittels [[vite]] oder eines vergleichbaren Tools kann man dafür sorgen, dass deren Inhalt ''automatisch'' in ein <code>style</code>-Element eingefügt wird.)
	* Im HTML-Header-Bereich wird '''eine''' zentrale CSS-Datei eingebunden. Diese ist klein und sorgt im Wesentlichen dafür, ~~das~~ der Bereich „above the fold“<ref>https://de.onpage.org/wiki/Above_the_fold</ref>, also der Bereich, der im größten denkbaren Monitor zu Beginn zu sehen ist, korrekt dargestellt wird. (Mittels [[~~webpack~~]] oder eines vergleichbaren Tools kann man dafür sorgen, dass deren Inhalt ''automatisch'' in ein <code>style</code>-Element eingefügt wird.)		* Der restliche CSS-Code wird CSS-Dateien bereitgestellt, die eindeutig benannt sind. Diese werden bei Bedarf rechtzeitig dynamisch geladen.
	* ~~Die restlichen~~ CSS-Dateien werden bei Bedarf dynamisch ~~mittels JavaScript eingebunden~~.
	* Verschiedene HTML-Seiten teilen sich möglichst viele CSS-Dateien. Eine CSS-Datei, die unter einem eindeutigen Namen vom Browser einmal geladen wurde, wird üblicherweise im Browser-[[Cache]] gehalten und muss daher kein zweites Mal geladen werden, wenn sie nochmals verwendet wird.		* Verschiedene HTML-Seiten teilen sich möglichst viele CSS-Dateien. Eine CSS-Datei, die unter einem eindeutigen Namen vom Browser einmal geladen wurde, wird üblicherweise im Browser-[[Cache]] gehalten und muss daher kein zweites Mal geladen werden, wenn sie nochmals verwendet wird.
	* CSS-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren CSS-Komprimierungstools.		* CSS-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren CSS-Komprimierungstools.

Kowa: /* CSS */

2018-10-31T15:43:01Z

CSS

← Nächstältere Version		Version vom 31. Oktober 2018, 15:43 Uhr
Zeile 9:		Zeile 9:

	* CSS-Code wird niemals explizit in den HTML-Code eingefügt (weder in [[HTML-Tag]]s noch mittels des <code>style</code>-Elements). Er wird immer in CSS-Dateien bereitgestellt, die eindeutig benannt sind. Die Namen ändern sich im Laufe der Zeit nicht.		* CSS-Code wird niemals explizit in den HTML-Code eingefügt (weder in [[HTML-Tag]]s noch mittels des <code>style</code>-Elements). Er wird immer in CSS-Dateien bereitgestellt, die eindeutig benannt sind. Die Namen ändern sich im Laufe der Zeit nicht.
	* Im HTML-Header-Bereich wird '''eine''' zentrale CSS-Datei eingebunden. Diese ist klein und sorgt im Wesentlichen dafür, das der Bereich „above the fold“<ref>https://de.onpage.org/wiki/Above_the_fold</ref>, also der Bereich, der im größten denkbaren Monitor zu Beginn zu sehen ist, korrekt dargestellt wird.		* Im HTML-Header-Bereich wird '''eine''' zentrale CSS-Datei eingebunden. Diese ist klein und sorgt im Wesentlichen dafür, das der Bereich „above the fold“<ref>https://de.onpage.org/wiki/Above_the_fold</ref>, also der Bereich, der im größten denkbaren Monitor zu Beginn zu sehen ist, korrekt dargestellt wird. (Mittels [[webpack]] oder eines vergleichbaren Tools kann man dafür sorgen, dass deren Inhalt ''automatisch'' in ein <code>style</code>-Element eingefügt wird.)
	* Die restlichen CSS-Dateien werden bei Bedarf dynamisch mittels JavaScript eingebunden.		* Die restlichen CSS-Dateien werden bei Bedarf dynamisch mittels JavaScript eingebunden.
	* Verschiedene HTML-Seiten teilen sich möglichst viele CSS-Dateien. Eine CSS-Datei, die unter einem eindeutigen Namen vom Browser einmal geladen wurde, wird üblicherweise im Browser-[[Cache]] gehalten und muss daher kein zweites Mal geladen werden, wenn sie nochmals verwendet wird.		* Verschiedene HTML-Seiten teilen sich möglichst viele CSS-Dateien. Eine CSS-Datei, die unter einem eindeutigen Namen vom Browser einmal geladen wurde, wird üblicherweise im Browser-[[Cache]] gehalten und muss daher kein zweites Mal geladen werden, wenn sie nochmals verwendet wird.
	* CSS-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren CSS-~~Komprimierungs-Tools~~.		* CSS-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren CSS-Komprimierungstools.

	==JavaScript==		==JavaScript==

Kowa: /* Modularisierung */

2016-10-23T10:33:45Z

Modularisierung

← Nächstältere Version		Version vom 23. Oktober 2016, 10:33 Uhr
Zeile 34:		Zeile 34:
	** Jedes Modul erfüllt nach Möglichkeit eine einzige, wohldefinierte Aufgabe.		** Jedes Modul erfüllt nach Möglichkeit eine einzige, wohldefinierte Aufgabe.
	** Jedes Modul greift auf möglichst wenige andere Module zu.		** Jedes Modul greift auf möglichst wenige andere Module zu.
			* Halte den Code-Umfang eines jeden Moduls möglichst gering, damit der Code schnell geladen werden kann und bei mobilen Endgeräte kein unnötigen Kosten verursacht (vgl. KISS).

	==Minimierung==		==Minimierung==

Kowa: /* Grundsätzliches */

2016-10-22T10:01:03Z

Grundsätzliches

← Nächstältere Version		Version vom 22. Oktober 2016, 10:01 Uhr
Zeile 24:		Zeile 24:

	* [[Don't repeat yourself]]! (DRY): Vermeide grundsätzlich die Verdopplung von Code. Mehrfach vorhandener Code muss bei notwendigen Änderungen auch mehrfach geändert werden.		* [[Don't repeat yourself]]! (DRY): Vermeide grundsätzlich die Verdopplung von Code. Mehrfach vorhandener Code muss bei notwendigen Änderungen auch mehrfach geändert werden.
	* [[Keep it simple, stupid]]! (KISS): Schreibe nur Code, der ~~acuch~~ benötigt wird. Code, der auf Vorrat angelegt wird, wird häufig nicht benötigt, muss aber trotzdem gewartet werden.		* [[Keep it simple, stupid]]! (KISS): Schreibe nur Code, der auch benötigt wird. Code, der auf Vorrat angelegt wird, wird häufig nicht benötigt, muss aber trotzdem gewartet werden.

	==Modularisierung==		==Modularisierung==

Kowa am 22. Oktober 2016 um 10:00 Uhr

2016-10-22T10:00:46Z

← Nächstältere Version		Version vom 22. Oktober 2016, 10:00 Uhr
Zeile 20:		Zeile 20:
	* Es ist auch üblich, bestimmte JavaScript-Datein erst bei Bedarf dynamisch mittels JavaScript nachzuladen.		* Es ist auch üblich, bestimmte JavaScript-Datein erst bei Bedarf dynamisch mittels JavaScript nachzuladen.
	* JavaScript-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt; Variablennamen, Funktionsnamen, Parameternamen werden durch kürzere Namen ersetzt, soweit dies möglich ist). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren JavaScript-Komprimierungs-Tools.		* JavaScript-Dateien werden in komprimierter Form ausgeliefert ({{dh}} überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt; Variablennamen, Funktionsnamen, Parameternamen werden durch kürzere Namen ersetzt, soweit dies möglich ist). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren JavaScript-Komprimierungs-Tools.

			==Grundsätzliches==

			* [[Don't repeat yourself]]! (DRY): Vermeide grundsätzlich die Verdopplung von Code. Mehrfach vorhandener Code muss bei notwendigen Änderungen auch mehrfach geändert werden.
			* [[Keep it simple, stupid]]! (KISS): Schreibe nur Code, der acuch benötigt wird. Code, der auf Vorrat angelegt wird, wird häufig nicht benötigt, muss aber trotzdem gewartet werden.

	==Modularisierung==		==Modularisierung==

Kowa: /* Minimierung */

2016-10-21T12:29:02Z

Minimierung

← Nächstältere Version		Version vom 21. Oktober 2016, 12:29 Uhr
Zeile 31:		Zeile 31:

	==Minimierung==		==Minimierung==
	* Füge in JavaScript-Code stets alle notwendigen Strichpunkte ein (auch wenn JavaScript fehlende Strichpunkte oft automatisch ergänzt), da anderenfalls der Code nach ~~ein~~ Komprimierung, bei der überflüssige Leerzeichen und Leerzeilen entfernt werden evtl. nicht mehr funktioniert.		* Füge in JavaScript-Code stets alle notwendigen Strichpunkte ein (auch wenn JavaScript fehlende Strichpunkte oft automatisch ergänzt), da anderenfalls der Code nach einer Komprimierung, bei der überflüssige Leerzeichen und Leerzeilen entfernt werden, evtl. nicht mehr funktioniert.

	==Quellen==		==Quellen==

Kowa: /* Modularisierung */

2016-10-21T12:28:18Z

Modularisierung

← Nächstältere Version		Version vom 21. Oktober 2016, 12:28 Uhr
Zeile 25:		Zeile 25:
	* Greife auf so wenig globale Größen wie möglich zu, am besten auf gar keine.		* Greife auf so wenig globale Größen wie möglich zu, am besten auf gar keine.
	* Verwende keine Konstanten im Code, es sein denn, diese können sich garantiert '''nie''' ändern.		* Verwende keine Konstanten im Code, es sein denn, diese können sich garantiert '''nie''' ändern.
	*Teile ~~das~~ eine Anwendung in Module ein:		*Teile eine Anwendung in Module ein:
	** Jedes Modul steht in einer eigenen Datei.		** Jedes Modul steht in einer eigenen Datei.
	** Jedes Modul erfüllt ~~am Besten genau~~ eine wohldefinierte Aufgabe.		** Jedes Modul erfüllt nach Möglichkeit eine einzige, wohldefinierte Aufgabe.
	** Jedes Modul greift auf möglichst wenige andere Module zu.		** Jedes Modul greift auf möglichst wenige andere Module zu.