ein eigenwilliges Projekt

[frank87]

Hallo Leute,

ich möchte euch hier mal mein Projekt vorstellen: Haus der Jugend Parchim

Hierbei handelt es sich um eine Homepage, die einen rein informellen Zweck zum Haus der Jugend erfüllen soll und junge, wie auch ältere Leute ansprechen soll.

Die Aufmachung mag vielleicht eigenwillig erscheinen, da sie irgendwie an eine Wandzeitung erinnern soll.

Schaut euch bitte das Projekt an und gebt mir eure Meinungen. Vielleicht habt ihr sogar Tipps oder Hinweise, was ich vielleicht verbesser kann oder gar unbedingt verändern muß (weil ggf sonst rechtliche Konsequenzen?).

Ach ja: Ich habe mir HTML selber halbwegs beigebogen und mein Wissensstand erweitert sich so nach und nach. Also habt bitte etwas Nachsicht mit mir, da ich sozusagen noch in den Kinderschuhen stecke, was HTML und WEB-Design angeht. ;)

und noch etwas: Das Projekt wurde mit einem Editor erstellt, der sowohl WYSIWYG wie auch Quelltext zuläßt. Die HP wurde "sowohl als auch" (also gemischt) programmiert.

Gruß Frank

 

[Wustersoss]

Hallo,

Ich habe dir ja schon im anderen Thread als es um die Tabellen ging gesagt, das ich die Seite neu machen würde. Da du jetzt fragst wie sie gestalterisch zu bewerten ist, frage ich dich: Gefällt dir denn die Seite und was viel wichtiger ist was sagen deine Jugendlichen aus dem Haus dazu. Ist das nicht wichtiger?

Klar kann ich sagen was ich davon halte, aber erstens bin ich nicht der Massstab, weil die Seite nicht für mich gemacht wurde und zweitens weiss ich nicht wie Jugendliche heute denken. Frag einfach deine Zielgruppe.

Zum Technischen kann ich aber noch was sagen. Die Fotos sind zu gross und brauchen zu lange zum laden, die würde ich verkleinern, dann lädt die Seite schneller.

 

[frank87]

Moin Wustersoss,

auf deine Frage hin, ob mir die Seite gefällt:
Ich finde sie knallig bunt und trotzdem informativ (genug), obwohl ich persönlich den einen oder anderen Text vielleicht etwas abändern oder gerne ergänzen würde.

Es standen 2 oder sogar 3 verschiedene Designs zur Auswahl über die in meiner Abwesenheit (Urlaub) abgestimmt wurde. Die Wahl fiel auf mein Grunddesign mit dem Wunsch auf farbige Aufpeppung.
Daraufhin entstand dann der Stoff-Hintergrund und die bunten "Elefantenhäute" die mir Pin-Näglen angetackert wurden. Als Gimmick habe ich zwischen das Papier und den Texht den fixierten Gnom (das Maskottchen des Hauses) noch eingefügt.

Ursprünglich gab es nur den gelbverlaufenen Hintergrund und eingerahmte Texte in schwarz.

Die erneute Abstimmung über das Design erfolgte dann wieder in meiner Abwesenheit. (da war ich dann wieder beim Reha-Bildungsträger)
...habe dann nur telefonisch bescheid bekommen, die Seite dann so zu gestalten. Texte und Fotos habe ich aus der Verwaltung vorgegeben bekommen.

Kurzum: Das Design "Wandzeitung / Anschlagbrett" soll bei der letzten Abstimmung dann die absolute Mehrheit gehabt haben.
Abgestimmt haben Kinder, Jugendliche und einige Erwachsene.

Aber es wäre trotzdem interessant, andere Meinungen (auch von Fortgeschrittenen und Profis) zu hören, ob die Page ansprechend ist oder nicht und was ggf besser gestaltet werden könnte.


Also du meinst auch, ich sollte die Seiten lieber ohne verschachtelte Tabellen neu aufbauen?
OK, dann muß ich mir natürlich Wege überlegen, wie ich das Grunddessign halten kann...
Da würden sicher kleine Stichpunkte oder Tipps sehr hilfreich sein, meine Gedanken in die richtige Richtung zu lenken.

Aber diese Gedankenlenkung wären wohl eher in meinem anderen Thema unter HTML eher angebracht, oder?

Wie meinst du das mit den zu großen Fotos?
Sicher meinst du, ich sollte lieber Thumbnails verwenden mit Link auf das eigentliche Foto, oder?

Gruß Frank

 

[NetAktiv]

Beim Einbinden von kopierten und editierten Karten (Google-Map unter Kontakt) würde ich nach bitteren Erfahrungen allergrößte Vorsicht walten lassen. Man kann den eigenen Standort bei genug Anbietern dynamisch einbinden lassen, auch bei Google, und das sieht dann etwa so aus http://web2.cylex.de/anfahrt/netaktiv-2491157-anfahrt.html

 

[frank87]

OK, danke für den Hinweis. Ich werde das entsprechend ändern.
Gibt es auch eine Möglichkeit dass man die Lage des Besucherparkplatzes und deren Zufahrt in der angezeigten Karte markieren kann? (ggf persönliche Karte oder sowas in der Art?)

Ansonsten bleibt wohl nur der saure Apfel, Genehmigungen einzuholen, die garantiert kostenpflichtig würden, was aber vermieden werden soll.

Gruß Frank

 

[Wustersoss]

Speziell zu dem Kartenproblem: Nimm die Karte von Openstreetmap, die ist ohne Einschränkung nutzbar.

Zu den Fotos: Da bezog ich mich auf diese Seite Haus der Jugend Parchim
dort sind die Bilder 648px × 486px gross, werden aber nur als Bilder mit 180px x 134px angezeigt. Das heisst der Browser muss die Bilder erst neu rendern bevor er sie darstellt. Das ist keine gutes Vorgehen. Die Bilder sollten in der Grösse auf dem Server liegen in der sie auch angezeigt werden.

Wenn die Seite schon so verspielt dargestellt wird, würde ich auch das Menü entsprechen farbig gestalten, dass wirkt jetzt etwas deplaziert. Passt halt nicht zur Gestaltung der Seite. Du könntest das Menü entweder in die Pinnwand grafisch integrieren oder sie als Holzrahmen oben drüber darstellen.
Die Fotos kann man auch dann wie angepinnt erscheinen lassen und bei Klick vergrössern und richtig darstellen. So was wie hier in der Art Stu Nicholls | CSSplay | cssplayBox - THE CSS only Lightbox with animation.




Teile der Webseite sind mit Frontpage erstellt. Ich würde auf einen normalen Editor ausweichen, da hat man mehr Kontrolle über den produzierten Code. Nimm zum Beispiel Notepad++ oder PSPad zum editieren.

 

[frank87]

Das mit der Karte habe ich erst mal geändert. Ich habe nun den von Google vorgegebenen Link eingebettet.

OK, die "toten" Fotos sollen sowieso gegen belebte Fotos ausgewechselt werden. Da wird dann mit Thumbnails gearbeitet.

Diese Art mit der vergrößerten Darstellung per Script scheint nicht schlecht zu sein. Ist auf alle Fälle besser, als 'ne neue Seite...


Die HP wurde teils mit Frontpage, teils mit Expression Web (1-er) erstellt. Jetzt wurde mir die 4-er Version gestellt.
Ich programmiere damit sowohl WYSIWYG wie auch direkt Quelltext. (geteilte Ansicht)
Damit sehe ich gleich, was er mir für Code schreibt, wenn ich im WYSIWYG arbeite und kann dann gleich manuell in den Quelltext eingreifen.

Angefangen hatte ich mal mit phase5...
Dann hatte ich einen reinen WYSIWYG-Editor parallel versucht, aber die Quelltexte dann... <schüttel>
Da finde ich diese "duale" Bearbeitung in einem Programm wesentlich besser. Und durch den Splitt halt auch die Übersichtlichkeit, was gerade optisch und im Quelltext passiert.

Expression arbeitet -genau so wie FP- viel mit Scripten, wenn man grafisch arbeitet...
OK, für wiederkehrende Scripte...
Aber jede gemachte Erweiterung ein neues Script, auch wenn es sich widerholt? Naja, da greife ich dann sofort im Quelltext ein und lösche das unnötige Script bzw lasse es bei der optimierung automatisch rausnehmen (was ich aber normalerweise noch einmal überprüfe)

 

[bobomampf]

Es tut mir leid, aber das ist die mit Abstand hässlichste Seite, die ich hier seit meiner Zeit im Forum gesehen habe.. Grottig.. Ich bin selbst erst 18 und wenn ich so eine Jugendhausseite hätte, würde ich da nicht mehr hingehen

Technisch wie Grafisch absolut grottenschlecht.. Sorry.. Da hat jemand keine Ahnung von Farben, Formen, HTML, Schriften, Design etc. pp..

Lass das einen Fachmann übernehmen..

 

[Wustersoss]

Hallo Bobomampf,

Ich finde es beschämend, was du hier ablässt. Du scheinst den ganzen Thread nicht gelesen zu haben. Er hat dort erklärt warum die Seite so aussieht wie sie aussieht und er ist bemüht diese ja auch im Rahmen der im auferlegten Kriterien zu verändern.

Du weisst wahrscheinlich wenig über Entscheidungsbefugnisse und er kann hier nicht eine Seite erstellen wie sie ihm gefällt. Aber hättest du den ganzen Thread gelesen wüsstest du es.

Zu sagen lass das einen Fachmann übernehmen ist in diesem Fall wohl auch keine Lösung, da erstens abgestimmt wurde wie das Design auszusehen hat und zweitens wohl auch kein Geld für so eine Seite zur Verfügung steht.

Nachdem du dich hier so weit aus dem Fenster gelehnt hast, habe ich mal deine Seite auf der du deine Dienste anbietest angeschaut.
[Invalid] Markup Validation of [url]http://webdesign-binder.de/ - W3C Markup Validator[/URL] sagt 16 Fehler, ein tolles Aushängeschild, und genug Kompetenz um hier solche Kommentare zu schreiben.

 

[sysop]

Ich weiss garnicht, was ich dem noch hinzufügen soll, ein schlichtes Danke für den Beitrag an Wustersoss

 

[frank87]

Wustersoss, danke für deinen Beistand! ;)

@bobomampf:
Klar, große Töne spucken kann jeder, der sich (semi)professionell mit HTML auskennt...

Aber selbst du hast mal klein angefangen!

Im übrigen kann deine Aussage sogar schon fast als rufschädigend für das Forum angesehen werden, da sich das Forum Hilfe für Anfänger und Fortgeschrittene auf die Fahnen geschrieben hat!
Du machst aber mit deinem Beitrag die Seite nur nieder, anstatt kontruktive Tipps oder Hilfen anzubieten...
(Kritik und Hilfe... So lernt man wenigstens was!)

Ich weiß ja nicht, wie dein allererstes Projekt aus deiner Anfangszeit (egal, ob veröffentlicht oder nicht) ausgesehen hat...

Hast du dir HTML selbst beigebracht oder wurde es dir irgendwo (z.B. Schule) oder von jemandem beigebogen?
Das ist nämlich auch ein gewaltiger Unterschied!
Ein älterer Sack lernt nicht so schnell, wie ein junger Hüpper. Erst recht nicht, wenn er sich das Ganze selber und ohne Mentoren beibringen muß und das auch noch nebenbei in seiner Freizeit!
Und selbst du solltest doch die Weisheiten kennen: Es ist noch kein Meister vom Himmel gefallen! sowie: Aller Anfang ist schwer! :roll:


Außerdem:
Wer die Finanzlage für die Freizeitgestaltung für Kinder und Jugendliche kennt, der weiß, dass sich nur wenige Kommunen so eine Einrichtung leisten können und das meistens als erstes bei der Kinder- und Jugendbetreuung gespart wird.
Daher sind wir froh, das uns wenigstens der werbefreie Webspace gestellt wird.

Für die HP, deren Aussehen und Bearbeitung sind wir - oder besser gesagt: ist das Stamm-Personal aber selber verantwortlich.
Nur dass von denen niemand HTML kann...
Ergo mache ich das trotz meiner wenigen Kenntnisse und obwohl ich nicht zum Personal gehöre ehrenamtlich.

Ich habe ja in den vergangenen Beiträgen bereits erwähnt, dass ich mit HTML eigentlich eher in den Kinderschuhen stecke (blutiger Anfänger) und kein Profi bin!

Und das, was jetzt gerade öffentlich zu sehen ist, wird auch garantiert nicht der letzte Stand bleiben, weil ich mich weiterhin mit der Materie beschäftigen werde und somit garantiert auch bessere Lösungsmöglichkeiten (ggf auch mit eurer Hilfe) finden werde.


Wenn ich der Meinung wäre, dass ich bei meinem Lenrprozess keine Hilfe oder Anregungen bräuchte, dann hätte ich mich ja wohl nicht hier im Forum angemeldet, oder?

Gruß Frank

 

[tarik02]

Hallo,

vorweg ich habe mich gerade ein wenig erschrocken, da ich in diesem Haus auch ab und an Zeit verbringe ;D

So nun zum Design:

Es tut mir echt leid... aber sei ehrlich: Gefällt es dir selbst?
Es gibt keine oder kaum einheitliche Farben. Und bpsw. auf dieser Seite sticht einem das Blau in die Augen. Tipp: Beschränke dich auf ein kleineres , passendes Farbspektrum.
Im Hintergrund der Inhalte ist das Tierchen immer ein wenig abgeschnitten. Bei mir jedenfalls.
Und die einzelnen Farben des Bereiches mit dem eigentlich wichtigem, dem Inhalt, sind kaum lesbar. Versuche möglichst Farben zu nehmen die das Auge gewöhnt ist, oder leichter zu lesen sind. D.h. Dunkle (Schwarz ist gut.) Schrift auf hellem Grund.
Noch etwas: Introseiten schrecken oft Besucher ab. Und sind manchmal fehl am Platz. Lass sie besser ganz. Dann kann man nichts falsch machen.

Codemäßig:

Der CSS Code sollte der Übersichthalber ausgelagert werden. Ich denke aber dass das größenteils Geschmackssache ist.
Es gibt noch ein paar kleinere Fehler die behoben werden sollten.
Und wie meine Vorredner bereits erwähnt hatten: Tabellen-Layout? Ganz schlecht. Dort sollte besser eine Kombination von HTML und CSS verwendet werden.


Liebe Grüße

 

[Asterixus]

Ich behaupte von mir nicht, kreativ zu sein, kann aber dennoch sagen, was ansprechend aussieht und was nicht. Diese Seite sieht nicht ansprechend aus. Gut, du bist Anfänger in Sachen HTML, aber darum geht es nicht: Selbst mit WYSIWYG-Editoren kann ein kreativer Anfänger halbwegs ansprechende Seiten entwerfen.

Damit diese Kritik auch für alle konstruktiv wirkt:

Die Bilder sind ein Punkt, der, denke ich, als erstes angesprochen werden sollte. Die meisten Bilder sind entweder verpixelt oder wirken in Verbindung mit Hintergrundfarben unpassend. Zum Beispiel die Überschrift oben in der Mitte: Abgesehen von der unpassenden Kombination von Gelb und Grün-zu-Weiß-Variationen macht der Schriftzug nicht den Eindruck, als verschmelze er mit dem Hintergrund; es ist ein klarer, unschöner Schnitt.
In der Übersicht zeigst du Bilder an, die du aber verkleinert anzeigst.
Ich will mich nicht zu weit aus dem Fenster lehnen, aber bei einigen Bildern bezweifle ich, dass ihr die selbst erstellt habt. Diese Pinnwandnägel wirken auf mich, als hättest du danach auf Google gesucht und einfach so übernommen hast nachdem du den weißen Hintergrund des Originals größtenteils unsauber weggemacht hast.

Tabellenlayout wurde hier schonmal anegsprochen, ich erwähne es aber trotzdem, da selbst aktuelle WYSIWYG-Editoren das als schlecht ansehen.

Die Schriftart: Times New Roman gilt in > 99% der Fällen als fürs Web ungeeignet. Deine Seite ist keine Ausnahme. Wenn du unbedingt eine serife Schriftart haben willst, probier's mal mit Georgia oder ähnlichen. sans-serife Schriftarten (Verdana, Tahoma, Arial usw.) sind meiner Meinung nach auf deiner Seite angenehmer.

Und eine letzte Sache: Warum benutzt du für die Menülinks Bilder? Reiner Text mit Hintergrundbildern ist barrierefrei (was aber mit Tabellenlayout dennoch die Barrierefreiheit nur ein wenig steigen würde ^^).

 

[sysop]

Hmmm

Da wie man lesen kann die Seite per Abstimmung so geworden ist, wie sie ist, würde ich gerne mal die anderen Vorschläge sehen.
Wie eine Seite ankommt ist ein subjektives Empfinden, so kann ich mir vorstellen, dass Kinder eher auf knallige Farben reagieren als Erwachsene. Daher wäre es von Vorteil erst mal zu klären wen die Seite eigentlich als Zielgruppe hat.

Die Frage, ob einem selbst die Seite gefällt ist in gewisser Hinsicht eine Fangfrage. Ich habe einige Projekte im Netz, die ich

1. selber nie so gemacht hätte
2. grottenhässlich finde

die aber genau so bestellt wurden und wo Stunden an Diskussionen ins Land gezogen sind um mir klar zu machen, was eigentlich gewünscht wird, da mein persönliches Empfinden sehr gegen das Design ging.

Generell finde ich alles, was FÜR Jugendliche gemacht wird positiv, da sich selten bis nie Leute finden, die unentgeldlich bereit sind Besseres zu produzieren. In den Reihen der sozial Engagierten finden sich nunmal nicht immer Webdesigner mit professionellem Hintergrund.

 

[frank87]

@tarik02:
Die fehlenden ALT-Attribute sind inzwischen bekannt. Die gelisteten Fehler werde ich (hoffentlich) mit der Überarbeitung der Hausübersicht (die "leeren" Bilder gegen Belebte ersetzen) auch ausmerzen.
(Die Fehler werden vom jetzigen Prog auch angezeigt, so dass ich sie dann beseitigen kann)

Was das Dessign angeht: Ich weiß nicht, inwieweit du Susis Ansichten kennst... (Ich teile sie zumindest nicht immer mit ihr.)
Aber trotzdem hast du natürlich Recht. Ich persönlich hätte lieber mit dezenteren (eher pastellenen) Farben gearbeitet (die "Blätter")

Jep, die Augen vom Gnom sind auch bei mir abgeschnitten, solange du dich ganz oben auf der Seite befindest. Ich habe aber noch nicht den Darstellungsfehler gefunden. :(
Vermute aber, dass es mit dem Tabellanaufbau oder Tabellenkopf der "obersten" Tabelle zu tun hat.
(Sollte dann beim Neuaufbau der Seiten auch elemeniert werden.)

CSS-Code auslagern: Hmmm, erscheint logisch, wenn es um auf allen Seiten wiederkehrende Styles geht...
Wenn es um seitenspezifische Styles geht, weiß ich nicht, ob ich da nicht die Übersicht verlieren würde, wenn ich immer zwischen den Dokumenten hin und her springen muß. Aber: Versuch macht klug!
(sollte das Prog aber auch mitmachen: separates CSS-Fenster)

Tarik, vielleicht hast du ja auch weitere konstruktive Vorschläge, wie ich was vielleicht besser gestalten kann und die ich verwenden kann. Aber bestimmte Sachen sollten wir dann aber besser per PN oder Mail klären, wenn du mir helfen möchtest. (Bin für jeden Hilfe dankbar, weil ich mich sonst durch online-Hilfen durchwurschteln muß.)


@Asterixus:
jep, die Bilder... Die "Leichen" werden sowieso demnächt komplett ersetzt.
Und ja, einige Sachen sind ergoogelt und übernommen, weil zur freien Verwendung deklariert.
(ich überlege sowieso, ob bei der Neugestaltung diverse Sachen überhaupt noch übernommen werden... Wird zumindest noch einige Debatten mit der Führung geben...)

Was die Schrift in den "Köpfen" angeht... Auch da grübel ich bereits, wie ich das anders gestalten kann. Das Blöde ist nur: Wie kombiniere ich das Stadtlogo mit einem entsprechenden Schriftzug, so dass es miteinader harmoniert?

Wegen dem Tabellen-Layout: Auch hier mache ich mir bereits Gedanken... Boxen, Ebenen usw.
Anregungen erwünscht.

Auch für den Tipp mit den Schriftarten: Danke!
Kann ich dann bei der Neugestaltung bzw schon bei der Überarbeitung des Bestandes entsprechend ändern...

Wo meinst du das Problem mit den Menülink-Bildern? Oben im Navi-Menü oder innerhalb der Dokumente die verweissensitiven Bilder?


@Sysop:
einer der weiteren Vorschläge war total schwarzer Hintergrund, das Haus als Konturgrafik und von hier aus sollten Sterne a la Sprechblasen zu den Unterseiten führen, die -soweit ich mitbekommen habe- in neuen Fenstern aufpoppen sollten. Jedoch gab es da keine weiteren Vorschläge für die Unterseitengestaltung.

Den möglicherweise dritten Vorschlag habe ich nicht zu Gesicht bekommen. Daher weiß ich nicht, ob er überhaupt zur Debatte stand.

Die HP soll in erster Linie Kinder und Jugendliche (Hauptklientel) ansprechen. In zweiter Linie soll sie auch Erwachsenen eine Übersicht der Angebote verschaffen.


Auch stehe ich auf dem Schlauch, wie ich am Besten die Galerie aufbaue, da ich diverse Events vorgegeben habe, die als Endlostext in Verbindung mit Bildern eventuell unübersichtlich werden könnten. Ich denke da an separate Unterseiten, die von der Galerieseite verlinkt werden. (Je Event eine eigene Unterseite)


Wie gesagt: ich bin für jeden Tipp und für jede Anregung oder sonstige Hilfestellung dankbar!
(Manchmal ist es sogar hilfreich, wenn man mit der Nase auf ein Problem gestoßen wird, weil amn es nicht selber erkennt... ;))


@Administration bzw. Moderation:
Sollte das Thema hier jetz zu OT werden, bitte mit Verschoben-Link neu einordnen.
Danke!


Gruß Frank