diff --git a/content/advanced-javascript/dex.md b/content/advanced-javascript/dex.md index 08a67f4..98c54a1 100644 --- 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 index c1c2185..2111942 100644 --- 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 `` über die Attribute `cx` und `cy` gesetzt, die Position eines `` ü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 index f4d9c8c..9155de2 100644 --- 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 index 94e49c0..4c5659a 100644 --- 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: // ----- Pet --------- diff --git a/content/apache/auth.md b/content/apache/auth.md index 013d850..94133c7 100644 --- 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: 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: @@ -73,7 +73,7 @@ Der Teil, der im ``-Tag eingeschlossen ist gilt für alle Dateien im Der Teil der Konfiguration, der im ``-Tag eingeschlossen ist gilt nur für den Ordner `/fhintranet` im Webspace. Der Teil, der im ``-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 index 178874a..9b04e4b 100644 --- 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 index 186fbfb..09fccdc 100644 --- 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 index 75d5450..134b926 100644 --- 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. @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: $.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 index cf1eddf..7d09080 100644 --- 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 index 69e6d3b..918757e 100644 --- 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`. @@ -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 index 41e3c5e..41070df 100644 --- 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 index 7bb931f..17eca0c 100644 --- 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! diff --git a/content/css-layout/navigation.md b/content/css-layout/navigation.md index 4397abc..5301c17 100644 --- 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 index 2760296..dd2c0f4 100644 --- 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 index b6b0ed0..ee213b2 100644 --- 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 index eabe661..43d432f 100644 --- 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 diff --git a/content/css/css-kurz.md b/content/css/css-kurz.md index 2457836..1727e07 100644 --- a/content/css/css-kurz.md +++ b/content/css/css-kurz.md @@ -50,7 +50,7 @@ Wichtige Argumente für den Einsatz von Stylesheets sind: * Zusätzliche Gestaltungsmöglichkeiten * Einheitliche Gestaltung von mehreren Webseiten -* Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und RedakteuerInnen (die Inhalte erstellen) +* Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und RedakteurInnen (die Inhalte erstellen) Aber Achtung: CSS ist nicht die Lösung jedes Problems: @@ -83,13 +83,13 @@ An Hand dieses Beispieles werden nun die ersten Stylesheet-Befehle erklärt. Die Interpretation ----------- -Zuerst werden wir die Schriften im Dokument festlegen. Achtung: Welche Schriften auf dem Endgerät zur Verfügung stehen ist nicht bekannt, deswegen kann man mehrere Schriften angegeben. Diese Liste wird vom Browser von links nach rechts abgearbeitet,die erste Schrift die er findet, verwendet er. (Man kann Schriften auch verlinken - aber das ist mehr ein Thema für MMA). +Zuerst werden wir die Schriften im Dokument festlegen. Achtung: Welche Schriften auf dem Endgerät zur Verfügung stehen ist nicht bekannt, deswegen kann man mehrere Schriften angegeben. Diese Liste wird vom Browser von links nach rechts abgearbeitet, die erste Schrift die gefunden wird, wird verwendet. (Man kann Schriften auch verlinken - aber das ist mehr ein Thema für MMA). In Zeile 2 bis 5 werden zwei Anweisungen für Fließtext gegeben (HTML-Tag <p>): die Schriftfamilie in Zeile 3 und die Schriftgröße in Zeile 4. In Zeile 3 Vergleichen Sie Zeile 3 mit Zeile 7: Schriftnamen die ein Leerzeichen enthalten müssen in Anführungszeichen gesetzt werden, wie "Trebuchet MS" in Zeile 6. -Das letzte Wort in Zeile 7 „sans-serif“ ist ein CSS-Kürzel für „irgendeine serifenlose Schrift“. Es empfiehlt sich am Ende einer Schriftliste ein solches Kürzel als Standardwert „wenn alle Stricke reißen“ anzugeben,dabei sind folgende Werte möglich: +Das letzte Wort in Zeile 7 „sans-serif“ ist ein CSS-Kürzel für „irgendeine serifenlose Schrift“. Es empfiehlt sich am Ende einer Schriftliste ein solches Kürzel als Standardwert „wenn alle Stricke reißen“ anzugeben, dabei sind folgende Werte möglich: CSS erforschen mit Firebug diff --git a/content/css/css.md b/content/css/css.md index 56dd875..feef6d0 100644 --- a/content/css/css.md +++ b/content/css/css.md @@ -62,7 +62,7 @@ Um einen style für einen einzelnen Tag zu definieren, müssen Sie innerhalb des Sie können innerhalb einer HTML-Datei sowohl eine externe Style Sheet Datei verwenden (eingebunden durch eine entsprechende Anweisung im head Bereich) als auch eine lokale Definition im head Bereich angeben, als auch spezielle Angaben für einzelne Tags erstellen. -Was passiert nun, wenn die verschiedenen Style-Deklarationen sich widersprechen? Die Angaben bei einem einzelnen Tag haben immer Vorrang. danach folgen die lokalen Angabe im head Bereich und erst zum Schluß die externe Datei. „Je näher beim Tag desto stärker wirkt es.“ +Was passiert nun, wenn die verschiedenen Style-Deklarationen sich widersprechen? Die Angaben bei einem einzelnen Tag haben immer Vorrang. Danach folgen die lokalen Angabe im head Bereich und erst zum Schluß die externe Datei. „Je näher beim Tag desto stärker wirkt es.“ Klassen, IDs, SPANs und DIVs ----------------------------- @@ -129,7 +129,7 @@ Maßeinheiten in Stylesheets Für Längen- und Größen-Angaben gibt es mehrere Maßeinheiten: vw (Hundertstel der Viewport-Breite), vh (Hunderstel der Viewport-Höhe), px (Pixel) , em (=Breite des Buchstaben M) , ex (Höhe des Buchstaben X), % (Prozent), cm (Zentimeter), in (Inch). Einige davon sind relativ (em = relativ zur Schriftgröße, px = relativ zur Pixel-Größe am aktuellen Ausgabemedium), andere absolut (Centimeter, Inch). Die absoluten Angaben kann man derzeit nur bei der Ausgabe auf Papier sinnvoll verwenden. [Demo](/images/css-masse.html) -Farbangaben können auf mehrer Arten erfolgen: mit einigen Farbwörtern (red, green,…) oder mit der Angabe von rot-, grün- und blau-Anteil (jeweils Werte von 0 bis 255) in verschiedenen Schreibweisen: Dezimal `rgb(16,0,255)`, hexadezimal `#10F` oder zweistellig hexadezimal `#1000FF`. Mit CSS3 ist auch die Angabe eines Alpha-Wertes möglich: Hier ein Braun-Ton der nur zu 20% deckend ist, und zu 80% den darunter liegenden Content bzw. das Hintergrundbild durchscheinen lässt: `rgba(153, 134, 117, 0.2);` +Farbangaben können auf mehrere Arten erfolgen: mit einigen Farbwörtern (red, green,…) oder mit der Angabe von rot-, grün- und blau-Anteil (jeweils Werte von 0 bis 255) in verschiedenen Schreibweisen: Dezimal `rgb(16,0,255)`, hexadezimal `#10F` oder zweistellig hexadezimal `#1000FF`. Mit CSS3 ist auch die Angabe eines Alpha-Wertes möglich: Hier ein Braun-Ton der nur zu 20% deckend ist, und zu 80% den darunter liegenden Content bzw. das Hintergrundbild durchscheinen lässt: `rgba(153, 134, 117, 0.2);` Tool-Tipp: Mit dem Firefox AddOn Colorzilla kann man die Farben einer Webseite auslesen und in verschiedenen Schreibweisen kopieren: diff --git a/content/css/dex.md b/content/css/dex.md index 5bdd4e8..7a92d76 100644 --- a/content/css/dex.md +++ b/content/css/dex.md @@ -1,7 +1,7 @@ --- title: CSS - Einstieg index: true -intro: Sie lernen mit Cascading Stylesheets (CSS) einfache Formatierungen in der Webseite vorzunehmen. +intro: Sie lernen mit Cascading Stylesheets (CSS) einfache Formatierungen an der Webseite vorzunehmen. --- ### Was Sie wissen sollten @@ -12,7 +12,7 @@ intro: Sie lernen mit Cascading Stylesheets (CSS) einfache Formatierungen in der ### Was Sie können sollten * Ich kann ein einfaches Stylesheet für ein HTML-Dokument erstellen. -* Ich kann Bei Vorgabe einer bestimmten visuellen Darstellung und eines HTML-Dokuments ein geeignetes Stylesheet erstellen, das zu dieser Darstellung führt +* Ich kann bei Vorgabe einer bestimmten visuellen Darstellung und eines HTML-Dokuments ein geeignetes Stylesheet erstellen, das zu dieser Darstellung führt * Ich kann mit Hilfe von Firebug oder durch Lesen des Codes herausfinden welche CSS-Regeln zu einer bestimmten Darstellung in einer (fremden) Webseite führen * Ich kann die Korrektheit des CSS-Codes mit dem CSS-Validator des World Wide Web Consortium überprüfen. * Ich kann Fehler in einem CSS-Dokument ausbessern bis es valide ist. diff --git a/content/css/image-replacement.md b/content/css/image-replacement.md index 77b6e81..1ccfe1e 100644 --- a/content/css/image-replacement.md +++ b/content/css/image-replacement.md @@ -37,7 +37,7 @@ und will das Bild nur über CSS darstellen: Ein Beispiel für so eine Situation ist z.B: ein Wordpress Theme. In der `h1` -wird der Titel des Blogs angezeit, die Gestaltung der Darstellung erfolgt nur mit CSS. +wird der Titel des Blogs angezeigt, die Gestaltung der Darstellung erfolgt nur mit CSS. Image Replacement diff --git a/content/css/properties.md b/content/css/properties.md index 35576ee..ebef86e 100644 --- a/content/css/properties.md +++ b/content/css/properties.md @@ -27,7 +27,7 @@ Webfonts Als Schriften kann man einerseits Schriftarten verwenden, die am Client schon installiert sind, und andererseits kann man auf Schriften verweisen, die im Web -gespeichert sind. Eine praktische Möglichkeit Webfonts aus den Web zu laden +gespeichert sind. Eine praktische Möglichkeit Webfonts aus dem Web zu laden bietet [http://www.google.com/webfonts](http://www.google.com/webfonts) @@ -69,8 +69,8 @@ Die Ausdehnung von margin, padding und border kann man besonders gut mit der Fir Dabei wird direkt in der Webseite der Außenabstand (margin) gelb und der Innenabstand (padding) dunkelviolett hinterlegt. -Achtung: Im traditionelle Box model bezieht sich die Breite (width) auf -den Inhalt, padding, border und margin muss man erst dazu zählen, um den +Achtung: Im traditionelle Box-Model bezieht sich die Breite (width) auf +den Inhalt, padding, border und margin muss man erst dazuzählen, um den Gesamt-Platzbedarf zu errechnen. Mit der Deklaration `box-sizing: border-box` kann man auf ein besseres Box-Model umschalten: dann gibt width die Gesamt-Breite an. diff --git a/content/das-web-und-html/dex.md b/content/das-web-und-html/dex.md index 38cc2f9..df042c9 100644 --- a/content/das-web-und-html/dex.md +++ b/content/das-web-und-html/dex.md @@ -9,7 +9,7 @@ intro: Das erste Kapitel bietet einen theoretischen und praktischen Einstieg in ### Was Sie wissen sollten * Ich weiss, wer das World Wide Web erfunden hat, wer die Standards des Webs definiert -* Ich verstehe wie die drei Standards HTTP, URL und HTML zusammenspielen und das Web definieren. +* Ich verstehe wie die drei Standards HTTP, URL und HTML zusammenspielen und das Web definieren * Ich verstehe wie eine HTTP Anfrage aufgebaut ist: Request und Response * Ich weiss wie ein Dokument im HTML aufgebaut ist: head + body, tags, attribute, character entities * Ich kenne die HTML-Tags für Überschriften, Absätze, Links, Bilder diff --git a/content/das-web-und-html/geschichte.md b/content/das-web-und-html/geschichte.md index c77d046..917fa07 100644 --- a/content/das-web-und-html/geschichte.md +++ b/content/das-web-und-html/geschichte.md @@ -10,7 +10,7 @@ es in den Jahren 1989, 1990, 1991 als EDV-Mitarbeiter am CERN wie folgendes „fact sheet“ aus der Zeit +sehr geringer Bandbreite, wie folgendes „fact sheet“ aus der Zeit dokumentiert: § @@ -109,7 +109,7 @@ verändert wie Wissen gesammelt werden kann. ![Abbildung: Facebook 2004 und 2010](/images/facebook.png) -Dass ich am Web speichern kann wer meine FreundInnen sind, um dann mit diesen FreundInnen kurze "Status-meldungen" auszutausche - das wurde erst im 21.Jahrhundert erfunden. Wie geht es weiter? +Dass ich am Web speichern kann wer meine FreundInnen sind, um dann mit diesen FreundInnen kurze "Statusmeldungen" austausche - das wurde erst im 21.Jahrhundert erfunden. Wie geht es weiter? Weitere Quellen -------------- diff --git a/content/das-web-und-html/html-grundkurs.md b/content/das-web-und-html/html-grundkurs.md index 33c8e65..431880c 100644 --- a/content/das-web-und-html/html-grundkurs.md +++ b/content/das-web-und-html/html-grundkurs.md @@ -3,12 +3,12 @@ title: HTML Grundkurs order: 30 --- Wir werden HTML in der Version 5 verwendet. Die wichtigsten HTML-Tags (Links, Bilder, -Tabellen, Formulare) werden Sie bald auswendig können. Alle Details können Sie Intenet +Tabellen, Formulare) werden Sie bald auswendig können. Alle Details können Sie im Internet nachschlagen. -HTML hat sich in den ca. 20 Jahren seines Bestehens weit entwickelt. Die Version 5, die wir +HTML hat sich in den ca. 20 Jahren seines Bestehens rasant weiterentwickelt. Die Version 5, die wir verwenden, ist ein relativ neuer Standard, der aber in den aktuellen Versionen der gängigen -Browsern bereits umgesetzt ist. +Browser bereits umgesetzt ist. § @@ -26,8 +26,8 @@ Der Arbeitsablauf beim Erstellen von HTML ist eine endlose Schleife: 1. Code im Editor eintippen 2. Abspeichern 3. Zum Browser wechseln -4. Neu Laden, das Ergebnis betrachten -5. meistens: nicht zufrieden mit dem Ergebnis sein, zurück zu 1. +4. Neuladen, das Ergebnis betrachten +5. Meistens: nicht zufrieden mit dem Ergebnis sein, zurück zu 1. Es gibt verschiedene Online-Tools um HTMl auszuprobieren: @@ -37,17 +37,17 @@ Zeichensatz ----------- HTML-Dateien bestehen aus reinem Text, in unserem Falle entweder aus Text im Format -ISO 8859-1 (Latin-1) oder im Format utf-8. Mit Latin-1 ist man auf das +ISO 8859-1 (Latin-1) oder im Format UTF-8. Mit Latin-1 ist man auf das lateineische Alphabet mit westeuropäischen Sonderzeichen beschränkt - man kann im selben Dokument nicht auch grieschische, hebräische, arabische, japanische -Zeichen darstellen. Mit utf-8 hat man den gesamten Zeichensatz der Menschheit -zur Verfügung. Mein Empfehlung lautet: immer utf-8 verwenden. +Zeichen darstellen. Mit UTF-8 hat man den gesamten Zeichensatz der Menschheit +zur Verfügung. Mein Empfehlung lautet: immer UTF-8 verwenden. ![Abbildung 8: Auswahl des Charactersets „Unicode“ ](/images/image037.jpg) Diese Abbildung zeigt wie die Charactersets in Windows- und Mac-Programmen -dargestellt werden. Links im Bild, in Notepad, wird ISO 8859-1 als ANIS +dargestellt werden. Links im Bild, in Notepad, wird ISO 8859-1 als ANSI bezeichnet. Rechts im Bild, im Mac-Programm Textwrangler, ist die Bezeichnung klarer. @@ -98,7 +98,7 @@ Whitespace Sogenannter "whitespace " - das sind mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche hintereinander – wird vom Browser völlig ignoriert. Ob Sie also in Ihrer HTML-Datei ein Leerzeichen oder 7 Leerzeilen einfügen macht keinen -Unterschied. (gar kein Leerzeichen oder ein Leerzeichen macht schon einen Unterschied) +Unterschied (gar kein Leerzeichen oder ein Leerzeichen macht schon einen Unterschied). Die folgenden beiden Dokumente sind also äquivalent: @@ -154,7 +154,7 @@ Das Attribut bli, welches nicht zu HTML gehört, also kein Browser kennt, wird w unbekannte Attribute einfach ignoriert. Der Wert eines Attributes muß in XHTML immer in Anführungszeichen geschrieben -werden, in HTML kann man die Anführungszeichen weglasse, dann endet der Wert +werden, in HTML kann man die Anführungszeichen weglassen, dann endet der Wert beim nächsten Leerzeichen. @@ -236,8 +236,8 @@ Text formatieren ---------------- Wir unterscheiden zwischen HTML-Tags die Blöcke definieren, und solchen die das nicht tun. -Blockbildende Tags beanspruchen immer einen rechteckigen Bereich bei der Ausgabe, nicht -blockbildende Tags tun das nicht. +Blockbildende Tags beanspruchen immer einen rechteckigen Bereich bei der Ausgabe, +nicht-blockbildende Tags tun das nicht. ![Abbildung 9: Darstellung von blockbildenden (grau hinterlegten) und nicht-blockbildenden (rot hinterlegten) Tags](/images/image042.png) @@ -316,7 +316,7 @@ Die logischen Tags geben die genaue Darstellung nicht vor. Physische Tags geben die genaue Darstellung vor. Das sind eigentlich „altmodische Tags“, besonders der font-Tag wurde schon um das Jahr 2000 herum durch Stylesheets vollständig ersetzt, und sollte möglichst nicht mehr verwendet werden. Sie werden -diese Tag in „alten“ Dokumenten aber noch finden: +diese Tags in „alten“ Dokumenten aber noch finden: Eine fette Sache (VERALTET!) @@ -325,7 +325,7 @@ Eine schräge Sache (VERALTET!) rot (VERALTET!) -Heute verwendet man CSS im `style`-Attribut statt dessen: +Heute verwendet man CSS im `style`-Attribut stattdessen: Text (aktuelle Schreibweise) diff --git a/content/das-web-und-html/standards.md b/content/das-web-und-html/standards.md index 1a56fd0..156fd83 100644 --- a/content/das-web-und-html/standards.md +++ b/content/das-web-und-html/standards.md @@ -3,7 +3,7 @@ title: Drei Standards definieren das Web order: 20 --- -Für diese Lehrbuch ist eine technische Sicht auf das World Wide Web die relevante. +Für diese Lehrbuch ist die technische Sicht auf das World Wide Web relevant. Das World Wide Web ist also ein verteiltes (Client/Server) Informationssystem, das durch folgende drei Standards definiert wird: @@ -29,11 +29,11 @@ Nach diesem Prinzip funktionieren Web, E-Mail, SFTP: |:--------|:-------|:-------| |Web|Webbrowser - lädt Webseiten vom Server und stellt sie dar|Webserver – liefert auf Anfrage die Webseiten| |E-Mail|E-Mail Programm – lädt E-Mails vom Server, zeigt sie an, kann neue E-Mails an einen Server schicken der sie zustellt, …|Mailserver – speichert E-Mail in verschiedenen Postfächern, leitet E- Mail weiter (an den Server der EmpfängerIn)| -|SFTP|SFTP-Client – lädt Dateien (verlüsselt) von einem Server herunter oder auf einen Server hinauf|SFTP-Server – speichert Dateien| +|SFTP|SFTP-Client – lädt Dateien (verschlüsselt) von einem Server herunter oder auf einen Server hinauf|SFTP-Server – speichert Dateien| {: class="table table-condensed table-bordered" style="width:auto"} -Eine Alternative zu Client/Server ist Peer-zu-Peer . Dabei sind alle +Eine Alternative zu Client/Server ist Peer-to-Peer . Dabei sind alle beteiligten Computer gleichberechtigt, es gibt keine verschiedenen Rollen. Nach diesem Prinzip funktionieren Datei-Tauschbörsen. @@ -73,7 +73,7 @@ zugenommen: Smartphones und Tablets. ![Aufstieg und Fall des PCs, zitiert aus asymco.com/2012](/images/rise-and-fall-pc.png) Auf diesen neuen Geräten gibt es auch Webbrowser - teilweise spezialisierte Software (Android Browser), teilweise -adaptionen der klassischen Desktop Browser (Firefox). +Adaptionen der klassischen Desktop Browser (Firefox). ![Browser auf mobilen Geräten: Handys und iPad, 2010](/images/image031.png) @@ -167,7 +167,7 @@ ziffer = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" Eine letzte Ableitungsregel liest man so: eine `ziffer` ist entweder eine `0` oder -eine `1` oder ... oder eine `9`. Ein `jahr` ist vier ziffern hintereinander. +eine `1` oder ... oder eine `9`. Ein `jahr` ist vier Ziffern hintereinander. § @@ -476,7 +476,7 @@ HTTP so aus (hier 9 Schritte am Beispiel der URL `http://multimediatechnology.at 2. Der Browser analysiert die URL und ermittelt daraus den Domain Namen des Webservers (`multimediatechnology.at`), löst diese über DNS zur IP-Adresse auf, das Ergebnis lautet `193.170.119.85` 3. Der Browser baut eine TCP-Verbindung zu `193.170.119.85`, Port 80 auf 4. Er sendet einen HTTP-Request: `GET /web-communities/ HTTP/1.0\n\n` -5. Der Webserver nimmt die Anfrage entgegen und analysiert sie. Meistens interpretiert er sie als Aufforderung, eine bestimmte Datei von der Platte zu lesen. In diesem Fall aber wird ein PHP Programm gestartet, dass Daten aus einer MySQL Datenbank abfragt und als HTML aufbereitet. +5. Der Webserver nimmt die Anfrage entgegen und analysiert sie. Meistens interpretiert er sie als Aufforderung, eine bestimmte Datei von der Platte zu lesen. In diesem Fall aber wird ein PHP Programm gestartet, das Daten aus einer MySQL Datenbank abfragt und als HTML aufbereitet. 6. Der Webserver schickt einen HTTP-Response an den Browser, diese enthält einen Statuscode, z. B. `200 OK`, einige Zusatzinformationen und dann die eigentlichen Daten des Dokuments (den erzeugten HTML-Code) 7. Der Browser nimmt das Dokument in Empfang und stellt es dar 8. Der Browser scrollt das Dokument bis zur Textmarke `master` @@ -491,7 +491,7 @@ speichern mit wem er gerade Daten ausgetauscht hat, um die nächste Anfrage durchführen/beantworten zu können. Ein Protokoll mit dieser Eigenschafft nennt man "zustandslos" ("stateless"). Dadurch ist es sehr einfach einen Server zu programmieren. -Das war ein sehr einfachs Beispiel, wie das Protokoll ablaufen kann. Einen tieferne Einblick in HTTP erhalten Sie im Kapitel [http](/http/). +Das war ein sehr einfaches Beispiel, wie das Protokoll ablaufen kann. Einen tieferen Einblick in HTTP erhalten Sie im Kapitel [http](/http/). Quellen und weiter Lektüre --------- diff --git a/content/das-web-und-html/upload.md b/content/das-web-und-html/upload.md index fd650ed..6d0c268 100644 --- a/content/das-web-und-html/upload.md +++ b/content/das-web-und-html/upload.md @@ -27,7 +27,7 @@ Folge-Fehler fallen damit auch weg. ![Abbildung 12: Fehlermeldung des Validators](/images/image052.png) Die Fehlermeldung in Abbildung 12 geht auf einen Tippfehler zurück: der schließende Tag -wurde falsch geschreiben. +wurde falsch geschrieben. § @@ -46,7 +46,7 @@ Upload Die fertige Webseite muss auf einem Webserver veröffentlicht werden. In der FH Salzburg steht Ihnen dafür der Webserver users.multimediatechnology.at zur Verfügung. Um die Daten vom eigenen Computer auf den Webserver zu laden gibt es verschiedene -Methoden, die wichtigsten sind FTP, WebDAV, SFTP. +Methoden, die Wichtigsten sind FTP, WebDAV, SFTP. Bei jeder Upload-Methode brauchen Sie folgende Informationen: den Namen des Servers, Usernamen, Passwort, in welchen Ordner Sie die Daten speichern, unter welcher URL die Daten im Web diff --git a/content/dex.md b/content/dex.md index 266081e..8d21991 100644 --- a/content/dex.md +++ b/content/dex.md @@ -8,7 +8,7 @@ für das Informatik- oder Medieninformatik-Studium. Das Buch wurde ursprünglich von Brigitte Jellinek an der FH Salzburg -zur Verwendung im Studiengang MultiMediaTechnology geschreiben, und 2012 +zur Verwendung im Studiengang MultiMediaTechnology geschrieben, und 2012 unter der CC-NC-SA Lizenz auf github publiziert. ### Aufbau @@ -26,10 +26,10 @@ Das Ergebnis von Teil 1 dieses Kurses sollte sein: * Ich kann **statische Webseiten erstellen**, und habe auch schon eine kleine Web-Site vollständig umgesetzt. * Ich verstehe wie das Web funktioniert, kann das beschreiben, dabei die **Fachwörter** Browser, Webserver, HTTP, URL, HTML, CSS, Javascript, PHP richtig verwenden. * Ich kann HTML5, CSS3, Javascript und PHP **Code erkennen und lesen**, weiss welche Aspekte der Website von welchem Code beeinflusst werden. -* Ich kann im HTML, CSS und einfachem Javscript Code **Fehler suchen**, finden und beheben. +* Ich kann im HTML, CSS und einfachem Javascript Code **Fehler suchen**, finden und beheben. * Ich verstehe wie **Ereignisse (Events)** in Javascript verwendet werden, kann einfache User-Interaktion mit Clicks programmieren. * Ich kenne die Problemstellung der Browserkompatiblität und verschiedener Ausgabegeräte für Webseiten, und kann meine Webseiten so gestalten, dass sie **in allen Browsern** verwendbar sind. -* Ich kenne die **Arbeitsteilung** in einem Web-Projekt und kann meinen (technischen) Teil beitragen. Ich kann das von DesignerInnen von AutorInnen gelieferte Material einbinden. +* Ich kenne die **Arbeitsteilung** in einem Web-Projekt und kann meinen (technischen) Teil beitragen. Ich kann das von DesignerInnen und von AutorInnen gelieferte Material einbinden. Und ein ganz konkretes Arbeitsergebnis: diff --git a/content/formulare/action.md b/content/formulare/action.md index 0c62317..8de503e 100644 --- a/content/formulare/action.md +++ b/content/formulare/action.md @@ -25,7 +25,7 @@ HTML-Code des Formulars aus:
-Achtung: diese Art die Daten zu senden ist sehr fehleranfällig: hierfür muß am Client-Computer nicht nur der Browser funktionieren, sondern auch das E-Mail Programm. Das E-Mail Programm muß richtig konfiguriert sein. Das ist auf vielen Computern am Internet nicht der Fall, oft werden die Daten also nicht erfolgreich versandt sondern gehen verloren. +Achtung: diese Art die Daten zu senden ist sehr fehleranfällig: hierfür muß am Client-Computer nicht nur der Browser funktionieren, sondern auch das E-Mail Programm. Das E-Mail Programm muß richtig konfiguriert sein. Das ist auf vielen Computern im Internet nicht der Fall, oft werden die Daten also nicht erfolgreich versandt sondern gehen verloren. ![Abbildung 48: Formular per E-Mail oder über den Webserver senden](/images/image225.png) @@ -37,7 +37,7 @@ Deswegen sollten Sie diese Methode nicht verwenden, sondern immer über den Webs Daten senden mit Methode GET ----------------------------- -Wird im Form-Tag als Action eine URL mit http angegeben dann werden die Daten an den Webserver gesendet. Dabei gibt es zwei Methoden: GET und POST. GET ist die einfachere. +Wird im Form-Tag als Action eine URL mit http angegeben dann werden die Daten an den Webserver gesendet. Dabei gibt es zwei Methoden: GET und POST. GET ist die Einfachere. In Abbildung 49 sehen Sie ein (leicht vereinfachtes) Bestellformular für Flugzeuge das die Methode GET verwendet. @@ -45,7 +45,7 @@ In Abbildung 49 sehen Sie ein (leicht vereinfachtes) Bestellformular für Flugze ![Abbildung 49: Formular mit Methode GET](/images/image230.png) Wenn die UserIn auf „Bestellung absenden“ drückt, baut der Browser aus der -action und den Namen und Werten der einzelnen Eingabefelder eine URL zusammen, +Action, den Namen und den Werten der einzelnen Eingabefelder eine URL zusammen, die dann aufgerufen wird. @@ -108,10 +108,10 @@ konstruieren und aufrufen. Die **URL** (und nicht das Formular) ist also eine Nun könnte man meinen: "Wenn ich die URL geheim halte ist es doch keine öffentliche Schnittstelle". Das ist aber ein Trugschluss: auch eine "geheime" URL, die ich nie bewusst öffentlich mache wird öffentlich werden. URLs sind im Browser-Cache gespeichert, werden im Browser vorgeschlagen -wenn ich eine URL eintippe, sind in Logfile von Proxies gespeichert. Selbst URLs die ich blos -im Skype-Chat weitergegen habe, sind dritten bekannt, wie [diese Untersuchung von Heise zeigt](http://www.heise.de/security/meldung/Vorsicht-beim-Skypen-Microsoft-liest-mit-1857620.html) +wenn ich eine URL eintippe, sind in Logfiles von Proxies gespeichert. Selbst URLs die ich blos +im Skype-Chat weitergegeben habe, sind Dritten bekannt, wie [diese Untersuchung von Heise zeigt](http://www.heise.de/security/meldung/Vorsicht-beim-Skypen-Microsoft-liest-mit-1857620.html) -Das "geheimhalten" einer URL ist also keine geeignete Sicherheitsmaßnahme! +Das "Geheimhalten" einer URL ist also keine geeignete Sicherheitsmaßnahme! Wenn ich eine Webseite vor Zugriffen schützen will brauche ich dazu Passwörter und https, siehe [Authentisieren nach RFC 2617](/http/http/#slide-18) und [HTTPS](/http/http/slide.html#slide-19), beide im Kapitel HTTP, und diff --git a/content/formulare/javascript.md b/content/formulare/javascript.md index e5f0e68..216e68a 100644 --- a/content/formulare/javascript.md +++ b/content/formulare/javascript.md @@ -2,7 +2,7 @@ title: Formular und Javascript order: 40 --- -Am Beispiel eines Formular werden wir nun einfaches Javascript kennen lernen. Die Details von Javascript werden in den nächsten Kaptieln, hier geht es nur um ein erstes Kennenlernen. +Am Beispiel eines Formulars werden wir nun einfaches Javascript kennen lernen. Die Details von Javascript werden in den nächsten Kapiteln erfahren, hier geht es nur um ein erstes Kennenlernen. Javascript Einbetten --------------------- @@ -84,7 +84,7 @@ Mit dem Befehl `document.write()` kann Text/Code in den HTML-Code eingefügt wer

Hallo Welt

Hallo HTML

 @@ -101,7 +101,7 @@ wird nie abgespeichert! Mit Firebug kann man den erzeugen Code aber sehen:

Hallo Welt

-

Hallo Javscript

+

Hallo Javascript

Hallo HTML

 @@ -167,7 +167,7 @@ Im Webbrowser sind solche Ereignisse z.B.: * Klicken auf einen Link * Eintippen in ein Textfeld * Anklicken einer Checkbox -* Absenden eines Formulares +* Absenden eines Formulars Eine Liste der wichtigsten Events bzw. on-Attributen für HTML-Tags finden Sie in der [DOM Level 2 Event Specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents-h3). @@ -250,7 +250,7 @@ Bei den einzelnen Berechnungen für die einzelnen Bücher wird jeweils zum Schlu § -Achtung: beim „rechnen“ mit Eingabefelder von Javascript tritt häufig folgender +Achtung: beim „Rechnen“ mit Eingabefelder von Javascript tritt häufig folgender Fehler auf: in Javascript werden die Datentypen number, string, boolean, object zwar unterschieden, aber nicht deklariert. Es kann in einer Variable einmal ein String und einmal eine Zahl gespeichert sein: @@ -278,7 +278,7 @@ Hier der Output des Programms: § -Der `+` Operator verhält sich also je nach Datentype des ersten Arguments verschieden: steht links des Plus-Zeichens eine Zahl, dann erfolgt eine Addition. Steht links des Plus-Zeichens ein String, dann erfolgt eine String-Konkatenation; ein Aneinanderfügen von Text. +Der `+` Operator verhält sich also je nach Datentyp des ersten Arguments verschieden: steht links des Plus-Zeichens eine Zahl, dann erfolgt eine Addition. Steht links des Plus-Zeichens ein String, dann erfolgt eine String-Konkatenation; ein Aneinanderfügen von Text. Eingabefelder in Web-Formularen liefern immer einen String. Deswegen ist es falsch, sie einfach zu addieren. `100 + 200 + 0 + 0 + 0 + 0` wäre `1002000000`. Bei der Multiplikation mit `*` tritt dieses Problem nicht auf, da der Stern keine zweite Bedeutung hat. diff --git a/content/git/basic-git.md b/content/git/basic-git.md index 910a56c..05efed6 100644 --- a/content/git/basic-git.md +++ b/content/git/basic-git.md @@ -7,7 +7,7 @@ Diese Abbildung zeigt die wichtigsten Fachbegriffe von git: ![Abbildung 141: Fachbegriffe und wichtigste Aktionen mit git](/images/image356.png) -Als **working copy** werden die Dateien und Ordner bezeichnet, die auf meinem lokalen Rechner aktuell im Filsystem sichtbar sind. Mit diesen kann ich also „ganz normal“ arbeiten: editieren, im Browser betrachten, etc. +Als **working copy** werden die Dateien und Ordner bezeichnet, die auf meinem lokalen Rechner aktuell im Filesystem sichtbar sind. Mit diesen kann ich also „ganz normal“ arbeiten: editieren, im Browser betrachten, etc. Im **lokalen Repository** (local repository) verwaltet und speichert git alle „alten Versionen“ der Dateien. Mein lokales Repository unterscheidet sich technisch nicht von anderen Repositories, die ich als remote Repositories ansprechen kann. @@ -16,7 +16,7 @@ mit dem Befehl **add** in den Zustand **staged** versetzten. Ich sammle Schritt für Schritt die Dateien zusammen, die ich gemeinsam **committen** will. Mit dem Befehl **commit** werden die gestageden Dateien im lokalen Repository -abgespeichert, und erhalten dort einen eindeutigen Hash und eine Meldund (die +abgespeichert, und erhalten dort einen eindeutigen Hash und eine Meldung (die ich dazu eingebe). Mit dem Befehl **push** kann ich die commits aus meinem lokalen Repository @@ -36,7 +36,7 @@ Zuerst muss ich entscheiden welche Dateien / Änderungen zum Commit gehören. git add form.html git add bestellung.php -Nun befinden sich die Änderungn von form.html und bestellung.html in der staging area, und sind bereit für einen commit. Dazu gebe ich noch einen kurzen Kommentar ein: +Nun befinden sich die Änderungen von form.html und bestellung.html in der staging area, und sind bereit für einen commit. Dazu gebe ich noch einen kurzen Kommentar ein: git commit –m 'bestellformular von get auf post umgestellt – wir sind restful!' diff --git a/content/git/dex.md b/content/git/dex.md index f369a62..27c3e71 100644 --- a/content/git/dex.md +++ b/content/git/dex.md @@ -11,8 +11,8 @@ intro: Sie lernen mit dem Versionskontrollsystem git Ihre Dateien zu verwalten. ### Was Sie alle können sollten * Als Einzelperson mit einem git repository arbeiten, d.h.: -* ein private/public key pair erzeugen -* ihren ssh client so configurieren, dass er ihren private key verwendet +* Ein private/public key pair erzeugen +* Ihren ssh client so konfigurieren, dass er Ihren private key verwendet * Ein git repository clonen * Neue Dateien stagen, committen und pushen. * Den Status des git repositories auf verschiedene Arten abfragen diff --git a/content/git/public-private-key.md b/content/git/public-private-key.md index d50dc64..e53039f 100644 --- a/content/git/public-private-key.md +++ b/content/git/public-private-key.md @@ -15,13 +15,13 @@ Asymmetrische Kryptosysteme. Klassische Verschlüsselung kennt nur einen Schlüssel: er wird zum ver- und zum ent-schlüsseln verwendet. Das ist eigentlich unpraktisch: -wenn ich ein problem habe eine lange Botschaft ohne Abhören oder Manipulation von A nach B zu bringen, +wenn ich ein Problem habe eine lange Botschaft ohne Abhören oder Manipulation von A nach B zu bringen, und sie deswegen verschlüssle, dann ist mir ja nicht geholfen: jetzt muss ich erst -den gezeimen Schlüssel sicher (ohne Abhören oder Manipulation) von A nach B bringen. Das Problem +den geheimen Schlüssel sicher (ohne Abhören oder Manipulation) von A nach B bringen. Das Problem hat jetzt einen kleinern Umfang, aber das Grundproblem bleibt bestehen. Bei einem asymmetrischen Verschlüsselungsverfahren gibt es zwei verschiedene -Schlüssel: einen öffentlichen und einen privaten: +Schlüssel: einen Öffentlichen und einen Privaten: ![Ver- und Entschlüsseln](/images/public_key_crypto.svg) diff --git a/content/git/versionskontrolle.md b/content/git/versionskontrolle.md index 784f1fd..c1c04dc 100644 --- a/content/git/versionskontrolle.md +++ b/content/git/versionskontrolle.md @@ -25,7 +25,7 @@ Die englische Wikipedia enthält einen Überblick über verschiedene Systeme: Dabei sind drei historische Entwicklungsschritte erkennbar: -* Nur Lokal: das System ist auf die Verwaltung vom Daten im lokalen Filesystem ausgelegt. +* Nur Lokal: das System ist auf die Verwaltung von Daten im lokalen Filesystem ausgelegt. * Client-Server: Daten werden in einem zentralen Repository gespeichert. * Verteilt: Jeder Arbeitsplatz hat ein eigenes Repository, kann auch "offline" arbeiten. diff --git a/content/grafik/2dcanvas.md b/content/grafik/2dcanvas.md index 694b8de..edb52fb 100644 --- a/content/grafik/2dcanvas.md +++ b/content/grafik/2dcanvas.md @@ -11,7 +11,7 @@ man mit Javascript zeichnen und Bilder einkopieren kann: ![Bild](/images/canvas.png) Das Koordinatensystem des Canvas beginnt links oben. Es wird der "Painters Algorithm" -verwendet: später gezeichnets übermalt früher gezeichnetes. Egal ob Text, Linie, +verwendet: später gezeichnetes übermalt früher gezeichnetes. Egal ob Text, Linie, Bild, alles wird in einzelne Pixel verwandelt. Man kann später nicht mehr identifizieren welches Pixel vom Text, oder welches vom Bild stammt. diff --git a/content/grafik/cssgrafik.md b/content/grafik/cssgrafik.md index 3dc099a..0d9a528 100644 --- a/content/grafik/cssgrafik.md +++ b/content/grafik/cssgrafik.md @@ -24,7 +24,7 @@ beschreibt Wilson Miner die Entwicklung solch einer Grafik: Mit etwas CSS kann man von den Rechtecken zu anderen Formen gelangen. Auf der Webseite [CSS Tricks: The Shapes of CSS](https://css-tricks.com/examples/ShapesOfCSS/) beschreibt -Chris Coyier wie man mit `border-radius` und transparenten rahmen +Chris Coyier wie man mit `border-radius` und transparenten Rahmen Kreise, Ellipsen, Dreiecke und so weiter bauen kann: ![Bild der Dreiecks](/images/dreieck.png) @@ -53,5 +53,5 @@ Von David DeSandro gibt es ein ausführliches [Tutorial](http://desandro.github. ## Resume -Im zweifelsfall sollten Sie immer die einfachste technische Lösung +Im Zweifelsfall sollten Sie immer die einfachste technische Lösung für ihr Problem wählen. Bei Grafik kann das ganz oft einfaches HTML + CSS sein. diff --git a/content/grafik/dex.md b/content/grafik/dex.md index 419a1a1..868add0 100644 --- a/content/grafik/dex.md +++ b/content/grafik/dex.md @@ -1,7 +1,7 @@ --- title: Grafik im Browser index: true -intro: In diesem Kapitel werde verschiedene Möglichkeiten für Grafik im Browser vorgestellt +intro: In diesem Kapitel werden verschiedene Möglichkeiten für Grafik im Browser vorgestellt --- diff --git a/content/grafik/svg.md b/content/grafik/svg.md index 98a4653..f1e998c 100644 --- a/content/grafik/svg.md +++ b/content/grafik/svg.md @@ -39,7 +39,7 @@ Darstellung im Browser werden sie mit dem [Painters Algorithm](http://de.wikiped "spätere" Objekte übermalen "frühere" Objekte. Deswegen überdeckt das blaue Rechteck im Beispiel den grünen Kreis. -Inline SVG wird heute von den aktuellen Browsersn unterstütz, siehe +Inline SVG wird heute von den aktuellen Browsern unterstützt, siehe [can i use](http://caniuse.com/#feat=svg-html5) @@ -106,7 +106,7 @@ Viele Attribute kann man alternativ auch über CSS definieren. ### Pfad und Polygon Für Pfade und Polygone wird eine Kurzschreibweise verwendet, bei der mehrere Punkte in -ein einziges Attribut `d` des Tags geschreiben werden. Ein Pfad besteht aus Befehlen und Koordinaten. +ein einziges Attribut `d` des Tags geschrieben werden. Ein Pfad besteht aus Befehlen und Koordinaten. Zwischen den Koordinaten kann man Kommas und beliebigen Whitespace einfügen. @@ -117,7 +117,7 @@ Zwischen den Koordinaten kann man Kommas und beliebigen Whitespace einfügen. § Wird der Befehl als Großbuchstaben geschrieben, dann werden die Koordinaten -absolut interpretier, bei einem Kleinbuchstaben werden sie relativ interpretiert. +absolut interpretiert, bei einem Kleinbuchstaben werden sie relativ interpretiert. Folgende Befehle erwarten eine fixe Anzahl von Koordinaten: |Buchstabe | Befehl | Parameter | Beschreibung | @@ -282,7 +282,7 @@ lokales Koordinatensystem definieren. ## Animation Fast jedes Attribut in SVG kann animiert werden. In folgendem -Beispiel wird as Attribut `startOffset` des Elements `textPath` +Beispiel wird das Attribut `startOffset` des Elements `textPath` animiert: diff --git a/content/http/anwendungsbeispiele.md b/content/http/anwendungsbeispiele.md index 6a7c0e3..60667c8 100644 --- a/content/http/anwendungsbeispiele.md +++ b/content/http/anwendungsbeispiele.md @@ -175,12 +175,12 @@ Damit wäre der gesamte Web-Traffic nicht mehr abhörbar. Proxies -------- -Das HTTP-Protokoll sieht die Möglichkeit von Proxies vor. Ein Proxie ist eine „Zwischenstation“ die HTTP-Verkehr weitergibt, der Proxy agiert also auf der einen Seite als HTTP-Server, auf der anderen Seite als HTTP-Client. Im Browser kann ein Proxie konfiguriert werden: +Das HTTP-Protokoll sieht die Möglichkeit von Proxies vor. Ein Proxy ist eine „Zwischenstation“ die HTTP-Verkehr weitergibt, der Proxy agiert also auf der einen Seite als HTTP-Server, auf der anderen Seite als HTTP-Client. Im Browser kann ein Proxy konfiguriert werden: ![Abbildung 135: Proxy-Konfiguration in Firefox: Extras - Einstellungen - Erweitert - Netzwerk – Verbindung](/images/image343.png) -Ist ein Proxy konfiguriert dann baut der Browser die HTTP-Verbindung nicht direkt zum Zielrechner auf, sondern zum Proxy, und verändert die Form der ersten Zeile der HTTP-Anfrage: die vollständige URL wird angegebe: +Ist ein Proxy konfiguriert dann baut der Browser die HTTP-Verbindung nicht direkt zum Zielrechner auf, sondern zum Proxy, und verändert die Form der ersten Zeile der HTTP-Anfrage: die vollständige URL wird angegeben: GET http://www.sbg.ac.at/pr/ HTTP/1.1 diff --git a/content/http/dex.md b/content/http/dex.md index 319808a..abac6f0 100644 --- a/content/http/dex.md +++ b/content/http/dex.md @@ -4,7 +4,7 @@ intro: Das Protokoll des Web wird vorgestellt. --- ### Was Sie alle wissen sollten -* Das Computer am Internet über IP-Adressen oder Domain Names addressierbar sind +* Das Computer im Internet über IP-Adressen oder Domain Names addressierbar sind * Wie http-Request und http-Response prinzipiell aufgebaut sind, * dass GET und POST die wichtigsten Methoden des Request sind, * dass 200 und 404 die wichtigsten Status-Codes des Responds sind diff --git a/content/http/http.md b/content/http/http.md index 9a36e4b..bc86f2f 100644 --- a/content/http/http.md +++ b/content/http/http.md @@ -11,7 +11,7 @@ Ablauf im Überblick --------------------- Egal ob der Vorgang durch das Eintippen einer URL oder durch das Anklicken eines Links gestartet wird — das Laden einer Webseite über HTTP funktioniert immer gleich. -1. Der **Browser** analysiert die **URL**: falls Sie eine IP-Adresse enthält geht’s weiter zum nächsten Schritt. Falls sie einen Domain Namen enthält wird dieser mittels DNS-Lookup in die entsprechende IP-Adresse übersetzt. +1. Der **Browser** analysiert die **URL**: falls sie eine IP-Adresse enthält geht’s weiter zum nächsten Schritt. Falls sie einen Domain Namen enthält wird dieser mittels DNS-Lookup in die entsprechende IP-Adresse übersetzt. 2. Der Browser baut eine **TCP-Verbindung** zum Server auf, falls in der URL nicht anders angegeben wird dabei Port 80 angesteuert. 3. Der Browser sendet über die TCP-Verbindung einen **HTTP-Request**; dieser besteht aus einer ersten Zeile (Request-Line), mehreren Header-Zeilen und manchmal einem Body. 4. Der **Webserver** nimmt den Request entgegen und analysiert ihn. Der Webserver entscheidet, ob er zur Beantwortung der Anfrage nur eine bestimmte Datei aus dem Dateisystem zu liest, oder ein Programm aufruft. diff --git a/content/http/tcpip-und-dns.md b/content/http/tcpip-und-dns.md index 5650849..a4a4522 100644 --- a/content/http/tcpip-und-dns.md +++ b/content/http/tcpip-und-dns.md @@ -2,7 +2,7 @@ title: TCP/IP und DNS order: 20 --- -Um das Protokoll des Web zu verstehen erst ein paar Grundsätzliche Informationen zur Funktionsweise des Internet. Genaueres erfahren Sie in einer seperaten Lehrveranstaltung zum Thema Computer-Netwerke. +Um das Protokoll des Web zu verstehen erst ein paar grundsätzliche Informationen zur Funktionsweise des Internets. Genaueres erfahren Sie in einer seperaten Lehrveranstaltung zum Thema Computer-Netwerke. Das Internet ----------- @@ -16,12 +16,12 @@ Die **Besitzverhältnisse** sind kompliziert: die Leitungen und Computer gehöre Firmen, Universitäten, Schulen, Vereinen, Privatpersonen. Was hält das Internet dann zusammen? Das **Internet Protokoll**. Aufbauend auf die Grund-Netze -(z.B. Ethernet) muss jeder Computer am Internet (genannt „Host“) diese Protokoll-Familie -implementieren. Zwischen den Netzen vermitteln **Router** die Pakete von einem Netz zum nächsten. +(z.B. Ethernet) muss jeder Computer im Internet (genannt „Host“) diese Protokoll-Familie +implementieren. Zwischen den Netzen vermitteln **Router** die Pakete von einem Netz zum Nächsten weiterleiten. ### IP-Adressen -Die eindeutigen Adressen für Hosts am Internet werden zentral verwaltet. +Die eindeutigen Adressen für Hosts im Internet werden zentral verwaltet. Die Internet Assigned Numbers Authority (IANA) hat diese Aufgabe an Organisationen auf den verschiedenen Kontinenten verteilt, in Europa an das Réseaux IP Européens Network Coordination Centre (RIPE NCC). diff --git a/content/http/tools.md b/content/http/tools.md index dfa4655..aa0c8a7 100644 --- a/content/http/tools.md +++ b/content/http/tools.md @@ -35,7 +35,7 @@ Mit Firefox Developer Tools oder Chrome Dev Tools kann nur den Verkehr zwischen also weniger als Wireshark. Aber: die Tools im Browser können auch HTTPS-Verbindungen abhören, die der Browser selbst aufgebaut hat. Wireshark -würde hier nur die Verschlüsselten Daten sehen. +würde hier nur die verschlüsselten Daten sehen. Der "Network Monitor" in Firefox Developer Tools zeigt mehrere Requests auf einmal an. In dieser Ansicht kann man gut sehen wie lange die Beantwortung jeweils dauert: diff --git a/content/images/js-vererbung.html b/content/images/js-vererbung.html index ce81407..1f2f59e 100644 --- a/content/images/js-vererbung.html +++ b/content/images/js-vererbung.html @@ -58,7 +58,7 @@

Javascript Spielplatz

d2.legs = 3; -

Es stehen die Konstruktur-Funktion +

Es stehen die Konstruktor-Funktion Studiengang, Pet, Mammal, diff --git a/content/images/match.html b/content/images/match.html index eae32ab..527a12b 100644 --- a/content/images/match.html +++ b/content/images/match.html @@ -51,7 +51,7 @@

Regular Expression Match

Diese Seite demonstriert die Funktion von - Regular Expressions in Javscript. Sie funktioniert deswegen + Regular Expressions in Javascript. Sie funktioniert deswegen nur, wenn Ihr Browser Javascript interpretiert - das scheint nicht der Fall zu sein.

diff --git a/content/javascript-dom/basic-javascript.md b/content/javascript-dom/basic-javascript.md index e84a9f4..67fa388 100644 --- a/content/javascript-dom/basic-javascript.md +++ b/content/javascript-dom/basic-javascript.md @@ -65,7 +65,7 @@ werden. Das Programm wird dann beim Aufbau der Seite ausgeführt, siehe auch

Peng! -Dieses Programm ist übrigens ein gutes Beispiel für ein veraltetes Javascript-Programm. Die Methode `document.write()`, der hier für die Ausgabe verwendet wird, wurde durch das DOM größteteils ersetzt. Nur sehr wenige Leute müssen bei sehr wenigen Gelegenheiten noch `document.write()` verwenden - z.B. die AutorInnen der Javascript-Libaries wie John Resig von jQuery. +Dieses Programm ist übrigens ein gutes Beispiel für ein veraltetes Javascript-Programm. Die Methode `document.write()`, der hier für die Ausgabe verwendet wird, wurde durch das DOM größtenteils ersetzt. Nur sehr wenige Leute müssen bei sehr wenigen Gelegenheiten noch `document.write()` verwenden - z.B. die AutorInnen der Javascript-Libaries wie John Resig von jQuery. ### Javascript in einer URL @@ -241,7 +241,7 @@ b = 'Welt'; c = `Hallo ${b}, der brutto Preis ist ${100 * 1.5}`; -Die letzte, genannt **template literals**, erlaubt das einbinden von Variablen und das +Die letztgenannte Möglichkeit **template literals**, erlaubt das Einbinden von Variablen und das Auswerten von Javascript-Expressions. Siehe auch [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) ### Arrays @@ -317,7 +317,7 @@ In den eckigen Klammern steht nun ein String. Dieser könnte auch in einer Varia ### Einfache Schleife Neben der `while` und `for` Schleife mit index -gibt es in Javascript noch möglichkeiten über +gibt es in Javascript noch Möglichkeiten über die Werte in einem Array zu iterieren **ohne** den index zu benötigen: diff --git a/content/javascript-dom/dex.md b/content/javascript-dom/dex.md index c4b0580..c91dd55 100644 --- a/content/javascript-dom/dex.md +++ b/content/javascript-dom/dex.md @@ -10,4 +10,4 @@ intro: Mit Javascript lernen Sie die wichtigste Programmiersprache des Web kenne * Ich weiss, dass Javascript eine Programmiersprache im Web-Browser ist. Dass Javascript Kompatiblitätsprobleme hat, aber trotzdem die einzige Chance ist, Webseiten interaktiver zu machen. ### Was Sie können sollten -* Ich kann mit den Javascript und dem DOM alle Elemente in eine Webseite manipulieren. +* Ich kann mit Javascript und dem DOM alle Elemente in eine Webseite manipulieren. diff --git a/content/javascript-dom/hintergrund.md b/content/javascript-dom/hintergrund.md index 4254484..a94dce8 100644 --- a/content/javascript-dom/hintergrund.md +++ b/content/javascript-dom/hintergrund.md @@ -15,9 +15,9 @@ Neben der Verwendung für kleine Effekte im Browser hat Javascript noch weitere * Als „AJAX“ zum Nachladen von Daten – das macht das Web viel interaktiver und angenehmer in der Benutzung. -* Mit Javascript können Webseiten auch „offline“ – also ohne Verbindung zum Internet und dem Webserver – im Browser weiterarbieten. +* Mit Javascript können Webseiten auch „offline“ – also ohne Verbindung zum Internet und dem Webserver – im Browser weiterarbeiten. -* Der Server Node JS ist ein (Web)Server, den man mit Javascript programmieren kann. Er wird besonders für realtime-applikationen im Web eingesetzt, z.B. für Spiele. +* Der Server Node JS ist ein (Web)Server, den man mit Javascript programmieren kann. Er wird besonders für Echtzeit-Applikationen im Web eingesetzt, z.B. für Spiele. * Javascript wird in einigen Programmen als Makro-Sprache verwendet, z.B. seit 2003 in Indesign und Illustrator. diff --git a/content/javascript/closures.md b/content/javascript/closures.md index 649ce45..a8928e4 100644 --- a/content/javascript/closures.md +++ b/content/javascript/closures.md @@ -83,7 +83,7 @@ Closures kann man zum Beispiel verwenden um einen Countdown zu erzeugen: Wozu werden Closures verwendet? Eine erste Anwendung sind Eventhandler. Betrachten wir eine Funktion die bei `addEventListener` oder in jQuery bei `on` -als Eventhanlder angegeben wird: +als Eventhandler angegeben wird: button.on('click', do_something); diff --git a/content/javascript/funktionen.md b/content/javascript/funktionen.md index 5cb1ea4..4607c8d 100644 --- a/content/javascript/funktionen.md +++ b/content/javascript/funktionen.md @@ -90,7 +90,7 @@ die Argumente weglassen: § -Wir haben auch schon die JSON-Schreibweise von Arrays und Objekten kennen gelernt. +Wir haben auch schon die JSON-Schreibweise von Arrays und Objekten kennengelernt. Kombiniert mit der anonymen Schreibweise für Funktionen können wir so Funktionen als Teile von Objekten oder Arrays definieren: @@ -247,7 +247,7 @@ die Eigenschaften des MouseEvents zeigt: Es gibt noch eine besondere Art eine Funktion in Javascript aufzurufen: mit `new`. Damit wird die Funktion als Konstruktor für ein Objekt verwendet. Es ist üblich -Konstruktur-Funktionen mit großen Anfangsbuchstaben zu benennen. +Konstruktor-Funktionen mit großen Anfangsbuchstaben zu benennen. function Studiengang(name, seit) { @@ -259,7 +259,7 @@ Konstruktur-Funktionen mit großen Anfangsbuchstaben zu benennen. mmtm = new Studiengang( "MSc MultiMediaTechnology", 2011 ); -Innerhalb der Konstruktur-Funktion `Studiengang` ist bereits +Innerhalb der Konstruktor-Funktion `Studiengang` ist bereits ein neues Objekt vorhanden, und über `this` zugänglich. Dieses Objekt ist auch automatisch Rückgabewert der Funktion. diff --git a/content/javascript/objekte.md b/content/javascript/objekte.md index b4bc6f6..2b09ce1 100644 --- a/content/javascript/objekte.md +++ b/content/javascript/objekte.md @@ -25,10 +25,10 @@ console.log( hs.alter() ); // 20 -## Konstruktur-Funktion für mehrere gleiche Objekte +## Konstruktor-Funktion für mehrere gleiche Objekte Sollen mehrere gleichartige Objekte erzeugt werden, dann -geschieht das in Javascript mit einer Konstruktur Funktion: +geschieht das in Javascript mit einer Konstruktor Funktion: function Studiengang(name, seit, hochschule) { @@ -75,7 +75,7 @@ Wie funktioniert das? Die Antwort lautet: mit dem Prototypen. ## Klassen In Javascript 2015 wurde eine neue Schreibweise für Objekte und Konstruktoren -eingeführt. Die Funktionsweise der Objekte, Konstruktur-Funktionen und Prototypen +eingeführt. Die Funktionsweise der Objekte, Konstruktor-Funktionen und Prototypen wurde dadurch nicht verändert. diff --git a/content/javascript/style.md b/content/javascript/style.md index 835b68f..309a5b7 100644 --- a/content/javascript/style.md +++ b/content/javascript/style.md @@ -95,7 +95,7 @@ while( i < 10 ) { Wenn in einem Programm dieselbe Zahl mehrmals vorkommt kann das ein Hinweis sein, dass man eine Konstante oder constiable verwenden sollte. Folgendes Programm -zeichnet ein Rechteck in ein neu geschaffens SVG: +zeichnet ein Rechteck in ein neu geschaffenes SVG: const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); diff --git a/content/javascript/variablen.md b/content/javascript/variablen.md index 1bd6cd8..b0bdd53 100644 --- a/content/javascript/variablen.md +++ b/content/javascript/variablen.md @@ -11,8 +11,8 @@ Seit Javascript 2015 gibt es auch `let` und `const`. ## Sichtbarkeit von Variablen mit `let` und Konstanten mit `const` -let und const haben einen Block-Scope, können also auf kleiner -Bereich beschränkt werden als Variablen mit var: +let und const haben einen Block-Scope, können also auf kleinere +Bereiche beschränkt werden als Variablen mit var: @@ -143,7 +143,7 @@ Eine Besonderheit von Javascript Variablen die mit `var` deklariert wurden ist das "Hochziehen" (auf englisch: hoisting): Alle Variablen-Deklarationen werden an den Anfang der jeweiligen Funktion vorverlegt. Falls auch eine Zuweisung eines Wertes erfolgt -bleibt diese Zuweisung an der Ursprünglichen Stelle im Code. +bleibt diese Zuweisung an der ursprünglichen Stelle im Code. function g( x ) { diff --git a/content/jquery/dex.md b/content/jquery/dex.md index a2571fa..7789b23 100644 --- a/content/jquery/dex.md +++ b/content/jquery/dex.md @@ -12,7 +12,7 @@ intro: Mit der einfachen Schreibweise von jQuery lernen Sie schneller und einfac # Was Sie können sollten * Ich kann mit jQuery Teile einer Webseite aus- und einblenden -* Ich kann Mit jQuery dynamische Formulare gestalten +* Ich kann mit jQuery dynamische Formulare gestalten ## Vertiefung diff --git a/content/jquery/graceful.md b/content/jquery/graceful.md index 05c0828..9bb610f 100644 --- a/content/jquery/graceful.md +++ b/content/jquery/graceful.md @@ -137,7 +137,7 @@ $(document).ready( function () { Diese Variante funktioniert schon besser: -* die klassischen Links funktionier für Browser ohne Javascript +* die klassischen Links funktionieren für Browser ohne Javascript * für manche javascript-fähige Browser eine Animation eingefügt * für manche javascript-fähige Browser ist die Animation immer noch kaputt @@ -204,7 +204,7 @@ wird eine entsprechende Meldung angezeigt Diese Variante behebt das Problem mit nicht-funktionierenden Javascript-Browsern: -* die klassischen Links funktionier für Browser ohne Javascript +* die klassischen Links funktionieren für Browser ohne Javascript * die klassische Version wird auch für "animations-unfähige" Javascript Browser verwendet * für manche javascript-fähige Browser funktioniert die Animation @@ -218,7 +218,7 @@ Es bleibt aber noch in Problem: ### Version 5 -In der klassischen Version ändert sich beim navigieren zwischen den +In der klassischen Version ändert sich beim Navigieren zwischen den Ankern jeweils die URL im Browser. Wenn ich ein Ziel annavigiere, und dann die URL kopiere um einen Link zu setzen / mir eine Bookmark setze, dann verweist die URL die ich verwende wirklich wieder genauf auf das Ziel. diff --git a/content/jquery/unobstrusive.md b/content/jquery/unobstrusive.md index 9b450e1..1162fa9 100644 --- a/content/jquery/unobstrusive.md +++ b/content/jquery/unobstrusive.md @@ -9,7 +9,7 @@ In Zusammenhang mit jQuery werden die Fachbegriffe „graceful degradation“, Die Library jQuery unterstützt das Prinzip der „graceful degradation“ – auch ohne Javascript sind Webseiten mit jQuery immer noch gut verwendbar. Dieses Prinzip wird auch „progressive enhancement“ genannt, und bezieht sich nicht nur auf Javascript, sondern auch auf andere „Zusatz-Technologien“ wie z.B. Flash. -Die Idee ist dabei immer die Gleich: man baut die Webseite zuerst ohne Javascript, und fügt dann Javascript hinzu (ohne die Verwendbarkeit ohne Javscript zu zerstören). Der Inhalt (Content) der Webseite bleibt auch ohne Javascript zugänglich. +Die Idee ist dabei immer die Gleich: man baut die Webseite zuerst ohne Javascript, und fügt dann Javascript hinzu (ohne die Verwendbarkeit ohne Javascript zu zerstören). Der Inhalt (Content) der Webseite bleibt auch ohne Javascript zugänglich. ![Abbildung 60: Die Rolle von Content, Darstellung und Programmierung (Unobstrusive Javascript)](/images/image267.png) @@ -18,7 +18,7 @@ Die Idee ist dabei immer die Gleich: man baut die Webseite zuerst ohne Javascrip Von dieser Herangehensweise profitieren nicht nur Blinde, Menschen mit veralteten Browsern oder exotischen Ausgabegeräte. Auch für Suchmaschinen wie Google oder andere Programme die die Information aus den Webseiten weiter verarbeiten ist dieses Prinzip hilfreich. -Um zu testen, ob das wirkliche funktioniert kann man ganz einfach mit dem Firefox-AddOn QuickJava testen. Wie hier gezeigt kann Javascript mit einem Klick deaktiviert werden. +Um zu testen, ob das wirklich funktioniert kann man ganz einfach mit dem Firefox-AddOn QuickJava testen. Wie hier gezeigt kann Javascript mit einem Klick deaktiviert werden. ![Abbildung 61: Javascript deaktivieren mit QuickJava in Firefox](/images/image269.png) @@ -26,10 +26,10 @@ Um zu testen, ob das wirkliche funktioniert kann man ganz einfach mit dem Firefo ## Grenzen von Graceful Degradation Es gibt Websites, bei denen dieser Ansatz nicht funktionieren kann. -z.B. für einen Shooter als Browsergame kann man nicht nicht eine +z.B. für einen Shooter als Browsergame kann man nicht eine Javascript-Freie Alternative anbieten. -Für viele Apps funktioniert das aber. Probieren Sie z.B. gmail ohne javascript +Für viele Apps funktioniert das aber. Probieren Sie z.B. gmail ohne Javascript aus, oder das Webmail der FH (zimbra). Die Interaktion ist etwas umständlicher, aber man kann alle Features der Mail benutzen. @@ -52,4 +52,4 @@ Bei der Verwendung von jQuery bleibt der HTML-Code „javascript-frei“: jQuery ## jquery vom CDN -Die URL http://code.jquery.com/jquery-latest.js kann man für alle Webseiten die online sind verwenden: hinter code.jquery.com steht nicht nur ein Server, sondern das [NetDNA](http://www.netdna.com/) CDN (Content Delivery Network). Nur wenn man offline Entwickeln will muss man die Library wirklich herunterladen. +Die URL http://code.jquery.com/jquery-latest.js kann man für alle Webseiten die online sind verwenden: hinter code.jquery.com steht nicht nur ein Server, sondern das [NetDNA](http://www.netdna.com/) CDN (Content Delivery Network). Nur wenn man offline entwickeln will muss man die Library wirklich herunterladen. diff --git a/content/json/php.md b/content/json/php.md index 2a780c9..c2b7da5 100644 --- a/content/json/php.md +++ b/content/json/php.md @@ -41,7 +41,7 @@ echo json_encode( $array ); // {"foo":10,"bar":30,"baz":30,"0":"a"} -In JSON gibt es keine entsprechung für das Assoziative Array +In JSON gibt es keine Entsprechung für das Assoziative Array in PHP. Deswegen wird es als Objekt dargestellt. Wenn man dieses Objekt wieder in JSON zurück wandelt erhält man aber ein PHP Objekt mit einer Property "0": diff --git a/content/json/syntax.md b/content/json/syntax.md index 76a38f5..36bdbf2 100644 --- a/content/json/syntax.md +++ b/content/json/syntax.md @@ -4,7 +4,7 @@ order: 10 --- Mit JSON kann man Datenstrukturen aus null, true, false, Zahlen, Strings, -Arrays und Objekten in Javscript deklarativ anschreiben. +Arrays und Objekten in Javascript deklarativ anschreiben. § @@ -60,7 +60,7 @@ o = JSON.parse(string); § -Es gäbe noch eine zweite Art den String in eine Javscript-Datenstruktur +Es gäbe noch eine zweite Art den String in eine Javascript-Datenstruktur umzuwandeln: Der Javascript-Befehl `eval` interpretiert einen String als Javascript Code und führt das Programm aus. diff --git a/content/kommandozeile/kommandozeile.md b/content/kommandozeile/kommandozeile.md index e918d62..4434747 100644 --- a/content/kommandozeile/kommandozeile.md +++ b/content/kommandozeile/kommandozeile.md @@ -13,7 +13,7 @@ so wie mit dem Teletype: Wenn Sie professionell im Web Development arbeiten wollen, werden Sie auch die Kommandozeile brauchen. Sie ist kein einfaches, aber ein mächtiges Werkzeug. -Die GUIs (Graphical User Interfaces) die Sie bisher benutz haben sind besonders +Die GUIs (Graphical User Interfaces) die Sie bisher benutzt haben sind besonders für Ungeübte geeignet: Durch hinkucken und rumklicken kann man oft herausfinden wie ein Programm funktioniert. Man kann z.B. die Menüpunkte studieren um sich zu orientieren, oder die Icons betrachten. diff --git a/content/php-db-lesen/datenbank-lesen.md b/content/php-db-lesen/datenbank-lesen.md index 5499813..e99dbe7 100644 --- a/content/php-db-lesen/datenbank-lesen.md +++ b/content/php-db-lesen/datenbank-lesen.md @@ -63,7 +63,7 @@ Anfangsposition[*](http://www.postgresql.org/docs/8.1/static/queries-limit.html) § In der Datenbank sind Personen, deren Profil nicht angezeigt werden soll, mit -`profile_visible = false` gekennzeichnet. Im SQL-Statement wird sicher gestellt, dass +`profile_visible = false` gekennzeichnet. Im SQL-Statement wird sichergestellt, dass nur sichtbare Profil angezeigt werden. § @@ -168,7 +168,7 @@ Einen bestimmten Datensatz lesen --------------------------------- Wenn Sie die Datei `person.php` mit einem Parameter aufrufen `person.php?id=586` soll eine bestimmte Person aus der Datenbank angezeigt werden. Dafür wird der -Parameter aus dem `$_GET` – Array ausgelesen und sicher gestellt, dass es sich +Parameter aus dem `$_GET` – Array ausgelesen und sichergestellt, dass es sich wirklich um eine Zahl handelt. diff --git a/content/php-db-lesen/start.md b/content/php-db-lesen/start.md index 16b680c..9276e8c 100644 --- a/content/php-db-lesen/start.md +++ b/content/php-db-lesen/start.md @@ -143,7 +143,7 @@ Mit der Methode `setAttribute` wird hier festgelegt, dass die gelesenen Datensätze aus der Datenbank in PHP als Objekt dargestellt werden. (Die Alternative wäre ein assoziatives Array.) -Für die Applikation die in den nächsten 2 Kapitel beschreiben wird +Für die Applikation die in den nächsten zwei Kapiteln beschrieben wird werden diese Optionen vorausgesetzt. ### Anweisung an die Datenbank @@ -175,4 +175,4 @@ ist ein "Statement-Handle". Dieses Objekt bietet verschiedene Methoden an, mit denen man dann wirklich die Daten aus der DB holen kann. Doch bevor wir hier ins Detail gehen werden wir uns -im nächsten Kapitel die Struktur eine Beispiel-Applikation ansehen. +im nächsten Kapitel die Struktur einer Beispiel-Applikation ansehen. diff --git a/content/php-db-lesen/struktur-webapplikation.md b/content/php-db-lesen/struktur-webapplikation.md index 058f88a..a337be4 100644 --- a/content/php-db-lesen/struktur-webapplikation.md +++ b/content/php-db-lesen/struktur-webapplikation.md @@ -30,7 +30,7 @@ Die folgende Tabelle zeigt alle (geplanten) Seiten der Applikation im Überblick Jede einzelne Seite ist mit Hilfe von includes aufgebaut. Dabei werden immer die Dateien `functions.php` (mit dem Aufbau der Datenbank-Verbindung), `header.php` und -`footer.php` inkluidert. +`footer.php` inkludiert. INSERT INTO departments VALUES('Marketing') § Ein **unique constraint** kann man auch einer anderen Spalte, -oder einer kombination von Spalten auferlegen. +oder einer Kombination von Spalten auferlegen. @@ -46,7 +46,7 @@ CREATE TABLE users ( ## Referenzielle Integrität -Bei einer Beziehung macht es Sinn, die existenz des Fremdschlüssels +Bei einer Beziehung macht es Sinn, die Existenz des Fremdschlüssels in der anderen Tabelle mit einem **foreign key constraint** sicher zu stellen. diff --git a/content/php-db-optimierung/dex.md b/content/php-db-optimierung/dex.md index 9655ae6..7c298d3 100644 --- a/content/php-db-optimierung/dex.md +++ b/content/php-db-optimierung/dex.md @@ -6,5 +6,5 @@ intro: Sie lernen die fortgeschrittenen Fächigkeiten einer relationalen Datenba Was Sie wissen sollten * Wie sich Constraints bei der Verwendung der Datenbank mit PHP auswirken -* Wie man Transaktionen von PHP aus Verwenden kann +* Wie man Transaktionen von PHP aus verwenden kann diff --git a/content/php-db-optimierung/transaktionen.md b/content/php-db-optimierung/transaktionen.md index f849aa0..b37a38d 100644 --- a/content/php-db-optimierung/transaktionen.md +++ b/content/php-db-optimierung/transaktionen.md @@ -25,7 +25,7 @@ wenn er es bereits zu Beginn der Transaktion war. **Isolation** bedeutet: Bei gleichzeitiger Ausführung mehrerer Transaktionen dürfen sich diese nicht gegenseitig beeinflussen. -**Dauerhaftigkeit** bedeutete +**Dauerhaftigkeit** bedeutet: Die Auswirkungen einer Transaktion müssen im Datenbestand dauerhaft bestehen bleiben. Die Effekte von Transaktionen dürfen also nicht „mit der Zeit verblassen“ oder „aus Versehen verloren gehen“. @@ -67,7 +67,7 @@ COMMIT; ## Probleme ohne Transaktionen Bei Datenbanken können durch mangelnde Transaktionsisolation -die folgenden Anomalie auftreten: +die folgenden Anomalien auftreten: * Lost Updates: Zwei Transaktionen modifizieren parallel denselben Datensatz und nach Ablauf dieser beiden Transaktionen wird nur die Änderung von einer von ihnen übernommen. * Dirty Read: Daten einer noch nicht abgeschlossenen Transaktion werden von einer anderen Transaktion gelesen. @@ -76,7 +76,7 @@ die folgenden Anomalie auftreten: ## Weniger gute Transaktionen -Mit `SET TRANSACTION ISOLATION LEVEL ...` kann eine weniger gut +Mit `SET TRANSACTION ISOLATION LEVEL ...` kann eine weniger gute Version von Transaktionen aktiviert werden. Die möglichen Werte sind (laut Postgres): diff --git a/content/php-db-schreiben/daten-editieren.md b/content/php-db-schreiben/daten-editieren.md index aa21c2a..83de71c 100644 --- a/content/php-db-schreiben/daten-editieren.md +++ b/content/php-db-schreiben/daten-editieren.md @@ -195,7 +195,7 @@ Lassen Sie niemals, niemals, niemals zu, dass Fremde Javascript in Ihre Site ein § Noch hat unsere Applikation dieses Problem nicht: Wenn Frau Hacker Ihren Code -z.B. in das Profil einer Person eingibt wir der Code htmlescaped angezeigt und +z.B. in das Profil einer Person eingibt wird der Code htmlescaped angezeigt und „wirkt nicht“: ![Eingegebener HTML+Javascript-Code wird escaped und dargestellt](/images/html-escaped.png) diff --git a/content/php-db-schreiben/daten-loeschen.md b/content/php-db-schreiben/daten-loeschen.md index db7b0a2..6718818 100644 --- a/content/php-db-schreiben/daten-loeschen.md +++ b/content/php-db-schreiben/daten-loeschen.md @@ -42,7 +42,7 @@ das SQL etwas "injiziert" wird. Dieses Problem kann vermeiden indem man die Eingabe genau überprüft. In diesem Beispiel also: nur wenn es sich bei `id` um eine ganze Zahl handelt, darf sie -verwendet werde. Das kann man auf verschiedene Arten prüfen, +verwendet werden. Das kann man auf verschiedene Arten prüfen, z.B. mit der Funktion `filter_var`: @@ -93,7 +93,7 @@ normale query zu wiederholen. ### SQL Injection gibt es nicht nur bei DELETE -Wir haben diese Attacke am Beispil einer Löschoperation kennen gelert. +Wir haben diese Attacke am Beispiel einer Löschoperation kennengelernt. Aber auch ein einfaches `SELECT` kann mittels SQL Injection missbraucht werden um zusätzliche Informationen aus der Datenbank auszulesen, die wir nicht vorgesehen haben. diff --git a/content/php-mysql-2/daten-editieren.md b/content/php-mysql-2/daten-editieren.md index 6b61da1..9b0e704 100644 --- a/content/php-mysql-2/daten-editieren.md +++ b/content/php-mysql-2/daten-editieren.md @@ -195,7 +195,7 @@ Lassen Sie niemals, niemals, niemals zu, dass Fremde Javascript in Ihre Site ein § Noch hat unsere Applikation dieses Problem nicht: Wenn Frau Hacker Ihren Code -z.B. in das Profil einer Person eingibt wir der Code htmlescaped angezeigt und +z.B. in das Profil einer Person eingibt wird der Code htmlescaped angezeigt und „wirkt nicht“: ![Eingegebener HTML+Javascript-Code wird escaped und dargestellt](/images/html-escaped.png) diff --git a/content/php-mysql-2/daten-loeschen.md b/content/php-mysql-2/daten-loeschen.md index a5a90da..ba8702c 100644 --- a/content/php-mysql-2/daten-loeschen.md +++ b/content/php-mysql-2/daten-loeschen.md @@ -43,7 +43,7 @@ das SQL etwas "injiziert" wird. ### SQL Injection verhindern Dieses Problem kann vermeiden indem man die Eingabe genau überprüft. In diesem Beispiel also: nur wenn es sich bei `id` um eine ganze Zahl handelt, darf sie -verwendet werde. Das kann man auf verschiedene Arten prüfen, +verwendet werden. Das kann man auf verschiedene Arten prüfen, z.B. mit der Funktion `filter_var`: diff --git a/content/php-mysql-2/dex.md b/content/php-mysql-2/dex.md index d0cd43d..977dafb 100644 --- a/content/php-mysql-2/dex.md +++ b/content/php-mysql-2/dex.md @@ -1,6 +1,6 @@ --- title: Schreiben in die Datenbank -intro: Als zweiten Schritt in der Arbeit mit der Datenbank lernen Sie nun Datein zu schreiben, zu ändern und zu löschen. +intro: Als zweiten Schritt in der Arbeit mit der Datenbank lernen Sie nun Daten zu schreiben, zu ändern und zu löschen. --- diff --git a/content/php-mysql-3/dex.md b/content/php-mysql-3/dex.md index 105545b..af15bab 100644 --- a/content/php-mysql-3/dex.md +++ b/content/php-mysql-3/dex.md @@ -7,5 +7,5 @@ intro: Sie lernen die fortgeschrittenen Fächigkeiten einer relationalen Datenba Was Sie wissen sollten * Wie sich Constraints bei der Verwendung der Datenbank mit PHP auswirken -* Wie man Transaktionen von PHP aus Verwenden kann +* Wie man Transaktionen von PHP aus verwenden kann diff --git a/content/php-mysql-3/transaktionen.md b/content/php-mysql-3/transaktionen.md index 52a55e1..bbb35e6 100644 --- a/content/php-mysql-3/transaktionen.md +++ b/content/php-mysql-3/transaktionen.md @@ -28,7 +28,7 @@ wenn er es bereits zu Beginn der Transaktion war. **Isolation** bedeutet: Bei gleichzeitiger Ausführung mehrerer Transaktionen dürfen sich diese nicht gegenseitig beeinflussen. -**Dauerhaftigkeit** bedeutete +**Dauerhaftigkeit** bedeutet: Die Auswirkungen einer Transaktion müssen im Datenbestand dauerhaft bestehen bleiben. Die Effekte von Transaktionen dürfen also nicht „mit der Zeit verblassen“ oder „aus Versehen verloren gehen“. @@ -82,7 +82,7 @@ COMMIT; ## Probleme ohne Transaktionen Bei Datenbanken können durch mangelnde Transaktionsisolation -die folgenden Anomalie auftreten: +die folgenden Anomalien auftreten: * Lost Updates: Zwei Transaktionen modifizieren parallel denselben Datensatz und nach Ablauf dieser beiden Transaktionen wird nur die Änderung von einer von ihnen übernommen. * Dirty Read: Daten einer noch nicht abgeschlossenen Transaktion werden von einer anderen Transaktion gelesen. @@ -91,7 +91,7 @@ die folgenden Anomalie auftreten: ## Weniger gute Transaktionen -Mit `SET TRANSACTION ISOLATION LEVEL ...` kann eine weniger gut +Mit `SET TRANSACTION ISOLATION LEVEL ...` kann eine weniger gute Version von Transaktionen in MySQL aktiviert werden. Die möglichen Werte sind (laut SQL Standard und MySQL mit InnoDB): diff --git a/content/php-mysql/datenbank-lesen.md b/content/php-mysql/datenbank-lesen.md index 96c1547..af37a8b 100644 --- a/content/php-mysql/datenbank-lesen.md +++ b/content/php-mysql/datenbank-lesen.md @@ -64,7 +64,7 @@ Anfangsposition[*](http://dev.mysql.com/doc/refman/5.6/en/select.html#idp7228502 § In der Datenbank sind Personen, deren Profil nicht angezeigt werden soll, mit -`profile_visible=0` gekennzeichnet. Im SQL-Statement wird sicher gestellt, dass +`profile_visible=0` gekennzeichnet. Im SQL-Statement wird sichergestellt, dass nur sichtbare Profil angezeigt werden. § @@ -169,7 +169,7 @@ Einen bestimmten Datensatz lesen --------------------------------- Wenn Sie die Datei `person.php` mit einem Parameter aufrufen `person.php?id=586` soll eine bestimmte Person aus der Datenbank angezeigt werden. Dafür wird der -Parameter aus dem `$_GET` – Array ausgelesen und sicher gestellt, dass es sich +Parameter aus dem `$_GET` – Array ausgelesen und sichergestellt, dass es sich wirklich um eine Zahl handelt. diff --git a/content/php-mysql/db.md b/content/php-mysql/db.md index 404f95c..c9560be 100644 --- a/content/php-mysql/db.md +++ b/content/php-mysql/db.md @@ -139,7 +139,7 @@ phpMyAdmin --------- PhpMyAdmin ist ein häufig verwendetes Tool zur Verwaltung von MySQL Datenbanken. -Es ist in PHP geschreiben, kann also im Webspace installiert und über +Es ist in PHP geschrieben, kann also im Webspace installiert und über den Browser verwendet werden. ![phpMyAdmin](/images/phpmyadmin.png) diff --git a/content/php-mysql/start.md b/content/php-mysql/start.md index 3d0e00b..0debaac 100644 --- a/content/php-mysql/start.md +++ b/content/php-mysql/start.md @@ -45,7 +45,7 @@ weiteren Teile der DSN anthält kann man in der [Dokumentation des jeweiligen PD Für den MySQL Treiber sind das der Name der Datenbank `dbname` und der `host`, eventuell der `port`. Alternativ kann man die Verbindung statt über Host und -Port über den UNIX-Socket aufbauen, den Pfad zum socket gibt man unter +Port über den UNIX-Socket aufbauen, den Pfad zum Socket gibt man unter `unix_socket` an. § @@ -158,7 +158,7 @@ Zeichensatz für die gelesenen Text-Daten festgelegt. Das macht natürlich nur Sinn, wenn die Daten in der Datenbank wirklich als UTF-8 gespeichert sind! -Für die Applikation die in den nächsten 2 Kapitel beschreiben wird +Für die Applikation die in den nächsten 2 Kapitel beschrieben wird werden diese Optionen vorausgesetzt. ### Anweisung an die Datenbank @@ -190,4 +190,4 @@ ist ein "Statement-Handle". Dieses Objekt bietet verschiedene Methoden an, mit denen man dann wirklich die Daten aus der DB holen kann. Doch bevor wir hier ins Detail gehen werden wir uns -im nächsten Kapitel die Struktur eine Beispiel-Applikation ansehen. +im nächsten Kapitel die Struktur einer Beispiel-Applikation ansehen. diff --git a/content/php-mysql/struktur-webapplikation.md b/content/php-mysql/struktur-webapplikation.md index 98e1fbe..099bb71 100644 --- a/content/php-mysql/struktur-webapplikation.md +++ b/content/php-mysql/struktur-webapplikation.md @@ -32,7 +32,7 @@ Die folgende Tabelle zeigt alle (geplanten) Seiten der Applikation im Überblick Jede einzelne Seite ist mit Hilfe von includes aufgebaut. Dabei werden immer die Dateien `functions.php` (mit dem Aufbau der Datenbank-Verbindung), `header.php` und -`footer.php` inkluidert. +`footer.php` inkludiert. @@ -267,7 +267,7 @@ BibliothekarIn darf zugreifen. Alle anderen erhalten keinen Zugriff sondern den § -**Achtung**: wir haben schon ein Szenario kennen gelernt, wo die +**Achtung**: wir haben schon ein Szenario kennengelernt, wo die Zeitbeschränkung von Sessions einen Sinn macht: Zum Verhindern von [Cross Site Request Forgeries - CSRF](/security/a8-csrf/). Das ist aber nur bei Operationen sinnvoll, die etwas am Server ändern, diff --git a/content/security/a1-injection.md b/content/security/a1-injection.md index 132b1b6..11cdb1c 100644 --- a/content/security/a1-injection.md +++ b/content/security/a1-injection.md @@ -35,7 +35,7 @@ $stm->execute(); Die OWASP empfiehlt: 1. Den Interpreter gänzlich vermeiden, oder -2. Eine Schnittstelle benutzen es dem Interpreter erlaubt zwischen Code und Daten zu unterscheiden (z.B., prepared statements, stored procedures in der Datenbank), oder +2. Eine Schnittstelle benutzen, die es dem Interpreter erlaubt zwischen Code und Daten zu unterscheiden (z.B., prepared statements, stored procedures in der Datenbank), oder 3. Den Input von der Userin/dem User geeignet codieren bevor er an den Interpreter weiter gegeben wird Im dritten und schlechtesten Fall ist weiter zu beachten: diff --git a/content/security/a10-redirect.md b/content/security/a10-redirect.md index 2a7dd96..1ced203 100644 --- a/content/security/a10-redirect.md +++ b/content/security/a10-redirect.md @@ -33,7 +33,7 @@ normalerweise keinen Zugriff hätte. ## Weiterleitung in PHP Wie in Kapitel [PHP erzeugt nicht nur HTML](/http/php-erzeugt/) gezeigt, -werden Weiterleitungen in PHP mit der Funktion `header` implmenentiert: +werden Weiterleitungen in PHP mit der Funktion `header` implementiert: -Mit diesem Programm kann man durch einfaches ändern der URL beliebige +Mit diesem Programm kann man durch einfaches Ändern der URL beliebige Dateien am Server "erforschen". Gegen diese Art von Attacke kann man an mehreren Linien verteidigen: diff --git a/content/security/a5-konfiguration.md b/content/security/a5-konfiguration.md index becfaaa..a3504f5 100644 --- a/content/security/a5-konfiguration.md +++ b/content/security/a5-konfiguration.md @@ -23,7 +23,7 @@ Für eine Web-Applikation muss man dabei mindestens folgende Schichte beachten: * Webserver, z.B. Apache * Framework, z.B. ZEND Framework, Rails * Fremd-Applikation, z.B. Wordpress, Redmine -* Selbstgeschreibene Applikation +* Selbstgeschriebene Applikation Jeder dieser Schichten gilt es richtig zu konfigurieren und Sicherheits-Updates einzuspielen. @@ -48,7 +48,7 @@ Dafür gibt es oft schon fertige Konfigurationen, oder Tutorials Keine Software ist sicher, in jeder Software werden Sicherheitsprobleme entdeckt. Die relevante Fragen sind: werden Sicherheitsprobleme die -bekannt werden möglichst schnell behoben? Und in folge: Wenn ein Update +bekannt werden möglichst schnell behoben? Und in Folge: Wenn ein Update zur Verfügung steht, wird es möglichst schnell installiert? * [Heise Security](http://www.heise.de/security/) diff --git a/content/security/a6-data.md b/content/security/a6-data.md index f8c2735..afbf953 100644 --- a/content/security/a6-data.md +++ b/content/security/a6-data.md @@ -9,7 +9,7 @@ Die OWASP beschreibt dieses Problem allgemein so: ## Maßnahmen -1. Klärung der Bedrohungen, vor denen die Daten zu schüt - zen sind (z. B. Innen - und Außentäter) und sicherstellen , dass vertrauliche Daten bei der Übertragung/Speicherung geeignet durch Verschlüsselung geschützt werden . +1. Klärung der Bedrohungen, vor denen die Daten zu schützen sind (z. B. Innen - und Außentäter) und sicherstellen , dass vertrauliche Daten bei der Übertragung/Speicherung geeignet durch Verschlüsselung geschützt werden . 2. Kein unnötiges Speichern vertraulicher Daten. Löschung nicht mehr benötigter Daten. Daten, die es nicht gibt, können auch nicht gestohlen werden. 3. Sicherstellen, dass starke Algorithmen und Schlüssel verwendet werden. 4. Sicherstellen, dass Passwörter mit einem speziell für Passwortschutz entwickelten Algorithmus gespeichert werden. diff --git a/content/security/a7-url.md b/content/security/a7-url.md index 647b957..fc6c631 100644 --- a/content/security/a7-url.md +++ b/content/security/a7-url.md @@ -10,13 +10,13 @@ Die OWASP beschreibt dieses Problem allgemein so: ## Nur was serverseitig geprüft wird ist sicher Bei der Programmierung von Web-Applikationen muss man sich immer bewusst sein, -dass Alles was im Client passiert, bzw vom Client geschickt wird, manipuliert werden kann. +dass alles was im Client passiert, bzw vom Client geschickt wird, manipuliert werden kann. Meine serverseitigen Programme müssen jeden Input den sie bekommen selbst prüfen, und können sich nicht darauf verlassen dass so eine Prüfung bereits am Client passiert ist. Gängige Fehleinschätzungen dieser Art sind: -* Wenn ich keinen Link zu dieser Seite hin setzte, dann findet die Seite eh niemand. +* Wenn ich keinen Link zu dieser Seite hinsetze, dann findet die Seite eh niemand. * Das ist falsch! * Wenn ich die Daten in ein hidden-field im Formular schreibe, können sie nicht verändert werden * Das ist falsch! diff --git a/content/session/session-und-login.md b/content/session/session-und-login.md index db1bb85..91fcaa6 100644 --- a/content/session/session-und-login.md +++ b/content/session/session-und-login.md @@ -3,7 +3,7 @@ title: Session und Login order: 20 --- -HTTP ist "statelesse" - jeder HTTP Request ist ein isoliertes Ereignis, der +HTTP ist "stateless" - jeder HTTP Request ist ein isoliertes Ereignis, der Server kann nicht erkennen ob Requests zusammen gehören. ![HTTP als "stateless protocol"](/images/stateless-http.svg) @@ -89,7 +89,7 @@ Das Logout erfolgt ebenfalls mit der Methode POST: § -Das Logout ist etwas umständlich zu Programmieren: das Cookie, das von PHP gesetzt wurde, muß man nun selbst löschen. Dazu wird das „Ablaufdatum“ des Cookies auf ein Datum in der Vergangenheit gesetzt, dann wird der Browser es löschen. +Das Logout ist etwas umständlich zu programmieren: das Cookie, das von PHP gesetzt wurde, muß man nun selbst löschen. Dazu wird das „Ablaufdatum“ des Cookies auf ein Datum in der Vergangenheit gesetzt, dann wird der Browser es löschen. // Löschen aller Session-Variablen. diff --git a/content/urls/absolut-relativ.md b/content/urls/absolut-relativ.md index 98ef180..7fba405 100644 --- a/content/urls/absolut-relativ.md +++ b/content/urls/absolut-relativ.md @@ -29,7 +29,7 @@ Bei den relativen URLs muss man die URL des enthaltenden Dokuments und die relative URLs "zusammen—addieren", um zu einer absoluten URL zu kommen. Wenn die relative URL mit einem Schrägstrich (Slash) beginnt -ersetzt sie den gesamten "Pfad" in der UL des enthaltenden Dokuments: +ersetzt sie den gesamten "Pfad" in der URL des enthaltenden Dokuments: http://web-development.github.com/images/urls.html + /images/you_are_here.jpg = diff --git a/content/urls/konfiguration.md b/content/urls/konfiguration.md index aff64ba..855c9b5 100644 --- a/content/urls/konfiguration.md +++ b/content/urls/konfiguration.md @@ -12,7 +12,7 @@ verfügen auch über diese Fähigkeiten, werden aber anders konfiguriert. Viele Webserver werden auf einem UNIX-Betriebssystem betrieben. Die UNIX-Dateisysteme unterscheiden bei Datei- und Ordnernamen zwischen Groß- und Kleinschreibung, sind also „case-sensitive“. Der Rechner auf dem Sie Webseiten erstellen läuft wahrscheinlich unter Windows oder MacOS; dort sind die Dateisysteme „case-insensitive“. Ein Link auf die Datei `bild.JPG` funktioniert unter Windows oder MacOS auch -dann, wenn er `bild.jpg` geschreiben wird. +dann, wenn er `bild.jpg` geschrieben wird. Liegt die Datei aber dann am (UNIX-)Webserver, so funktioniert der Link nicht mehr! `bild.jpg` und `bild.JPG` sind zwei unterschiedliche Dateien! @@ -44,7 +44,7 @@ Die Apache-Konfigurationsanweisung dazu lautet DirectoryIndex index.html -Achtung: die Konfiguration ist am Internet Information Server normalerweise anders, dort wird die Datei `default.htm` verwendet! +Achtung: die Konfiguration ist im Internet Information Server normalerweise anders, dort wird die Datei `default.htm` verwendet! ## Directory Index Datei existiert nicht @@ -52,7 +52,7 @@ Was passiert wenn keine Datei mit dem richtigen Namen vorhanden ist? entweder ei ![Abbildung 43: Zugriff auf einen Ordner ohne Standard-Dokument (index.html): Auflistung oder Fehlermeldung](/images/apache-directory-index.png) -Die entsprechenden Apache-Konfigurationsanweisung dazu sind: +Die entsprechenden Apache-Konfigurationsanweisungen dazu sind: Options +Indexes Options -Indexes @@ -89,7 +89,7 @@ Der Link von einem User-Webspace zum nächsten funktioniert also so: + ../~fhs111111/test = http://multimediatechnology.at/~fhs111111/test -Oder relative zum Webserver: +Oder relativ zum Webserver: http://multimediatechnology.at/~fhs303030/test.html + /~fhs111111/test = diff --git a/content/wordpress/installation.md b/content/wordpress/installation.md index 34e5518..f727c28 100644 --- a/content/wordpress/installation.md +++ b/content/wordpress/installation.md @@ -7,7 +7,7 @@ Voraussetzung ist, dass in Ihrem Webspace PHP und MySQL möglich sind. 1. Finden Sie heraus wie der Zugang zur Datenbank funktioniert: Datenbankname, Username, Passwort 2. Laden Sie die aktuelle Version von Wordpress von als zip-Datei auf Ihren Desktop-Computer herunter. Packen Sie die zip-Datei aus, dabei muss die Ordner-Struktur erhalten bleiben. -3. Laden Sie das Gesamtpaket (allen Dateien und Unterordner) auf Ihren Webspace hoch. Damit ist der Aufwändige teil erledigt, weiter geht es (fast) nur mit dem Browser weiter. +3. Laden Sie das Gesamtpaket (allen Dateien und Unterordner) auf Ihren Webspace hoch. Damit ist der aufwändige Teil erledigt, weiter geht es (fast) nur mit dem Browser weiter. 4. Öffnen Sie die Seite über den Webbrowser, folgen Sie den weiteren Anweisungen um einen ersten Account anzulegen. § @@ -33,7 +33,7 @@ define('DB_HOST', 'localhost'); § -Wenn Sie mehrere Wordpresse mit nur einer Datenbank betreiben gibt es eine weitere Frage: den Tabellen Prefix – die verschiedenen Wordpresse legen jeweils ca. 12 Tabellen an, damit diese Tabellen nicht alle den gleichen Namen haben wird der Prefix verwendet: z.B. beim ersten Wordpress beginnt der Tabellenname immer mit wp_ beim zweiten mit devblog_. +Wenn Sie mehrere Wordpress-Seiten mit nur einer Datenbank betreiben gibt es eine weitere Frage: den Tabellen Prefix – die verschiedenen Wordpress-Seiten legen jeweils ca. 12 Tabellen an, damit diese Tabellen nicht alle den gleichen Namen haben wird der Prefix verwendet: z.B. beim der ersten Wordpress-Seite beginnt der Tabellenname immer mit wp_ beim zweiten mit devblog_. // You can have multiple installations in one database diff --git a/content/wordpress/multimedia.md b/content/wordpress/multimedia.md index a99ed25..a01ef8c 100644 --- a/content/wordpress/multimedia.md +++ b/content/wordpress/multimedia.md @@ -10,7 +10,7 @@ Während Texte in Beiträgen und Seiten gespeichert werden, müssen Bild-, Audio ### Speicherung von Medien -Die hochgeladenen Dateien werden einen Unter-Ordner von wp-content/uploads hochgeladen, und haben damit euch eine entsprechende URL. Die folgnde Abbildung zeigt den relevanten Teil der Ordnerstruktur: +Die hochgeladenen Dateien werden einen Unter-Ordner von wp-content/uploads hochgeladen, und haben damit euch eine entsprechende URL. Die folgende Abbildung zeigt den relevanten Teil der Ordnerstruktur: ![Abbildung 111: Ordnerstruktur für hochgeladene Attachment-Dateien (Audio, Video)](/images/wordpress-uploads.png) diff --git a/content/wordpress/themes-sidesbars-widgets.md b/content/wordpress/themes-sidesbars-widgets.md index 7e97062..94aa49e 100644 --- a/content/wordpress/themes-sidesbars-widgets.md +++ b/content/wordpress/themes-sidesbars-widgets.md @@ -13,7 +13,7 @@ Die visuelle Darstellung des Blogs wird durch ein „Theme“ festgelegt. Viele Achtung: wenn Sie nach Themes googlen werden Sie auch viele Themes mit eingebautem SPAM finden! Deswegen ist es besser das offizielle Verzeichnis zu verwenden, oder das Theme genau zu -utnersuchen. +untersuchen. § @@ -55,7 +55,7 @@ definiert. Widgets -------- -Viele der angebotenen Widgets sind erst sinnvoll wenn der Blog viele Einträge hat. z.B. ein Kalender oder ein Archiv. Eine Empfehlung für die ersten drei Widgets, die ein neuer Blog haben sollte: Ein kurzer Text, ein Suchfeld und die neusten Artikel: +Viele der angebotenen Widgets sind erst sinnvoll wenn der Blog viele Einträge hat. z.B. ein Kalender oder ein Archiv. Eine Empfehlung für die ersten drei Widgets, die ein neuer Blog haben sollte: Ein kurzer Text, ein Suchfeld und die neuesten Artikel: ![Abbildung 117: Empfehlung für einen neuen Blog: Drei Widgets: Text, Suche, Letzte Artikel](/images/wordpress-widgets.png) @@ -97,7 +97,7 @@ Search : zeigt ein Suchfeld für die Volltextsuche an. Neueste Artikel -: zeigt die Titel der neuesten Artikel an. Das ist besonders wichtig wenn LeserInnen über eine Google-Suche auf der Seite eines alten Artikels landen. Durch die „neuesten Artikel“ werden sie vielleicht weiter in den Blog hinein gelockt. +: zeigt die Titel der neuesten Artikel an. Das ist besonders wichtig wenn LeserInnen über eine Google-Suche auf der Seite eines alten Artikels landen. Durch die „neuesten Artikel“ werden sie vielleicht weiter in den Blog hineingelockt. Schlagworte (englisch: tags) : können zu Artikeln vergeben werden und sind dann über diese Navigation auffindbar. Es ist sinnvoll kurze Wörter als tags zu verwenden die schon bei delicious oder Digg bekannt sind. diff --git a/content/xml/dex.md b/content/xml/dex.md index f845dee..23eb03c 100644 --- a/content/xml/dex.md +++ b/content/xml/dex.md @@ -11,7 +11,7 @@ intro: Sie lernen wohlgefomtes und valides XML kennen. * Dass wohlgeformtes XML den allgemeinen Regeln von XML entspricht, ohne Einschränkung welche Tags + Attribute verendet werden * Dass valides XML den Regeln einer einer bestimmten DTD entspricht, also Tags + Attribute vorgeschrieben sind * Dass man mit XPath Daten aus einer XML-Datei abfragen/adressieren kann -* dass RSS, MathML, SVG Beispiele für XML sind +* Dass RSS, MathML, SVG Beispiele für XML sind ### Was Sie können sollten * XML lesen und modifizieren können diff --git a/content/xml/dtd.md b/content/xml/dtd.md index 312c811..4b655c9 100644 --- a/content/xml/dtd.md +++ b/content/xml/dtd.md @@ -66,13 +66,13 @@ aber `` nicht, da Tags verboten sind. ### Kinder-Element ("Element Content") -Hat ein Tag nur Kinder-Elemente, aber keine reinen Text als Inhalt, +Hat ein Tag nur Kinder-Elemente, aber keinen reinen Text als Inhalt, dann spricht man von "Element Content". Für die Angabe von Kinder-Elementen gibt es dann eine eigene kleine Sprache, mit der die Reihenfolge und Anzahl der Kinder-Element festgelegt wird. Damit kann man -auch komplizierte Bedingungen zusammen bauen: +auch komplizierte Bedingungen zusammenbauen: * Eine Liste von Kinder-Elementen mit einer fixen Reihenfolge: mit Kommas * Eine Auswahl von Kinder-Elementen (entweder/oder): mit einem senkrechten Strich diff --git a/content/xml/rss.md b/content/xml/rss.md index 0c5a34a..24907da 100644 --- a/content/xml/rss.md +++ b/content/xml/rss.md @@ -3,7 +3,7 @@ title: Beispiel RSS order: 100 --- -RSS ist ein Format um die Daten eines Blogs maschienenlesbar anzubieten. +RSS ist ein Format um die Daten eines Blogs maschinenlesbar anzubieten. Wo bietet z.B. der Wordpress Blog `http://multimediatechnology.at/` unter der URL `http://multimediatechnology.at/feed/` die gleichen Inhalte wie die Homepage des Blogs im RSS Format an. diff --git a/content/xml/was-ist-xml.md b/content/xml/was-ist-xml.md index 50b09d4..5b1a976 100644 --- a/content/xml/was-ist-xml.md +++ b/content/xml/was-ist-xml.md @@ -20,7 +20,7 @@ zum Beispiel RSS, SVG, oder XHTML. Mit HTML5 hat sich HTML von diesem Stammbaum emanzipiert: HTML5 ist nicht mehr eine Sprache, sondern zuerst das Document Object Model (DOM) -als "in memory representation" im Browesr, und einige APIS für das DOM. +als "in memory representation" im Browser, und einige APIS für das DOM. Ausgehend davon werden zwei Darstellungsweisen definiert: HTML und XML. ## Geschichte von XML @@ -42,7 +42,7 @@ Rund um XML gibt es eine gut ausgebaute Infrastruktur: In allen Programmiersprachen gibt es Libraries um XML zu verarbeiten, viele Programmier-Editoren unterstützen die Bearbeitung von XML. Zusätzlich gibt es noch eigene Sprachen zur Definition von XML -und um XML Abzufragen. +und um XML abzufragen. In den letzten Jahren hat sich mit JSON ein anderes, noch einfachers Format für den Datenaustausch etabliert. @@ -61,13 +61,13 @@ Drei XML-Sprachen die im Web verwendet werden: Scalable Vector Graphics (SVG, engl. „skalierbare Vektorgrafik“) ist die vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. Sie wird von den meisten Browsern -nativ untersützt [→ can i use svg](http://caniuse.com/#feat=svg-html5). SVG ist eine XML-Sprache. +nativ unterstützt [→ can i use svg](http://caniuse.com/#feat=svg-html5). SVG ist eine XML-Sprache.
### RSS -RSS ist ein Format um die Inhalte eines Blogs maschienenlesbar anzubieten. +RSS ist ein Format um die Inhalte eines Blogs maschinenlesbar anzubieten. Wo bietet z.B. der Wordpress Blog `http://multimediatechnology.at/` unter der URL `http://multimediatechnology.at/feed/` die gleichen Inhalte wie die Homepage des Blogs im RSS Format an. diff --git a/content/xml/wohlgeformtes-xml.md b/content/xml/wohlgeformtes-xml.md index 56e0cbe..fb66115 100644 --- a/content/xml/wohlgeformtes-xml.md +++ b/content/xml/wohlgeformtes-xml.md @@ -67,7 +67,7 @@ Tags werden wie in HTML begonnen und beendet: `

....

`. Tags ohne "Ende" müssen mit einem Slash am Ende markiert werden: `
`. -Das weglassen schießender Tags ist in XML nicht gestattet! +Das Weglassen schließender Tags ist in XML nicht gestattet! Tags in XML sind case sensitive. Einen Tag samt Inhalt nennt man "Element". diff --git a/content/xml/xml-und-javascript.md b/content/xml/xml-und-javascript.md index 1e39468..f246fc2 100644 --- a/content/xml/xml-und-javascript.md +++ b/content/xml/xml-und-javascript.md @@ -4,7 +4,7 @@ order: 40 --- -Wir [haben schon glernt](/javascript-dom/dom/) wie man mit +Wir [haben schon gelernt](/javascript-dom/dom/) wie man mit Javascript das Document Object Model (DOM) eines HTML-Dokuments manipuliert. Auch ein XML Dokument hat ein DOM, man kann es mit den gleichen Methoden manipulieren. diff --git a/content/xml/xml-und-php.md b/content/xml/xml-und-php.md index 5673794..f9812db 100644 --- a/content/xml/xml-und-php.md +++ b/content/xml/xml-und-php.md @@ -6,7 +6,7 @@ order: 35 In PHP gibt es mehrere Libraries zur Verarbeitung von XML. In der offiziellen Doku sind unter [XML Manipulation](http://at1.php.net/manual/en/refs.xml.php) 13 verschiedene -angeführt. Wir werden 2 davon näher betrachten. +angeführt. Wir werden zwei davon näher betrachten.