Struktur und Design mit HTML5 und CSS3 · PDF filemische und attraktive Menge neuer...

Click here to load reader

  • date post

    07-Feb-2018
  • Category

    Documents

  • view

    214
  • download

    1

Embed Size (px)

Transcript of Struktur und Design mit HTML5 und CSS3 · PDF filemische und attraktive Menge neuer...

  • 1Struktur und Design mit HTML5 und CSS3In diesem Kapitel Wichtige neue Elemente in HTML5 Dynamische neue Design-Optionen in CSS3

    Ein Crashkurs zur Strukturierung von Webseiteninhalt mit HTML

    Eine Einfhrung in zeitgeme CSS-Stiltechniken

    I n diesem Kapitel verschaffe ich Ihnen einen allgemeinen berblick ber den Umfang unddie Reichweite der neuen Werkzeuge fr das Webdesign, die HTML5 und CSS3 Ihnen bie-ten. Im restlichen Buch beschftige ich mich dann detailliert mit spezifischen Funktionenvon HTML5 und CSS3. Hier am Anfang ist es jedoch sinnvoll, das groe Ganze zu betrachten,um nicht den Wald vor lauter Bumen zu bersehen.

    HTML5 setzt einen neuen Mastab fr die Strukturierung von Webseiteninhalt. Es unter-sttzt alle mglichen coolen neuen Funktionen, von Popup-Kalendern, die mit Eingabefor-mularen verknpft werden (siehe Abbildung 1.1), bis hin zu nativem Video, fr das keinePlug-ins mehr erforderlich sind. Insgesamt handelt es sich dabei um eine sehr viel sauberere,logischere Methode, Inhalt zu organisieren und zu prsentieren. Diese sauberere Methode, In-halt zu organisieren, findet man in vielerlei Art in den neuen semantischen Seitenelementenwieder, wie etwa , oder . Analog dazu bietet CSS3 eine dyna-

    Abbildung 1.1: Neue Elemente auf Eingabeformularen

    23

  • mische und attraktive Menge neuer Stilwerkzeuge beispielsweise verlaufende Hintergrndeund unregelmig geformte Bereiche. CSS3 ist jedoch mehr als die Summe seiner Teile.CSS3 bietet eine qualitative Methode, alle Mglichkeiten, die Designern fr den Entwurf vonWebseiten zur Verfgung stehen, zu erweitern und zu verbessern.

    In diesem Kapitel erhalten Sie einen schnellen berblick ber HTML5 und CSS3 aus der Vo-gelperspektive, insbesondere durch einen Vergleich und eine Gegenberstellung, wie Seitenin der Zeit vor HTML5/CSS3 aufgebaut wurden, und wie sie jetzt aufgebaut werden knnenund sollten. Machen Sie sich bereit fr die Reise!

    Zauberei mit HTML5 und CSS3HTML5 und CSS3 erffnen Ihnen neue Welten, in denen Sie wirklich attraktive, lebhafte unddynamische Webseiten entwerfen knnen. Ich werde in diesem Buch immer wieder Elementein HTML5 und neue Styling-Tools in CSS3 mit frheren Versionen von HTML und CSS aufdie unterschiedlichsten Arten vergleichen. Hier mchte ich Ihnen auf die Schnelle erklren,worum es sich bei diesen neuen Funktionen handelt.

    In frheren Versionen von HTML gab es keine systematische, allgemein angewendete Ele-mentemenge fr grundlegenden Seiteninhalt wie Abschnitte, Bereiche, Seitenleisten und soweiter. HTML5 fhrt eine rationale Methode ein, Seiteninhalt mit Hilfe semantischer Tags(siehe Abbildung 1.2) zu strukturieren, die die Art ihres Inhalts beschreiben.

    Abbildung 1.2: Eine HTML5-Seite mit den neuen semantischen Elementen

    HTML5 und CSS3 fr Dummies

    24

  • Bis zur Einfhrung von HTML5 brauchte man Plug-ins (wie zum Beispiel den Windows MediaPlayer oder den QuickTime Player), um Videos anzuzeigen. HTML5 verfolgt einen vlligneuen Ansatz fr Audio und Video und hat sich von den Plug-ins frei gemacht. Auerdem un-tersttzt HTML5 Formularfeldabfragen und Auswertungen (Tests), wie in Abbildung 1.3 ge-zeigt.

    Abbildung 1.3: Formularfeldabfragen in HTML5

    CSS3 gibt den Designern einen Werkzeugkasten voller Mglichkeiten an die Hand, mit denenes ganz einfach ist, Seitenelemente zu drehen, zu kippen, zu skalieren und berlappen zu las-sen. Die Webdesigner knnen jetzt runde Ecken fr den Inhalt anwenden und Quadrate zuKreisen machen.

    Darber hinaus untersttzen CSS3-Effekte umfassenden grafischen Inhalt, ohne dass Grafi-ken erforderlich sind. Beispielsweise knnen Sie auf ganz einfache Weise hochkomplexe ver-laufende Hintergrnde definieren (siehe Abbildung 1.4), ohne dass die Benutzer irgendeineBilddatei herunterladen mssen.

    Abbildung 1.4: Verlaufende Hintergrnde mit HTML5

    Und hier habe ich wirklich nur ein paar grundlegende Dinge angesprochen. Durch Kombina-tion dieser verschiedenen Funktionen knnen Webdesigner vllig neue Wege beschreiten undWebsites schaffen, auf denen die Besucher gerne Zeit verbringen.

    Nicht ganz neu . . . aber anders!All die aufregenden und dynamischen Design-Optionen, die mit HTML5 und CSS3 mglichsind, sind in zweierlei Hinsicht nicht ganz neu.

    Erstens stehen fast alle Funktionen, die ich im vorigen Abschnitt angesprochen habe, denWebdesignern schon geraume Zeit zur Verfgung. Fr ihre Verwendung waren jedoch kom-plizierte Werkzeuge notwendig, und/oder man musste wirklich Programmiererfahrung mit-bringen. Darber hinaus stellten sie hohe Anforderungen an Computer- und Handy-Ressour-cen, die einfach nicht mehr akzeptabel sind insbesondere in einer Zeit, in der Anzeigen aufdem Handy ein magebliches Kriterium darstellen, wenn man viele Menschen erreichen will.

    1 Struktur und Design mit HTML5 und CSS3

    25

  • Hier einige Beispiele, die das Ganze verdeutlichen sollen:

    Video: Video gibt es schon immer (siehe Abbildung 1.5), aber es waren wie bereits er-whnt Plug-ins dafr erforderlich, wie beispielsweise Windows Media Player, QuickTimePlayer oder Flash Player. Diese Videoplayer mussten regelmig aktualisiert werden, sieuntersttzten keine anderen Formate (zumindest nicht ohne Konfiguration) und es ent-stand ein nicht vorhersehbares Anzeigeerlebnis. Mit HTML5 brauchen die Benutzer kei-nerlei Mediaplayer-Plug-ins mehr zu installieren (oder zu aktualisieren), die gesamte frdie Anzeige der Videos (oder das Abspielen von Audio) erforderliche Software ist in dieBrowser eingebaut und der Zugriff kann direkt ber den HTML5-Code erfolgen.

    Abbildung 1.5: Video ohne Plug-ins in HTML5

    Interaktivitt und Animation: Interaktivitt und Animation (siehe Abbildung 1.6) gab esschon immer, dafr war hufig eine komplizierte Programmierung in Flash oder Java-Script erforderlich. HTML5 und CSS3 decken zwar den Funktionsumfang der Flash- undJavaScript-Animation nicht vollstndig ab, aber sie bieten einen Groteil dieser Funk-tionsmenge zu sehr viel geringeren Kosten im Hinblick auf Software, Flash- oder Java-Script-Programmierkenntnisse aufseiten des Designers und Downloadzeit fr Benutzer.

    Reichhaltige grafische Hintergrundbilder: Reichhaltige grafische Hintergrundbilder wur-den bis zur Einfhrung von CSS3 erstellt, indem richtiggehende Kunstwerke in Program-men wie Adobe Illustrator erstellt und als webfhige Bilder gespeichert wurden, die dannim Hintergrund eines Design-Elements (wie etwa einem Layoutfeld) gekachelt angeord-net (also wiederholt) wurden. Mit CSS3 knnen diese Hintergrnde (siehe Abbildung 1.7)jetzt ganz ohne eine Bilddatei definiert werden.

    Formen: Fr komplexe Formen war JavaScript erforderlich, oder auch serverseitigeSkripts in Programmen wie Ruby oder PHP. In HTML5 gibt es Abfragen (siehe Abbil-dung 1.8) und Validierungstests ohne jedes Skript.

    HTML5 und CSS3 fr Dummies

    26

  • Abbildung 1.6: Interaktivitt und Animation ohne komplexe Programmierung

    Abbildung 1.7: Grafische Hintergrundanzeigen in HTML5

    Abbildung 1.8: Eingabeaufforderungen fr Formulare

    Ich kann hier nicht auf all die aufregenden neuen Funktionen eingehen, die ich in diesemBuch vorstelle, sondern ich wollte nur anhand von einigen Beispielen zeigen, wie HTML5 undCSS3 auf der Geschichte des Webdesigns aufbaut. HTML5 und CSS3 machen viele Funktio-nen sehr viel einfacher fr Designer ohne dass sie auf Produkte oder Plug-ins von Dritt-anbietern zurckgreifen mssen und mit deutlich reduzierter Downloadzeit fr Seiten.

    1 Struktur und Design mit HTML5 und CSS3

    27

  • Verwenden Sie einen Code-Editor!

    Achtung: Erstellen Sie Ihre HTML- oder CSS-Seiten nicht in einem Texteditor! Damit be-schdigen Sie den erstellten Code. Beispielsweise wandeln die meisten Texteditoren gera-de Anfhrungszeichen ('') in typografische Anfhrungszeichen ( ) um.

    Es gibt sehr viele gute, kostenlose Code-Editoren. Falls Sie bereits einen besitzen, ver-wenden Sie diesen. Falls Sie noch keinen Code-Editor besitzen, hier meine Empfehlun-gen. Es handelt sich dabei nicht um die allermodernsten Editoren, aber sie sind kostenlos,einfach einzurichten und benutzerfreundlich.

    Windows: Notepad++ (http://notepadplusplus.org)

    Mac: TextWrangler (http://www.barebones.com/products/textwrangler)

    Falls Sie lieber in einer anderen spezifischen Programmierumgebung arbeiten, beispiels-weise mit Komodo Edit, Adobe Dreamweaver, Aptana Studio oder irgendeinem anderenCode-Editor, verwenden Sie diese.

    Zweitens bauen HTML5 und CSS auf frheren Versionen von HTML und CSS auf (und verbes-sern diese qualitativ):

    Vereinfachung: In bestimmten Bereichen werden ltere Funktionen (positiv ausgedrcktfr umstndliche, langsamere, problematische und unflexible Funktionen) in HTML5und CSS3 durch neuere Funktionen ersetzt. Beispielsweise ist es in HTML5 sehr viel ein-facher, Audio und Video einzubetten. (Weitere Informationen zur Einbettung von Audiound Video in HTML5 finden Sie in Kapitel 7.) Auerdem ist es mit CSS3 ganz einfach, In-haltsfelder zu drehen, zu vergrern und zu verkleinern, zu verschieben oder zu verdre-hen, ohne dass Hintergrundbilder neu positioniert werden mssen.

    Neue Funktionen: In anderen Bereichen erffnen HTML5 und CSS3 vllig neue Mglich-keiten. Beispielsweise ermglichen die Mobile-Tools von HTML5 es, App-hnliche, extremHandy-freundliche Seiten zu erstellen. Und CSS3-Effekte bieten Mglichkeiten, Transpa-renz zu definieren (so dass Elemente durch darber liegende Elemente durchscheinen),was sehr viel leistungsfhiger ist als die Opazitts-Tools aus dem frheren CSS.

    HTML5: Aufbau auf HTML-TechnikenIch kann es gar nicht oft genug sagen: HTML5 und CSS3 basieren auf den fortschrittlichstenund aktuellsten Techniken bei der Anwendung von HTML und CSS und erweitern diese.Warum ich so darauf fixiert bin? Weil die aktuellen Techniken fr das HTML- und CSS-Designd