web-development · andorfermichael · Jun 29, 2017
diff --git a/content/advanced-javascript/dex.md b/content/advanced-javascript/dex.md
@@ -13,7 +13,7 @@ intro: Fortgeschrittene Javascript Themen
 
 # Was Sie können sollten
 
-* Javascript Code der Prototypen verwendet lesen, verstehen, modifiezieren
+* Javascript Code der Prototypen verwendet, lesen, verstehen, modifizieren können
 
 
 ## Vertiefung

diff --git a/content/advanced-javascript/event-und-closure.md b/content/advanced-javascript/event-und-closure.md
@@ -23,7 +23,7 @@ erzeugt werden können.
 
 ### Editor
 
-Die Konstruktur-Funktion des **Editor** Objekts nimmt folgende Argumente
+Die Konstruktor-Funktion des **Editor** Objekts nimmt folgende Argumente
 
 * `css_selector` - ein String, wird als CSS-Selector interpretiert. Der Inhalt des ausgewählten DOM-Elements wird gelöscht, statt dessen wird der Editor angezeigt
 * `w` - optional eine Zahl oder ein String der eine Zahl enthält. Breite des Editors. Default Wert 600.
@@ -36,8 +36,8 @@ Das **Editor** Objekt hat folgende Attribute:
 
 Das **Editor** Objekt hat folgende Methoden
 
-* `rectangle` - Erzeugt ein Objekt mit dem `Rectangle`-Konstruktur, fügt es in der renderlist ein
-* `circle` - Erzeugt ein Objekt mit dem `Circle`-Konstruktur, fügt es in der renderlist ein
+* `rectangle` - Erzeugt ein Objekt mit dem `Rectangle`-Konstruktor, fügt es in der Renderlist ein
+* `circle` - Erzeugt ein Objekt mit dem `Circle`-Konstruktor, fügt es in der Renderlist ein
 
 §
 
@@ -69,12 +69,12 @@ Editor.prototype.circle = function( x,y,r,att, text ) {
 ### Circle und Rectangle
 
 Circle und Rectangle funktionieren sehr ähnlich, deswegen werden sie hier gemeinsam
-beschreiben.  Als SVG-Elemente betrachtet gibt es größere Unterschiede: so wird die
+beschrieben.  Als SVG-Elemente betrachtet gibt es größere Unterschiede: so wird die
 Position eines `<circles>` über die Attribute `cx` und `cy` gesetzt, die Position eines
 `<rect>` über `x` und `y`.  Diese Unterschiede werden durch die neu erstellen Javascript-Objekte
 möglichst verborgen.
 
-Die Signatur der Konstruktur-Funktion sind:
+Die Signatur der Konstruktor-Funktion sind:
 
 * Rectangle(x,y,w,h,att,canvas)
 * Circle(x,y,r,att, canvas )
@@ -138,7 +138,7 @@ Circle.prototype.setPosition = function ( position ) {
 Wie funktioniert Drag-and-Drop?  Wir haben die Events `mousedown`, `mouseup` und `mousemove` zur Verfügung.
 
 * Wenn die Maus-Taste gedrückt wird, und der Mauszeiger über einem Rechteck oder Kreis steht, dann beginnt das Drag-and-Drop. Die Position der Maus und des Objekt zu diesem Start-Zeitpunkt müssen gespeichert werden.
-* Wenn die Maus sich beweget, und wir in einem Drag-and-Drop sind, dann wird die differenz zwischen aktueller Maus-Position und der Start-Position berechnet. Das ergibt einen Translations-Vektor. Dieser Vektor wird zur Startposition des Objekts addiert und ergibt die aktuelle Position des Objekts. ("Drag")
+* Wenn die Maus sich bewegt, und wir in einem Drag-and-Drop sind, dann wird die Differenz zwischen aktueller Maus-Position und der Start-Position berechnet. Das ergibt einen Translations-Vektor. Dieser Vektor wird zur Startposition des Objekts addiert und ergibt die aktuelle Position des Objekts. ("Drag")
 * Wenn die Maus los gelassen wird wird Drag-and-Drop beendet
 
 ### Mausposition
@@ -254,7 +254,7 @@ addDragability( other_jsobj, other_element );
 Wenn man die Beschreibung von Drag-and-Drop nochmal betrachtet ...
 
 * Wenn die Maus-Taste gedrückt wird, und der Mauszeiger über einem Rechteck oder Kreis steht, dann beginnt das Drag-and-Drop. Die Position der Maus und des Objekt zu diesem Start-Zeitpunkt müssen gespeichert werden.
-* Wenn die Maus sich beweget, und wir in einem Drag-and-Drop sind, dann wird die Differenz zwischen aktueller Maus-Position und der Start-Position berechnet. Das ergibt einen Translations-Vektor. Dieser Vektor wird zur Startposition des Objekts addiert und ergibt die aktuelle Position des Objekts. ("Drag")
+* Wenn die Maus sich bewegt, und wir in einem Drag-and-Drop sind, dann wird die Differenz zwischen aktueller Maus-Position und der Start-Position berechnet. Das ergibt einen Translations-Vektor. Dieser Vektor wird zur Startposition des Objekts addiert und ergibt die aktuelle Position des Objekts. ("Drag")
 * Wenn die Maus los gelassen wird wird Drag-and-Drop beendet
 
 und das nun in Event-Listener umsetzen will kommt man zu folgender Struktur

diff --git a/content/advanced-javascript/regular-expressions.md b/content/advanced-javascript/regular-expressions.md
@@ -25,10 +25,10 @@ zahlt sich aus!
 [Reguläre Ausdrücke](http://de.wikipedia.org/wiki/Regul%C3%A4rer_Ausdruck) sind 
 ein Konzept aus der Theoretischen Informatik. Diese ursprünglichen regulären Ausdrücke
 bieten nur 3 Operatoren an.  Bei der Umsetzung in diversen UNIX-Tools und Programmiersprachen
-wurden mehr und mehr Operatoren eingeführt. Zur unterscheidung nenne ich diese
+wurden mehr und mehr Operatoren eingeführt. Zur Unterscheidung nenne ich diese
 erweiterten Ausdrücke mit dem englischen Begriff Regular Expressions oder kurz RegEx.
 
-Regular Expressions nennt man of auch Muster (en: patterns), man spricht von
+Regular Expressions nennt man oft auch Muster (en: patterns), man spricht von
 Mustersuche (en: pattern matching). Wenn ein Muster auf ein Zeichenkette zutrifft
 sagt man auf Halb-Englisch: "der Pattern matched".
 

diff --git a/content/advanced-javascript/vererbung.md b/content/advanced-javascript/vererbung.md
@@ -5,7 +5,7 @@ order: 30
 
 
 Hinter den "Klassen" von Javascript versteckt sich in Wirklichkeit
-an anderer Mechanismus: Prototypen.  
+ein anderer Mechanismus: Prototypen.  
 
 
 ## Objekt und Konstruktor und Prototyp
@@ -71,7 +71,7 @@ Details zu einigen wichtigen Befehlen in der Javascript-Referenz bei Mozilla:
 
 ## Vererbung
 
-Eine Konstruktur-Funktion kann von einem Objekt erben, und zwar über den Prototypen:
+Eine Konstruktor-Funktion kann von einem Objekt erben, und zwar über den Prototypen:
 
 <javascript caption="Vererbung von Attributen">
   // ----- Pet ---------

diff --git a/content/apache/auth.md b/content/apache/auth.md
@@ -36,7 +36,7 @@ Achtung: Wenn man bei der ErrorDocument-Anweisung einen falschen Pfad angibt ers
 
 Der Zugriff auf den Webserver, oder auf bestimmte Ordner und Dateien am Webserver kann beschränkt werden. Dabei sind verschiedene Kriterien denkbar: Zugriff nur für bestimmte Browser, Zugriff nur mit Passwort, Zugriff nur von Computern die innerhalb der FH sind.
 
-Das letzte Kriterium ist das einfachste:  Alle Computer innerhalb der FH haben eine IP-Adresse die mit 10. beginnt. Die Zugriffsbeschränkung erfolgt mit den Konfigurations-Anweisungen Deny, Allow und Order:
+Das letzte Kriterium ist das Einfachste:  Alle Computer innerhalb der FH haben eine IP-Adresse die mit 10. beginnt. Die Zugriffsbeschränkung erfolgt mit den Konfigurations-Anweisungen Deny, Allow und Order:
 
 <apache>
 Order deny,allow
@@ -46,7 +46,7 @@ Allow from 10.
 
 §
 
-Aber meist will man nicht den Zugriff auf den ganzen Server sperren, sondern auf einen Bestimmten Ordner oder auf bestimmte Dateien. Dafür wird in der Apache Konfigurations-Datei eine Schreibweise verwendet, die an HTML oder XML erinnert:
+Aber meist will man nicht den Zugriff auf den ganzen Server sperren, sondern auf einen bestimmten Ordner oder auf bestimmte Dateien. Dafür wird in der Apache Konfigurations-Datei eine Schreibweise verwendet, die an HTML oder XML erinnert:
 
 <apache>
   <Location /fhintranet>
@@ -73,7 +73,7 @@ Der Teil, der im `<FilesMatch>`-Tag eingeschlossen ist gilt für alle Dateien im
 Der Teil der Konfiguration, der im `<Location>`-Tag eingeschlossen ist gilt nur für den Ordner `/fhintranet` im Webspace. Der Teil, der im `<FilesMatch>`-Tag eingeschlossen ist gilt für alle Dateien im Webspace, deren Name auf `.bak` endet.
 
 
-Die Schreibwiese bei FilesMatch ist einen „Pattern" - ein Suchmusters. Patterns und Pattern-Matching werden Sie in Javascript, in PHP und in vielen Konfigurationsdateien wieder verwenden.
+Die Schreibweise bei FilesMatch ist einen „Pattern" - ein Suchmusters. Patterns und Pattern-Matching werden Sie in Javascript, in PHP und in vielen Konfigurationsdateien wieder verwenden.
 
 Das Dollar-Zeichen am Ende des Patterns bedeutet, dass `bak` am Ende des Dateinamens stehen muß. Eine Datei mit Namen test.bak.txt wäre also nicht betroffen. Vor dem Punkt muß man einen Backslash `\` schreiben, weil der Punkt alleine als Joker gelten würde. Der Pattern `.bak$` (ohne Backslash) würde also auch den Dateinamen schlabberdibak oder bik_bak erkennen, weil der Punkt für das i oder den Unterstich stehen könnte.
 

diff --git a/content/apache/konfigurieren.md b/content/apache/konfigurieren.md
@@ -50,7 +50,7 @@ Wenn man die Konfiguration von Apache verändert braucht es drei Schritte um die
 2. Apache neu starten
 3. Im Webbrowser die entsprechende Seite neu laden
 
-Wenn man die Haupt-Konfigurationsdatei von Apache nicht ändern kann gibt es eine Alternative: Man kann eine Datei namens  `.htaccess` in den Webspace hoch laden, diese Datei kann einige der Konfigurations-Anweisungen für den Apache Webserver enthalten.
+Wenn man die Haupt-Konfigurationsdatei von Apache nicht ändern kann gibt es eine Alternative: Man kann eine Datei namens  `.htaccess` in den Webspace hochladen, diese Datei kann einige der Konfigurations-Anweisungen für den Apache Webserver enthalten.
 
 Achtung: ob die `.htaccess` Datei wirksam ist oder nicht wird in httpd.conf festgelegt. Man kann die `.htaccess` Datei nicht selbst aktivieren falls sie nicht funktionieren.
 
diff --git a/content/applied-jquery-and-css/ajax-irrwege.md b/content/applied-jquery-and-css/ajax-irrwege.md
@@ -44,7 +44,7 @@ Damit kann man für die verschiedenen Zustände innerhalb ein und deselben
 HTML Dokuments jeweis eine URL definieren.  Damit funktionieren das
 verlinken, Lesezeichen setzen, u.s.w. wieder.
 
-Webseite die Javascript und pushState in dieser weise nutzen nennt
+Webseite die Javascript und pushState in dieser Weise nutzen nennt
 man "Single Page Apps" (SPA).  
 
 ## Siehe auch

diff --git a/content/applied-jquery-and-css/ajax.md b/content/applied-jquery-and-css/ajax.md
@@ -212,7 +212,7 @@ einbinden:
 Auf https://code.jquery.com/ui/ findet man die Links zu:
 
 * Dem "base" Theme - das ist die CSS Datei
-* der aktuellen jquery UI version, minified - das ist die Javscript Datei.
+* der aktuellen jquery UI version, minified - das ist die Javascript Datei.
 
 <css caption="einbindung des themes in einer css datei">
   @import "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css";
@@ -257,7 +257,7 @@ Die Antwort muss ein JSON-Dokument sein: Ein Array von Objekten:
 Die Attribute `id` und `label` des Objekts werden verwendet, alle anderen
 werden ignoriert.
 
-Wenn die Daten erfolgreich vom Server geladen wurden, wird eine funktion aufgerufen (`select`).
+Wenn die Daten erfolgreich vom Server geladen wurden, wird eine Funktion aufgerufen (`select`).
 
 Zum Testen kann man das Backend zuerst faken: einfach eine statische JSON-Datei
 unter dem Namen `search.json` abspeichern, und schon funktioniert es.
@@ -303,8 +303,8 @@ sind nach Anzahl der Zugriffen gestaffelt, im Mai 2017 waren die Preise:
 
 ![Preise von openweathermap.org](/images/openweathermap-preise.png)
 
-Beim Zugriff auf die API muss jeweils der API-Key als parameter
-mit gesendet werden:
+Beim Zugriff auf die API muss jeweils der API-Key als Parameter
+mitgesendet werden:
 
 <javascript caption="Zugriff auf die openweathermap API">
 $.get("http://api.openweathermap.org/data/2.5/weather?&units=metric&q=London,uk&apikey=....", 

diff --git a/content/applied-jquery-and-css/dex.md b/content/applied-jquery-and-css/dex.md
@@ -13,7 +13,7 @@ intro: An Hand einiger praktischer Beispiele lernen Sie jQuery besser kennen.
 
 * Ich kann mit jQuery komplexe Überprüfungen in einem Formular vornehmen, und das Absenden der Daten verhindern
 * Ich kann mit jQuery auf eine Scrollen der Webseite reagieren
-* Ich kann Mit jQuery dynamische Formulare gestalten
+* Ich kann mit jQuery dynamische Formulare gestalten
 
 
 ## Vertiefung

diff --git a/content/applied-jquery-and-css/jquery-vs-plain.md b/content/applied-jquery-and-css/jquery-vs-plain.md
@@ -11,7 +11,7 @@ Nun wollen wir dieselben Themen nocheinmal genauer betrachten.
 
 ## das jQuery Objekt
 
-Alle Funktionen die wir hier disskutieren werden geben immer
+Alle Funktionen die wir hier diskutieren werden geben immer
 ein jQuery Objekt zurück, dass eine Liste von Nodes anhalten
 kann.  Manchmal ist diese Liste leer, manchmal enthält sie nur ein
 Element, manchmal mehrere.  
@@ -196,7 +196,7 @@ $('input[id][name$=_no]')
 
 Bei der Manipulation von CSS ist zu beachten: die Schreibweise
 von CSS-Eigenschaften mit einem Minus-Zeichen lässt sich nicht
-nach Javascript übertragen.  In Javscript wird deswegen aus 
+nach Javascript übertragen.  In Javascript wird deswegen aus 
 `background-color` die Eigenschaft `backgroundColor`.
 
 <javascript caption="Style setzen">
@@ -352,7 +352,7 @@ Javascript Standard aufgenommen, und landet z.B. in Firefox 3.5 im Juni 2009.
 
 Die "reine Javascript" Lösung bringt bessere Performance,
 besonders auf mobilen Endgeräten, wo das Laden der Liberary und
-der Speicherverbrauch durch die Libraray größere Auswirkungen
+der Speicherverbrauch durch die Library größere Auswirkungen
 haben als am Desktop.
 
 Siehe auch

diff --git a/content/css-layout/interaktion.md b/content/css-layout/interaktion.md
@@ -7,7 +7,7 @@ Mit dem Selektor `:hover` wird eine CSS-Regel nur angewandt
 wenn sich der Maus-Cursor über dem Element befindet. 
 `:focus` hat eine ähnliche Bedeutung bei der Steuerung mit der Tastatur.
 
-Achtung: auf Touch-Geräten wie Tables und Smartphones gibt 
+Achtung: auf Touch-Geräten wie Tablets und Smartphones gibt 
 es derzeit kein `:hover`! Deswegen sollte man `:hover` nur zur 
 Dekoration, nicht aber für wichtige Funktionen verwenden!
 

diff --git a/content/css-layout/layout.md b/content/css-layout/layout.md
@@ -12,7 +12,7 @@ Die Darstellung einer HTML-Seite durch den Browser erfolgt von oben nach unten,
     p { background-color:#CCCCCC; }
     em { background-color:#FFFF66; }
 
-Bei der Darstellung im Browser kann der nicht-blockbildender Tag em dabei auf mehrere Zeilen verteilt werden und nimmt dann mehrere rechteckige Bereiche ein, der blockbildende Tag p wird immer als ein Rechteck dargestellt:
+Bei der Darstellung im Browser kann der nicht-blockbildende Tag em dabei auf mehrere Zeilen verteilt werden und nimmt dann mehrere rechteckige Bereiche ein, der blockbildende Tag p wird immer als ein Rechteck dargestellt:
 
 ![Abbildung 33: Darstellung von blockbildenden und nicht-blockbildenden Tags](/images/image128.png)
 
@@ -144,7 +144,7 @@ Mit der Deklaration `position: absolute` wird ein Tag aus der normalen Darstellu
 herausgenommen und über dem restlichen Inhalt der Seite platziert. 
 Mit `top` und `left` kann die linke obere Ecke des Elements positioniert werden. 
 (oder mit `bottom` und `right` die rechte unter Ecke).
-In folgendem Beispiel wird ein absolut positiniertes Menü kombiniert mit
+In folgendem Beispiel wird ein absolut positioniertes Menü kombiniert mit
 einem Inhalt mit `margin-left` - sonst würde das Menü den Inhalt verdecken!
 
 <css>

diff --git a/content/css-layout/navigation.md b/content/css-layout/navigation.md
@@ -111,7 +111,7 @@ z.B. `navi.php`.  In den einzelnen Seiten wird das Menü dann mit `include` eing
 Server Side
 -----------
 
-Das Einfügen der inkuldierten Datei erfolgt auf dem Server. 
+Das Einfügen der inkludierten Datei erfolgt auf dem Server. 
 Der Client erhält das vollständige HTML-Dokument inklusive Navigation, und merkt von der Inkludierung nichts. Mit ANSICHT → SEITENQUELLTEXT ANZEIGEN kann man den PHP-Code nicht sehen. 
 
 ![Abbildung 41: Original PHP-Datei am Server und Quelltext-Ansicht im Webbrowser](/images/image145.png)

diff --git a/content/css-layout/rahmenbedingungen.md b/content/css-layout/rahmenbedingungen.md
@@ -24,11 +24,11 @@ Abbildung 25 zeigt einige derzeit (2015) mögliche Bildschirm-Auflösungen.
 
 basierend auf http://en.wikipedia.org/wiki/Image:Vector_Video_Standards2.svg
 
-Vergleichen Sie die höchsten hier dargestellte Auflösungen mit der geringsten Auflösungen. Da Breite und Höhe (mehr als) verdreifacht sind, steht bei der höchsten Auflösung also (mehr als) die neunfache Fläche zur Verfügung!
+Vergleichen Sie die höchste hier dargestellte Auflösung mit der geringsten Auflösung. Da Breite und Höhe (mehr als) verdreifacht sind, steht bei der höchsten Auflösung also (mehr als) die neunfache Fläche zur Verfügung!
 
 §
 
-Abbildung 26 zeigt Statistiken über die Bildschirmauflösung von w3schools.org von 2000 bis 2011. In diesem Zeitraum hat sich die Mehrheit langsam von 800x600 (bis 2003) auf 1024x768 (bis 2008) und schließlich auf höhre Auflösungen verschoben. Achtung: Auf Grund des Messverfahrens werden hier wahrscheinlich nur Desktops erfaßt, nicht mobile Geräte.
+Abbildung 26 zeigt Statistiken über die Bildschirmauflösung von w3schools.org von 2000 bis 2011. In diesem Zeitraum hat sich die Mehrheit langsam von 800x600 (bis 2003) auf 1024x768 (bis 2008) und schließlich auf höhere Auflösungen verschoben. Achtung: Auf Grund des Messverfahrens werden hier wahrscheinlich nur Desktops erfaßt, nicht mobile Geräte.
 
 
 ![Abbildung 26: Statistik über die Bildschirmauflösung,](/images/display-stats.png)
@@ -38,7 +38,7 @@ Abbildung 26 zeigt Statistiken über die Bildschirmauflösung von w3schools.org
 Pixeldichte
 -----------
 
-Die Angabe der Auflösung erfolgt in Pixel – die reale Größe des Ausgabegerätes (24“ Desktop, 13“ Laptop, mobiles Endgerät) ist bei gleicher Pixel-Auflösung sehr unterschiedlich! Mobile Geräte haben eine geringe Auflösung, aber eine höhere Pixeldichte:
+Die Angabe der Auflösung erfolgt in Pixel – die reale Größe des Ausgabegerätes (24“ Desktop, 13“ Laptop, mobiles Endgerät) ist bei gleicher Pixel-Auflösung sehr unterschiedlich! Mobile Geräte haben eine geringe Auflösung, aber eine hhohe Pixeldichte:
 
 |Gerät|Erscheinungsjahr|Pixel|Diagonale Inch|Pixel per Inch|
 |+----|+---------------|+----|+-------------|+-------------|

diff --git a/content/css-layout/selektoren.md b/content/css-layout/selektoren.md
@@ -5,7 +5,7 @@ order: 30
 
 Im Kapitel [CSS Selektoren](/css/basic-selectors/) haben Sie CSS schon
 einige Selektoren
-kennen gelernt. In der CSS 2.1 Spezifikation werden u.a. 
+kennengelernt. In der CSS 2.1 Spezifikation werden u.a. 
 folgende Schreibweisen für Selektoren beschrieben:
 
 |Name|Muster |Beschreibung|
@@ -54,14 +54,14 @@ Pseudo Classes
 ---------
 
 Wir haben im Zusammenhang mit Links schon die Pseudo Classes `:link` und
-`:visited` kennen gelernt, und im Zusammenhang mit Interaktion `:hover` und
+`:visited` kennengelernt, und im Zusammenhang mit Interaktion `:hover` und
 `:focus`.
 
 Es gibt noch eine Hand voll weiterer Pseudo Classes:
 
 * `:first-child` selektiert ein Element nur, wenn es das erste Kind seiner Eltern-Node ist
 * `:first-letter`  selektiert nur den ersten Buchstaben!  Das funktioniert auch,
-  wenn der Buchstabe gar keine eigenen Node in der DOM ist!
+  wenn der Buchstabe gar kein eigener Node im DOM ist!
 * `:first-word`  selektiert das erste Wort.  Das funktioniert auch,
   wenn das Wort      gar keine eigenen Node in der DOM ist!
 * `::selection` der aktuell ausgewählte Bereich, siehe [css-tricks](http://css-tricks.com/examples/DifferentSelectionColors/)

diff --git a/content/css/basic-selectors.md b/content/css/basic-selectors.md
@@ -3,7 +3,7 @@ title: CSS Selektoren
 order: 40
 ---
 
-Um CSS Selektoren zu verstehen muss man das Document Object Betrachten:
+Um CSS Selektoren zu verstehen muss man das Document Object betrachten:
 die Darstellung des HTML-Dokuments als Baum:
 
 ![Document Object Model und Selektor](/images/html-und-dom.png)
@@ -55,7 +55,7 @@ oder `h2`, oder `a`:
 ![Document Object Model und Selektor](/images/selector-group.png)
 
 (Achtung Falle: für Links mit dem `a` Tag gelten noch zusätzliche Regeln,
-siehe weiter Unten.)
+siehe weiter unten.)
 
 
 Descendant Selector
@@ -73,7 +73,7 @@ Achtung: `div` wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt
 ![Document Object Model und Selektor](/images/selector-desc.png)
 
 (Achtung Falle: für Links mit dem `a` Tag gelten noch zusätzliche Regeln,
-siehe weiter Unten.)
+siehe weiter unten.)
 
 
 Links formatieren