Was ist progressive Verbesserung?

Question

Jeff erwähnte das Konzept der "Progressive Enhancement", wenn es darum ging, mit JQuery Stackoverflow zu schreiben.

Nach einem kurzen Google fand ich ein paar hochrangige Diskussionen darüber.

Kann jemand einen guten Platz empfehlen, um als Programmierer zu beginnen.

Speziell habe ich Web-Anwendungen in PHP geschrieben und möchte YUI verwenden, um die Seiten zu verbessern, die ich schreibe, aber viele von ihnen scheinen sehr JavaScript-basiert, mit den meisten der Esel Arbeit mit JavaScript. Für mich scheint das etwas übertrieben zu sein, da das Betrachten der Seite ohne Javascript wahrscheinlich den größten Teil davon zerstören wird.

Jeder hat ein paar gute Plätze, um mit dieser Idee zu beginnen, ich interessiere mich nicht wirklich für die Sprache.

Idealerweise würde ich gerne sehen, wie Sie zuerst das statische HTML erstellen und dann das YUI (oder welches Ajax-Framework) hinzufügen, damit Sie die Vorteile eines reicheren Clients erhalten?

Answer 1

Siehe auch Unobtrusive Javascript, die die Grundlage progressive Verbesserung ist gebaut wird.

Answer 2

Wie Sie gesagt haben

Für mich, die ein bisschen übertrieben scheint, da die Website ohne Javascript sehen wahrscheinlich die meisten davon brechen.

Dies ist keine progressive Verbesserung. Progressive Verbesserung ist, wenn die Website perfekt funktioniert ohne JavaScript oder CSS, und dann Hinzufügen (Layering) dieser zusätzlichen Technologien/Code, um die Benutzerfreundlichkeit und Funktionalität der Website zu erhöhen.

Das beste Beispiel, das ich geben kann, ist das Tag-Eingabefeld auf dieser Website. Wenn JavaScript deaktiviert ist, funktioniert es immer noch, sodass Sie Tags mit einem Leerzeichen getrennt eingeben können. Wenn JavaScript aktiviert ist, wird eine Dropdownliste mit Vorschlägen für vorherige Einträge angezeigt.

Dies ist eine progressive Verbesserung.

Answer 3

Ich schrieb eine tutorial auf Erstellen einer Umfrage, die progressive Enhancement bei NETTUTS verwendet. Die Idee ist, eine funktionale Seite mit XHTML/CSS und PHP zu erstellen und dann Formulare usw. mit Javascript abzufangen. (Ich habe JQuery benutzt).

Answer 4

Aus der anderen Richtung zu gehen wird manchmal als gradeful Degradation bezeichnet. Dies ist normalerweise erforderlich, wenn die Website zuerst mit den erweiterten Funktionen erstellt wird, die von den verschiedenen Technologien bereitgestellt werden, die dann so geändert werden, dass sie für Browser, bei denen diese Technologien nicht verfügbar sind, ordnungsgemäß degradiert werden.

Es ist auch Graceful Degradation bei der Gestaltung mit älteren Browsern (alten in der Internete Terminologie) zu arbeiten, wie IE 5.5, Netscape, etc ...

Meiner Meinung nach ist es viel mehr Arbeit zu anmutig die degradieren Anwendung. Progressive Verbesserung ist tendenziell viel effizienter; Manchmal besteht jedoch die Notwendigkeit, eine vorhandene App zu verwenden und sie in diesen fehlenden Umgebungen zugänglich zu machen.

Answer 5

Wenn Ihre Website immer noch mit deaktiviertem JavaScript funktioniert, kann alles, was Sie mit JavaScript hinzufügen, als progressive Erweiterung betrachtet werden.

Einige Leute denken vielleicht, dass dies unnötig ist, aber viele Leute durchsuchen mit Addons wie NoScript (oder, mit JavaScript einfach in ihren Browser-Einstellungen deaktiviert). Darüber hinaus können viele mobile Webbrowser JavaScript unterstützen oder auch nicht. Es ist also immer eine gute Idee, Ihre Website komplett mit und ohne JavaScript zu testen.

Answer 6

Das ist so ein wichtiges Konzept und es macht mich traurig, dass so wenige Web-Entwickler es verstehen.

Beginnen Sie mit dem Erstellen einer Site/Framework in Plain Old HTML - Strukturelemente, Links und Formulare. Dann füge etwas Stil hinzu und dann glänzendes Zeug (Ajax oder was hast du).

Es ist nicht sehr schwierig. Wie palehorse sagt, graziöse Degradierung ist mehr Arbeit.

Websites sollten in jedem Benutzer-Agent funktionieren, nicht gleich aussehen (nicht einmal aussehen, aber Ton, wenn Ihre Sehkraft beeinträchtigt), einfach funktionieren.

Answer 7

Progressive Enhancement:

1. Die einfache HTML/CSS-Website ist genial (voll funktionsfähig und benutzerfreundlich).
2. Das Hinzufügen von JavaScript definiert ein neues Level von genial.

Answer 8

Progressive Enhancement ist eine Entwicklung, Technik, die den Primat des semantischen HTML betont, dann zum Testen browser- Fähigkeit und bedingt „Schichtung“ auf JavaScript und/oder CSS-Erweiterungen für den Browser, die diese Erweiterungen nutzen können.

Einer der Schlüssel ist zu verstehen, dass wir testen für das, was der Browsertun kann, im Gegensatz Sniffing zu browser. Modernizr ist eine sehr beliebte Browser-Test-Suite.

Progressive-Enhancement ist inhärent (Abschnitt 508) zugänglich; es sieht vor, den Brief des Gesetzes und den Geist der Regel zu treffen.

Die Filament Gruppe schrieb das ausgezeichnete "Designing With Progressive Enhancement" Buch zu diesem Thema. (Ich bin nicht Mitglied der Filament Group, obwohl sie so verdammt intelligent sind, ich wünschte, ich wäre.)