HTML/Tutorials/Webprojekte/realisieren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Eine Entwicklungsumgebung schaffen

Es ist eine sehr schlechte Praxis, direkt auf einem öffentlich erreichbaren Server zu entwickeln. Am Anfang der Realisierungsphase steht deshalb die Einrichtung einer dem öffentlichen Webserver analogen Entwicklungsumgebung. Dazu müssen alle Komponenten, die später auf dem öffentlichen Webserver betrieben werden, auch auf dem lokalen System vorhanden sein. Dies betrifft namentlich:

  • Webserver
  • Serverseitige Sprachen
  • Datenbank

Solange man nur statische Webseiten erstellt, kann man darauf noch verzichten. Dennoch sollten Dateien auf dem lokalen System analog zur späteren Lage angelegt werden.

Es ist zudem ratsam, auf dem lokalen System nochmals zu unterscheiden:

  • Die zu entwickelnde Version
  • Die freigegebene Version, welche identisch zur öffentlichen Version ist.
  • Archivierte (ältere) Versionen

Zur Entwicklungsumgebung gehört auch geeignete Software.

  • Ein ausgereifter Editor
  • Alternative Testbrowser
  • Die erforderlichen Sprach-Interpreter, wobei höchstens Features der auf dem öffentlichen Server verfügbaren Sprachversion genutzt werden dürfen.
  • Für Multimediabearbeitungen braucht es ausgereifte Software.

In der Realisierungsphase hat man bereits Beschreibungen, Skizzen und Entwürfe seitens des Auftraggebers als Leitfaden vorliegen. Diese müssen oftmals verfeinert werden. Hierbei können spezielle Anwendungen helfen, die visuelle Umsetzung und die auf Interaktion basierende Abfolge zu planen.

  • Mockup- bzw. Wireframe-Software

Unter Hilfsmittel finden Sie ein paar Vorschläge für Software und Online-Tools, die gerade im erweiterten Webdesign oft Anwendung findet.

In der Realisierungsphase werden zudem sehr viele kleine Testobjekte erstellt. Dazu muss man sich eine strukturierte Spielwiese erstellen, die von der zu entwickelnden Website separiert ist.

Dokumentation spielt eine große Rolle. Dokumentationen dienen dem Ersteller und Betreiber. Dokumentationen sind selbst gute Beispieltexte, an welchen die Struktur einer Website und ihre Formatierung entwickelt werden kann.

[Bearbeiten] Entwurfsphase

[Bearbeiten] Kategorisierung

Die Entwurfsphase beginnt damit, dass bestehende Inhalte analysiert werden und deren Bestandteile typisiert und katalogisiert werden zu Objekten. Dadurch erhält man auch bereits einen Namensraum von Klassennamen, die später in HTML und CSS sinnvoll verwendet werden können.

Objekte können einzelne Elemente sein oder andere Elemente beinhalten. Hier gilt es auch, die Abhängigkeit der Objekte zueinander zu erfassen.

Es gibt verschiedene Kategorien der Objektzuordnung.

Welche Rolle spielt ein Daten-Objekt im Projekt?

  • Individuelle Daten, z.B. den Hauptinhalt einer Seite
  • Global konstante Daten, z.B. das Logo einer Website
  • Variable Daten, z.B. den Benutzernamen eines angemeldeten Users

Welchem Elementtyp innerhalb von HTML kann ein Objekt zugewiesen werden?

  • Block-Element
  • Inline-Element

Welche Individualität pro Seite besitzt das Objekt?

Sie müssen sich bei den Objekten auf einen Namen festlegen. Geben Sie einen informativen Namen, der Aufschluss über den Datentyp gibt. Achten Sie dabei auf Konsistenz bei der Namensvergabe.

Beispiel
Objekt Name Attribut-Typ Element-Typ Rolle
Footnote-Collection footnote-collection id block Fasst alle Fußnoten zusammen
Author author class inline (span) Zeichnet einen Autorennamen aus

Anfänger machen oft den Fehler, dass sie Objekte nach irgendeinem Darstellungsprinzip benennen. Ein Name wie left oder red hat aber für einen Screenreader keine Bedeutung und sagt nichts über den Inhalt aus.

[Bearbeiten] Erstellung von Entwürfen

Es ist wichtig, dass man an plausiblen Daten seine Entwürfe realisiert.

In der Entwurfsphase spielt eine Spielwiese eine große Rolle. Man entwickelt isolierte Objekte, muss aber auch das Zusammenspiel der Objekte in Betracht ziehen.

Dies führt zu Gestaltungsschemen. Die Objekte im Klassenkatalog kann man zum Beispiel auch Farbklassen zuordnen und dann Farbschemata erstellen. Weitere Schemata können für Rahmen oder Schriftstil erstellt werden.

Im ganzen Vorgang braucht es dann auch eine generelle Entscheidung zum logischen Fluss der Inhalte und zum visuellen Layout.

[Bearbeiten] Hilfsmittel

Die Hilfsmittel zur Realisierung sind so traditionell wie modern.

Mit Papier und Bleistift können Sie einfach und schnell Layouts skizzieren. Mit einer zusätzlichen Schere können Sie Schnipsel kreieren und die logische Abfolge der Userinteraktion in Navigation und Formularen nachspielen.

Für umfangreichere Projekte lohnt sich die Arbeit mit sogenannter Wireframe- oder Mockup-Software. Sie erstellen dabei grafische Layouts von Seiten und setzen typische Objekte ein. Diese Planungsformate eignen sich auch gut, um Zwischenergebnisse ihrer Arbeit dem Auftraggeber vorzulegen.

Grafikprogramme spielen für den Entwickler eine große Rolle. Oft sind ganze Gruppen von Icons und Symbolen zu erstellen. Er lohnt sich, hierbei eine übergreifende Strategie zu wählen, so etwa Farbpaletten zu erstellen oder bestimmte Raster zu definieren. Oftmals will man später die einzelnen Grafikobjekte gar nicht einzeln vom Server ausliefern. Sogenannte Spritemaps beinhalten alle Grafikelemente z.B. einer GUI, deren Ausschnitte via CSS für bestimmte Bereiche dann verwendet wird.

[Bearbeiten] Anwendungsvorgänge planen

Sobald Sie Anwendereingaben verarbeiten, spielt eine geplante Abfolge eine große Rolle. Hier können Sie sich ein Flussdiagramm der möglichen Ablaufswege erstellen. Mit so einfachen Hilfsmitteln wie Papier, Bleistift und Schere können Sie diese idealen Abläufe abspielen.

Beispiel: Formailer-Bedienung
┌───────────────────┐ │ Link zum Formular │ └───────────────────┘ ▼ ┌───────────────────┐ │ Benutzer- │ ┌────────────────────┐ │ Formular │◄───│ Eingaben │◄────┐ │ Zurück zum Kontext │ └───────────────────┘ │vorbelegen │ │ └────────────────────┘ ▼ │ ┌───────────────────┐ │ │ Bearbeiten │ │ └───────────────────┘ │ ├───────────────────┐ │ ▼ ▼ │ ┌───────────────────┐┌───────────────────┐ │ │ Aktion Senden ││ Aktion Vorschau │─┤ └───────────────────┘└───────────────────┘ │ ▼ │ ┌───────────────────┐ │ │ Validieren │ │ └───────────────────┘ │ ├───────────────────┐ │ ▼ ▼ │ ┌───────────────────┐┌───────────────────┐ │ │ Akzeptieren ││ Vorschau │─┘ └───────────────────┘└───────────────────┘ ┌───────────────────┐ │ Archiv-Ausgabe │ └───────────────────┘
Im obigen Flussdiagramm wird skizziert, wie ein Anwender immer die Möglichkeit einer zusätzlichen Vorschau-Auswahl erhalten soll. Er erhält diese solange, wie die Angaben nicht den Erfordernissen entsprechen.

[Bearbeiten] 1. Test- und Beurteilungsphase

In der Test und Beurteilungsphase müssen die Entwicklungsbeispiele alle zutreffenden Testebenen durchlaufen.

Beispielseiten mit plausiblen Daten werden Testpersonen zum Test und zur Beurteilung vorgelegt. Bei Vorgängen, die Benutzereingaben erlauben, ist die Benutzerfreundlichkeit zu beurteilen.

Tests sollten bereits in Frühphasen an kleinen Elementen vorgenommen werden. So etwa betreffs der Browserkompatibilität, um zu Modellen zu finden, die dann nur noch leicht angepasst werden müssen.

Gerade die Browserkompatibilität kennt viele Unsicherheiten. Welche Browser sollen unterstützt werden? Die Antwort beruht hier sicher in der Wichtigkeit einer Website und innerhalb dieser der Wichtigkeit einer bestimmten Funktion. Navigationseinheiten sind zum Beispiel essentiell wichtige Funktionen. Wer ein Dropdown-Menu einsetzt, sollte gerade dieses für möglichst viele Konfigurationen zugänglich gestalten.

Testorganisationen wie http://browsershots.org/ nehmen Ihnen zwar die Beurteilung statischer Inhalte ab. Gerade aber wenn Userinteraktion gefordert ist, kommen Sie nicht um persönliche Tests herum.

[Bearbeiten] Arbeit mit realen Daten

[Bearbeiten] 2. Test- und Beurteilungsphase

[Bearbeiten] Freigabephase

Die Freigabephase beschreibt den Zustand, in welchem ein Projekt alle geplanten Komponenten beinhaltet und diese auch kontrolliert und geprüft wurden. In dieser Phase fallen folgende Arbeiten an:

  • Für alle verwendeten fremden Ressourcen müssen Lizenzen eingeholt werden.
  • Das Angebot wird auf dem Produktionsserver für den allgemeinen öffentlichen Zugriff freigegeben.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML