© Graphic farm/Shutterstock.com
Entwickler Magazin
Teil 2: Modernes Webdesign mit CSS3 - ein Überblick über die Kernfeatures

Im Zusammenhang von Anfang an!

Das Ziel dieser Serie ist es, Sie mit den aktuellen Techniken moderner Webanwendungen vertraut zu machen. Diesmal geht es um die Gestaltung des Inhalts mit Cascading Style Sheets (CSS). Die Gestaltungsoptionen haben mit der Version CSS3 erheblich zugenommen. Wir stellen hier die wichtigsten Möglichkeiten vor, die Sie für das Erstellen von Webanwendungen brauchen.

Veikko Krypczyk, Elena Bochkor


ArtikelserieTeil 1: Motivation: Vom Fat-Client zur modernen Web-App, Architektur, HTML5Teil 2: Modernes Webdesign mit CSS3 – ein Überblick über die KernfeaturesTeil 3: Funktionalität realisieren: von JavaScript zu TypeScriptTeil 4: Durchstarten: Eine Angular-App: Data Binding, Kommunikation mit dem REST APITeil 5: Design: UI-Gestaltung, z. B. IonicTeil 6: App-Arten: Mobiles mit Cordova, Desktop mit Electron

Moderne Webprogrammierung, gleichgültig welche Technik Sie letztendlich einsetzen, basiert immer auf dem Zusammenspiel von HTML, CSS und JavaScript. Insofern erzählen wir Ihnen hier nichts Neues, und dennoch nehmen wir die zahlreichen erweiterten Möglichkeiten der neuen Versionen dieser Technologien zum Anlass, systematisch mit den Grundlagen zu beginnen. Die Neuerungen und die strikte Verwendung von HTML5 als Seitenbeschreibungssprache haben wir Ihnen bereits im ersten Teil der Artikelserie vorgestellt. Das Fazit aus dieser einführenden Darstellung lautet „HTML5 definiert die Bedeutung, d. h. die Semantik einer Webseite – nicht deren Aussehen bzw. Design“. Mit anderen Worten: Die früher noch üblichen Formatanweisungen, die direkt in die HTML-Tags notiert wurden, lassen Sie bitte unter allen Umständen bleiben! Für die Darstellung (Design) des Inhalts ist ausschließlich die Style-Sheet-Sprache CSS verantwortlich. Auf CSS gehen wir jetzt in kompakter Art und Weise ein und schaffen damit das Fundament für solide und moderne Webapplikationen. Abbildung 1 zeigt die Lernpyramide der Technologien, wie wir sie in diesem Kurs durchlaufen.

Abb. 1: Die Pyramide der Technologien für eine moderne Webapplikation

Das Zusammenspiel

Das Zusammenspiel zwischen HTML und CSS haben wir gerade schon erläutert: Die zentrale Rolle spielt das jeweilige HTML-Element. In ihm wird der Inhalt definiert, also welche Textbestandteile die Überschrift sind, welche Elemente die Navigation bilden und welche Texte für den eigentlichen Inhalt zuständig sind. Wie die einzelnen Elemente letztendlich dargestellt werden, wird über CSS festgelegt. Die Einbettung von Skripten (JavaScript) führt zur Interaktionsfähigkeit der Webapplikation auf Seiten des Clients. CSS und JavaScript lagert man aus Gründen einer guten Anwendungsarchitektur aus den HTML-Dokumenten in eigene Dateien aus. Komplettiert wird eine Webseite schließlich durch weitere Elemente (Medien), wie zum Beispiel Bilder oder Videos. Wir werden jetzt das eine oder andere Beispiel erstellen, dazu brauchen wir immer etwas Content in For...

Entwickler Magazin
Teil 2: Modernes Webdesign mit CSS3 - ein Überblick über die Kernfeatures

Im Zusammenhang von Anfang an!

Das Ziel dieser Serie ist es, Sie mit den aktuellen Techniken moderner Webanwendungen vertraut zu machen. Diesmal geht es um die Gestaltung des Inhalts mit Cascading Style Sheets (CSS). Die Gestaltungsoptionen haben mit der Version CSS3 erheblich zugenommen. Wir stellen hier die wichtigsten Möglichkeiten vor, die Sie für das Erstellen von Webanwendungen brauchen.

Veikko Krypczyk, Elena Bochkor


ArtikelserieTeil 1: Motivation: Vom Fat-Client zur modernen Web-App, Architektur, HTML5Teil 2: Modernes Webdesign mit CSS3 – ein Überblick über die KernfeaturesTeil 3: Funktionalität realisieren: von JavaScript zu TypeScriptTeil 4: Durchstarten: Eine Angular-App: Data Binding, Kommunikation mit dem REST APITeil 5: Design: UI-Gestaltung, z. B. IonicTeil 6: App-Arten: Mobiles mit Cordova, Desktop mit Electron

Moderne Webprogrammierung, gleichgültig welche Technik Sie letztendlich einsetzen, basiert immer auf dem Zusammenspiel von HTML, CSS und JavaScript. Insofern erzählen wir Ihnen hier nichts Neues, und dennoch nehmen wir die zahlreichen erweiterten Möglichkeiten der neuen Versionen dieser Technologien zum Anlass, systematisch mit den Grundlagen zu beginnen. Die Neuerungen und die strikte Verwendung von HTML5 als Seitenbeschreibungssprache haben wir Ihnen bereits im ersten Teil der Artikelserie vorgestellt. Das Fazit aus dieser einführenden Darstellung lautet „HTML5 definiert die Bedeutung, d. h. die Semantik einer Webseite – nicht deren Aussehen bzw. Design“. Mit anderen Worten: Die früher noch üblichen Formatanweisungen, die direkt in die HTML-Tags notiert wurden, lassen Sie bitte unter allen Umständen bleiben! Für die Darstellung (Design) des Inhalts ist ausschließlich die Style-Sheet-Sprache CSS verantwortlich. Auf CSS gehen wir jetzt in kompakter Art und Weise ein und schaffen damit das Fundament für solide und moderne Webapplikationen. Abbildung 1 zeigt die Lernpyramide der Technologien, wie wir sie in diesem Kurs durchlaufen.

Abb. 1: Die Pyramide der Technologien für eine moderne Webapplikation

Das Zusammenspiel

Das Zusammenspiel zwischen HTML und CSS haben wir gerade schon erläutert: Die zentrale Rolle spielt das jeweilige HTML-Element. In ihm wird der Inhalt definiert, also welche Textbestandteile die Überschrift sind, welche Elemente die Navigation bilden und welche Texte für den eigentlichen Inhalt zuständig sind. Wie die einzelnen Elemente letztendlich dargestellt werden, wird über CSS festgelegt. Die Einbettung von Skripten (JavaScript) führt zur Interaktionsfähigkeit der Webapplikation auf Seiten des Clients. CSS und JavaScript lagert man aus Gründen einer guten Anwendungsarchitektur aus den HTML-Dokumenten in eigene Dateien aus. Komplettiert wird eine Webseite schließlich durch weitere Elemente (Medien), wie zum Beispiel Bilder oder Videos. Wir werden jetzt das eine oder andere Beispiel erstellen, dazu brauchen wir immer etwas Content in For...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang