Planung einer Website

Hallo zusammen,

ich unterrichte gerade in meinem Informatikkurs in der Schule die Grundlagen von HTML und CSS.

Da meine Schüler von Anfang an lernen sollen, dass zum „Programmieren“ (ich weiss, dass HTML und CSS kein Programmieren sind), immer eine Planung auf dem Papier gehört, will ich sie auch gleich bei einer Website eine Sidemap vorab planen lassen.

Gibt es hier irgendwelche Standards, wie z.B. ER-Diagramme bei Datenbanken. Was würdet ihr mir sonst empfehlen?

VLG und danke schonmal
Micha

Hallo,

nein, Standards gibt es da nicht, jedenfalls nicht in dem Sinne wie z.B. Modelle in der Softwareentwicklung. Ich nehme an, du meinst mit Sitemap (nicht Sidemap) zeichnen lassen eine Abbildung der Seiten und ihrer hierarchischen Zuordnung untereinander. In dem Fall haben sich solche Sachen wie diese hier bewährt:

http://www.nicecity.de/english/images/sitemap_e.gif
http://www.mediaevum.de/images/gr_sitemap.gif
http://www.k-t-w.de/img/sitemap.gif

Das lässt sich, wenn man als Anfangsbeispiel eine recht übersichtliche Webseite wählt, auch gut visualisieren, indem man die Teilnehmer die Titel der einzelnen Seiten und Unterseiten auf Karteikarten schreiben lässt und diese dann, z.B. auf einer Moderationswand, aufpinnen lässt - natürlich schon in der richtigen, hierarchischen Reihenfolge. Das erzeugt dann in der Regel auch Diskussionen, so dass am Ende eine sinnvolle und möglichst klare Struktur herauskommen kann - was ja eine wichtige Grundlage für gutes Webdesign ist. Diese Struktur kann man dann in ein Sitemap übernehmen, dafür gibts bestimmt auch irgendwelche Programme, aber man kann’s auch abzeichnen, mit Powerpoint basteln lassen oder sonst was… :wink:

Grüße

Ich finde das jetzt ganz „lustig“, weil ich vor kurzem gefragt habe, was Wireframes sind und eine Erklärung bekommen habe, dass dies Programme sind, mit denen man Webseitenaufbau „skizzieren“ kann, ohne dass es als fertige Webseite angesehen werden kann.
Mir wurde auch eine URL „an die Hand gegeben“, auf der man schauen kann, welche Programme es gibt und was sie können.
Zu finden:

http://t3n.de/magazin/funf-mockup-tools-kurz-vorgest…

Vielleicht ist das ganze ja etwas für Sie.

LG

Michael Vogl

Hallo,

das geht aber schon einen Schritt weiter :wink: Ich habe den angesprochenen Artikel jetzt nicht gelesen, aber der grundsätzliche Unterschied ist der, dass bei der Konzeption der Struktur (die hier als Sitemap abgebildet werden soll) wirklich nur ein Gerüst des Inhalts angelegt wird. Welche Elemente gibt es, in welcher hierarchischen Verbindung stehen sie untereinander. Die Wireframes sind eine Art Vor-Layout, ein Konzept der Art und Weise, wie diese Inhalte später auf der Seite angeordnet werden sollen. Ganz grob gesagt. So gesehen ist das ein weiterer Schritt, wenn man die Inhalte erst einmal strukturiert hat. Da es hier aber kein standardisiertes Vorgehen gibt, konzipiert der eine Struktur und Layout gleichzeitig und benutzt dafür Hilfsmittel, der nächste macht alles nacheinander und nur auf Papier, und so weiter. Das ist von vielen Faktoren abhängig.

Grüße

Danke, das ist, was ich wissen wollte. Visualisierung mit Karteikarten ist eine gute Idee zur Planung (auch wenn Moderationswände in Schulen eine schöne Utopie sind). Aber mit Magneten und Tafel wird es auch funktionieren *g*.

Mit welchem Programm hast Du denn Deine Sitemaps erstellt? Sehen gut aus.

Danke Micha

Öh, das sind nicht meine - das sind Bilder, die ich auf die Schnelle beim Googeln gefunden habe :wink: Ich persönlich gehöre zu dem ganz faulen Volk, ich verzichte eigentlich immer auf solche Visualisierungen. Allerdings habe ich im Webbereich auch kaum strukturell anspruchsvolle Projekte.

:wink:

okay, dann klick ich mich mal durch.

Hy,

Gibt es hier irgendwelche Standards, wie z.B. ER-Diagramme bei
Datenbanken. Was würdet ihr mir sonst empfehlen?

Ich würde hier http://www.raincreativelab.com/paperbrowser/#downloads empfehlen.
Den Rest der „Planung“ kann man mit einem normalen Ablaufdiagram oder besser noch durch aufkleben oder aufhängen der einzelnen Seiten auf einem Whiteboard zeigen.
Das ganze in irgendein Planungstool zu quetschen ist denke ich zu overdosed.

Gruß
h.

Hallo Micha,

Sitemaps (Site ^= Platz einer Seite im Web, also != Webseite sondern Website) sind immer eine gute Idee.

Gibt es hier irgendwelche Standards, wie z.B. ER-Diagramme bei
Datenbanken. Was würdet ihr mir sonst empfehlen?

Ich nehme an, du möchtest wissen, aus welchen Teilen eine fertige Webseite im Browser zusammen gesetzt ist, oder? Denn für den eigentlich Inhalt eine Sitemap zu erstellen, ist von Projekt zu Projekt unterschiedlich.

Eine Website besteht häufig aus 3 Teilen.

  1. Der Inhalt, ausgezeichnet mit HTML.
  2. Das Design, festgelegt mit CSS.
  3. Die Interaktion mit dem User, in JavaScript.

Im Hintergrund kann es verschiedene Abläufe geben, wie eine Ausgabe erzeugt wird. Mit PHP & MySQL kann man z.B. ein CMS erstellen, welches die Inhalte dynamisch aus einer Datenbank lädt. Somit ist für die Website nur ein Template nötig, in das die Inhalt dann je nach aufgerufener Seite geladen werden.

Das gleiche geht auch anders, z.B. mit ASP.Net. Doch die Ausgabe erfolgt immer in HTML.

Falls du doch den Inhalt meinst, kann ich dir folgende Tips geben:

Ganz oben steht die Idee, der Leitgedanke oder die Botschaft, die vermittelt werden soll. Danach richten sich:

Der Titel, Meta-Tags, Überschriften, und: Navigation

Die Navigation ist der zentrale Teil eines Webprojektes. Sie muss sofort erkennbar machen, welche Inhalt man hier finden kann. Die Seite, auf der sich der User gerade befindet, sollte hervorgehoben sein.

Wie dir aufgefallen ist, kommt zuerst der Inhalt. Danach (!!) wird dieser durch passendes Design je nach Wunsch hervorgehoben und in Szene gesetzt. Mit JavaScript kann man nacher noch Effekte hinzufügen.

Ich hoffe, du kannst dir jetzt ein kleines Schaubild skizzieren, das dir bei der Unterrichtsplanung hilft :smiley:

MfG, Florian J.