Was ist HTML?

May 13, 2023 by Sarah Schoengruber

HTML steht für Hypertext Markup Language, auf Deutsch Auszeichnungssprache für Hypertext. Hyper wird hier im Sinne von „erweitert“ gebraucht und bedeutet, dass Hypertext nicht einfach zur geradlinigen Lektüre gedacht ist. Statt dessen bietet ein Hypertext-Dokument Verknüpfungen zu anderen Textstellen an - die Hyperlinks. Das Ziel solcher Links kann im gleichen Dokument liegen oder auch in einem ganz anderen. Hypertext lässt sich auf unterschiedliche Weisen herstellen. HTML ist eine rein auf Text basierende Realisierung dieses Konzepts und verwendet spezielle Zeichenfolgen, um Hyperlinks zu erzeugen und Einsprungpunkte für Hyperlinks zu markieren. Gleichzeitig bieten diese Markierungen auch die Möglichkeit, den Inhalt des Dokuments zu strukturieren, so dass bei der Anzeige des Dokuments eine passende Darstellung erzeugt werden kann.


Aufbau von HTML-Dokumenten

Elemente

Dies sind die wichtigsten Tags:

  • <!DOCTYPE html>: Hiermit wird der Dokumenttyp deklariert, dies ist obligatorisch und auch notwendig, damit sich das Dokument richtig verhält.
  • <html></html>: Das HTML-Element, oft auch Wurzelelement genannt, umschließt den Inhalt der gesamten Webseite.
  • <head></head>: Im Head-Element wird all das abgelegt, das nicht Inhalt der Webseite ist. Darunter fallen z. B. Keywords, die von Suchmaschinen gefunden werden können, die Beschreibung der Webseite oder Links auf Stylesheets.
  • <meta charset="utf-8">: Hiermit wird der Zeichensatz des Dokuments auf UTF-8 gestellt, was empfohlen ist, weil damit die meisten Zeichen der meisten Sprachen dargestellt werden können.
  • <title></title>: Mit dem Title-Element wird der Titel des Dokuments festgelegt, der z. B. im Tab aufscheint.
  • <body></body>: Das Body-Element umschließt all den Inhalt, den Nutzer*innen der Webseite sehen sollen, z. B. Texte, Videos, Audiodateien usw.

Attribute

HTML Attribute

Bei Attributen sollte man folgende Dinge immer im Hinterkopf behalten:

  • Attributwerte sollten immer in Anführungszeichen gesetzt werden.
  • Die Attribute kommen einfach hintereinander mit einem Leerzeichen getrennt. Die Reihenfolge der Attribute ist unwichtig.
  • Viele Attribute sind optional. Zb. id und class. Aber andere HTML tags setzen die Benutzung dieser voraus, wie etwa img und a

Aus diesen Tags und Attributen kann man folgendes Grundgerüst bilden:

Grundgerüst eines HTML Dokuments

Folgendes sollte man sich also bezüglich HTML Dokumenten merken:

Ein sinnvolles HTML-Dokument besteht aus einem Head und einem Body

Der Header enthält Informationen über das Dokument, die nicht zum eigentlichen Inhalt gehören, z.B. Titel, Autor, Keywords, Kodierung, Sprache, … (Metadaten / SEO)

Der Body enthält eigentlichen Inhalt des Dokuments, z.B. Überschriften, Absätze, Listen, Tabellen, Formulare, Links zu Bildern usw.

Ein HTML Dokument hat immer eine Baumstruktur


HTML, CSS und JavaScript

Damit das HTML Dokument auch ansprechend aussieht, braucht man ein sogenanntes Stylesheet (.css) und um auch noch einige Funktionalitäten zu gewährleisten ist ein entsprechendes Javascript Dokument (.js) hilfreich.


Einbinden von CSS und JavaScript

Es gibt mehrere Varianten um diese Files mit dem HTML zu verlinken. Die gängigste Methode besteht darin, im <head> Element den Tag <link>einzufügen. Bei dieser Variante muss das css bzw. js Dokument separat gespeichert sein. Die zweite Variante ist eher unuübersichtlich, da hier inline, also direkt im HTML Code die Script Befehle geschrieben werden. Entweder wird dies im header gemacht oder direkt im Tag. Hier beide Inline Varianten am Beispiel von CSS:


Im Head:
Inline Beispiel im Head
Im Tag:
Inline Beispiel im Tag

Verwendete Quellen

Das Internet

May 2023 by Dominik Delic

  • Das Internet (von englisch interconnected networks ‚zusammengeschaltete Netzwerke‘, kürzer englisch internetwork oder kurz net ‚Netz‘), umgangssprachlich auch Netz, ist ein weltweiter Verbund von Rechnernetzwerken, den autonomen Systemen.
  • Es ermöglicht die Nutzung von Internetdiensten wie WWW, E-Mail, Telnet, SSH, XMPP, MQTT und FTP und dabei kann sich jeder Rechner mit jedem anderen Rechner verbinden.
  • Der Datenaustausch zwischen den über das Internet verbundenen Rechnern erfolgt über die technisch normierten Internetprotokolle und die Technik des Internets wird durch die RFCs der Internet Engineering Task Force (IETF) beschrieben.
  • Die Verbreitung des Internets hat zu umfassenden Umwälzungen in vielen Lebensbereichen geführt. Es trug zu einem Modernisierungsschub in vielen Wirtschaftsbereichen sowie zur Entstehung neuer Wirtschaftszweige bei und hat zu einem grundlegenden Wandel des Kommunikationsverhaltens und der Mediennutzung im beruflichen und privaten Bereich geführt. Die kulturelle Bedeutung dieser Entwicklung wird manchmal mit der Erfindung des Buchdrucks gleichgesetzt.

Die Geburtstunde des Internets

  • Die Geburtsstunde des Internets ist das Jahr 1957, als die Sowjetunion ihren ersten Satelliten Sputnik 1 ins All schickte. Das Verteidigungsministerium der USA fürchtete, dass es so der Sowjetunion gelingen könnte, das US-amerikanische Nachrichtensystem zu zerstören. Dies war der Auslöser für die Planung eines computergesteuerten Nachrichtensystems, welches auch bei Ausfall eines Knotens weiterhin funktionsfähig sein soll. Zu diesem Zweck wurde die Advances Research Project Agency gegründet, welche erste Versuche mit paketvermittelnden Netzen durchführte. Sie entwickelte ein dezentrales Computernetzwerk, bei dem die Rechner an unterschiedlichen Standorten aufgestellt wurden. Dieses in erster Linie für militärische Zwecke entwickelte Netzwerk wurde 1965 auch für einige Universitäten der USA geöffnet und schließlich 1969 auch der Öffentlichkeit vorgestellt.

Drei Phasen der Internetgeschichte

Die Geschichte des Internets lässt sich grob in folgende drei Phasen einteilen:

  • Die erste Phase, die Frühphase, setzt ab Mitte der 1960er Jahre ein. Hier wurden die Grundlagen der heutigen Technik und Anwendungen des Internets gelegt.
  • In den 1970er Jahren folgte die zweite Phase der Internetgeschichte und ist durch das Wachstum und den internationalen Ausbau des Internets gekennzeichnet.
    Diese Phase wird alternativ auch als die wilde Phase des Internets bezeichnet, da hier das Internet noch eine Tauschökonomie für Software und Information darstellte und durch die Beteiligung und Selbstorganisation von Communitys und Hackern geprägt war.
  • Die kommerzielle Phase des Internets beginnt in den 1990er Jahren. Durch die Abschaltung des Arpanets, eines Computernetzwerkes der US Air Force, war das Internet auch für die Öffentlichkeit zugänglich.

1989-1990 Jahre: Das World Wide Web (WWW) formiert sich

  • Eine wichtige Persönlichkeit für die Entwicklung des Internets war der britische Informatiker Tim Berners-Lee. Er veröffentlichte 1989 erste Entwürfe der Auszeichnungssprache HTML (Hypertext Markup Language), auf der heute noch alle Webseiten aufbauen.
  • Zudem entwickelte er auch das Protokoll HTTP, welches das Navigieren über Links ermöglicht, sodass gezielte Verbindungen zu Informationen auf anderen Webseiten hergestellt werden können.Berners-Lee entwickelte außerdem die URL, den ersten Webbrowser und den ersten Webserver.
  • Diese Entwicklungen waren die Grundlage für das World Wide Web (WWW).
  • 1990 wurde das Internet zu einem massentauglichem Medium. In diesem Jahr beschloss die National Science Foundation das Internet nicht nur für Forschungszwecke, sondern auch für kommerzielle Zwecke nutzbar zu machen.

HTTP - Hyper Text Transfer Protocol

HTTP steht für Hypertext Transfer Protocol oder auch Hypertext-Übertragungsprotokoll. Es wird benutzt, um Webseiten aus dem World Wide Web in einen Webbrowser lesbar zu machen.

  • Protokoll auf Anwendungsschicht, basiert auf TCP/IP
  • Interaktion erfolgt lediglich in Form eines einfachen Frage/Antwort-Verfahrens (Client macht einen Request - Server gibt Response)
  • Protokoll ist zustandslos (Server (kann mit mehreren Clients agieren) ‘weiß’ nicht ob Client (Maschine oder ein Programm, das Anfragen stellt) schon einmal gefragt hat)

HTTP Methods

  • GET: URI + Server Anforderung
  • POST: schickt unbegrenzte Mengen an Daten zur weiteren Verarbeitung zum Server
  • HEAD: wie GET, aber nur um die Metadaten zurück zu bekommen
  • PUT: Hochladen auf Webserver, Resource ersetzen oder anlegen
  • PATCH: Ändert ein bestehendes Dokument ohne dieses wie bei PUT vollständig zu ersetzen
  • DELETE: löscht die angegebene Ressource auf dem Server
  • TRACE: Überprüft, ob und wie die Anfrage auf dem Weg zum Server verändert worden ist
  • OPTIONS: liefert eine Liste der vom Server unterstützten Methoden und Merkmale
  • CONNECT: wird von Proxyservern implementiert, um SSL-Tunnel zur Verfügung zu stellen

URI - URL - URN

Dienen zur weltweit eindeutigen Identifikation und Adressierung von Dokumenten im Web.

  • URI - Uniform Resource Identifier
  • URN - Uniform Resource Name
  • URL - Uniform Resource Locator

Verbreitetste Ausprägung der URIs sind URLs

URI URN URL

Anforderungen an URIs

  • Universalität (Jede Ressource im Internet soll unabhängig vom Informationsdienst ansprechbar sein)
  • Eindeutigkeit (Jede Ressource muss weltweit eindeutig identifizierbar sein)
  • Erweiterbarkeit
  • Fixierbarkeit (URI sollen nicht nur auf elektronischem Weg austauschbar, sondern auch manuell bearbeitbar oder druckbar sein)

Aufbau einer URI

  • URI besteht aus fünf Teilen. Nur “scheme” und “path” sind verpflichtend
  • Was kann drinnen stehen: Benutzer, Passwort, Hostname, Portnummer, Pfadname
URI Aufbau

Verwendete Quellen:

Was ist HTTP?

May 2023 by Martin Kroißenbrunner

Beschreibung

HTTP (Hypertext Transfer Protocol) ist ein Protokoll, das für die Kommunikation im World Wide Web verwendet wird. Es ermöglicht den Austausch von Informationen und Ressourcen zwischen einem Webserver und einem Webbrowser. HTTP basiert auf dem Client-Server-Modell, bei dem der Webbrowser (Client) eine Anfrage sendet und der Webserver darauf antwortet.

HTTP verwendet eine Textformatierung, bei der Anfragen und Antworten in Nachrichten eingebettet sind. Eine HTTP-Anfrage besteht aus einer Methode (wie GET, POST, PUT usw.), einer URL (Uniform Resource Locator) und optionalen Headern und Daten. Der Webserver verarbeitet die Anfrage und sendet eine HTTP-Antwort zurück, die den Statuscode, Headerinformationen und den Inhalt enthält.

HTTP ist ein wichtiger Bestandteil des Internets und ermöglicht das Abrufen von Webseiten, das Hochladen von Dateien, das Ausführen von API-Anfragen und vieles mehr. Es ist ein grundlegendes Protokoll, das von Webentwicklern, Browsern und anderen Anwendungen verwendet wird, um Informationen über das Netzwerk auszutauschen.


Beispiel einer grundlegenden Interaktion zwischen einem Client und einem Server über HTTP


Request

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Response

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1274

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

HTTP-Statuscodes und Beschreibungen

HTTP-Statuscodes sind dreistellige Zahlen, die vom Server als Antwort auf eine Anfrage des Clients zurückgegeben werden. Diese Codes geben Informationen über den Status der Anfrage und helfen bei der Fehlerbehebung und Problembehandlung von Kommunikationsproblemen zwischen Client und Server. Jeder Statuscode hat eine spezifische Bedeutung und ist in verschiedene Klassen eingeteilt, wie z.B. Information, Erfolg, Umleitung, Clientfehler und Serverfehler.

Beispiele:

  • 301 Moved Permanently: Die angeforderte Ressource wurde dauerhaft an eine neue URL verschoben. Clients sollten ihre Lesezeichen oder Links auf die neue Adresse aktualisieren.
  • 305 Use Proxy: Die angeforderte Ressource muss über den in der Location-Header angegebenen Proxy abgerufen werden. Clients sollten für zukünftige Anfragen den angegebenen Proxy verwenden.
  • 307 Temporary Redirect: Die angeforderte Ressource wurde vorübergehend an eine andere URL verschoben. Clients sollten für zukünftige Anfragen weiterhin die ursprüngliche URL verwenden.
  • 400 Bad Request: Der Server kann die Anfrage aufgrund fehlerhafter Syntax oder ungültiger Parameter, die vom Client gesendet wurden, nicht verarbeiten.
  • 404 Not Found: Der Server kann die angeforderte Ressource nicht finden. Sie wurde möglicherweise entfernt oder die URL ist falsch.
  • 408 Request Timeout: Der Server hat die Anfrage aufgrund der Inaktivität des Clients oder des Versäumnisses, eine vollständige Anfrage innerhalb des vom Server festgelegten Timeout-Zeitraums zu senden, abgebrochen.
  • 413 Request Entity Too Large: Der Server lehnt die Verarbeitung der Anfrage ab, da die Nutzlast (z.B. POST- oder PUT-Daten) die konfigurierten Grenzwerte des Servers überschreitet.
  • 417 Expectation Failed: Der Server kann die Anforderungen, die im Expect-Request-Header angegeben sind, nicht erfüllen.
  • 500 Internal Server Error: Es ist ein allgemeiner Serverfehler aufgetreten, der ihn daran hindert, die Anfrage zu erfüllen. Dieser Statuscode wird oft für nicht behandelte Ausnahmen oder unerwartete Fehler verwendet.
HTTP Comic

Quellen

  • https://www.w3.org/Protocols/HTTP/1.0/spec.html
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
  • https://www.restapitutorial.com/httpstatuscodes.html

Das OSI-Referenzmodell

May 18, 2023 by Gisela Faltis

Das OSI-Modell (Open System Inerconnection model) ist ein Referenzmodell für Netzwerkprotokolle, die als Schichten strukturiert sind. Das OSI-Modell findet in der Computer- und Netzwerktechnik Anwendung. Es wurde von der ISO (International Organization for Standardization) als Grundlage für die Bildung von offenen Kommunikationsstandards entworfen. Der Abstraktionsgrad der Funktionalität nimmt von Schicht 1 bis zur Schicht 7 zu. Mit diesem Modell wird die standardisierte Kommunikation zwischen Computersystemen ermöglicht, unabhängig von Software und Hardware. Das OSI-Modell besteht aus insgesamt 7 Schichten und jede Schicht erfüllt dabei eine bestimmte Aufgabe. Die Strukturierung in Schichten ermöglicht die universelle Kommunikation innerhalb eines Netzwerkes aber auch zwischen zwei verschiedenen Netzwerken.

Bild, stell OSI-Modell dar.

Geschichte

Bereits in den 70er Jahren begann die Entwicklung des OSI-Modells und wurde von der International Telecommunication Union (ITU) und der International Organization for Standardization (ISO) veröffentlicht, weswegen das OSI-Modell auch gern ISO/OSI-Modell genannt wird. Die Definition des ISO/OSI-Standards hatte zum Ziel, ein Referenzmodell zu schaffen, welches die Kommunikation diverser technischer Systeme über unterschiedlichste Medien und Technologien zu ermöglichen und Kompatibilitäten bereitstellt.


Bitübertragung | Physical Layer

Der Physical Layer oder auch Bit-Übertragungsschicht genannt, bildet die erste und unterste Schicht des Modells. Der Physical Layer sorgt für die Weiterleitung und Übertragung und definiert die elektrische, mechanische und funktionalen Schnittstellen zum Übertragungsmedium, also für die physischen Geräte und jene Komponenten, auf denen der Datentransfer abläuft.


Übersichtstabelle


Nr. OSI-Schicht Layer of OSI-Model Einordnung Protokollbeispiele Kopplungselemente
7 Anwendungsschicht Application Layer Anwendungsorientiert DHCP, DNS, FTP, HTTP, HTTPS, RTP, SMTP etc. Gateway, Content-Switch, Proxy, Layer-4-7-Switch
6 Darstellungsschicht Presentations Layer Anwendungsorientiert DHCP, DNS, FTP, HTTP, HTTPS, RTP, SMTP etc. Gateway, Content-Switch, Proxy, Layer-4-7-Switch
5 Sitzungsschicht Session Layer Anwendungsorientiert DHCP, DNS, FTP, HTTP, HTTPS, RTP, SMTP etc. Gateway, Content-Switch, Proxy, Layer-4-7-Switch
4 Transportschicht Transport Layer Transportorientiert TCP, UDP, SCTP, SPX Gateway, Content-Switch, Proxy, Layer-4-7-Switch
3 Vermittlungsschicht Network Layer Transportorientiert TCP, IPX, ICMP, IGMP, IPsec Router, Layer-3-Switch
2 Sicherrungsschicht Data Link Layer Transportorientiert EEE 802.3, Ethernet, IEEE 802.11 WLAN, MAC, Token Ring, ARCNET Bridge, Layer-2-Switsch, Wireless Access Point
1 Bitübertragungsschicht Physical Layer Transportorientiert 1000BASE-T, Token Ring, ARCNET (Netzwerkkabel), Repeater, Hub, Antennen

Eselsbrücken

  • „Please Do Not Throw Salami Pizza Away“
  • „All People Seem to Need Data Processing“
  • „Alle Priester saufen Tequila nach der Predigt“
  • „Alle deutschen Studenten trinken verschiedene Sorten Bier“

Verwendete Quellen

Was ist der Session Layer?

May 19, 2023 by Georg Maximilian Reiter

Der Session Layer (von englisch session = dt. „Sitzung“), die fünfte Ebene des OSI-Schichtenmodells, ist im Deutschen auch als Sitzungsschicht bzw. Kommunikationssteuerungschicht bekannt. Wenn zwei vernetzte Geräte miteinander kommunizieren wollen, muss dazu erst eine Sitzung eingerichtet werden, was auf der Ebene des Session Layers geschieht. Der Session Layer koordiniert die Kommunikation zwischen den Geräten. Die wesentlichen Funktionen des Session Layers sind Aufbau, Koordinierung und Beenden der Sitzung. Vereinfacht heruntergebrochen steuert der Session Layer, wann und wie viele Daten vernetzte Geräte senden können.

OSI-Schichtenmodell

Kommunikationssteuerung

Die Kommunikation zwischen den Geräten findet beidseitig, parallel oder richtungsabhängig statt, wobei der Session Layer die Dialogkontrolle (Dialog Control) übernimmt. Jede Sitzung ist einzigartig und eindeutig. Findet z. B. eine einseitige Kommunikation, werden durch den Session Layer Tokens vergeben, damit die Reihenfolge in der Kommunikation geregelt wird.

Die Tokens werden in 4 Kategorien unterteilt:

  • Datenmarken (Data Token): Sie regeln bei einer einseitigen Kommunikation wann welche Seite senden kann
  • Aktivitätsmarken (Activity Major Token): Sie unterteilen eine Verbindung in unterschiedliche Aktivitäten. Wenn eine Aktivität abgebrochen wird, kann sie später oder in einer anderen Sitzung wieder aufgenommen werden.
  • Synchronisationsmarken (Synchronize Minor Token): Sie sind von 0 bis 999.999 durchnummeriert und werden für die Unterteilung der Kommunikation verwendet.
  • Beendigungsmarken (Release Token): Sie legen das Ende einer Sitzung fest

Sychronisation

Die Synchronisation des Datenaustauschs ist neben der Organisation und Steuerung der Kommunikation eine zweite wichtige Aufgabe, die vom Session Layer übernommen wird. Dies ist vor allem dann wichtig, wenn die Datenübertragung auf der vierten oder den unter der vierten Ebene liegenden Schichten ungewollt und unerwartet abgebrochen wurde.

Vom Session Layer werden für diese Fälle Synchronisationspunkte erstellt. Kommt es zu einem Kommunikationsabbruch, dann die Kommunikation wieder ab dem Synchronisationspunkt aufgenommen werden und muss nicht von vorne beginnen. Sollen z. B. 10 Megabyte an Daten übertragen werden und es kommen nur 5 Megabyte an, sorgt die Sitzungsschicht dafür, dass nur die fehlenden 5 MB erneut übertragen werden müssen. So wird die Kommunikation im Netzwerk effizienter, da keine zusätzlichen Ressourcen für das erneute Übertragen der gesamten Datei aufgewendet werden müssen. Das ist vor allem bei der Kommunikation über langsame und instabile Verbindung oder bei besonders großen Daten von großem Vorteil.

Die von der Sitzungsschicht vergebenen Synchronisationspunkte können in 2 große Kategorien unterteilt werden

  • Major-Synchronisationspunkte: Sie unterteilen die Daten, die ausgetauscht werden sollen, in einzelne Einheiten. Sie müssen ausdrücklich bestätigt werden.
  • Minor-Synchronisationspunkte: Sie sorgen innerhalb der Einheiten für eine logische und praktische Struktur. Die Bestätigung ist optional.

Protokolle, die die Sitzungsschicht nutzen

Zahlreiche Protokolle nutzen die Sitzungsschicht, deren Protokolle und Dienste den höherliegenden Ebenen über Programmierschnittstellen zur Verfügung gestellt werden.

  • ADSP
  • ASP
  • FTP
  • H.245
  • HTTP
  • ISO-SP
  • iSNS
  • L2F
  • L2TP
  • NetBIOS
  • NNTP
  • PAP
  • PPTP
  • RPC
  • RTCP
  • SCP
  • SDP
  • SMPP
  • SMTP
  • SOCKS
  • Telnet
  • TFTP
  • ZIP

Verwendete Quellen

Was ist der Application Layer?

May 19, 2023 by Melanie Frauendorfer

Die siebte Schicht des OSI-Modells ist der Application Layer. Im Deutschen nennt man diesen Layer auch Anwendungsschicht. Diese Ebene interagiert direkt mit den Daten der Nutzer und ist für Protokolle und Datenmanipulation verantwortlich.

Bild, das die Funktion der Anwendungsschicht zeigt.

Funktionen der Anwendungsschicht

Wenn Daten, wie zum Beispiel eine E-Mail, von der Client-Anwendung empfangen werden, ist es Aufgabe der Anwendungsschicht, diese dem Nutzer entsprechend anzuzeigen und ihm die Interaktion mit den Daten zu ermöglichen. Die Softwareanwendung an sich gehört jedoch nicht in die Anwendungsschicht. Der Application Layer bietet nur unterschiedliche Funktionen an.

  • Identifikation: Die OSI-Anwendungsschicht ermöglicht die eindeutige Identifizierung der zu erreichenden Seite.
  • Authentifizierung: Die Anwendungsschicht bestimmt den Absender und Empfänger von Nachrichten und sichert deren Authentizität.
  • Analyse: Sie prüft die Voraussetzungen für die Kommunikation zwischen Systemen, wie z.B. eine aktive Netzwerkverbindung.
  • Sicherheit: Der Application Layer stellt sicher, dass die Protokolle und Prozeduren in Bezug auf Privatsphäre, Datenintegrität und Fehlerbehebung eingehalten und abgestimmt werden.
  • Überwachung: Die Anwendungsebene überwacht die Einhaltung der Datensyntaxregeln und des Netzwerkprotokolls während der Interaktion.

Protokolle, welche die Anwendungsschicht benutzen

  • HTTP (Hypertext Transfer Protocol)
  • HTTPS (Hypertext Transfer Protocol)
  • Telnet (Telecommunication Network)
  • SMTP (Simple Mail Transfer Protocol)
  • DNS (Domain Name System)
  • ...

Verwendete Quellen

Was sind CSS Processors?

May 20, 2023 by Andreas Atzmüller

CSS Processors sind Tools oder Softwarebibliotheken, die entwickelt wurden, um die Erstellung von CSS (Cascading Style Sheets) zu erleichtern. Sie erweitern die Funktionalität von CSS und bieten zusätzliche Funktionen, die die Effizienz und Wartbarkeit des CSS-Codes verbessern. Ein CSS Processor nimmt CSS-Code als Eingabe und führt verschiedene Verarbeitungsschritte durch, um den endgültigen CSS-Code zu generieren. Dieser Prozess wird oft als "Kompilieren" bezeichnet, da der CSS Processor den Code in eine optimierte Version umwandelt, die vom Webbrowser interpretiert werden kann.


Welche CSS Processors gibt es?

Sass (Syntactically Awesome Style Sheets)

Sass/SCSS ist einer der bekanntesten CSS-Präprozessoren. Er bietet erweiterte Funktionen wie Variablen, Nesting, Mixins und Importe. Sass hat eine klarere und kürzere Syntax im Vergleich zu reinem CSS.


Less (Leaner Style Sheets)

Less ist ein CSS-Präprozessor, der ebenfalls Variablen, Mixins und Funktionen unterstützt. Er verwendet eine ähnliche Syntax wie CSS, ergänzt sie jedoch um erweiterte Funktionen.

Stylus

Stylus ist ein CSS-Präprozessor mit einer minimalistischen Syntax. Er ermöglicht das Verwenden von Variablen, Funktionen und Mixins und bietet eine sehr flexible und erweiterbare Schreibweise.

PostCSS

PostCSS ist ein CSS-Transformer, der auf JavaScript-Plugins basiert. Er ermöglicht Entwicklern, verschiedene Transformationen auf CSS-Code anzuwenden, um beispielsweise den Code zu komprimieren.


Was sind die häufigsten Funktionen und Vorteile von CSS Processors?

  1. Variablen: CSS Processors ermöglichen die Verwendung von Variablen, um Werte wie Farben, Schriftarten oder Abmessungen zu definieren. Dies erleichtert die Wartung und Anpassung des Designs, da diese Werte an einer zentralen Stelle definiert werden können. Variablen
  2. Nesting: CSS-Regeln können in verschachtelter Form geschrieben werden, was die Lesbarkeit und Strukturierung des Codes verbessert. Anstatt den gesamten Selektor zu wiederholen, können verschachtelte Regeln verwendet werden, um den Code kompakter zu gestalten. Nesting
  3. Mixins: Mixins sind wiederverwendbare Code-Snippets, die in verschiedenen CSS-Regeln verwendet werden können. Sie ermöglichen die Definition von Stilen oder Eigenschaften, die in mehreren Elementen verwendet werden sollen, ohne den Code duplizieren zu müssen. Mixin01 Mixin02 Mixin03
  4. Schleifen: Schleifen in CSS-Processors ermöglichen das Wiederholen von CSS-Regeln basierend auf einer vordefinierten Bedingung oder Anzahl. Sie erleichtern die Erzeugung von wiederkehrenden CSS-Code-Blöcken und reduzieren die Duplizierung von Code. Schleifen
  5. Bedingungen: Bedingungen in CSS-Processors bieten die Möglichkeit, Bedingungen zu verwenden, um CSS-Regeln zu überprüfen und basierend auf dem Ergebnis anzuwenden. Dadurch können Stylesheets dynamisch an bestimmte Kriterien oder Zustände angepasst werden. Bedingung
  6. Modulare Entwicklung: CSS Processors unterstützen die Aufteilung des CSS-Codes in mehrere Dateien oder Module. Dies erleichtert die Organisation und Wartung des Codes, insbesondere in großen Projekten.
  7. Weitere Funktionen und mathematische Operationen...

Verwendete Quellen

URI - URL - URN

May 2023 by Julia Hintersteiner

Wofür stehen die Akronyme?

  1. URI - Uniform Resource Identifier

    Bestandteile einer URI

  2. URL - Uniform Resource Locator

  3. URN - Uniform Resource Name


Was bedeuten sie und worin liegt der Unterschied?

Generell gilt: alles ist eine URI, URL und URN sind spezielle Formen eines URI.

URL

Warum ist das wichtig?

Um die eindeutige Adressierung und Identifikation von Inhalten im Web zu ermöglichen.


Anforderungen an URIs

  • Universalität

    • Jede Ressource im Internet soll unabhängig vom Informationsdienst ansprechbar sein.

  • Eindeutigkeit

    • Jede Ressource muss weltweit eindeutig identifizierbar sein

  • Erweiterbarkeit

  • Fixierbarkeit

    • URI sollen nicht nur auf elektronischem Weg austauschbar, sondern auch manuell bearbeitbar oder druckbar sein


Verwendete Quellen

Julia Hintersteiner

Was ist das Frontend?

May 23, 2023 by Christina Dittmann

Frontend ist das "Sichtbare" einer Website, einer Software oder einer App, mit dem User:innen interagieren. Es bezeichnet somit die gesamte Benutzeroberfläche (client-side). Also beinhaltet dies auch sämtliche Elemente wie buttons, Bilder, Videos, Effekte oder Texte. Das Frontend beschäftigt sich aber auch mit der intuitiven Nutzung einer Website und Barrierefreiheit. Zudem ist es auch wichtig, wie sich die Website verhält, denn verschiedene Bildschirmgrößen oder Browser sorgen jeweils für eine andere Darstellung des Frontends (Responsive Design). Deshalb ist das Verhalten des Frontends sehr zentral, denn das steht buchstäblich im Vordergrund.

Bild, das das Frontend der Website chromeunboxed darstellt. Rechts neben der Startseite ist der Untersuchungsmodus, in dem man den dahinterliegenden Code sieht, geöffnet.

Wie implementiert man das Frontend?

  • HTML
  • CSS
  • JavaScript

Libraries und Frameworks

  • React
  • Vue
  • jQuery
  • Angular

Barrierefreiheit

Die Barrierefreiheit, die beim Frontend enorm wichtig ist, beinhaltet beispielsweise Themen wie Bildbeschreibungen, Linktexte, keyboard-only navigation, und Farbkontraste der Elemente. Der Grad der Barrierefreiheit einer Website lässt sich über Evaluierungstools leicht ermitteln.


Web Design und Implementation

Es lässt sich schon erahnen, dass Frontend auch viel mit Design und der Umsetzung von Layoutvorstellungen zu tun hat. Während Web-Designer:innen das Layout der Seite gestalten (anhand von Sketch, Adobe XD, oder Photoshop), setzen Frontend-Entwickler:innen das Layout mit den oben genannten Tools um. Oft sind aber auch die Grenzen zwischen Web-Designer:innen und Frontend-Entwickler:innen verschwommen.

Bild, das ein Venn-Diagramm darstellt. Im linken Kreis steht Web Design und im rechten Frontend Development. An der Schnittstelle der beiden Bereichte steht Frontend.

Verwendete Quellen

Was ist ein Backend?

May 20, 2023 by Julia Zebedin

Das Backend ist ein wesentlicher Bestandteil der Webentwicklung und spielt eine wichtige Rolle bei der Verarbeitung und Speicherung von Daten sowie bei der Kommunikation mit dem Frontend. Das Backend bezeichnet in der Regel den funktionalen Teil eines digitalen Produkts wie beispielsweise Webseiten oder Apps und bezieht sich meist auf Client Server. Das Frontend bildet die für die Benutzer:innen sichtbare Benutzer:innenoberfläche, wohingegen das Backend für die Benutzer:innen nicht sichtbar ist.

bildlichee Darstellung von Frontend und Backend

Definition und Aufgaben des Backends

Das Backend umfasst die serverseitige Komponente einer Webanwendung. Es handelt sich um den Teil, der für die Verarbeitung von Daten, die Datenbankkommunikation, die Geschäftslogik und andere Backend-Funktionen verantwortlich ist.
Zu den Aufgaben des Backends gehören unter anderem:

  • Datenverarbeitung und -speicherung
  • Verwaltung und Pflege von Datenbanken
  • Nutzer:innenauthentifizierung und -autorisierung
  • Verwaltung von Benutzer:innendaten
  • Installation von Plugins sowie die Ausführung der nötigen Updates
  • Durchführung von Berechnungen und Algorithmen
  • Einbettung von Inhalten und Medien
  • Integration mit externen Systemen und APIs
  • Fehlerbehandlung und Ausnahmeverwaltung
  • Implementierung der notwendigen Sicherheitsfeatures

Funktionsweise des Backends

Das Backend empfängt Anfragen vom Frontend, verarbeitet diese und sendet die entsprechenden Daten oder Rückmeldungen zurück. Es arbeitet im Hintergrund und ist für die Logik und die Datenverwaltung verantwortlich.
Der Ablauf erfolgt in der Regel wie folgt:

  1. Die Benutzer:innen interagieren mit der Benutzer:innenoberfläche des Frontends.
  2. Das Frontend sendet eine Anfrage an das Backend, z. B. um Daten zu laden oder eine Aktion auszuführen.
  3. Das Backend verarbeitet die Anfrage, greift auf die erforderlichen Datenbanken oder externen Systeme zu, führt die erforderlichen Operationen aus und generiert eine Antwort.
  4. Die Antwort wird vom Backend an das Frontend zurückgesendet, das sie dann entsprechend darstellt.

Programmier-, Skript- und Datenbanksprachen im Backend

Für die Entwicklung des Backends stehen eine Vielzahl von Programmier- und Skriptsprachen zur Verfügung, die je nach den Anforderungen und Präferenzen des:der Entwicklers:in eingesetzt werden können.
Die beliebtesten Programmiersprachen im Backend sind:

Icons der gängisten Programmiersprachen im Backend
  • Java: Eine weit verbreitete Programmiersprache, die für die Entwicklung von robusten und skalierbaren Backends verwendet wird.
  • Python: Eine einfach zu erlernende Sprache mit einer großen Entwicklergemeinschaft und vielen Bibliotheken, die für verschiedene Backend-Aufgaben nützlich sind.
  • PHP: Eine Skriptsprache, die speziell für die Webentwicklung entwickelt wurde und häufig in Kombination mit dem Content-Management-System (CMS) WordPress verwendet wird.
  • Ruby: Eine elegante und benutzer:innenfreundliche Sprache, die im Ruby on Rails-Framework für die Backend-Entwicklung eingesetzt wird.
  • JavaScript: Obwohl JavaScript in erster Linie als Sprache für das Frontend bekannt ist, wird sie auch für serverseitige Entwicklung mit Frameworks wie Node.js eingesetzt.
  • C#: Eine Sprache, die eng mit dem Microsoft-Ökosystem verbunden ist und für die Entwicklung von Backends auf der .NET-Plattform verwendet wird.
  • SQL: Neben der Programmiersprache wird für das Backend auch eine Datenbanksprache benötigt, um Abfragen abrufen zu können, wie zum Beispiel MySQL, oder PostgreSQL.

Backend-Frameworks

Frameworks bieten Entwickler:innen eine Grundlage, wie eine Vorlage, um schnell Webseiten und Webanwendungen zu erstellen. Sowohl Backend- als auch Frontend-Entwickler:innen nutzen Frameworks, um ihre Arbeitsprozesse zu beschleunigen.
Einige der beliebtesten Backend-Entwicklungsframeworks sind:

  • Django: Ein Open-Source-Framework für vielfältige Anwendungen mit hoher Geschwindigkeit und einer flacheren Lernkurve als andere Frameworks.
  • Spring Boot: Ein leistungsstarkes Framework für Java-Anwendungen mit anpassbaren App-Eigenschaften, Unterstützung von Jetty und Undertow sowie verbessertem Abhängigkeitsmanagement.
  • Laravel: Ein Backend-Framework mit modularem Paketierungssystem, integriertem Abhängigkeitsmanager und besonderer Stärke in der Anbindung an relationale Datenbanken, Live-Kommentare, Caching und API-Vereinfachung.
  • Rails: Ein serverseitiges App-Framework für kosteneffiziente und konsistente Datenbank- und Webseitenstrukturierung, bekannt für seine Benutzer:innenfreundlichkeit und Skalierbarkeit.
  • ExpressJS: Ein flexibles Framework für die Entwicklung von APIs und Anwendungen, das sowohl als Backend- als auch als Frontend-Lösung verwendet werden kann und auf Node.js basiert.
  • ASP.NET: Ein modulares Framework für minimale Programmierung, verbesserte Wartung und plattformübergreifende Unterstützung, das auf C# basiert und eine gute Leistung bietet.
  • CakePHP: Ein PHP-Framework, das sich gut für medienorientierte Webseiten eignet und auf Ruby on Rails basiert. Es konzentriert sich auf Datenmapping, aktive Aufzeichnung und objektrelationales Mapping.
  • Phoenix: Ein Backend-Framework mit Fokus auf hohe Leistung, Skalierbarkeit von Anfang an und verbesserte Produktivität durch erhöhte Fehlertoleranz und schnelle Entwicklung.

Verwendete Quellen

Was sind CSS-Frameworks?

May 23, 2023 by Johanna Ofenauer

What is a CSS framework anyway?

Ein CSS Framework ist eine Bibliothek an Stylesheets, die auf eine Website angewendet werden kann.


Vorteile von CSS-Frameworks

  1. Website stimmt mit Standards überein
  2. Andere können den Code leichter lesen
  3. Weniger Fehler im Code
  4. Einheitliches Aussehen aller HTML-Elemente
  5. Tools und Methoden für User-Interface-Komponenten, z.B. Dropdown-Schaltflächen, mehrspaltige Layouts, Icon-Sets, Grid-Strukturen für Responsive Web Design

Beispiele für CSS-Frameworks

Bootstrap

Bootstrap, Bootstrap everywhere!
  • Am häufigsten verwendetes CSS-Framework im Web

Foundation

  • Erstes Framework mit responsive mobile-first Design
  • Verwendete ein auf Flexbox basierendes Grid-Layout lange vor Bootstrap
  • Die User-Interface-Elemente von Foundation und Bootstrap sind sich ähnlich

Material Components for the Web (MCW)

  • Material Design Implementierung
  • Wird von den meisten Google- und Android-Produkten verwendet
  • Schwierig zu personalisieren

Materialize

  • Material Design Implementierung
  • Open-Source-Projekt → nicht von Google unterstützt/bereitgestellt
  • Ähnliche Struktur wie Bootstrap → leicht zu lernen

Tailwind CSS

  • Sehr anpassungsfähig
  • Hat nicht viele vorgefertigte Komponenten
  • Die Komponenten werden durch die selbständige Kombination von CSS-Klassen erstellt.

Einbindung eines CSS-Frameworks

Das CSS-Framework wird über das link-Element wie jedes andere Stylesheet mit dem HTML verbunden. Das Framework muss vor dem eigenen Stylesheet eingebunden werden, damit die eigenen Regeln angewendet werden können.
Indem man die verkleinerte Version des Frameworks verwendet, kann es schneller geladen werden. Diese Version erkennt man an der Endung .min.css.
Der Zugriff auf ein CSS-Framework erfolgt am einfachsten über ein CDN. Die URL für die Datei auf dem CDN-Server wird im href-Attribut des link-Elements angegeben.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Demo</title>

<link href="" rel="stylesheet">

<link href="ownStylesheet.css" rel="stylesheet">

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

Verwendete Quellen


Content-Management-System (CMS)

May 23, 2023 by Theresa Csuk


Ein Content-Management-Systeme (CMS) ist eine Software, mit der Benutzer:innen digitale Inhalte erstellen, bearbeiten, gemeinsam bearbeiten, veröffentlichen und speichern können.[1] Anwender:innen können mit einem CMS ohne Programmierkenntnisse eine Website oder Homepage erstellen und verwalten. Unternehmen und Privatpersonen verwenden CMS, um beispielsweise regelmäßig aktuelle Nachrichten oder Blog-Artikel online zu veröffentlichen, ohne einen Programmierer/eine Programmiererin engagieren zu müssen.[3]


CMS - Der Baukasten für Websites




Ein CMS ist eine Art "Website-Betriebssystem", es ist in der Regel eine interaktive Webanwendung (Web-App). User:innen melden sich auf einer speziellen Login-Seite an, um auf den Backend-Bereich zuzugreifen. Das Backend ermöglicht die Konfiguration der Website und die Verwaltung von Inhalten. Im Gegensatz dazu ist das Frontend der öffentlich zugängliche Teil der Website, den die Nutzer:innen der Webseite sehen können. Mit einem CMS entfällt die Notwendigkeit, jede Änderung einer Webseite mit einem HTML-Editor vorzunehmen und sie dann auf den Server hochzuladen. Stattdessen können Änderungen direkt im Backend des CMS vorgenommen werden, indem man einfach auf "Bearbeiten" klickt und den benutzerfreundlichen, grafischen Editor verwendet.[4]


Bekannte Content-Management-Systeme

Die verschiedenen CMS haben Vor- und Nachteile, über die man sich vor einer Implementierung informieren sollte. Des Weiteren können Nutzer:innen zwischen kostenlosen und kostenpflichtigen Content-Management-Systemen wählen.[2]

Zu den beliebtesten Content-Management-Systemen gehören:

  • WordPress
  • Drupal
  • Wix
  • Shopify
  • Magento
  • Joomla!

Quelle:[3]


Vor- und Nachteile von Content Management-Systemen

Vorteile

  • Leichte Bedienbarkeit
  • Einfache Suche nach Informationen
  • Einfaches Verwalten von Inhalten
  • Von überall aus zugänglich
  • Erlaubt mehrere Benutzer:innen
  • Sofortige Inhaltsaktualisierung
  • Einfach zu skalieren
  • Einfach zu aktualisieren

Nachteile

  • Einschränkungen bei der Individualisierung
  • Abhängigkeit von Updates
  • Potenzielle Performance-Probleme
  • (Attraktives Ziel für Hacker:innen)


Beispiel: Shopify





Quellen:

  • [1] https://wirtschaftslexikon.gabler.de/definition/content-management-system-cms-31303
  • [2] https://www.computerweekly.com/de/definition/Content-Management-System-CMS
  • [3] https://www.sem-deutschland.de/online-marketing-glossar/cms-content-management-system/#Was_ist_ein_CMS_Was_ist_ein_Content_Management_System
  • [4] https://www.netzsieger.de/k/content-management-systeme

JavaScript

May 2023 by Thomas Zangl

JavaScript ist eine 1995 erfundene turing-vollständige Skriptsprache und wird primär im Bereich der Webentwicklung eingesetzt. Sie ist neben Python eine der beliebtesten und weitesten verbreiteten Programmiersprachen. Mit der Programmiersprache Java hat JavaScript trotz des ähnlichen Namens quasi nichts gemein - man erhoffte sich damals einen Marketingvorteil, da Java in der damaligen Zeit äußerst populär war. Zuvor trug JavaScript den Namen Mocha, dann LiveScript, bevor sie schlussendlich JavaScript genannt wurde. Generell kann JavaScript der Gruppe der objektorientierten Programmiersprachen zugeordnet werden.

Im Allgemeinen ist JavaScript eine sehr liberale Programmiersprache, die oftmals kleine Ungenauigkeiten verzeiht, die es BeginnerInnen erleichtern soll, in der Webentwicklung Fuß zu fassen - ganz so leicht ist es allerdings auch nicht. Von JavaScript gibt es ständig neue Updates, weswegen die diversen Brwoser ebenso stets am neuesten Stand der Technik sein müssen, um weiterhin mit JavaScript kompatibel zu sein. Wichtig ist hierbei zu erwähnen, dass die Updates so konzipiert sind, dass die älteren bereits existierenden Programme dennoch weiterhin bestehen und funktionstüchtig bleiben.

Generell beinhaltet JavaScript verschiedene Funktionen, wie die Möglichkeit, dynamische Webseiten zu erstellen, Webseiteninhalte zu manipulieren oder clientseitige Validierungen durchzuführen. Weiters kann es verwendet werden, um interaktive Benutzeroberflächen wie Dropdown-Menüs, Pop-up-Boxen und andere grafische Benutzeroberflächenelemente zu erstellen. Der bestehende HTML Code von Webseiten kann somit mittels JavaScript dynamischer konzipiert und erweitert werden. JavaScript wird von Webbrowsern ausgeführt und kann direkt in den HTML-Code eingebettet oder in externen Files geschrieben und anschließend miteingebunden werden. Darüberhinaus wird JavaScript häufig in Verbindung mit anderen Webentwicklungsframeworks wie AngularJS oder jQuery verwendet, um den Entwicklungsprozess zu vereinfachen und zu optimieren. Neben seinem Einsatz in der Webentwicklung hat JavaScript auch in anderen Bereichen wie der Serverseitenprogrammierung, der Entwicklung von mobilen Apps und der Spieleentwicklung an Bedeutung gewonnen. Mit dem Aufstieg von Technologien wie Node.js und React Native ist JavaScript zu einer vielseitigen Sprache geworden, die auf mehreren Plattformen eingesetzt werden kann. Insgesamt ist JavaScript somit eine leistungsstarke und vielseitige Programmiersprache, die einen erheblichen Einfluss auf die Webentwicklungsbranche hat. Ihre Fähigkeit, interaktive und dynamische Webseiten zu erstellen, sowie ihre Vielseitigkeit auf mehreren Plattformen haben sie zu einem unverzichtbaren Werkzeug für EntwicklerInnen auf der ganzen Welt gemacht.


Die Aufgaben von JavaScript:

  • dynamische Manipulation von Webseiten über Document Object Model (DOM) - CSS/HTML
  • Anzeige von Dialogfenstern
  • Vorschlagen von Suchbegriffen während Eingabe
  • Anzeige von Dialogfenstern
  • Senden und Empfangen von Daten, ohne dass der Browser die Seite neu laden muss (Ajax)
  • Validierung von daten in Formulareingaben
  • Schreib- und Lesezugriff auf Cookies & Web Storage innerhalb vom Browser

JavaScript ermöglicht es einem somit dynamische Inhalte in Webseiten einzubauen, was mittels CSS und HTML nicht möglich ist. So werden etwa Warenkörbe von Onlineanbietern mittels JavaScript programmiert.


Datentypen in JavaScript:

  • Primitive Datentypen: strings, number, boolean, symbol, undefined
  • Nicht primitive Datentypen: function, object

Variablen werden in JavaScript mittels let beziehungsweise var ausgewiesen. Beide Variablen sind nicht allgemeingültig sondern bloß innerhalb eines Scopes. Dabei ist let die eingrenzendere Option, die es sich auch empfiehlt zu verwenden. Konstanten werden hier mittels const deklariert.


Diverse vordefinierte Objekttypen:

  • Object
  • Function
  • Array
  • String
  • Boolean
  • Number
  • Date - für Datumsformate
  • RegExp - für reguläre Ausdrücke
  • Error
  • Math - für Konstanten und Methoden für mathematische Operationen
  • JSON
  • Reflect - Methoden für Ermittlung und Änderung von Metadaten eines Objekts

Document Object Model:

Sobald eine Webseite geladen wird kreiert der Browser ein sogenanntes Document Object Model (DOM). Damit kann nun mittels JavaScript eine dynamische HTML-Seite generiert werden.

HTML DOM

Mit Hilfe von Frameworks und Bibliotheken auf die in JavaScript zugegriffen werden kann, wird die Entwicklung von Webseiten maßgeblich erleichtert. Dabei können ganz simpel bereits bestehende Funktionen und Features in den eigenen Code implementiert werden.


Beispiele von JavaScript Bibliotheken und Frameworks:

  • jQuery
  • jQuery UI
  • Zepto
  • CreateJS
  • React
  • AngularJS
  • Angular
  • Ember.js

Verwendete Quellen: