Für die Gestaltung von Logo und App:

# CSS-Reset

Nicht alle Browser stellen die Webseite genau gleich dar. Ein Grund, sind die CSS-Default-Regeln, welche sich von Browser zu Browser leicht unterscheiden. Mit einem «CSS-Reset», kann man diese Regeln auf einen Browserübergreifenden Standard setzen. Dazu verlinkt man vor den eigenen CSS-Regeln eine solche CSS-Reset-Datei.

Ein Beispiel ist «normalize.css»: http://necolas.github.io/normalize.css/

# App-Grundgerüst für HTML

Für eine Web-App kann man einige spezielle Zusatzangaben im head-Element mitliefern:

<!doctype html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Meine App</title>

  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.png">
</head>

<body>
    <!-- Inhalt -->

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
meta x-ua-compatible
Optimierung für Internet Explorer und Windows Smartphone
meta viewport
Zeige die Seite nicht-skaliert an (wie eine richtige App)
link icon
Link zu Bilddatei für icon

# Design für Smartphone

Handys haben einen kleineren Bildschirm. Man kann deshalb nicht sehr viel Inhalt nebeneinander darstellen. Das muss man beim Entwickeln auf einem Computer berücksichtigen! Also empfielt sich eine der folgenden drei Optionen:

Browser-Fenster schmal
durch ein schmales Browser-Fenster kann ein Handy-Bildschirm simuliert werden. (einfachste Lösung)
Developer-Modus
die Entwickler-Modi der modernen Browser bieten eine «responsive view», wo man verschiedene Devices simulieren kann. (professionelle Lösung)
CSS-Lösung
Damit die App aber auch auf einem breiteren Browser funktionier, kann man die Breite des Inhaltes mit folgendem CSS-Code einschränken:
html {
    margin:    0 auto;
    max-width: 900px;
}
1
2
3
4

# Browser-Tools

Alle modernen Browser haben einen «Developer»-Modus eingebaut. Mit Hilfe dessen lassen sich Webseiten und ihr HTML- und CSS-Code genau untersuchen. Man kann sogar kleine Änderungen direkt im Browser testen. Diese werden gleich angezeigt, jedoch nicht abgespeichert.

Google Chrome | Safari Web Inspector | Firefox Page Inspector | MS Edge Developer Tools

# Cache

Normalerweise behält der Browser gewisse Dateinen in einem Zwischenspeicher, dem sogenannten Browser-Cache. Dadurch muss nicht immer sämtlicher Inhalt übertragen werden. Beim Entwickeln hingegen, kann es mühsam sein, wenn alter Inhalt oder alte Stylesheets angezeigt werden!

In Flask können wir nach jeder Anfrage request an die Antwort response Steuerinformationen anhängen. Dadurch kann der Browser angewiesen werden, die Inhalte nicht zwischenzuspeichern:

@app.after_request
def add_header(response):
   response.cache_control.max_age = 0
   response.cache_control.no_cache = True
   response.cache_control.no_store = True
   return response
1
2
3
4
5
6

Alle Browsers bieten einen «force refresh» – ein Neuladen der Inhalte ohne Zwischenspeicher:

Firefox
Shift + Reload-Icon
Ctrl + F
Ctrl + Shift + F
Chrome
Ctrl + F oder Shift + F (windows)
Shift + Command + R (mac)
Letzte Änderung: 27.5.2020, 16:14:14