Links, Tipps und Inspiration | EF Informatik 2022

# Links und Inspiration

Für die Gestaltung von Logo und App:

https://unsplash.com (opens new window) – Lizenzfreie Bilder
https://icons8.com (opens new window) – viele Symbole, meist gratis (zumindest kleine Auflösungen)
https://github.com/encharm/Font-Awesome-SVG-PNG (opens new window) – Font Awesome Icons als PNG und SVG
https://realfavicongenerator.net (opens new window) – ein Bild in ein Favicon umwandeln
http://www.colourlovers.com/palettes (opens new window) – Paletten zusammenpassender Farben
https://colors.lol (opens new window) – zusammengestellt Farb-Paletten
https://lokeshdhakar.com/projects/color-thief/ (opens new window) – Farben aus einem Bild «klauen»
https://fonts.google.com (opens new window) – Webfonts einbinden

# 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/ (opens new window)

# 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 (opens new window) | Safari Web Inspector (opens new window) | Firefox Page Inspector (opens new window) | MS Edge Developer Tools (opens new window)

# 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)

← Bilder von theTVDB