Multimedia-Programmierung: Best Practices: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenz
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
 
(16 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{In Bearbeitung}}
{{Qualität
{{Qualität
|correctness        = 1
|correctness        = 4
|extent              = 1
|extent              = 2
|numberOfReferences  = 1
|numberOfReferences  = 2
|qualityOfReferences = 3
|qualityOfReferences = 3
|conformance        = 2
|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.
* 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..
* 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 [[Cache|gecached]] 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-Komprimierungs-Tools.


==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 möglich 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.
==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 auch benötigt wird. Code, der auf Vorrat angelegt wird, wird häufig nicht benötigt, muss aber trotzdem gewartet werden.
==Modularisierung==
* Definiere so wenig globale Größen (Variablen und Funktionen) wie möglich, am Besten 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.
*Teile eine Anwendung in Module ein:
** Jedes Modul steht in einer eigenen Datei.
** Jedes Modul erfüllt nach Möglichkeit eine einzige, wohldefinierte Aufgabe.
** 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).


==Quellen==
==Quellen==
<references/>
<references/>
<ol>
<ol start="2">
<li start="2">https://wiki.selfhtml.org/wiki/Webstandards</li>
<li>https://wiki.selfhtml.org/wiki/Webstandards</li>
<li>https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil</li>
<li>https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil</li>
<li>{{Quelle|Google (Web)}}</li>
<li>{{Quelle|Google (Web)}}</li>

Aktuelle Version vom 13. März 2025, 08:24 Uhr

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 4
(großteils überprüft) 		Umfang: 2
(wichtige Fakten fehlen) 		Quellenangaben: 2
(wichtige Quellen fehlen) 		Quellenarten: 3
(gut) 		Konformität: 3
(gut)

CSS

  • Es gibt CSS-Code, der zu Beginn geladen werden muss, damit der Bereich „above the fold“[1], 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 style-Element eingefügt wird.)
  • 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.
  • CSS-Dateien werden in komprimierter Form ausgeliefert (d. h. überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren CSS-Komprimierungstools.

JavaScript

  • JavaScript-Code wird niemals explizit in den HTML-Code eingefügt (weder in HTML-Tags noch mittels des script-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.
  • JavaScript-Code wird wann immer möglich asynchron geladen.
  • Es ist auch sinnvoll, bestimmte JavaScript-Datein erst bei Bedarf dynamisch mittels JavaScript nachzuladen.
  • JavaScript-Dateien werden in komprimierter Form ausgeliefert (d. h. ü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 auch benötigt wird. Code, der auf Vorrat angelegt wird, wird häufig nicht benötigt, muss aber trotzdem gewartet werden.

Modularisierung

  • Definiere so wenig globale Größen (Variablen und Funktionen) wie möglich, am Besten 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.
  • Teile eine Anwendung in Module ein:
    • Jedes Modul steht in einer eigenen Datei.
    • Jedes Modul erfüllt nach Möglichkeit eine einzige, wohldefinierte Aufgabe.
    • 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).

Quellen

  1. ↑ https://de.onpage.org/wiki/Above_the_fold
  1. https://wiki.selfhtml.org/wiki/Webstandards
  2. https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil
  3. Google (Web): Make the Web Faster; Organisation: Google Developers; https://developers.google.com/speed/; Quellengüte: 3 (Web)
  4. http://www.w3schools.com/js/js_best_practices.asp
  5. https://www.w3.org/wiki/JavaScript_best_practices
  6. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=Multimedia-Programmierung:_Best_Practices&oldid=52733“