: Lea Verou
: CSS Secrets Typische Webdesign-Probleme klug gelöst
: O'Reilly Verlag
: 9783960100584
: 1
: CHF 32.10
:
: Informatik, EDV
: German
: 400
: Wasserzeichen
: PC/MAC/eReader/Tablet
: PDF/ePUB
Die international bekannte CSS-Expertin Lea Verou stellt in CSS Secrets 47 neue und inspirierende Techniken und Tipps vor, mit denen Sie als CSS-Entwickler typische Webdesign-Probleme lösen können. Auch wenn Designprinzipien und UX-Verbesserungen beschrieben werden, geht es in diesem Buch in erster Linie darum, Webdesign-Probleme mit Code zu lösen. Über die konkreten Tipps hinaus profitieren Sie vor allem von Leas ausgeprägtem analytischem Talent. Durch ein Studium der verschiedensten Techniken werden Sie Ihre Fähigkeit, wartbaren,?flexiblen und standardkonformen DRY-Code ('Don't Repeat Yourself') zu schreiben, entscheidend verbessern. Lea Verou - als Vortragende auf mehr als 60 Webkonferenzen international bekannt - präsentiert in diesem Workshop herausragendes CSS-Know-how. Das Buch ist für CSS-Entwickler mit guten und fortgeschrittenen Kenntnissen geeignet und deckt folgende Themen ab: Hintergründe& Rahmen - Formen - Visuelle Effekte - Typografie - User Experience - Struktur& Layout - Übergänge& Animationen

Lea Verou ist Invited Expert der CSS-Arbeitsgruppe des W3C - des Gremiums, das unter anderem die Sprache CSS entwickelt. Zuvor hat Lea Verou als Developer Advocate beim W3C gearbeitet. Lea führt Forschungsprojekte im Bereich Human Interaction am Massachusetts Institute of Technology (MIT) durch. Außerdem bloggt sie, ist auf zahlreichen internationalen Konferenzen als Vortragende präsent und unterstützt andere Entwickler, indem sie zu einigen bekannten Open-Source-Projekten ihren Teil Code beisteuert.

1 Einführung


Webstandards: Freund oder Feind?


Der Standardisierungsprozess

Entgegen einer weit verbreiteten Meinung»macht« dasW3C die Webstandards nicht. Stattdessen dient das W3C als Forum für interessierte Parteien, um die Standards in verschiedenen Arbeitsgruppen (»Working Groups«) weiterzuentwickeln. Natürlich ist das W3C nicht nur Beobachter: Es legt die Grundregeln fest und überwacht den Standardisierungsprozess. Jedochwerden die Spezifikationen (fast) nicht von W3C-Beschäftigten geschrieben.

Abbildung 1.1
»Webstandards sind wie Würstchen: Man sieht besser nicht dabei zu, wie sie hergestellt werden.« – Anonymes Mitglied der W3C-Arbeitsgruppe

Spezifikationen stammen in der Regel von Mitgliedern der CSS-Working Group (kurz: CSS WG). Beim Schreiben dieses Buchs bestand sie aus 98 Mitgliedern, die sich wie folgt zusammensetzen:

  • 86 Vertreter von Unternehmensmitgliedern (88%)

  • 7 Eingeladene Experten, zu denen auch ich gehöre (7%)

  • 5 W3C-Beschäftigte (5%)

Wie Sie sehen, besteht die Arbeitsgruppe größtenteils aus Vertretern derW3C-Unternehmensmitglieder (88%). Hierzu gehören Browserhersteller, Betreiber beliebter Websites, Forschungseinrichtungen, allgemeine Technologieunternehmen etc., die ein besonderes Interesse an der Entwicklung der Webstandards haben. Dabei stellen die jährlichen Mitgliedsbeiträge die Haupteinnahmequelle des W3C dar. Hierdurch ist es dem Konsortium im Gegensatz zu anderen Standardisierungsorganisationen, die dafür Geld nehmen, überhaupt erst möglich, seine Spezifikationenkostenlos undoffen zur Verfügung zu stellen.

Abbildung 1.2
Die Zusammensetzung der CSS-Arbeitsgruppe:
Unternehmensmitglieder
Eingeladene Experten
W3C-Beschäftigte

Eingeladene Experten sind Webentwickler, die man gebeten hat, am Standardisierungsprozess mitzuwirken. Voraussetzung ist eine dauerhafte Bereitschaft zur Mitarbeit und ein technischer Hintergrund, der ausreicht, um sich an den Diskussionen zu beteiligen.

Letzlich gibt es tatsächlich einigeW3C-Beschäftigte, die direkt für das Konsortium arbeiten und die Kommunikation zwischen der Arbeitsgruppe und dem W3C ermöglichen.

Es ist ein weit verbreiteter Irrtum unter Webentwicklern, dass das W3C die Standards von oben herab diktiert und die armen Browser diese dann befolgen müssen, ob sie wollen oder nicht. Die Wahrheit ist komplett anders: Gerade dieBrowserhersteller haben ein großes Wort dabei mitzureden, was Teil der Standards wird und was nicht, wie die oben gezeigten Zahlen beweisen.

Und obwohl einige Leute das glauben, werden die Standards auchnicht im luftleeren Raum hinter verschlossenen Türen festgelegt. Vielmehr ist der CSS-Arbeitsgruppe Transparenz sehr wichtig, und sämtliche Kommunikationsvorgänge sind öffentlich nachvollziehbar. Überprüfung und Teilnahme sind willkommen:

  • Die meisten Diskussionen finden auf derMailingliste (http://lists.w3.org/Archives/Public/www-style) statt. www-style verfügt über ein öffentlich zugängliches Archiv und steht jedem zur Teilnahme offen.

  • Zusätzlich gibt es einewöchentliche Telefonkonferenz, die jeweils eine Stunde dauert. Die Konferenz selbst ist nur für W3C-Mitglieder zugänglich, wird aber öffentlich und in Echtzeit auf dem#css-Kanal des IRC-Servers desW3C (http://irc.w3.org/) protokolliert. Das Protokoll wird danach bereinigt und ein paar Tage später auf der Mailingliste veröffentlicht.

  • Außerdem gibt es vierteljährlichepersönliche Treffen, die auf die gleiche Art prokolliert werden wie die Telefonkonferenzen. Diese Treffen stehen nach Genehmigung durch dieVorsitzenden der Arbeitsgruppe ebenfalls zurEinsicht (Überprüfung) offen.

Alle diese Dinge gehören zum W3C-Prozess und dienen der Entscheidungsfindung. Diejenigen, die diese Entscheidungen schließlich schriftlich fixieren, sind dieSpezifikations-Redakteure (Spec Editors). Das können entweder W3C-Mitarbeiter, Browserentwickler, eingeladene Experten oder Angestellte der Unternehmensmitglieder sein. Letztere sind meist Vollzeitmitarbeiter, die von ihren Unternehmen bezahlt werden, um die Standards für das Gemeinwohl voranzubringen.

Jede Spezifikation durchläuft auf dem Weg von der ersten Idee bis zur Reife eine Reihe verschiedener Stadien:

Wollen Sie mehr erfahren? Elika Etemad (fantasai) hat eine Reihe sehr guter Artikel über die Arbeitsweise der CSS-Arbeitsgruppe geschrieben (http://fantasai.inkedblade.net/weblog/2011/inside-csswg). Äußerst empfehlenswert.

  1. Editor’s Draft (ED, Redakteursentwurf): Der erste Schritt einer Spezifikation ist manchmal einfach nur eine Ideensammlung eines Spec Editors. Für diesen Schritt gibt es keinerlei Anforderungen, aber auch keine Garantie, dass die Ideen von der Arbeitsgruppe akzeptiert werden. Trotzdem ist dies die erste Phase jeder Revision: Alle Änderungen werden zunächst in einem ED vorgenommen und dann veröffentlicht.

  2. First Public Working Draft (FPWD, erster öffentlicher Arbeitsentwurf): Die erste veröffentlichte Version einer Spezifikation, nachdem die Arbeitsgruppe der Meinung ist, dass sie bereit für öffentliche Rückmeldungen ist.

  3. Working Draft (WD, Arbeitsentwurf): Auf den ersten Arbeitsentwurf folgen eine Menge weitere, jeder – unter Berücksichtigung des Feedbacks von Arbeitsgruppe und Öffentlichkeit – ein wenig besser. Oftmals beginnen die ersten Implementierungen in dieser Phase, obwohl experimentelle Implementierungen manchmal auch schon in einem früheren Stadium einer Spezifikation vorgenommen werden.

  4. Candidate Recommendation (CR, Empfehlungskandidat): Spezifikationen in diesem Stadium gelten als recht stabil. Jetzt ist die Zeit für Implementierungen und Tests gekommen. Eine Spezifkation kann das nächste Stadium nur erreichen, wenn es eine komplette Testsuite und mindestens zwei unabhängige Implementierungen gibt.

  5. Proposed Recommendation (PR, Empfehlungsvor

Inhaltsverzeichnis9
Vorwort15
Einleitung17
Danksagungen19
Making of …22
Über dieses Buch24
Kapitel 1: Einführung35
Webstandards: Freund oder Feind?36
Tipps zum Schreiben von CSS44
Kapitel 2: Hintergründe44
6144
Durchscheinende Rahmen62
Mehrfache Rahmen66
Flexible Hintergrundpositionierung70
Innen abgerundete Ecken74
Gestreifte Hintergründe78
Komplexe Hintergrundmuster88
(Pseudo-)zufällige Hintergrundmuster100
Durchgehende Bildrahmen106
Kapitel 3: Formen113
Flexible Ellipsen114
Parallelogramme122
Rauten128
Abgeschnittene Ecken134
Trapezförmige Tabs148
Einfache Tortendiagramme154
Kapitel 4: Visuelle Effekte171
Einseitige Schatten172
Unregelmäßige Schattenwürfe176
Farbtönungen180
Milchglas- Effekt188
Eselsohren- Effekt (abgeknickte Ecken)198
Kapitel 5: Typografie209
Silbentrennung210
Zeilenumbrüche einfügen214
Abwechselnd gestreifte Textzeilen220
Die Tabulatorweite anpassen224
Ligaturen226
Schönere Ampersand- Zeichen230
Eigene Unterstreichungen238
Realistische Text-Effekte244
Kreisförmiger Text256
Kapitel 6: User Experience263
Den richtigen Cursor wählen264
Den anklickbaren Bereich vergrößern268
Eigenes Design für Checkboxen272
Ablenkung vermeiden durch Abblenden von Elementen278
Ablenkung durch Weichzeichnung vermeiden284
Hinweise auf Scrollbarkeit288
Interaktive Bildvergleiche294
Kapitel 7: Struktur294
305294
Intrinsische Größenanpassung306
Spaltenbreiten in Tabellen zähmen310
Stildefinitionen anhand der Anzahl der Geschwisterelemente314
Anpassungsfähiger Hintergrund, fester Inhalt322
Vertikale Zentrierung326
Fest verankerte Footer334
Kapitel 8: Übergänge334
339334
Elastische Übergänge340
Schrittweise Animationen354
Blinkender Text360
Animierte Texteingabe366
Zustände von Elementen sanft animieren374
Animation entlang eines kreisförmigen Pfads380
Index393
www.oreilly.de0