Multimedia-Programmierung: Best Practices: Unterschied zwischen den Versionen
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) (→CSS) |
||
| (11 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
{{Qualität | {{Qualität | ||
|correctness = | |correctness = 4 | ||
|extent = | |extent = 2 | ||
|numberOfReferences = | |numberOfReferences = 2 | ||
|qualityOfReferences = 3 | |qualityOfReferences = 3 | ||
|conformance = | |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. | * 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- | * 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== | ||
| Zeile 19: | Zeile 18: | ||
* 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. | ||
* Die <code>script</code>-Tags zum Einbinden von JavaScriptdateien stehen am Ende der Datei vor dem schließenden <code>body</code>-Tag. | * Die <code>script</code>-Tags zum Einbinden von JavaScriptdateien stehen am Ende der Datei vor dem schließenden <code>body</code>-Tag. | ||
* Es ist auch | * 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 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). | |||
==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== | ||
<references/> | <references/> | ||
<ol | <ol start="2"> | ||
<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 31. Oktober 2018, 17:43 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
- CSS-Code wird niemals explizit in den HTML-Code eingefügt (weder in HTML-Tags noch mittels des
style-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“[1], 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
style-Element eingefügt wird.) - 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.
- 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. - Die
script-Tags zum Einbinden von JavaScriptdateien stehen am Ende der Datei vor dem schließendenbody-Tag. - Es ist auch üblich, 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).
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
- https://wiki.selfhtml.org/wiki/Webstandards
- https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil
- Google (Web): Make the Web Faster; Organisation: Google Developers; https://developers.google.com/speed/; Quellengüte: 3 (Web)
- http://www.w3schools.com/js/js_best_practices.asp
- https://www.w3.org/wiki/JavaScript_best_practices
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
