Moderne Web­ent­wick­lung: Grund­la­gen und Tools

Web­ent­wick­le­rin­nen und Web­ent­wick­ler können dy­na­mi­sche Inhalte mithilfe ver­schie­de­ner Werkzeuge in das ge­wünsch­te Web­pro­jekt einbinden und in­di­vi­du­ell auf die User zu­schnei­den. Vor­aus­set­zung dafür ist ein pro­fes­sio­nel­les Web­hos­ting, das die nötigen Res­sour­cen be­reit­stellt, um eine moderne Web­ent­wick­lung zu er­mög­li­chen.

Tech­ni­sche Grund­la­gen einer Website

Die Grundlage einer jeden In­ter­net­prä­senz ist ein passender Server. Das Angebot der eta­blier­ten Web­hos­ting-Provider umfasst in der Regel Kom­plett­pa­ke­te, die neben dem be­nö­tig­ten Fest­plat­ten­spei­cher Ser­ver­leis­tun­gen wie RAM, eine eigene Domain, Da­ten­ban­ken und die nötigen Werkzeuge für die Web­ent­wick­lung be­inhal­ten. Sie können die tech­ni­schen Grund­la­gen aber natürlich auch selbst be­reit­stel­len.

Domain

Jedes Projekt im World Wide Web lässt sich über einen ein­zig­ar­ti­gen, ein­deu­ti­gen Namen aufrufen. Diese so­ge­nann­te Domain gehört zu den Grund­be­stand­tei­len einer Website. Domains folgen strikt dem hier­ar­chi­schen Aufbau des Domain-Name-Systems und bestehen aus einer den Na­mens­raum de­fi­nie­ren­den Top-Level-Domain wie z. B. .de, einem frei wählbaren Domain-Namen (der Second-Level-Domain) und fa­kul­ta­ti­ven Sub­do­mains. Die Domain-Re­gis­trie­rung erfolgt durch einen In­ter­net­dienst­leis­ter, der den Antrag an die zu­stän­di­ge Ver­wal­tungs­stel­le wei­ter­lei­tet. Bei der Wahl der Domain bieten sich kurze, prägnante For­mu­lie­run­gen und geläufige Top-Level-Domains an.

Webspace

Jede Webseite besteht aus Daten, die für Abrufe aus dem Internet auf einem Webserver be­reit­ge­stellt werden. Web­hos­ting-Pakete be­inhal­ten daher immer ein gewisses Spei­cher­kon­tin­gent für HTML-Dokumente, Style­sheets, Bilder, Videos, Da­ten­ban­ken und alle weiteren Dateien der Website. Das Auf­spie­len der Daten erfolgt in der Regel über das File Transfer Protocol (FTP) bzw. das ver­schlüs­sel­te SFTP (SSH File Transfer Protocol) und ein passendes FTP-Programm wie FileZilla oder WinSCP. Für die Ska­lier­bar­keit des Web­pro­jekts ist es wichtig, dass sich der Webspace jederzeit bei Bedarf erweitern lässt.

Datenbank

Moderne Websites greifen häufig auf Da­ten­ban­ken zurück, um Inhalte dynamisch be­reit­zu­stel­len und Nut­zer­da­ten zu verwalten. Statt sta­ti­scher HTML-Seiten, die auf dem Server abgelegt sind, ge­ne­rie­ren da­ten­bank­ge­stütz­te Projekte die einzelnen Webseiten dynamisch bei jedem Aufruf. Je nach An­wen­dungs­fall setzen Web­ent­wick­le­rin­nen und Web­ent­wick­ler dabei auf re­la­tio­na­le Da­ten­ban­ken (SQL) oder NoSQL-Da­ten­ban­ken.

Re­la­tio­na­le Da­ten­ban­ken wie MySQL, MariaDB oder Post­greS­QL speichern In­for­ma­tio­nen in Ta­bel­len­form und ver­knüp­fen diese über ein­deu­ti­ge Schlüssel (IDs) mit­ein­an­der. Das eignet sich besonders für An­wen­dun­gen, die klar de­fi­nier­te Be­zie­hun­gen zwischen Daten erfordern, wie Be­nut­zer­kon­ten, Be­stel­lun­gen oder Ar­ti­kel­ka­ta­lo­ge. NoSQL-Da­ten­ban­ken wie MongoDB, Firebase oder Redis bieten dy­na­mi­sche Schema-An­pas­sun­gen, was sie besonders für ska­lier­ba­re oder per­for­mance­for­dern­de Web-Apps und Echtzeit-An­wen­dun­gen in­ter­es­sant macht.

Webserver

Je nach Hosting-Modell kann der Server geteilt (Shared Hosting) oder dediziert (eigene Hardware, VPS oder Cloud) sein. Große Web­pro­jek­te nutzen für eine bessere Per­for­mance zudem häufig zu­sätz­li­che Tech­no­lo­gien wie Load Balancing und Content Delivery Networks (CDNs). Moderne An­wen­dun­gen setzen zudem auf Container-Tech­no­lo­gien wie Docker und Ku­ber­netes, um Ser­ver­an­wen­dun­gen flexibel und ska­lier­bar be­reit­zu­stel­len.

Unter der Be­zeich­nung „Webserver“ versteht man wiederum die zentrale Soft­ware­kom­po­nen­te, die Webseiten und Web­an­wen­dun­gen aus­lie­fert. Webserver ver­ar­bei­ten Anfragen von Browsern über das HTTP(S)-Protokoll und senden die ent­spre­chen­den Inhalte zurück. Zu den be­kann­tes­ten Lösungen gehören Apache, NGINX und LiteSpeed.

Die wich­tigs­ten Werkzeuge der modernen Web­pro­gram­mie­rung

Steht die Basis des Web­pro­jekts, haben Sie ver­schie­de­ne Mög­lich­kei­ten, eine eigene Website zu erstellen. Die Band­brei­te reicht von der in­tui­ti­ven Webseiten-Software mit ein­ge­schränk­ten Ge­stal­tungs­mög­lich­kei­ten über flexible Content-Ma­nage­ment-Systeme (CMS) bis hin zum selbst ge­schrie­be­nen Quellcode. Während sich Homepage-Baukästen nach dem WYSIWYG-Prinzip („What You See Is What You Get“) in erster Linie an Ein­stei­ger ohne Pro­gram­mier­kennt­nis­se richten, erfordert der Betrieb eines CMS ein gewisses Vorwissen. Maximale Freiheit sichern sich Web­ent­wick­le­rin­nen und Web­ent­wick­ler, die ihr Projekt in einem Editor von Grund auf selbst pro­gram­mie­ren (häufig mithilfe eines Frame­works). Dies setzt die Kenntnis grund­le­gen­der Pro­gram­mier­spra­chen wie HTML, CSS, Ja­va­Script und PHP voraus, wobei prak­ti­sche Lösungen wie ein­satz­fer­ti­ge Code­ge­rüs­te oder Tools für die Pro­gram­mie­rung mit KI die Arbeit mitt­ler­wei­le erheblich ver­ein­fa­chen.

HTML

HTML (Hypertext Markup Language) dient in der Web­ent­wick­lung der se­man­ti­schen Grob­struk­tu­rie­rung digitaler Inhalte durch so­ge­nann­te Tags. Auf diese Weise lassen sich Elemente wie Text­ab­schnit­te, Über­schrif­ten, Grafiken oder Hy­per­links de­fi­nie­ren. Ein derart aus­ge­zeich­ne­ter Quellcode stellt das Grund­ge­rüst einer jeden Webpage dar. Eine einfache statische Website ist im Grunde nichts anderes als eine Auswahl mit­ein­an­der ver­knüpf­ter HTML-Dokumente. Der aktuelle Standard HTML5 erweitert das Markup zudem um Aus­zeich­nun­gen für Audio- und Video-Elemente.

CSS

Die visuelle Dar­stel­lung der Inhalte wird hingegen in CSS (Cascading Style Sheets), der Standard-For­ma­tie­rungs­spra­che für HTML-Dokumente, definiert. Web­ent­wick­le­rin­nen und Web­ent­wick­ler nutzen CSS, um den im HTML-Code de­fi­nier­ten Elementen Regeln für die Dar­stel­lung im Browser zu­zu­wei­sen. Der aktuelle Standard CSS3 umfasst neben An­wei­sun­gen für Layout, Farb­ge­bung und Ty­po­gra­fie auch Ani­ma­tio­nen, Farb­ver­läu­fe und Schatten.

Ja­va­Script/Ty­pe­Script

Be­su­che­rin­nen und Besucher in­ter­agie­ren mit modernen Webseiten durch in­ter­ak­ti­ve Ein­ga­be­fel­der, aus­klapp­ba­re Menüs oder Slide­shows. Sollen dy­na­mi­sche Inhalte dieser Art in eine HTML-Seite in­te­griert werden, kommen Ja­va­Script oder die Er­wei­te­rung Ty­pe­Script zum Einsatz. Die Skript­spra­chen erweitern das Grund­ge­rüst aus HTML und CSS, indem Be­nut­zer­inter­ak­tio­nen aus­ge­wer­tet und Sei­ten­in­hal­te nach­ge­la­den, ak­tua­li­siert oder verändert werden.

PHP

Während statische Webseiten ab­ruf­be­reit auf dem Webserver liegen, werden dy­na­mi­sche Webseiten erst bei der An­for­de­rung durch einen Web­brow­ser generiert. Möglich machen dies Skript­spra­chen wie PHP. Eine PHP-Pro­gram­mie­rung wird ser­ver­sei­tig in­ter­pre­tiert. Statt den Quellcode dy­na­mi­scher Webseiten direkt an den Browser aus­zu­lie­fern, über­mit­telt der Webserver die Datei an einen PHP-In­ter­pre­ter. Dieser erzeugt die an­ge­for­der­te Webseite – oft auf Basis von in Da­ten­ban­ken hin­ter­leg­ten In­for­ma­tio­nen – und gibt diese an den Webserver zurück, von wo aus die In­ter­pre­ter-Ausgabe an den Browser gesendet wird. Weitere Skript­spra­chen zur Ent­wick­lung dy­na­mi­scher Webseiten sind Perl und Python.

Frame­works

In der modernen Web­ent­wick­lung setzt man immer häufiger auch auf Frame­works, die Ent­wick­lungs­pro­zes­se be­schleu­ni­gen und bewährte Struk­tu­ren bieten. Frontend-Frame­works wie Angular oder React er­leich­tern die Er­stel­lung dy­na­mi­scher, in­ter­ak­ti­ver Be­nut­zer­ober­flä­chen. Sie er­mög­li­chen eine kom­po­nen­ten­ba­sier­te Ar­chi­tek­tur und ver­bes­sern die Per­for­mance durch virtuelle DOMs.

Backend-Frame­works wie Flask oder Django un­ter­stüt­zen Sie bei der ser­ver­sei­ti­gen Ent­wick­lung, indem sie unter anderem Routing, Da­ten­bank­an­bin­dun­gen, API-Ma­nage­ment und Si­cher­heits­funk­tio­nen bieten. Durch die Kom­bi­na­ti­on von Frontend- und Backend-Frame­works entstehen ska­lier­ba­re Web­an­wen­dun­gen mit op­ti­mier­ter Ent­wick­lungs­zeit.

APIs

APIs (Ap­pli­ca­ti­on Pro­gramming In­ter­faces) sind Schnitt­stel­len, über die Web­pro­jek­te mit anderen An­wen­dun­gen kom­mu­ni­zie­ren können. Auf diese Weise kann eine Webseite z. B. Daten von einem Server abrufen oder mit Dritt­an­bie­ter-Services wie Zah­lungs­an­bie­tern oder Kar­ten­diens­ten verbunden werden. Es gibt ver­schie­de­ne Arten von APIs, darunter REST und GraphQL, die Daten in einem fest­ge­leg­ten Format be­reit­stel­len. Viele moderne Web­an­wen­dun­gen nutzen APIs für dy­na­mi­sche Inhalte oder die Im­ple­men­tie­rung zu­sätz­li­cher Funk­tio­nen.

Re­spon­si­ve Webdesign und Per­for­mance-Op­ti­mie­rung

Moderne Websites müssen sich flexibel an ver­schie­de­ne Bild­schirm­grö­ßen anpassen. Re­spon­si­ve Webdesign sorgt dafür, dass Inhalte auf Smart­phones, Tablets und Desktops optimal dar­ge­stellt werden. Dies geschieht durch flexible Layouts, Media Queries (CSS) und Mobile-First-De­sign­an­sät­ze. Je nach Projekt kann es aber durchaus sinnvoll sein, zu überlegen, ob das klas­si­sche Re­spon­si­ve Webdesign, eine mobile Seite oder eine App am besten geeignet ist.

Neben der Dar­stel­lung ist auch die Ladezeit ent­schei­dend. Per­for­mance-Op­ti­mie­rung ist eine der wich­tigs­ten Dis­zi­pli­nen moderner Web­ent­wick­lung. Sie umfasst unter anderem Techniken wie:

• Bilder kom­pri­mie­ren
• Caching
• CSS kom­pri­mie­ren
• Ja­va­Script/Ty­pe­Script mi­ni­mie­ren
• Lazy Loading

Si­cher­heits­maß­nah­men und Testing

Si­cher­heit ist ein zentraler Aspekt eines er­folg­rei­chen Web­pro­jekts, der bereits im Rahmen der Web­ent­wick­lung be­rück­sich­tigt werden sollte. Websites sollten durch SSL/TLS-Ver­schlüs­se­lung, sichere Pass­wör­ter und Schutz­me­cha­nis­men gegen Angriffe wie XSS oder SQL-In­jec­tions geschützt werden. Auch re­gel­mä­ßi­ge Updates und Backups sind es­sen­zi­ell.

Ins­be­son­de­re wenn man kom­ple­xe­re Web­pro­jek­te selbst pro­gram­miert, ist außerdem das Testen ein wichtiger Be­stand­teil der Qua­li­täts­si­che­rung. Für die Web­ent­wick­lung stehen dafür ver­schie­de­ne Testing-Werkzeuge zu Verfügung. Sollen nur Be­stand­tei­le des pro­gram­mier­ten Web­pro­jekts getestet werden, greift man auf Mo­dul­tests zurück. Dafür wiederum gibt es ver­schie­de­ne Test-Frame­works, wie bei­spiels­wei­se PHPUnit für PHP oder JSUnit für Ja­va­Script.