Verstehen Sie die Webentwicklung in weniger als einer Stunde [Teil 1]

Dieser Artikel erklärt die Webentwicklung, indem er ihren Anfang und ihre Entwicklung untersucht. Es ist keine Chronik über die Entwicklung des Internets, sondern die Geschichte der Bedürfnisse, die zur Entwicklung des Internets geführt haben, um diese Technologie besser zu verstehen.
Angefangen hat alles mit Informationen. Menschen mussten schon immer Wege finden, um Informationen auszutauschen. Wie Sie wissen, wurden Informationen vor dem Internet über Briefe, Zeitungen, Radio und Fernsehen ausgetauscht.
Diese Kommunikationsmittel haben viele Nachteile: Dies hat es dem Internet ermöglicht, sich durchzusetzen.

Der Artikel wird in zwei Teilen veröffentlicht :

  1. Clientseite: Seitenarchitektur und Stile
  2. Serverseitig: Formulare und Datenbanken

Beginnen wir damit, was auf der Clientseite passiert.
 

Teil I

Clientseite: Seitenarchitektur und Stile 

 

1. Was ist das Internet?

Stellen Sie sich vor, Sie könnten Informationen veröffentlichen, die für alle zugänglich und für jeden lesbar sind, der sich für diese Informationen interessiert? Genau das ermöglicht das Web. Die Informationen werden auf einem Webserver gespeichert, und Personen können diese Informationen mithilfe von Clients (Webbrowsern) lesen. Dies wird als „Client-Server-Architektur“ bezeichnet. 
Warum HTTP?
Sie haben diese vier Buchstaben wahrscheinlich schon in der URL-Leiste Ihres Browsers gesehen. Sie meinen Hypertext Transfer Protocol. Wörtlich: „Hypertext-Übertragungsprotokoll“. HTTP ist also ein Client-Server-Kommunikationsprotokoll, das speziell für das Web verwendet wird.
Anfangs wurden die Informationen nur im Textformat erfasst – daher der Name Hypertext Transfer Protocol blieben, obwohl nun verschiedene Informationsformate (Text, Medien, Datei usw.) über dieses Protokoll ausgetauscht werden.
HTTPS, Hyper-Text-Übertragungsprotokoll gesichert, ist die sichere Version von HTTP.
 

2. Wie werden Informationen gespeichert, abgerufen und gesichert?

HTML
Die HTML-Datei ist die einfachste und dauerhafteste Art, Informationen im Web zu speichern. Nehmen wir zum besseren Verständnis das Beispiel eines Unternehmens, das seine Preise in Form einer Produktliste (mit Preis und Gültigkeitsdatum) veröffentlicht, damit seine Lieferanten sie herunterladen und/oder einsehen können. Diese Liste wird in einer HTML-Datei gespeichert, auf einem Server platziert und kann mit einem Webbrowser angezeigt werden. Der Browser fordert diese Datei vom Server an (Request), der Server stellt sie bereit und schließt die Verbindung.
HTML ist die Standardauszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Konkret handelt es sich um eine einfache Textdatei mit Beacons (Tags), die dem Browser helfen zu verstehen, wie die Informationen angezeigt werden sollen.
 

 

 
CSS
CSS (Cascading Style Sheets) ist eine Stilsprache, die verwendet wird, um die Präsentation eines in einer Auszeichnungssprache geschriebenen Dokuments zu beschreiben. Mit HTML können Sie ein einfaches Layout erstellen, aber es ist besser, CSS zu verwenden, um komplexere und ausgefeiltere Stile anzuwenden. 
Eine Webanwendung enthält viele Seiten, dynamisch oder statisch. Wenn wir HTML-Tags verwenden, um Informationen zu stylen, müssen wir sie auf allen Seiten wiederholen. Stellen Sie sich vor, wir möchten die Hintergrundfarbe ändern: Wir müssen dann den HTML-Code jeder Seite der Website bearbeiten.
Stattdessen können wir CSS verwenden, um unsere Stildefinitionen an einem Ort zu speichern und auf jeder HTML-Seite auf sie zu verweisen. Durch Bearbeiten der CSS-Datei ändern wir die Hintergrundfarbe auf allen Seiten, die auf dieses Stylesheet verweisen.
Natürlich können Sie mit CSS viel mehr tun, als nur eine Hintergrundfarbe festzulegen: Es ermöglicht Ihnen, die Farbe aller Arten von Elementen, Schriftarten, Layouts ... und mehr zu ändern!
Wir haben unserem vorherigen Beispiel CSS-Stile hinzugefügt. Nehmen wir an, wir verwenden Tabellen auf verschiedenen Seiten, aber alle verwenden dieselben CSS-Stile. Wir können daher alle diese Stildefinitionen in eine separate Datei verschieben.
CSS-Stile werden immer oben im HTML-Dokument zwischen den Tags aufgerufen <ganzer>.
 

 

 

 
Nachfolgend finden Sie ein Beispiel für eine Liste von Produkten auf der Website fnac.com.
CSS ermöglicht es, das grundlegende HTML vollständig umzuwandeln und komplexe Layouts zu erstellen: Hier enthält die Produkttabelle ein zentriertes Bild; der Titel und andere Informationen des Comics haben unterschiedliche Stile, sodass sie hierarchisiert werden können; Preise sind rot eingefärbt usw.
 

 

JavaScript

JavaScript ist neben HTML und CSS die dritte Säule des Webs. Es wird verwendet, um Webseiten interaktiv zu gestalten. Um JavaScript (JS) zu verstehen, müssen Sie zunächst wissen, was das DOM ist.
Le Dokumentobjektmodell (DOM) ist eine standardisierte Programmierschnittstelle, die das HTML-Dokument in eine Baumstruktur umwandelt. Die Knoten jedes Dokuments sind in diesem Baum organisiert – genannt „DOM-Baum“ (DOM-Baum) — dessen höchster Knoten aufgerufen wird Dokumentobjekt.
 

Auszug aus dem DOM-Baum (Quelle: Wikimedia Commons)

 
Wenn eine HTML-Seite im Browser gerendert wird, lädt der Browser den HTML-Code in den lokalen Speicher herunter und erstellt einen DOM-Baum, um die Seite auf dem Bildschirm anzuzeigen.
 Mit JS können wir den DOM-Baum auf verschiedene Arten manipulieren:

  • Ändern Sie den DOM-Baum, indem Sie alle HTML-Elemente und Attribute der Seite hinzufügen, ändern und löschen;
  • alle CSS-Stile auf einer Seite ändern;
  • auf alle bestehenden Ereignisse auf der Seite reagieren;
  • Erstellen Sie neue Ereignisse auf der Seite (und reagieren Sie auf all diese neuen Ereignisse).

Fahren wir mit unserem Preislistenbeispiel fort und fügen eine weitere Spalte hinzu — Sonderpreis — dessen Inhalt standardmäßig ausgeblendet ist. Wir zeigen es, nachdem der Benutzer auf eine Schaltfläche geklickt hat. Technisch gesehen verwenden wir ein Klickereignis (Klick-Ereignis) befestigt an einem Ankerelement (Ankertag) und ändern Sie den bestehenden Text des Web-Elements. Mit anderen Worten, wir werden das DOM manipulieren. Dazu müssen wir die vom Browser akzeptierte Skriptsprache verwenden, die … immer JavaScript ist.
Zur Information: Das JavaScript wird in der Regel am Ende der HTML-Datei platziert, kurz vor dem Schließen des Tags </Körper>.
 

 

 

 

 
Auf der Website fnac.com, die Schaltfläche „In den Warenkorb“ erscheint, wenn Sie mit der Maus über das Produkt fahren.
Das geht mit CSS.
Wenn auf die Schaltfläche geklickt wird, erscheint ein Pop-in (ohne die Seite neu zu laden):
 

 
Und das dank JavaScript: Auf dem Button ist ein „Klick“-Event platziert und bei Ausführung dieses Events wird eine Funktion aufgerufen, die für das Öffnen des Pop-ins zuständig ist.
Der Add-to-Cart-Mechanismus wird serverseitig verwaltet.
 
# Übersetzung des Artikels Verstehen Sie die Webentwicklung in weniger als 1 StundeDurch Scheich Ismail
 
 
 
 

Audrey Guénée, Dev-Front @ux-Republic