Frontend Development

# Footer

Ein Footer (Fusszeile) signalisiert Benutzern, dass das Ende der Website erreicht wurde. Zudem bietet er oft eine Zusammenfassung mit nützlichen Links zu anderen Bereichen und Funktionen. Je nach Komplexität einer Website kann der Footer oft auch zweitrangige, weniger wichtige Dinge darstellen, die für die Mehrheit der Nutzer weniger relevant sind. Dadurch bleibt die Hauptnavigation schlank und übersichtlich.

Typische Beispiele für Footer-Inhalte sind:

  • Logo
  • Sitemap (Link-Übersicht der wichtigsten Bereiche)
  • Kontaktdetails
  • Links zu Support, häufig gestellten Fragen (FAQ), Datenschutzerklärung etc.
  • Links zu zweitrangigen Inhalten (z.B. Über uns, Jobs etc.)
  • Links zu Social Media
  • Texte und Links für die Suchmaschinenoptimierung (SEO)
  • Länder- und Spracheneinstellungen
  • Hinweis auf Copyright
  • Call-To-Action (Aufruf zur Interaktion z.B. Newsletter abonnieren)

Apple Footer Footer auf apple.com (Stand 2020)

Hinweis

Natürlich sind das alles nur Beispiele. Es gibt keine endgültige Empfehlung, wie ein Footer sein soll. Websites, bei denen der Fokus auf grossen Mengen an Inhalten liegt (z.B. Zeitungen, Instagram etc.), verwenden auch oft gar keinen Footer, da beim Scrollen unaufhörlich neuer Inhalt dargestellt wird. Es ist also unwahrscheinlich, dass das “Ende der Website” überhaupt erreicht werden kann. Bei solchen Seiten übernehmen verschiedene Navigationsprinzipien (Header, Tabbar, Sidebar, Hyperlinks) die Aufgaben des Footers.

Da dein Portfolio ziemlich überschaubar ist und viele der oben gelisteten Dinge bereits auf der Seite selbst vertreten sind, verzichtet die Vorlage auf einen umfangreichen Footer. Lediglich ein Hinweis zum Copyright (Urheberrecht) und erneut die Kontaktmöglichkeit via E-Mail wird vorgeschlagen. Natürlich kannst du auch von der Vorlage abweichen und andere Inhalte in deinem Footer einbauen.

<!-- Nach dem schliessenden </main> und vor dem schliessenden `</body> Tag einfügen-->
<footer>
  &copy; Jane Doe &nbsp;|&nbsp; <a href="mailto:hello@janedoe.com">hello@janedoe.com</a>
</footer>

Hinweis

Ersetze den Namen und die E-Mail aus der Vorlage durch deine eigenen Angaben.

Auch wenn dein footer nur aus einer einzigen Zeile Text besteht, benötigt er dennoch ein paar Styles, um wie in der Vorlage auszusehen.

/* 
--------------------------------
<footer> Bereich
--------------------------------
*/

footer {
	padding: 2em 0;
	text-align: center;
}

# Charset, Encoding & Entities

Du erinnerst dich bestimmt an folgende Zeile aus dem Kapitel Grundstruktur HTML:

<meta charset="utf-8">

Bisher hast du die Texte in deinem Portfolio ganz normal in Deutscher Sprache verfasst. Jetzt erscheinen im Footer plötzlich Dinge wie &copy; oder &nbsp; im Text. Was es damit und dem meta-Tag zum charset auf sich hat, erfährst du jetzt.

# ASCII

In den 60er Jahren, den Anfängen der massentauglichen Computer, wurde ein System entwickelt, um jeden einzelnen Character (Buchstabe und Sonderzeichen) einer eindeutigen Entity (eine einmalige Zeichenkette oder Nummer) zuzuordnen. Dieses System war der “American Standard Code for Information Interchange” (kurz ASCII) und umfasste 128 Klein- und Grossbuchstaben, sowie einige Satz- und Sonderzeichen aus der Englischen Sprache. Zusammen bilden diese eine Sammlung an Zeichen (Character-Set, kurz Charset). Es sind genau 128, weil das mit der Art und Weise zu tun hat, wie Computer Daten speichern und was damals technisch möglich war.

Jedes einzelne Zeichen, welches auf einem Computer gespeichert werden sollte, wurde gemäss den ASCII-Regeln in diese eindeutige Zeickenkette enkodiert (encoded, umgewandelt) und bei der Ausgabe/Anzeige wiederum dekodiert (decoded).

Dadurch wurde sichergestellt, dass Daten effizient gespeichert und auf unterschiedlichen Computern richtig ausgegeben werden konnten.

# Unicode

Bis heute hat sich an den Grundprinzipien Charset und Encoding nicht viel verändert. Allerdings dürfte klar sein, dass ein Charset wie ASCII, welches nur 128 Zeichen aus der Englischen Sprache berücksichtigt, heute nicht mehr aussreicht. Nach diversen Weiterentwicklungen von ASCII wurde mit Unicode schliesslich ein neues Charset-System etabliert, das mit sämtlichen Schriftsprachen der Welt umgehen können soll. Unicode ist aktuell in der Lage 1'112'064 unterschiedliche Zeichen eindeutigen Entities zuzordnen. Auch diese genaue Zahl hat technische Gründe, die du in den weiterführenden Links im Detail nachlesen kannst.

Mehr zum Thema Unicode

# Encoding-Standards

Das Encoding definiert, wie Computer die Zeichen technisch (in Bits) abspeichern sollen. Gängig sind dabei die UTF-Standards (Unicode Transportation Format) UTF-8 und UTF-16. Wenn Daten überwiegend in westlichen Sprachen vorliegen und die Speichermenge gering bleiben soll, ist UTF-8 meist die erste Wahl. Wenn Daten überwiegend in nicht-westlichen Sprachen vorliegen, kann UTF-8 mehr Speicherplatz beanspruchen als UTF-16.

Hier bist du allerdings schon stark in den Tiefen der Informatik unterwegs. Zusammengefasst reicht es für dich zu wissen, dass deine Websites das Unicode Charset-System mit dem UTF-8-Encoding verwenden.

# HTML- & CSS-Entities

Du kannst jeden Unicode auch in HTML verwenden. Dabei schreibst du immer ein kaufmännisches Und-Zeichen &, dann die eindeutige Zeichenkette des Unicodes (oft mit einem # davor), gefolgt von einem abschliessenden Semikolon ;. Diese Schreibweise funktioniert dann immer unabhängig davon, was gerade für ein Encoding (utf-8, utf-16 etc.) auf dem Computer des Betrachters eingestellt ist. In CSS gilt das selbe Prinzip, die Schreibweise ist jedoch einfacher. Hier musst du lediglich einen Backslash \ vor den Unicode setzen.

Zum Beispiel &#8212; sollte in HTML immer als Bindestrich – angezeigt werden. In CSS könntest du \8212 etwa in der content Property eines Pseudoelements verwenden.

Natürlich wäre es sehr umständlich jedes einzelne Zeichen als Unicode-Entity schreiben zu müssen und meist ist dies auch nicht notwendig. Häufig werden Entities verwendet, um reservierte Zeichen (die sonst als HTML-Code interpretiert würden, wie zum Beispiel < ) und unsichtbare Zeichen (wie zusätzliche Leerzeichen) anzuzeigen. Du kannst sie auch anstelle anderer Zeichen verwenden, die mit einer Standardtastatur schwer zu tippen sind.

Etwa das Copyrightzeichen © hast du in deinem Footer als HTML-Entity (&copy;) eingefügt. Du könntest es natürlich auch einfach als Text einfügen (Alt+C in MacOS). In den meisten Fällen würde das einwandfrei funktionieren. Willst du jedoch mitten im Text ein “kleiner als”-Zeichen verwenden (<) solltest du die HTML-Entity &lt; einsetzen um Fehler zu vermeiden. Viele Content-Management-Systeme (wie etwa Wordpress etc.) tun dies beim Schreiben von Text automatisch im Hintergrund.

Die zweite Entity in deinem Footer ist &nbsp; und erzwingt ein zusätzliches Leerzeichen. Browser und Code-Editoren sehen es oft als Fehler an, wenn zwei Leerzeichen aufeinander folgen und entfernen diese automatisch. Mit &nbsp; kannst du das verhindern. Benötigst du jedoch grössere Abstände, dann ist eine CSS-Lösung mit margin und padding zu bevorzugen.

Hinweis

Übrigens haben auch sämtliche Emojis einen Unicode und können somit in HTML und CSS als Entity eingefügt verwendet. Eine Übersicht findest beispielsweise in dieser Emoji Reference.

Zeichenreferenz für HTML-Entities

Auswahl gängiger HTML & CSS Entities

# Überprüfen im Browser Aufgabe

Wie immer solltest du das Ergebnis im Browser überprüfen. Gemäss Vorlage würde dein footer nun so aussehen:

Footer

Passende Challenges

  • #10 Smooth Scrolling (Scrolle die Seite “smooth” beim Klick auf ein Navigationselement)
  • #11 Back to top (Füge einen Button ein, um “smooth” zum Seitenanfang zu scrollen.)

← Javascript →