Grundlagen/Webprojekte/planen
Text-Info
- leicht
- 20min
- 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]
Inhaltsverzeichnis
Vorüberlegungen
Ist das Internet der richtige Ort?
Gerade für private Homepages sollte man sich ü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 aber 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 überlegen, bestehende Lösungen in Form eines CMS zu verwenden.
Für die grundsätzliche Vorgehensweise bei der Planung und Entwicklung eines Webprojekts ist es erstmal irrelevant, ob die Seite statisch oder dynamisch ist.
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 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.
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
Machen Sie sich einen Plan
Information: Terminplan
Ein Projekt verläuft in verschiedenen Phasen:
- Konzeptphase
Das Thema evaluieren und die Techniken sondieren - Entwurfsphase
- Entwicklungsphase Das Projekt realisieren, testen und freigeben
- 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:
- inhaltliche Struktur aufnehmen und gliedern
- Single-Page-Webseite oder klassische Struktur mit Unterseiten
- 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.
Ausgehend vom Vorhandenen können Sie Farbklassen und daraus eine Farbpalette erstellen.
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.
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.
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.
Erst wenn Sie mit dem Webdesign-Entwurf vollständig zufrieden sind, beginnen die Webdesigner mit der Entwicklungsphase.
Weblinks
- ↑ Wikipedia: Dilettant
- ↑ In meiner Studienzeit gab es 1999/2000 zwei Studenten, die noch vor dem Referendariat Webdesigner wurden!
- ↑ Wikipedia: wireframe
Ein Wireframe oder Drahtmodell gibt einen ersten Eindruck vom Aussehen; anstelle der Farben gibt es nur eine Strichzeichnung - ↑ webschmoeker: 7 kostenlose Mockup-Tools kurz vorgestellt. Bisher benutze ich Nummer 3!
- ↑ t3n.de: Wireframe bis Prototype: Die besten 5 Tools für dein nächstes Webdesign im Vergleich
- ↑ creativebloq: The 18 best wireframe tools
