JavaScript

Im Zusammenhang von Anfang an!

Web-App Tutorial 1: Moderne Anwendungen mit HTML5
Keine Kommentare

Fragt man, welche Programmiertechnologien heute angesagt sind, dann lauten die Antworten HTML5, CSS3, JavaScript, Angular usw. Dazu kommt das passende Tooling mit Git und einem schlanken Editor. Einzeln wurden diese Technologien schon alle vorgestellt. Hier erwartet Sie ein kompakter Einstieg im Zusammenhang in die Techniken von heute und morgen.

Wer als Entwickler schon etwas länger im Geschäft ist, wird es bereits bemerkt haben: Die Art und Weise der Softwareentwicklung befindet sich (wieder einmal) vor einem größeren Umbruch. Man könnte jetzt berechtigterweise einwenden, dass das gewissermaßen nichts Neues ist. Schon immer waren wir Entwickler gezwungen, uns auf neue Technologien einzulassen. Ebenso mussten wir uns stetig mit neuen Werkzeugen und Programmiersprachen vertraut machen. Dennoch gibt es ein paar eindeutige Anzeichen dafür, dass die Zeit reif ist, für einen erneuten größeren Umbruch. Statt komplexer und umfassender Desktopapplikationen sind heute schlanke Apps angesagt, die idealerweise auf allen Zielplattformen lauffähig sind. Man lagert die Geschäftslogik, d. h. die Funktionalität, in spezialisierte Dienste aus. Statt auf eine unflexible monolithische Anwendungsstruktur setzt man auf eine Aufteilung der Aufgaben. Dieser Ansatz der modernen Softwareentwicklung wird daher treffenderweise auch als Microservices bezeichnet. Von einem Paradigmenwechsel zu sprechen, ist aufgrund des Ausmaßes der Änderungen durchaus berechtigt.

Artikelserie

  • Teil 1: Motivation – Vom Fat-Client zur modernen Web-App mit HTML5
  • Teil 2: Modernes Webdesign mit CSS3 – ein Überblick über die Kernfeatures
  • Teil 3: Funktionalität realisieren: von JavaScript zu TypeScript
  • Teil 4: Durchstarten: Eine Angular-App: Data Binding, Kommunikation mit REST API
  • Teil 5: Design: UI-Gestaltung, z. B. Ionic
  • Teil 6: App-Arten: Mobiles mit Cordova, Desktop mit Electron

Auch die Welt der Programmiersprachen wandelt sich. Natürlich sind die traditionellen Sprachen wie Java und C# weiterhin stark gefragt. Dennoch gibt es einen klaren Trend zur flexiblen, systemübergreifenden und plattformunabhängigen Nutzung des Trios HTML5, CSS3 und JavaScript. Dabei dient HTML5 zu Beschreibung der Benutzeroberfläche, die Gestaltung erfolgt mittels CSS3 und die Programmlogik der Anwendungen wird in JavaScript realisiert. Für mehr Typsicherheit bei der Programmierung sorgt statt der direkten Programmierung in JavaScript zum Beispiel der Einsatz von TypeScript. Letztendlich erfolgt aber wieder ein Transpilieren nach JavaScript. Für eine effizientere Programmierung muss man auf Wiederverwendung setzen. Zahlreiche Frameworks buhlen um die Gunst des Entwicklers. Bekannte Namen aus der Szene sind Angular, React und neuerdings auch Vue.js. Ergänzt werden diese beispielsweise um spezielle Frameworks für das User Interface (UI) wie Ionic, das ein natives Aussehen der App auf allen Zielplattformen und Gerätetypen ermöglicht. Trotz aller Flexibilität zwischen den Plattformen muss man am Ende dennoch wieder entscheiden, welche Art von App entstehen soll. Neben einer Web-App, die auf nahezu allen gängigen Browsern aller denkbarer Systeme ausgeführt werden kann, kann es sich weiterhin um eine App für die mobilen Systeme Android oder iOS bzw. um eine Desktop-App, beispielsweise für die Betriebssysteme Windows, MacOS oder Linux handeln.

Um diese Heterogenität dieser Zielsysteme in den Griff zu bekommen, bedarf es weiterer Anstrengungen im Bereich der Anwendungsarchitektur. Durch den Einsatz weiterer Frameworks, konkret zum Beispiel Apache Cordova für die mobilen Plattformen und Electron für den Desktop, können die entstandenen Web-Apps auf allen nur denkbaren Zielplattformen deployt werden. Im Idealfall kommt man mit diesem Ansatz dem seit Ewigkeiten angestrebten Ziel, aus einer gemeinsamen Codebasis alle Systeme und Geräte adressieren zu können, deutlich näher. Deutlich dürfte auch der Unterschied zu bisherigen Technologien geworden sein. Statt wie bei Java und .NET mit viel Aufwand eine Laufzeitumgebung auf die Zielsysteme zu hieven, entstehen hier Applikationen, die direkt auf den Systemen ausgeführt werden können. Ebenso wird die Komplexität der unterschiedlichen Zielsysteme möglichst von der Quellcodebasis ferngehalten. Auf Seiten des Quellcodes soll lediglich mit HTML5, CSS und JavaScript hantiert werden. Die gesamte Komplexität einer solchen modernen (Web-)Applikation wird durch den Einsatz von Frameworks gekapselt, die letztendlich auch die Anwendungspakete für die Zielplattformen generieren. Ebenso wird klar, dass moderne Webapplikationen den Rahmen des Browsers schon lange gesprengt haben und zwischenzeitlich auch auf den mobilen Systemen und dem Desktop zu Hause sind.

An dieser Stelle ist es Zeit, sich beispielhaft den grundsätzlichen Aufbau einer solchen modernen Web-App anzusehen. In Abbildung 1 haben wir diesen anhand einer Angular-App skizziert.

Abb. 1: Architektur einer auf Angular basierenden modernen Web-App

Abb. 1: Architektur einer auf Angular basierenden modernen Web-App

Sofort zeigt sich die Rolle der genannten Basistechnologien HTML, CSS und JavaScript. Ebenso wird direkt deutlich, dass diese Art von Apps eine unmittelbare Schichtentrennung fordern. Dabei wird auf eine Variante des Model-View-Controller-(MVC-)Patterns gesetzt (siehe Kasten „Model-View-Controller-Pattern“).

Model-View-Controller-Pattern

Das Model-View-Controller-Muster beschäftigt sich mit der Schichtentrennung der Applikation. Ganz konkret geht es um die Bereitstellung und Interaktion der Businesslogik mit der Benutzeroberfläche. Dazu trennt das MVC-Muster die Schichten Datenhaltung (Model), Steuerung (Controller) und Präsentation (View) voneinander. Das MVC-Muster gibt vor, auf welche Art und Weise die Schichten miteinander kommunizieren sollen. Das Ziel ist es hier, eine weitgehende Entkopplung zu erhalten, damit man einzelne Schichten unabhängig von den anderen modifizieren kann. Dabei haben die Schichten folgende Aufgaben:

  1. Das Model steht für die Daten der Anwendung, u. a. ist es für deren Speicherung verantwortlich.
  2. Die View hat die Aufgabe, die Daten des Model darzustellen und Benutzereingaben zu verarbeiten.
  3. Der Controller verbindet das Model mit der View. Er organisiert den Datenaustausch zwischen den beiden Elementen.

Dieses Entwurfsmuster bildet die Grundlage für die Strukturierung vieler Anwendungstypen, welche auf Benutzerinteraktion setzen. Es findet in zahlreichen Frameworks Anwendung und kann in den unterschiedlichsten Systemumgebungen und Programmiersprachen umgesetzt werden. In der Praxis haben sich Varianten des Model-View-Controller-Musters etabliert. Von Varianten spricht man deshalb, weil Anpassungen an das jeweilige Framework bzw. die Programmiersprache zu spezifischen Ausprägungen geführt haben.

Die meisten Tutorials beginnen nun damit, eine erste Hello-World-App auf der Basis dieser Architektur einzurichten. Im Rahmen dieser mehrteiligen Artikelserie wollen wir die Lernkurve etwas flacher gestalten. Für ein umfassendes und wirkliches Verständnis ist die Kenntnis einer Reihe von Basistechnologien unumgänglich. So sind solide Kenntnisse im HTML5, CSS3 und JavaScript eine wichtige Voraussetzung. Klar werden Sie sich als Entwickler mehr oder weniger gut mit HTML und CSS auskennen. Mit HTML5 und CSS3 haben sich jedoch die Möglichkeiten erheblich erweitert, sodass eine Wiederholung der wichtigsten Features nicht schaden kann. Ebenso sieht es mit JavaScript aus. Die Programmiersprache hat sich von einer ehemaligen Skriptsprache zu einer vollständigen Programmiersprache gewandelt, sodass es sich gerade vor dem Hintergrund des Einsatzes von TypeScript (Angular) lohnt, sich mit den wichtigsten Sprachmerkmalen zu beschäftigen. Oder wie war das nochmal mit den Unterschieden zwischen var, let und const? Insgesamt ergibt sich damit eine fünfteilige Artikelserie, deren Struktur sich am Aufbau einer typischen Web-App orientiert. Beginnend mit den Basistechnologien arbeiten wir uns zum Einsatz der „großen“ Frameworks vor und schließen am Ende den Entwicklungszyklus mit der Konfiguration der Codebasis zu einer App für die mobilen Systeme und als Desktopvariante.

Das Ziel dieser Serie ist damit klar: Als erfahrener Entwickler, zum Beispiel aus dem Umfeld von Java oder .NET, haben Sie bisher noch nicht die Zeit gefunden, sich mit dem Konzept einer modernen Webapplikation vertraut zu machen. Jeder Teil der Artikelserie behandelt eine grundlegende Technik, die in sich abgeschlossen einen kompakten Überblick über das betreffende Thema liefert. Am Ende der Artikelserie haben Sie dann umfassende Kenntnisse, um eine moderne Webapplikation mit den heute angesagten Techniken aufzusetzen (Abb. 2).

In diesem Sinne: Starten Sie mit uns auf eine interessante Reise! Viele Erkenntnisse warten darauf, entdeckt zu werden. Los gehts!

Abb. 2: Die Pyramide der Technologien auf dem Weg zur modernen Webapplikation

Abb. 2: Die Pyramide der Technologien auf dem Weg zur modernen Webapplikation

HTML5 – ohne geht nichts!

HTML ist sicherlich jedem vertraut. Gleichgültig mit welcher Programmiersprache und für welche Systemumgebung Sie bisher programmiert haben, Sie sind bereits an der einen oder anderen Stelle mit HTML in Berührung gekommen. HTML5 hat jedoch die Möglichkeiten deutlich erweitert. Wir werden später sehen, dass das Vokabular von HTML5 mit der Verwendung der JavaScript-Bibliotheken erweitert wird, beispielsweise ist der Einsatz von Schleifen nunmehr möglich. Daher ist eine Auffrischung von HTML mit einem Fokus auf die neuen Features notwendig.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <h1>Herzlich Willkommen </h1>
  <p>Zum ersten Teil der neuen Serie zur Web-Programmierung</p>
  <p>Das heutige Thema lautet HTML5-Refresh.</p>
</body>
</html>

Beginnen wir damit, uns den grundlegenden Aufbau einer HTML5-Seite ins Gedächtnis zu rufen (Listing 1). Die Struktur ist selbsterklärend. Wer schon länger keine HTML-Seiten mehr erstellt hat, dem wird auffallen, dass die lästigen <!doctype>-Deklarationen, also der Form <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html4/strict.dtd“>  nicht mehr notwendig sind. Konkret heißt das, dass alle Webbrowser die neue, einfachere und kürzere Version <!doctype html> verstehen. Damit gibt es eigentlich keinen Grund mehr, die alten Deklarationen für neue Projekte zu verwenden. In den Kopfdaten (<head>) sind die folgenden HTML-Elemente möglich:

  • title ist der Titel des HTML-Dokuments.
  • base setzt Basis-URLs/Ziele für alle relativen URLs in einer Webseite.
  • link setzt logische Links des HTML-Dokuments zu anderen Dateien.
  • style verweist auf die lokalen Stylesheetregeln für das HTML-Dokument.
  • script bindet die Skripte ein.
  • meta setzt die Metadaten wie Schlüsselwörter oder den Zeichensatz.

Innerhalb des <body>-Tags wird dann der eigentliche Inhalt der Webseite abgebildet.

Beziehungen zu externen Dokumenten

Wie im vorherigen Abschnitt dargestellt, dient das link-Element als Tag im Kopf eines HTML-Dokumentes dazu, Beziehungen zu anderen Dokumenten herzustellen. Sehr oft wird das link-Element dazu verwendet, eine externe .css-Datei einzubinden. Man kann das link-Element mehrfach nutzen, um auf diese Weise mehrere Ressourcen zu integrieren. Um welche Art von Ressource es sich handelt, gibt man mit Hilfe des Attributes rel an. Für eine .css-Datei ist es der Wert stylesheet. Lautet unsere Datei style.css und liegt sie im gleichen Verzeichnis wie die referenzierende HTML-Datei, dann sieht das wie folgt aus: <link rel=“stylesheet“ type=“text/css“ href=“style.css“>.

IT Security Summit 2019

Sichere Logins sind doch ganz einfach!

mit Arne Blankerts (thePHP.cc)

Hands-on workshop – Hansel & Gretel do TLS

mit Marcus Bointon (Synchromedia Limited)

Auch Skripte müssen in das HTML-Dokument eingebunden werden. Dazu dient das script-Element. Dieses bindet eine JavaScript-Datei in das HTML-Dokument ein. Die Quelle, d. h. den Dateinamen der JavaScript-Datei, geben Sie über das src-Attribut an. Das sieht dann zum Beispiel wie folgt aus: <script type=“text/javascript“ src=“scripts.js“></script>. Das Script-Element kann im head– oder im body-Bereich eingebunden werden. Langlaufende Skripte können bei einer Einbindung im head-Bereich jedoch dazu führen, dass die Ladezeit der HTML-Seite, also der Rest des Dokumentes verzögert wird. Daher ist es üblich, das Skript am Ende des HTML-Dokumentes, also idealerweise vor dem schließenden body-Tag, einzufügen. In diesem Zusammenhang sind noch zwei Neuerungen, die es seit HTML5 gibt, von Interesse. Es betrifft die Attribute async und defer:

  • async – Das Skript wird asynchron mit dem HTML-Dokument ausgeführt, d.h. es wird ausgeführt, während das HTML-Dokument geparst wird.
  • defer – Verwendet man dieses Attribut, dann wird die Webseite zuerst geparst, bevor das Skript ausgeführt wird.

Beide Attribute gibt es nur für externe Skripte. Andererseits ist es kein guter Programmierstil, Skripte direkt in das HTML-Dokument einzubetten.

Struktur ist alles

HTML dient dazu, die Struktur einer Webseite zu erstellen. Längst vorbei sind die Zeiten, als man direkt in den HTML-Code Formatierungsanweisungen aufgenommen hat. Dafür dient ausschließlich CSS. Mit HTML5 haben die Möglichkeiten zur Seitenstrukturierung zugenommen, und es stehen auch Tags zur Verfügung, mit welchen eine semantische (inhaltliche) Auszeichnung der einzelnen Seitenbereiche möglich ist. Sehen wir uns das etwas genauer an. Folgende HTML-Elemente stehen für eine Seitenstrukturierung zur Auswahl:

  • body – Inhaltsbereich des HTML-Dokuments
  • section – Unterteilung in verschiedene Abschnitte
  • article – Unterteilung von Inhalten in einen Block
  • aside wird für marginale Informationen eines Inhalts wie einer Seitenleiste oder für zusätzliche Informationen zu einem Artikel verwendet
  • nav – Element zur Darstellung der Navigation
  • h1, h2, …, h6 – Überschriften der Ebene eins bis sechs
  • header – Kopfbereich des Inhalts
  • footer – Fußbereich des Inhalts
  • address – Kontaktinformationen

Wir weisen nochmals darauf hin, dass die Verwendung dieser HTML-Elemente üblicherweise keine Auswirkungen auf die Darstellung hat, das ist vielmehr Aufgabe der zugehörigen CSS-Klasse. Wir können damit aber die Seite strukturieren und beispielsweise definieren, welche Bestandteile zur Navigation gehören. Erfolgt später die Umsetzung des UI aus der allgemeinen Seitenstruktur auf die jeweilige Zielplattform (Web, App, Desktop), dann werden diese Angaben ausgewertet und spezifisch umgesetzt. Ein Beispiel: Eine Webapplikation hat für das Menü bekanntermaßen eine andere Position als eine Desktopanwendung. Ebenso unterscheidet sich die Darstellung des Menüs zwischen Windows, Linux und MacOS. Und für eine App auf Android? Da sieht es wieder ganz anders aus.

Eine Ebene tiefer als die Tags zur Seitenstrukturierung sind die Elemente zur Textstrukturierung angesiedelt. Dazu gehören zum Beispiel:

  • p – Textabsatz
  • br – Zeilenumbruch (zwingend)
  • wbr – optionaler Zeilenumbruch innerhalb eines Wortes
  • main – Hauptinhaltsbereich
  • div – Definition eines allgemeinen Bereichs; gerade in der Vergangenheit sehr oft verwendet, kann heute oft durch spezifischere Elemente ersetzt werden
  • blockquote – Verwendung für Zitate
  • figure – Gruppierung von Inhalten
  • figurecaption – Beschriftung von figure-Elementen
  • ul – Aufzählungsliste
  • ol – nummerierte Liste
  • li – Listenelement
  • hr – optische Trennung auf Absatzebene
  • dl, dt, dd – Beschreibungslisten

Natürlich stellen die Browser beispielsweise eine Liste, die mit dem ul-Element definiert wurde, gleich als einfache Liste dar. Dennoch formatiert man dann mittels CSS diese Liste nach seinen Vorstellungen. Entsprechende Vorlagen und Frameworks unterstützen dabei, damit man nicht immer wieder bei Null anfängt.

Ein Beispiel für die Verwendung dieser beschreibenden HTML5-Elemente zeigt Listing 2. Bisher gab es nur das universelle div-Tag, um einen Bereich in einer Webseite von anderen Bereichen abzugrenzen. Natürlich sind die div-Tags eindeutig über die zugehörige ID, also zum Beispiel <div id=“navigation“> zu identifizieren, und eine Formatierung der Elemente ist über CSS realisierbar. Eine automatische Verarbeitung bzw. Erkennung der Seitenstruktur ist jedoch mittels div-Elementen nicht möglich. Screenreadern bleibt die Bedeutung des dargestellten div-Tags also verschlossen.

<div id="header">
  <h1>Trips for U</h1>
</div>
<div id="navigation">
  <p>
    <a href="#"> Pauschalreisen</a>
    <a href="#"> Last Minute</a>
    <a href="#"> Hotel</a>
    <a href="#"> Flug</a>
    <a href="#"> Top-Angebote</a>
  </p>
</div>
<div id="sidebar">
  <ul>
    <li>
      <a href="#">Urlaubstipps</a>
    </li>
  </ul>
</div>
<div id="content">
  <h2>Die angesagten Urlaubsangebote</h2>
  <P>
    <ul>
      <li>
        <a href="#">Mallorca</a>
      </li>
      <li>
        <a href="#">Fuerteventura</a>
      </li>
      <li>
        <a href="#">England</a>
      </li>
      <li>
        <a href="#">Griechenland</a>
      </li>
    </ul>
  </P>
</div>
<div id="footer">
  <p>
    <a href="#">Kontakt</a>   
    <a href="#">Impressum</a> 
    <a href="#">FAQ</a>   
  </p>
</div>

Anders sieht die Sache bei Verwendung der neuen Elemente aus HTML5 aus. Ein Blick in Listing 3 zeigt, dass man nun sofort erkennen kann, welches Element der Seite welche inhaltliche Bedeutung hat. Statt <div id=“navigation“> finden wir nun das ausdruckstärkere nav zur Auszeichnung des Navigationsbereiches. Mit anderen Worten: HTML wird nun das, für was es immer gedacht war: eine Seitenbeschreibungssprache!

<header>
  <h1>Trips for U</h1>
</header>
<nav>
  <p>
    <a href="#"> Pauschalreisen</a>
    <a href="#"> Last Minute</a>
    <a href="#"> Hotel</a>
    <a href="#"> Flug</a>
    <a href="#"> Top-Angebote</a>
  </p>
</nav>
<aside>
  <ul>
    <li>
      <a href="#">Urlaubstipps</a>
    </li>
  </ul>
</aside>
<article>
  <h2>Die angesagten Urlaubsangebote</h2>
   <P>
    <ul>
      <li>
        <a href="#">Mallorca</a>
      </li>
      <li>
        <a href="#">Fuerteventura</a>
      </li>
      <li>
        <a href="#"> England</a>
      </li>
      <li>
        <a href="#">Griechenland</a>
      </li>
    </ul>
  </P>
</article>
<footer>
  <p>
    <a href="#">Kontakt</a>   
    <a href="#">Impressum</a> 
    <a href="#">FAQ</a>   
  </p>
</footer>

Tooling

Genauso leichtgewichtig wie der Aufbau einer modernen Web-App kommt auch das Tooling daher. Statt schwergewichtiger und allumfassender integrierter Entwicklungsumgebungen wie Visual Studio oder Eclipse, kommen individuell anpassbare Editoren zum Einsatz. Diese können durch Plug-ins nach den eigenen Wünschen konfiguriert und nahezu nach Belieben an die eingesetzten Programmiersprachen und Frameworks angepasst werden. Ein Vertreter dieser modernen Art von Editoren ist Visual Studio Code. Für dieses Tutorial werden wir diesen Editor verwenden. Er steht für alle gängigen Plattformen zur Verfügung, ist schnell installiert und besticht durch eine riesige Auswahl an Extensions zur Erweiterung. Der Editor präsentiert sich im Design wie es in Abbildung 3 zu sehen ist.

Abb. 3: Visual Studio Code ist ein leichtgewichtiger, plattformübergreifender Editor

Abb. 3: Visual Studio Code ist ein leichtgewichtiger, plattformübergreifender Editor

Ebenso empfiehlt es sich, die folgenden Tools und Erweiterungen direkt auf dem Entwicklungsrechner zu installieren:

  • Browser – Installieren Sie sich einen schnellen Browser, um die Web-Apps anzuzeigen. Beispielsweise kann Google Chrome empfohlen werden. Machen Sie sich bereits jetzt mit den integrierten Developer-Tools des Browsers vertraut. In Google Chrome öffnen Sie diese zum Beispiel unter Windows mit STRG+SHIFT+J, auf einem Mac erreichen Sie das gleiche mit der Tastenkombination ALT+CMD+J.
  • Versionsverwaltung – Softwareentwicklung ohne Versionsverwaltung ergibt heute keinen Sinn mehr. Der Standard ist hier Git. Installieren Sie Git von der Webseite in der aktuellen Version. Visual Studio Code unterstützt die Arbeit mit Git direkt. An den Dateien werden Ihnen über Icons die Zustände in Bezug auf das Repository jederzeit angezeigt. Ebenso sind die Standardoperationen für die Arbeit mit Git in Visual Studio Code eingebaut. Bitte bedenken Sie: Visual Studio Code will kein Ersatz für eine grafische Oberfläche sein. Möchten Sie bezüglich der Versionsverwaltung noch mehr Unterstützung auf grafischer Ebene haben, dann suchen Sie nach weiteren Extensions und schauen Sie, ob das Richtige für Sie dabei ist. Wir würden darüber hinaus GitHub Desktop empfehlen. Mithilfe dieses Tools können Sie komfortabel auf allen Systemen mit Git Repositories arbeiten. GitHub Desktop wurde übrigens ebenso wie Visual Studio Code auf der Basis einer modernen Webapplikation programmiert und über das Framework Electron als Desktopanwendung für alle gängigen Systeme bereitgestellt. Wenn das mal kein Anreiz ist, sich mit diesen neuen Technologien zu beschäftigen.
  • Extensions – Direkt für die Arbeit mit Visual Studio Code bieten sich die Erweiterungen HTML5 Boilerplate und Open in Browser an. Mit deren Hilfe kann man den Rumpf einer neuen HTML-Datei direkt durch die Eingabe von html5-Boilerplate erstellen bzw. die aktive Datei direkt im Browser anzeigen lassen.

Im Laufe der Arbeit werden wir diese Auswahl um weitere Frameworks, Extensions und Tools erweitern. Dabei besteht jedoch immer eine große Freiheit bei der Zusammenstellung und Konfiguration der Arbeitsumgebung. Entwickler, welche aus dem geschützten Umfeld einer umfassenden integrierten Entwicklungsumgebung kommen, mag dies etwas verwirren. Sie werden diese Flexibilität jedoch bald zu schätzen wissen. Ebenso ist die Programmierung von Webapplikationen gewissermaßen mit einer ständigen Arbeit auf der Konsole verbunden. Für viele Aufgaben können zwar kleine Helferlein für eine Integration der Befehle als Extensions für den ausgewählten Editor installiert werden, oft ist man jedoch schneller über die Konsole und vor allem näher am Code.

Diese Werkzeugsammlung ist lediglich eine Empfehlung. Man kommt mit einem anderen Editor oder mit einer anderen Konfiguration ebenso ans Ziel. Gestalten Sie sich Ihren eigenen Werkzeugkasten! Noch nie war die Auswahl der Tools größer.

Fazit und Ausblick

Dieser erste Teil der Artikelserie hat Sie mit auf die Reise genommen in eine neue Welt der Programmierung. Unser Thema lautet moderne Webapplikationen in- und außerhalb des Browsers. Heute haben Sie die dafür notwendigen Basics in HTML5 aufgefrischt bzw. sich neu angeeignet. Sie haben gesehen, dass HTML5, gerade was die Möglichkeit anbelangt, eine saubere Seitenstruktur zu definieren, erheblich zugelegt hat. Wer das Thema HTML5 und CSS vertiefen will, kann sich unter [1] einen umfassenden Überblick in die Möglichkeiten bei der Gestaltung vom Websites verschaffen. Nun ist es an uns Entwicklern und Designern, diese neuen Tags auch zu verwenden und auf diese Weise Seiten semantisch auszuzeichnen. Die Eignung für Screenreader (Stichwort: Barrierefreiheit) und eine bessere Übersicht auch bei größeren Dokumenten sind die Vorteile. Das Motto lautet, spezifische Elemente wie section oder article zu verwenden, anstatt alles nur in nichtssagende div-Tags einzubetten. Ebenso haben wir uns die ersten Tools zusammengesucht und konfiguriert, damit die Arbeit flüssig von der Hand geht.

Wie geht es weiter? Im kommenden zweiten Teil haben wir nichts weniger Spannendes vor, als uns die beiden weiteren Basistechnologien CSS3 und JavaScript anzusehen. Damit schaffen wir die Grundlagen, um dann mit den Frameworks zu hantieren und echte Web-Apps zu bauen, die (fast) überall laufen. Bleiben Sie dran!

Links & Literatur

[1] Wolf, Jürgen: „HTML5 und CSS3“, 2. Auflage, Rheinwerk Verlag, 2016

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -