Grundlagen/Webprojekte/planen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
leicht
Schwierigkeitsgrad
20min
Vorausgesetztes Wissen
keine!


Zielgruppe von SELFHTML sind Amateure und Dilettanten[1], die das gerne, aber eben nicht professionell machen. Da Begriffe wie „amateurhaft“ oft abwertend im Sinne von „nicht auf professionellem Niveau“ gebraucht werden, wird zur Beschreibung einer zwar als Amateur ausgeübten, aber dennoch als professionell anzusehenden Leistung häufig der Begriff der „Semi-Professionalität“ verwendet.

Dabei soll ein Web-Projekt aber nicht nur ein Zeitvertreib, sondern eine zeitlich beschränkte Aufgabe sein, die irgendwann einmal auch vorzeigbar und fertig werden soll. Deshalb ist es wichtig vorher zu überlegen und dann genau zu planen und entwerfen, bevor es (im nächsten Kapitel) an das eigentliche Entwickeln geht.

Die ursprüngliche Fassung aus dem Jahre 2001 hatte auch immer im Blick, dies später auch als Beruf zu ergreifen.[2]

Vorüberlegungen

Die Motive für den Wunsch einer eigenen Webpräsenz können sehr verschieden sein. Aus den Motiven folgern sehr verschiedene Anforderungen nach einem planvollen Vorgehen.

  • Herr Privatmann möchte auf einer personalisierten Web-Visitenkarte sich, seine Hobbies und ein paar bahnbrechende Entdeckungen mitteilen. Er begreift seine Site als ein offenes Sammelsurium. Er möchte jedoch eine gute Strukturierung.
  • Kunst-Fotograph Klickmann betreibt ein eigenes Fotostudio. Er möchte mit einem Portfolio sowohl seine Kunst darstellen, als auch sein Fotostudio präsentieren. Er erhofft sich dadurch vor allem auch neue Kundschaft.
  • Familie Wohnlich möchten ihre Ferienwohnung im idyllischen Urlaubien vermieten. Sie möchten gerne diese Wohnung sowie die Umgebung und weitere touristische Attraktionen ihrer Region darstellen. Es ist wichtig, dass Buchungen online geschehen können.
  • Der Junior-Nerd hat eine Idee für ein sinnvolles Tool für das Web. Er findet dieses Tool so genial, dass er eine Website nur diesem Tool schenken möchte. Er will es zum freien Download anbieten und gleichzeitig ein Forum zu diesem Tool betreiben.
  • Die Gruppe Inklusive möchte eine neue Programmiersprache dokumentieren. Alle Mitglieder dieser Gruppe sollen diese Site betreuen können. Die Site wird geprägt sein durch permanente Erweiterungen. Es soll sich eine Community um diese Site und die Sprache entwickeln.

Die obige Liste stellt verschiedene Motive für eine Website dar. Jedes dieser Beispiele erfordert verschiedene Pläne, Richtlinien und Erfordernisse. In zwei Fällen haben wir es mit einer Gruppe zu tun, was bedeutet, dass mehrere Personen in die aktive Planung einzubeziehen sind.

Dieser Artikel will Ihnen keine Ordnung aufzwingen, sondern Ihnen Punkte nahe legen, welche Sie in Ihrer Planung berücksichtigen sollten.

Ist das Internet der richtige Ort?

Webtechnologien werden immer ausgefeilter. Dies lässt den Eindruck aufkommen, das Internet sei per se das richtige Medium. Gerade für private Homepages sollte man sich aber überlegen, welche Informationen man ins Internet stellen will.

Wer sein teures Hobby frei zugänglich ins Internet stellt, gibt dadurch dem Finanzamt Einsicht. Wer über seine Krankheiten und Therapien schreibt, mag eine ehrenwerte Absicht verfolgen. Er liefert Daten, die potentielle Arbeitgeber mit Interesse wahrnehmen.

eigene HTML-Seiten oder ein CMS?

Für eine Webpräsenz gibt es eine Reihe von Technologien. Einigen reicht bereits ein Steckbrief in Sozialen Medien wie Facebook oder Instagram, andere wollen bewusst etwas Eigenes entwickeln.

Für statische Webseiten kommen Sie an HTML und CSS nicht vorbei. Sie stellen heute die de facto Basis dar. Wenn Sie diese zwei Technologien nicht ausreichend beherrschen, sollten Sie zögern, weitere Technologien bereits anzuwenden.

Umfangreichere Projekte bestehen nicht aus festen (statischen) Webseiten, sondern können per Software erzeugte (also dynamische) Inhalte haben, so dass z. B. die Navigation und die Seiten aktuell aus Datenbankinhalten erzeugt wird. Die Software kann im Browser ablaufen (JavaScript) und auf dem Webserver (Serverscripte wie PHP, Perl, JS, JSP, ASP, node.js).

Statt diese Technologien zu erlernen, können Sie auch evaluieren, ob es bestehende Lösungen in Form eines CMS oder JS-Libraries für Ihre Aufgabe gibt.

Für die grundsätzliche Vorgehensweise bei der Planung und Entwicklung eines Webprojekts ist es erstmal irrelevant, ob die Seite statisch oder dynamisch ist. Dynamische Seiten haben mehr Komplexität, aber die Aspekte der Artikelserie sind grundlegender:

Welche Normen müssen Sie erfüllen?

Das Internet ist kein rechtsfreier Raum. Sobald Sie Inhalte öffentlich präsentieren, gelten verschiedene Rechtsgrundlagen:

  • Sie sind als Betreiber verantwortlich für die Inhalte und haben eine Impressumspflicht
  • Manche Inhalte sind strafbar nach bestimmten Landesgesetzen oder erfordern eine Zugangskontrolle.
  • Außerhalb normaler Zitate müssen Sie für die Verwendung von Texten und Bildern das Urheberrecht beachten

Im Webdesign gelten zudem eine Reihe von Konventionen.

  • Das HTML-Markup sollte valide sein. Hierbei geht es aber nicht mehr darum, dass Browser bei fehlerhaftem HTML abstürzen, sondern dass Webseiten …
  • für alle zugänglich und erreichbar sein sollen. Dabei geht es nicht mehr um verschiedene Browser, sondern um eine Vielzahl von Endgeräten vom Mobiltelefon, das eine Seite vorliest, weil man gerade Auto fährt bis zum großen Monitor mit Touch-Bedienung
  • Trotz eines immer besseren Mobilfunknetzes gilt immer noch das Prinzip der Vermeidung von unnötigem Datentransfer. Schlanke Seiten laden schneller und sind benutzerfreundlicher!
  • Schutz sensibler Daten auf der Transportschicht durch HTTPS & TLS


Welche Ressourcen stehen zur Verfügung?

„Der Neffe meines Schwagers kennt sich mit Computern aus und könnte uns schnell und kostengünstig eine Webseite für unsere ... programmieren.“ Andererseits verlangen professionelle IT-Firmen auch für kleinere Webseiten vierstellige Beträge.

Eine Webpräsenz gibt es nicht kostenlos. Sie können den finanziellen Einsatz durch Eigenleistung reduzieren, müssen aber abwägen, wie viel Manpower und Zeit (und über welchen Zeitraum hinweg) Sie investieren können.

Was wollen Sie erreichen?

Was können Sie schon?

Wie viel Zeit können Sie in Arbeit und den Erwerb neuer Technologien investieren?

Eine Webpräsenz ist sehr oft eine Baustelle auf Lebenszeit. Entweder müssen Inhalte aktualisiert werden, oder die fortschreitende Webentwicklung weckt durch neue Möglichkeiten die Lust nach Veränderungen.

Wenn Sie feststellen, dass Ihre Ressourcen Ihre Wünsche nicht erfüllen, überdenken Sie Ihr Projekt und teilen Sie es in verschiedene Teile auf.

  • Die unverzichtbare Basis, welche mit wenigen Technologien umgesetzt werden kann.
  • Die optionalen Erweiterungen, welche Sie zu einem späteren Zeitpunkt hinzufügen.

Wer soll später das Projekt weiter betreuen?

Jedes Projekt stellt eine Verpflichtung dar auf permanente Betreuung.

  • Kontrolle der öffentlichen Daten auf dem Server
  • Aktualisierung der Daten (z.B. Mailadressen)
  • Änderung, Aktualisierung oder Ergänzung von Artikeln
  • Betreuung der durch die Website offerierten Interaktionsmöglichkeiten

Ein Knackpunkt der Webentwicklung ist die Frage, ob die späteren Betreuer einer Website diese Aufgabe übernehmen können. Entscheidend dazu sind:

  • Angemessene Instrumente (Ein CMS ist besser)
  • Dokumentation, Hilfe, Beispiele und Vorlagen

Behalten Sie immer im Hinterkopf, für welche Betreuer Sie eine Website entwickeln. Wenn Sie eine Software für einen Blog, ein CMS oder Forum evaluieren, beziehen Sie die Betreuer in die Evaluation mit ein.

Zwingen Sie sich in der Entwicklungsphase zur fortlaufenden Dokumentation.

Machen Sie sich einen Plan

Information: Terminplan

Ein Terminplan wird besonders dann wichtig, wenn Sie mit der Arbeit Geld verdienen wollen. Der Terminplan hilft Ihnen, den Aufwand einzuschätzen und Reserven einzuplanen. Ein Plan ist aber ebenso wichtig für Ihre Kunden. Er enthält nicht nur einen zeitlichen Rahmen, sondern auch eine ToDo-Liste, die den Kunden daran erinnert, dass Entscheidungen geordnet gefällt werden müssen.

Ein Projekt verläuft in verschiedenen Phasen:

  1. Konzeptphase
    Das Thema evaluieren und die Techniken sondieren
  2. Entwurfsphase
  3. Entwicklungsphase Das Projekt realisieren, testen und freigeben
  4. Das Projekt veröffentlichen und betreiben

Dabei sind Aspekte der Publikation zeitlich bereits in die Planungsphase vorzuziehen. Zum Beispiel müssen Serverangebote und Domainnamen schon früh evaluiert werden.

Konzeptphase

Sobald die Vorüberlegungen abgeschlossen sind, können Sie ein Konzept erstellen:

  1. inhaltliche Struktur aufnehmen und gliedern
  2. Single-Page-Webseite oder klassische Struktur mit Unterseiten
  3. statische Seiten oder ein CMS

Entwurfsphase

Ein gelungenes Projekt erkennt man nicht nur an seinen Inhalten, sondern ebenso an seinem Erscheinungsbild. Häufig gibt es schon ein vorhandenes Logo und einige Farben.


Screenshot einer komplementären Palette von coolors.co
Screenshot einer komplementären Palette von Coolors.co

Ausgehend vom Vorhandenen können Sie Farbklassen und daraus eine Farbpalette erstellen.

Hauptartikel: Grafik/Farbkonzept
Datei:SVG-Icons.png
SVG-Icons, die mit custom properties entsprechend formatiert wurden

Oft sind ganze Gruppen von Icons und Symbolen zu erstellen. Er lohnt sich, hierbei eine übergreifende Strategie zu wählen: Sowohl Icon-Fonts als auch SVG-Icons können per CSS individuelle Farben aus der gewählten Farbpalette erhalten.

Hauptartikel: SVG/Tutorials/Icons

Auch für die Typografie können Sie Beispiele entwerfen, die dann mit typischen Rahmen oder anderen Gestaltungselementen zu einem Entwurf werden.

Information: 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[3]- oder Mockup-Software.[4][5][6] 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.


In einer Spielwiese können isolierte Objekte entwickelt, aber auch das Zusammenspiel der Objekte ausprobiert werden.

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.

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.

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.

Erst wenn Sie mit dem Webdesign-Entwurf vollständig zufrieden sind, beginnen die Webdesigner mit der Entwicklungsphase.


Weblinks

  1. Wikipedia: Dilettant
  2. In meiner Studienzeit gab es 1999/2000 zwei Studenten, die noch vor dem Referendariat Webdesigner wurden!
  3. Wikipedia: wireframe
    Ein Wireframe oder Drahtmodell gibt einen ersten Eindruck vom Aussehen; anstelle der Farben gibt es nur eine Strichzeichnung
  4. webschmoeker: 7 kostenlose Mockup-Tools kurz vorgestellt. Bisher benutze ich Nummer 3!
  5. t3n.de: Wireframe bis Prototype: Die besten 5 Tools für dein nächstes Webdesign im Vergleich
  6. creativebloq: The 18 best wireframe tools