Tag Fünf

Internet Protokolle

Die Kommunikation von Menschen und Geräten über das Internet und anderen Netzwerken funktioniert über Protokolle. Diese legen quasi die Gesprächsregeln fest: Wer muss wann welche Informationen verschicken? Was passiert, wenn die Daten den Empfänger nicht erreichen? Wie schützt man die Übertragung vor Störungen und Spionage? Immer dann, wenn wir im Internet unterwegs sind, werden solche Protokolle durchgängig eingesetzt. Sehr bekannt sind HTTP und HTTPS, mit denen in der Regel Webseiten aufgerufen werden. Ein weiteres wichtiges Protokoll ist FTP.

File Transfer Protocol (FTP)

Das File Transfer Protocol (FTP) ist eines der ältesten Protokolle des Internets. Das Protokoll ist dafür gedacht, mit Befehlen Downloads und Uploads auszulösen. So kann man Dateien von dem eigenen Gerät (PC, Smartphone usw.) auf einen Server übertragen – und umgekehrt: Per FTP können Dateien auch vom Server auf das Gerät heruntergeladen werden.

Dabei steht dem Nutzer ein Dateimanagementsystem zur Verfügung, dass man so auch aus dem Betriebssystem kennt. Dateien lassen sich in Ordnern ablegen, die wiederum in anderen Ordnern liegen dürfen. Dadurch ergibt sich eine hierarchische Verzeichnisstruktur.

Das File Transfer Protocol kommt häufig beim Erstellen von Websites zum Einsatz. Über den FTP-Zugang können HTML-Dateien auf den Server übertragen werden. Außerdem können Betreiber von Websites Mediendateien für Besucher der Homepage bereitstellen.

Hypertext Transfer Protocol Secure (HTTPS)

Die Abkürzung HTTPS steht für „Hypertext Transfer Protocol Secure“, übersetzt: „Sicheres Hypertext-Übertragungsprotokoll“. Das Übertragungsprotokoll ist gewissermaßen die Sprache, in der sich der Webclient – in der Regel der Webbrowser – und der Webserver miteinander verständigen. HTTPS ist diejenige Version des Übertragungsprotokolls, die mit einer verschlüsselten Kommunikation operiert.

HTTPS erfüllt zwei Funktionen:

1. Die Kommunikation zwischen Webclient und Webserver wird verschlüsselt. Damit soll verhindert werden, dass ein unbefugter Dritter die Kommunikation abhört, indem er z. B. den WLAN-Netzwerkverkehr mitliest.

2. Der Webserver wird authentifiziert, indem gleich zu Beginn der Kommunikation ein Zertifikat an den Webclient gesendet wird, das die Vertrauenswürdigkeit der Domäne bescheinigt. Diese Maßnahme hilft dabei, Betrug durch gefälschte Websites zu bekämpfen.

Website online stellen

Dank dem FTP Protokoll kann man relativ einfach via Drag and Drop Dokumente, Websites und praktisch jegliche Dateien ins Netz stellen. Dazu verwenden wir ein FTP Programm, in unserem Fall Cyberduck.

Mit den richtigen Credentials lässt sich danach einfach eine Verbindung zum Host (dem Server) aufbauen und Dokumente hinterlegen. Für dieses Modul existiert folgendes temporäres FTP Login:

• Server-URL: coding101.dev

• Benutzername: people@coding101.dev

In Kombination mit dem richtigen Passwort ermöglicht uns diese Verbindung, Dokumente in people.coding101.dev online zu stellen.

CSS Units

CSS hat einige unterschiedliche Einheiten, um eine Dimension zu beschreiben. Die Länge, Breite oder Dicke eines margin, paddings, border oder aber auch z.B. font-size kann damit definiert werden.

Wir unterscheiden dabei zwischen absoluten und relativen Längen.

Absolute Units

Die absoluten Längeneinheiten sind feste Einheiten, die immer genau in der definierten Grösse erscheinen dargestellt werden. Absolute Längeneinheiten sind für die Verwendung am Bildschirm nicht oder eher nicht zu empfehlen, da Bildschirmgrössen und Einstellungen stark variieren. Sie können jedoch verwendet werden, wenn das Ausgabemedium bekannt ist, z. B. für ein Drucklayout.

• cm | Zentimeter

• mm | Millimeter

• px | Pixel

Relative Units

Relative Längeneinheiten geben eine Länge relativ zu einer anderen Längeneigenschaft an. Relative Längeneinheiten lassen sich besser zwischen verschiedenen Rendering-Medien skalieren. Zukünftig werden wir je länger je mehr mit relativen Einheiten arbeiten.

• % | Abhängig von dem Eltern Element

• em | Abhängig von der nächst gelegenen font-size Definition.

• rem | Abhängig von der font-size Definition des root Elementes.

• vw | Abhängig von 1% der Viewport Breite (viewport width)

• vh | Abhängig von 1% der Viewport Höhe (viewport height)

Pixel vs REM

In der heutigen Responsive Webdesign Welt macht es nur noch für einzelne Anwendungsbereiche Sinn, Pixelwerte zu nutzen. Grundsätzlich setzen wir aus zwei Gründen jedoch auf den Einsatz von REM anstatt Pixeln.

1. REM gewährleisten eine bessere Accessibility. Entscheidet sich ein Nutzer, die Schriftgrösse des Browsers grösser zu stellen, so wird die komplette Website inklusive allen Dimensionen und Abständen entsprechend skaliert.

2. Da REM sich immer in Relation zu der Font-size des HTML Tags verhalten, kann zudem mit einer Korrektur der Font-size die komplette Grösse der Website angepasst werden. Wichtig dabei ist ein Umgang mit Prozentwerten anstatt absoluten Werten.

            /* Das ist keine gute Praxis, um die Grösse einer Website zu ändern
html { font-size: 10px; }
*/

html { font-size: 62.5% }
        

Probiere es selber aus und ändere die Schriftgrösse deines Browser in den Einstellungen. Du wirst sehen, dass unser Beispiel in Pixeln noch immer gleich aussieht, wobei sich das Beispiel in REM entsprechend verändert hat.

Pseudo Klassen

Eine Pseudoklasse wird verwendet, um einen speziellen Zustand eines Elements zu definieren. Sie kann zum Beispiel verwendet werden, um …

• … ein Element zu gestalten, wenn ein Benutzer mit der Maus darüber fährt ( :hover )

• … besuchte und nicht besuchte Links unterschiedlich zu gestalten ( :visited )

Syntax einer Pseudo Klasse

            selector:pseudo-class {
  property: value;
}
        

:hover & :visited

Pseudoklassen können Selektoren wie HTML Tags und Klassen zugewiesen werden.

            a {
  color: black;
}

a:visited {
  color: blue;
}

.button {
	color: white;
}

.button:hover {
	color: purple;
}
        

Benutzerdefinierte Schriften

Jedes Betriebsystem verfügt über eine gewisse Anzahl an vorinstallierten Schriften, welche für das Webdesign genutzt werden könnten. Wie diese Übersicht zeigt, sind standardmässig leider relativ wenig Schriftarten auf allen System verlässlich verfügbar. Dies führt dazu, das auf einer Website Schriftarten normalerweise vom Betreiber geladen und zur Verfügung gestellt werden. Wir bedienen uns dazu zwei unterschiedlichen Optionen:

Option 1: Google Fonts

Google bietet uns mit der Plattform Fonts die Möglichkeit, in wenigen Schritten eine Vielzahl an Schriften in unser Projekt einzubinden und via CSS zu definieren. Dazu gehen wir folgendermassen vor.

• Schriftfamilie und Schriftschnitt bei Google Fonts auswählen.

• Schriftdateien via HTML Link Tag oder CSS Import Request in das Projekt einbinden.

            @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');
        

• Schriftfamilie mit CSS definieren und im Projekt verwenden.

            font-family: 'Roboto Slab', serif;
font-weight: 100;
        

Option 2: Custom CSS font-face Rule

Sollten in einem Projekt Schriftarten vorkommen, welche nicht bei Google Fonts vorhanden sind, lassen sich jene via die CSS Regel font-face definieren. Die Implementation und Konvertierung von Schriftdateien in ein fürs Web optimiertes Format ist relativ simpel, übersteigt jedoch den zeitlichen Rahmen dieses Kurses.

Als Richtlinie kannst du dich folgenden Inhalten bedienen:

• Grundlegende Theorie bei w3schools.com

• Weiterführende Informationen bei css-tricks.com

• Generierung korrekter Formate für Schriftdateien via fontsquirrel.com

Quellenangabe