Web Engineering + Design

Prüfung

  • Ähnlich wie erster Teil der letztjährigen Prüfung (dort wurde mehr Stoff behandelt)
  • Probeprüfung auf Skripteserver

Zusammenfassung - 1 A4 Seite

  • Gerüst einer "sauberen" HTML-Struktur
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="description" content="">
        <link rel="icon" href="ic.png" type="image/png" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <header>
        <nav>
        <aside>
        <section>
            <article>
        </section>
        <footer>
    </body>
</html>

  • CSS-Selektoren

    Sel. Name Descr
    e > f Kind Direktes Kind
    e f Nachfahre Child oder child of child (verschachtelt)
    e + f Nachbar Element f folgt direkt auf e
    e ~ f Geschwister Element auf selber Ebene
    * Universal Jedes Element
    e[attr] Attribut Element mit Attribut
    e[a=v] Attribut a muss gleich v sein
    e[a~=v] Attribut a muss Wort v alleinst. beinhalten
    e[a=v] Attribut a muss mit Wort v alleinst. beginnen
    e[a^=v] Attribut a muss mit v beginnen
    e[a$=v] Attribut a muss mit v enden
    e[a*=v] Attribut a muss v beinhalten
    e::pseudo Pseudo-Element z.B. ::before, ::after
    e:pseudoclass Pseude-Klasse z.B. :hover, :active

  • Javascript

    • Operatoren und Type-Casts
      • false: false, 0, "", null, undefined, NaN
      • Alles andere ist true
      • NaN == NaN -> false
      • Es wird immer von links nach rechts versucht, die Werte in den gleichen Datentyp zu wandeln
    • jQuery: Häufige Funktionen
Fnkt Descr
$().val() Wert bei Form-Elementen
$().text() Wert bei Nicht-Form-Elementen
$().html() HTML des ersten Elements (get), HTML jedes Elementes (set)
$().attr() Attributwert des ersten Elements (get), bzw. alle Elemente (set)
.click, .hover, .focus Direkte Event-Handler
.on("click", fn) Allgemeine Event-handler
  • Handlebars
    • Template
      • In Script-Tag: <script id="templ" type="text/x-handlebars-template">
      • {{var.property}}
      • Schleifen: {{#each array}} ... {{/each}}
      • If: {{#if bool}}...{{#/if}}
    • Compile: var renderer= Handlebars.compile(templateHTML)
    • Render: var view = renderer({data: yourData})
    • Append: element.innerHTML = view
  • Funktionsaufrufe
  • Scope
  • AJAX mit jQuery
    • $.get(url, callbackfn(data))
    • Gleiches mit $.post()
    • $.load() ist ein shortcut für get() mit implizitem Callback, das die Daten direkt in das Element lädt
    • Allgemein: $.ajax({type, url, data, datatype, ...}).done(callback(data, status))
    • AJAX geht nur mit same origin (Umwege über Proxy) oder HTTP-Header
  • UI-Design

Vorlesung 1 - HTML p. 1

  • Folie 12 - Encoding
    • UTF-8 ist gleich wie ISO 8859-1, ausser es werden Sonderzeichen, z.B. Umlaute verwendet
    • Erstes Zeichen im UTF-8 File ist meist für Bytereihenfolge

Vorlesung 2 - HTML p.2

"Fav-Icon" verlinken: 

<link rel="icon" href="/icon.png" type="image/png" />

mit 32px x 32px

<base href="http://www.my­page.tld" />

Relative Links werden an die Base angehängt

Empfohlene Metadaten: Autor, Beschreibung, Keywords

<meta name="robots" content="noindex, nofollow" />

Crawler indexieren die Seite nicht (noindex) und folgen keinen Links (nofollow)

http-equiv Meta-Tags: header, die als HTTP-header ausgeliefert werden (zb. refresh, redirect, ...)
Nicht geeignet für Produktion

Neue HTML5-Tags:
header, section, article, footer
Für Suchmaschinen / Accessibility Tools / ... zur besseren Auszeichnung

  • Folie 17:

    • aside: Zusatzinformationen zur Seite (nichts mit dem Inhalt zu tun)
    • Eine Section braucht nicht zwingend ein header (validator gibt Warnung aus)
    • Header und Footer werden als header und footer der Seite gebraucht, aber auch pro Section

  • Folie 20:

    • Beispiel Time:
      <time datetime="2008-02-14 20:00">Valentines day</time>
    • Beispiel abbr:
      <abbr title="World Health Organization">WHO</abbr>

  • Folie 21:
    <b> und <i> wurden in html5 umdefiniert, damit es nicht mehr ein Aussehen beschreibt

  • Folie 22:
    Navigation nicht im Footer verwenden (stattdessen <aside> verwenden)

Mime-Types: https://wiki.selfhtml.org/wiki/Referenz:MIME-Typen

Vorlesung 3 - HTML p. 3

Repetition Content model:

Table ist Flow-Content, p ebenfalls -> Table nicht in p verschachteln!

Prüfungsstoff: W3C-Spezifikation interpretieren können, welche Elemente verschachtelt werden können

HSR-WED1-HTML-4-Advanced.pdf

  • TABLE

    • thead und tbody
    • caption für Beschriftung
    • colgroup: Spalten als klasse ansprechen (zb. für CSS)

  • IMG

    • width, height als Original grössen angeben!
    • srcset für mehrere Bilder (zb. für Mobile), zusammen mit "sizes"

  • figure

    • Beliebige Elemente verschachteln
    • mit <figcaption> eine Beschriftung darunter setzen

  • video
    mit "poster" ein Bild anzeigen lassen als Vorschaubild

  • form
    input in label verschachteln oder <label for="id"> mit ID des input-fields

  • button
    statt input type=submit verwenden, damit kein Wert für den Button mitgeschickt wird (unnötig)

  • datalist:
    Werte als Autocomplete vorschlagen

  • pattern-Atrribut:
    Nach pattern der Wert des input-fields validieren

Vorlesung 4 - Web Design / Usability

  • Folie 7:
    "Zufriedenheit" aufgeteilt in:
    • Fehlertolerant (u.a sinnvolle Fehlermeldung)
    • Ansprechend: Heisst auch vertrauensfördernd, hängt auch mit Effizienz zusammen
    • Lernfördernd

"Effektiv": Kann ich mein Ziel erreichen? (egal wie)
"Effizienz": Ziel mit angemessenem Aufwand erreichen

  • Folie 9:
    Consistency: Heisst auch, die grossen Sites anzuschauen, damit die eigene Website "konsistent" ist mit anderen

Vorlesung 5 - CSS (1)

  • Folie 8:
    Erste Website von Cern
    HTML ist nicht entworfen, um Aussehen festzulegen, sondern nur, um Informationen zu strukturieren
    Die Struktur wird von Styling getrennt

  • Folie 15

    • Cascading: Verhalten, wenn mehrere Styles auf das gleiche Element angewendet werden
    • Seit CSS3 mit Modulen aufgebaut für Weiterentwicklungen, so können auch einzelne Module weiterentwickelt werden

  • Folie 18-27 - CSS anwenden

    • Mit Attribut style (z.B. style="color: red")
    • Zum ausprobieren: CSS-Styles in den Developer Tools ändern
    • Mit style-Tag im <head>: 
<style>
    p {
        color: red;
    }
</style>

Variante mit externem File:

<head>
    <link rel="stylesheet" href="file.css">
    <link rel="stylesheet" href="file.css" media="screen"> /* Für Unterscheidung Bildschirm / Ausdruck */
    <link rel="stylesheet" href="file-print.css" media="print">
</head>

  • Folie 33
    Eine id sollte im HTML-Dokument nur einmal vorkommen

  • Folie 35 - Kombinatoren

    • Kindselektor: z.B. body > ul - Wird auf Kind von body angewendet
    • Nachfahrenselektor: body ul - Wird nur angewendet, wenn oberhalb von ul ein Body steht.
    • Wiki

  • Folie 37

    1. Regel 1 und 2
    2. Regel 2 (weil li nicht direktes Kind von ol ist)
    3. Regel 1 und 2

  • Folie 38

    1. Regel .1 & 3
    2. Regel 3
    3. Regeln 2 & 3
    4. Regeln 2 & 3

  • Folie 41

    • li > * selektiert alle Kinder von li
    • body * span selektiert span, denen body bevorsteht aber mind. 1 Tag dazwischen ist

  • Folie 46 - 47

    • a[Attribute] selektiert alle a Tags, die das Attribut Attribute gesetzt haben
    • Mit z.B. a[href=v] überprüft ob der Wert des Attributs = v ist

  • Folie 48

    • Regel 1 gilt für "Absenden"-Button
    • Regel 2 gilt für alle li in der ersten Liste ausser das erste, da "Berlin" dort nich allein steht
    • Regel 3 gilt für die ersten beiden li, da hreflang mit de startet

  • Folie 49

    • Regel 1 gilt für alle http-Links
    • Regel 2 gilt für alle link 2 (nicht 4, da es mit / anfängt)
    • Regel 3 gilt für Link 3 (wiki.selfhtml.org), aber nicht für link 4, da wiki case-sensitive ist

  • Folie 51

    • Mit normalen Selektoren kann man keine Teile eines Elements selektieren, nicht z.B. nur den ersten Buchstaben

Vorlesung 6 - CSS (2)

  • Folie 65
    • Box-Sizing: Padding und Border wird vom Content abgezogen. z.B. verwendet, um Elemente nebeneinander zu platzieren
  • Folie 66
    • Outline verwenden, weil sie keine "Grösse" des Elements braucht
    • Oder wenn ein Element Border nicht unterstützt
    • Bsp: Outline bei mouse-hover hinzufügen, ohne die Grösse des Elements zu vergrössern
    • Border kann mit Bild erstellt werden mit border-image
  • Folie 67
    • Reihenfolge: top - right - left - bottom
  • Folie 81
    • Opacity = 0 ist noch erkennbar für zb. hover, bei visibility = hidden nicht
  • Folie 84
    • position: absolute heisst absolute Werte relativ zum Parent, das ebenfalls position: relative oder absolute hat!
    • relative: Neuer "Nullpunkt", an dem es positioniert wird
  • Folie 92/93
    • Styles mit höherer Spezifität werden bevorzugt
    • A ist spezifischer als B ist spezifischer als C
    • Inline-Style ist spezifischer als alles andere
  • Folie 97
    • 1em: Gleich gross wie Parent-Schriftgrösse
    • 1 rem: Gleich gross wie Body-Schriftgrösse
    • 100 vh: 100% der Viewport-Höhe

Vorlesung 7 - Javascript (1)

  • Folie 11
    • "Compiler" übersetzt ES6-Code in ES5
  • Folie 15
    • Ausgabe: "Small"
  • Folie 18
    • V8-Engine "kompiliert" Javascript, ansonsten wird grundsätzlich nur ein Interpreter benötigt
  • Folie 20
    • Javascript ist "dynamic typed": Der Typ wird dynamisch festgelegt und kann verändert werden (kein guter Code!)
  • Folie 21
    • Immutable: Primitve Typen können nicht verändert werden
  • Booleans
    • Jeder Wert kann in ein boolean gewandelt werden
    • 0, false, "", null, undefined, NaN geben false
    • Alle anderen Werte ergeben true
    • Umwandlung mit Boolean(value) oder !!(value)
    • Rätsel:
      • 1 && 2 && 3 = 3
      • 1 && false && 0 = false
      • "Hallo" || 1 || false || xyz = "Hallo"
      • Es gibt das erste Element aus, das nicht zutrifft
  • Number
    • Mit Number.isSafeInteger() prüfen, ob die Zahl richtig interpretiert wird
    • NaN hat den Typ number
    • isNaN() zum überprüfen, NaN == NaN ist immer false!
    • +() schaut auf den ganzen Wert bei der Umwandlung, parseInt() parsed bis zum ersten Fehler
    • Rechenfehler: 0.1 + 0.2 != 3, Rundungsfehler, ausser sie runden auf einen Integer auf (z.B. 0.1 + 0.9 == 1)
    • Rätsel:
      • 3 > 2 > 1 = false
      • 3 > 2 >= 1 = true
      • Weil 3 > 2 wird auf true ausgewertet und +(true) ist 1
  • String
    • Alles innerhalb ${} wird interpretiert und als String ausgegeben
    • Ein String, der ${} beinhaltet, muss mit Backticks eingeschlossen sein
  • Folie 31 Quiz
    • 2
    • 2
    • 8
    • "42"
    • "30px"
    • NaN (Versucht von "px1" 2 zu subtrahieren)
    • Infinity
    • "3px63px"
    • "fooNaN" (+"abc" wird zur Zahl)
    • 3
  • Folie 37
    • Testen auf undefined: typeof variable == 'undefined'
    • Testen eines Klassenattributs: typoeof(class != 'undefined' && class.variable != undefined)
  • Arrays
    • for (var x in arr) iteriert nicht über die Werte, sondern nur über die Properties (bei einem "primitiven Array" der Index ab 0)
    • Wie erwwartet bei for (z of arr)
    • Diese Varianten sind erst ab ES6 unterstützt, arr.forEach(function) aber schon früher

Vorlesung 8 - Javascript (2)

  • Funktionen
    • Die variable argument ist kein Array, sondern ein eigener Datentyp (iterieren mit Index geht aber)
    • Funktionen haben properties (name, length (Anzahl erwartete Parameter))
    • fn.toString() gibt den Sourcecode der Funktion zurück
  • Scope
    • Sichtbarkeit der Variablen und Funktionen
    • Variablendeklaration ohne var -> global
      • Aufrufbar unter global.varname bzw. window.varname
    • Deklaration mit var -> Nur im aktuellen und in "Child" scopes ("Closure")
    • Äussere Scopes können auf innere zugreifen, innere aber nicht auf äussere Scopes.
    • Node.js: Pro File wird ein Scope erzeugt (wenn nicht epxlizit global definiert)
    • Verhalten Browser: jede Variable ausserhalb einer Funktion ist global
    • let-Keyword
      • Scope ist nur der Block (bei var ist der Scope immer die ganze Funktion!)
      • Braucht use strict
  • Context
    • Bei aufruf einer normalen Funktion ist this das globale Objekt
    • Wenn die Funktion auf einem Objekt aufgerufen wird, ist this dieses Objekt
    • Mit fn.call() kann das this von fn gesetzt werden
  • Use strict
    • Macht Javascript strikter
    • z.B. var wird erzwungen
    • Code wird vom Compiler besser optimiert
    • Wird für viele ES-Features benötigt (z.B. let)
    • Aktivieren mit 'use script'
      • Am Anfang des Files für das ganze File
      • Am Anfang einer Funktion für die Funktion
      • Grundsätzlich: Wird für den aktuellen Scope gesetzt
      • Wird aber nicht an aufgerufene Funktionen vererbt!
  • Arrow Functions
    • Funktion ohne function keyword
    • Wie Lambdas in Java
    • Mit () => {code; return x;} kann auch ein Block definiert werden
    • Das this wird immer auf das aktuelle Object gebunden ("intuitiv")
  • Javascript Features
    • Hoisting
      • Alle Funktionen sind im ganzen File aufrufbar
      • Die Funktionsdeklarationen und Definitionen (nicht aber Initialisierungen) werden nach oben verschoben
      • Kann zu unerwarteten Verhalten führen (auch mit 'use strict')
      • Wenn Funktion einer variablen zugewiesen wird, wird die Variablendeklration verschoben, nicht aber die Funktion selbst
      • let wird nicht "gehoisted"
    • Jedes Objekt ist eine Hashtable
      • Key-Value-Pairs
      • Funktionen kann man mit Properties ergänzen
      • Zugriff mit object[key] oder object.key
    • Statement oder Expression
      • Expression erzeugt einen Wert
      • Statement führt etwas aus
    • Semicolon insertions
      • Fügt javascript selbst ein, falls es sonst einen Fehler geben würde
      • Man sollte immer Semikolons selbst machen!
      • Beispiele Folie 79: "6". Wird "korrekt" ausgeführt
    • Regex
      • /regex/.test("teststring") -> true/false
    • Date
      • Formatierung geht mit ES6 besser

Vorlesung 9 - DOM & Events

  • Folie 5
    • Browser erstellt DOM Tree aus HTML
    • Browser rendert den DOM Tree jedes Mal, wenn er verändert wird
    • -> Viele kleine Änderungen in der DOM brauchen viel Rechenaufwand
    • Render-Tree braucht nur Elemente, die angezeigt werden (z.B. ohne <head> oder Kommentare)
  • Folie 6
    • Anzeige im Developer Window ist nur eine HTML-Repräsenation des DOM-Baums, nicht der Source-Code
  • Folie 10
    • Parsen geht Schritt für Schritt. Sobald ein Script gefunden wird, wird es vom JS-Interpreter ausgeführt. D.h beim Ausführen eines Scripts ist document noch nicht vollständig geladen
    • Lösung: ẁindow.onload()
  • JS einbinden
    • <script></script> gibt aktuell Probleme mit WebStorm
    • Besser: <script src="script.js"></script>
  • Whitespace
    • Jeder Zeilenumbruch ist ein Whitespace im DOM-Tree
    • Diese Whitespaces werden auch im Browser gerendert und brauchen Platz
    • e.nextElementSibling statt e.nextSibling verwenden, um nicht auf whitespace-nodes zu treffen
    • Workaround: Umbrüche mit Kommentare maskieren
  • Folie 17
    • Korrektur: getElementById() gibt node zurück, nicht NodeList
    • "life": NodeList Ändert sich mit dem DOM-Tree mit (dynamisch)
  • Events
    • onload() oder addEventListener("load", fn) ist identisch
    • onload, onclick etc. geht nur, wenn ein Event Handler zugewiesen wird
  • Event-Bubbling
    • Ein Event auf einem Element "bubbled" hoch zu den Parent-Elementen im DOM-Tree
    • Die Event-Handler werden nacheinander aufgerufen, zuerst der direkt auf dem Event, dann parents, usw.
    • Mit event.target prüfen, was geklickt wurde (von innen nach aussen)
    • mit event.stopPropagation() weiteres bubbling verhindern
    • Verarbeitung sollte nicht länger als 100ms benötigen, da sonst UI bemerkbar langsamer wird
    • Double click löst zwei Klicks aus

Vorlesung 10 - jQuery

  • jQuery 2 nutzen (kein IE 6/7/8 Support)
  • Kleine DOM-Manipulationen besser ohne jQuery
  • Mächtiger als die Standard Document API von Javascript
  • $() ist eine Funktion
  • Function Chaining: Weitere funktionen anhängen
  • Gleich wie $(document).on('ready', function() {}):
$(function () {
    //code
});
  • ready wird ausgelöst, sobald DOM-Manipulationen möglich sind, aber Bilder müssen nich nicht geladen werden
  • load wird erst ausgelöst, nachdem ALLES geladen wurde
  • IIFE
    • Immediately-invoked function expression
    • Definiert neuen Scope
    • Definiert anonyme funktion, die sofort ausgeführt wird
(function() {
    // code in eigenem scope
})();
  • $("<css-selector>") gibt jQuery ResultSet zurück, auf dem jQuery-Funktionen aufgerufen werden können
  • $("<css-selector>")[<index>] gibt "natives" Element zurück
  • DOM-Manipulation
    • z.b. val() ist ein Getter, val(value) ein Setter
    • val() -> Wert des ersten elements
    • text() -> Alle Elemente, bzw. konkatenierte Liste beim getter

Vorlesung 11 - HTTP & Node.js

HTTP

Die Browser-Hersteller haben die HTTP-Entwicklung geprägt

  • URI - Unified Resource Identifier
    • URL gefolgt von URN (Unified Resource Name)
    • URN identifiziert eine Ressource, unabängig von der URL (der "Ort")
    • DNS-Name + Port wird auch Origin genannt
    • Fragment (Anchor) geht nie auf den Server!
  • HTTP-Methods
    • Die Methods sollten nur für ihren Zweck verwendet werden
    • In der Realität werden PUT, DELETE etc. oft von der Firewall geblockt, man muss mit GET und POST auskommen
    • POST-Request-Inhalt muss immer beschrieben werden (content-type)
  • Header
    • E-Tag (Entity Tag) ist Hash über den Inhalt oder das Datum der letzten Änderung
    • E-Tag wird beim Request mitgeschickt, wenn die Ressource bereits im Cache liegt
    • Wenn der Server merkt, dass sich der Content nicht verändert hat, sendet er 304 Not Modified
    • Pragma (eigentlich im Request) heisst, man will auf jeden Fall die neue Version vom Server haben
    • Cookies ohne Expiration Date sind "Session-Cookies"
    • Cookies haben einen "Scope", der durch den Pfad gegeben wird
    • Cookie mit httpOnly kann nur vom http-Protokoll gelesen werden (z.B. nicht mit JS)
    • Cookie mit "Secure Flag" kann nur über sichere (https) Verbindung übertragen werden (auch in Kombination mit httponly möglich)

Vorlesung 12 - AJAX

Anwedung: zB. auf SBB-Seite Ortschaften vorschlagen ohne Neulaen der Seite

AJAX: Asynchronous JavaScript and XML, man kann aber mehr als HTML und XML laden

event.preventDefault() um das normale Verhalten zu verhindern, z.B. bei einem Link das Navigieren unterbinden

request.open(method, url, true) mit 3. Parameter true aufrufen (default), damit der Request asynchron ausgeführt wird und nicht den Haupt-Thread von JS blockiert

AJAX ist gewöhnlicher HTTP-Request, Server kann also nicht unterscheiden

readyState = 4 wenn Request komplett (erfolgreich oder nicht)

Bei einem POST Request ist Content-Type zwingend

Same Origin Policy: Mit AJAX darf nur auf gleicher Host mit gleichem Port zugegriffen werden, dies wird vom Browser enforced. Wenn der entfernte Server Access-Control-Allow-Origin header schickt, ist aber Cross-Origin erlaubt (CORS)

Vorlesung 14 - Zusammenfassung

Projekt: https://github.com/wasabideveloper/HSR.WED1.Examples.BlogApp

  • {{{content}}}, um "Raw"-Content einzusetzen (HTML nicht "escapen")
  • article+article: Jeder Artikel, der auf einen anderen folgt