Damals habe ich mir auch Inspirationen von den bekannten Marken, wie Halloren, Milka, Lind geholt, nur kannte ich halt nicht die von Übersee.

Den ganzen Beitrag und alle Bespiele könnt ihr euch beim Smashing Maganzine unter
Showcase of Sweet Chocolate Websites angucken.

Für die Prüfung musste eine Konzeption und Arbeitsplan erarbeitet werden. Anhand dieser Konzeption wurde dann die Homepage und das W3-Modul erstellt und realisiert. Bei meiner Prüfung (Winter 09/10) stand alles unter dem Motto: Schokolade.
D.h. es sollte ein Homepage für einen Schokoladen-Hersteller layoutet und programmiert werden, wobei ein Schwerpunkt auf die Programmierung des Pralinen-Konfigurator gelegt wurde. Zu finden ist dieser unser dem Punkt Schokoladenshop.

In meinen Augen wurde die Aufgabenstellung bei dem Konfigurator etwas schwammig formuliert. Man  konnte viel in die erforderliche Darstellung interpretieren, was auch die Ergebnisse auf der Homepage der ZFA zeigen.

Also W3-Modul hatte ich “Produktorientiertes Gestalten” genommen, hierfür mussten lediglich Piktogramme erstellt werden. Einmal für Schokolade und zum anderen für Pralinen.

Die gesamte Homepage habe ich unter dem folgenden Link online gelegt:  klick hier.

Das Tutorial dazu hatte ich aus dem Buch “Flash fast forward”. In den letzten Tagen ist allerdings auch bei “active tuts+” ein Tutorial (engl.)  dazu erschienen.

Da uns der Winter ja noch ein bisschen erhalten bleibt, wünsch ich all denen viel Spaß damit, die den Schnee rieseln lassen wollen.

Neben dem Download des kostenlosen ISO-Images besteht die Möglichkeit, sich eine fertig gebrannte DVD kostenpflichtig zusenden zu lassen. Das passende DVD-Label könnt ihr euch ebenfalls auf der Website runterladen.

Ich persönlich mag einige OpenSource-Programme, u.a. nutze ich die OpenOffice-Reihe. Somit bin ich ein Stück weit unabhängig von Microsoft.
Für mich ist es auch noch eine Überlegung wert ob ich nicht evtl auf Blender als 3D-Programm und Gimp als Photoshop-Ersatz  umsteige.

Mehr Infos zu den Programmen und der DVD erhaltet ihr unter: opensource-dvd.de

Wie der ein oder andere vielleicht weiß hatte ich im Dezember meine schriftliche Prüfung und anschließend wurde der praktische Teil der Prüfung gemacht. Die Praktische wurde dann am 22.12.2009 abgegeben und dann hieß es warten.
Für mich nahm das Warten fast kein Ende, immer wieder habe ich die Homepage der IHK aufgerufen um zu gucken ob meine schriftlichen Noten schon online stehen. Für lange Zeit war das gucken vergeblich bis zum 14.Januar.

Und da standen sie dann, meine Noten. Wow… Okay, ein Teil ist schon mal geschafft. Dennoch hieß es weiterhin warten, warten auf die Noten für den praktischen Teil.
Für den fachpracktischen Teil habe ich eine Website entwurfen und programmiert. Ganz schön in sich hattet es der Pralienkonfigurator. Mehr dazu erfahrt ihr, wenn ich meine Prüfung bei der ZFA veröffentlichen darf, was erst im März der Fall sein wird. Auch hier gilt: Warten.

Naja und gestern habe ich dann auch für den zweiten Teil der Prüfung meine Noten erfahren und mein Zeugnis eingesackt.
Ein bisschen stolz bin ich schon, dass ich diesen Abschnitt in meinen Leben gut abschließen konnte.
Wie geht es jetzt weiter? Gute Frage… ich werde mich jetzt neuen Herausforderungen stellen. Wie und wo es weiter geht, dass steht noch nicht fest. Aber das wird sich in den nächsten Wochen doch hoffentlich zeigen.

An alle Ex-Prüflinge vom Winter 2009, ich hoffe ihr habt eure Ausbildung gut beendet und seit mit euren Leistungen zufrieden.

Das ich mich jetzt etwas auf die praktische Prüfung konzentrieren will. Zudem bin ich auf der Suche nach einem neuen Job, was bekanntlich auch Zeit in Anspruch nimmt.  Dies sind beides Sachen, welche ich vor Weihnachten noch guten Gewissens in Angriff nehmen will und dann in wird sich erst mal erholt!

Hoffentlich bleibt dennoch etwas Zeit zum Schreiben, sodass der Dezember vielleicht doch noch 2-3 Beiträge bekommt.
Falls dies nicht der Fall sein wird, wünsch ich schon mal schöne Feiertage…

Aufgabe war es eine Website für das Druckmuseum Bremen zu gestalten. Hierfür gab es einnige inhaltliche Vorgaben die gestalterisch und technisch realisiert werden mussten. Das mitgelieferte Bildmaterial konnte benutzt werden, musste aber nicht.
Das einzige was unbedingt eingebaut werden sollte, war der Druckletter D, welcher für den zweiten Teil der Prüfung auch vektorisiert werden sollte.

Ebenfalls wurde Wert auf Menü gelegt. Ein Roll-Over-Effekt sollte deutlich erkennbar sein. Da ich mir ein Buch als Hintergrundmotiv gesucht habe, lag es für mich Nah, mein Menü mit Hilfe von Zetteln zu realisieren. Diese Zettel gehen ein Stück hoch, wenn man mit der Maus über das Menü fährt.

In der folgenden Galerie könnt ihr ein paar Screenshots von meiner Arbeit sehen. Wer die Website komplett sehen will, findet sie unter folgendem Link.
Wundert euch aber nicht, wenn die Website im IE oder bei einer großen Auflösung nicht so gut aussieht. Die Website musste lediglich auf eine 1024er-Auflösung und einen Browser optimiert werden. Mein Browser war zu dem Zeitpunkt der Firefox 3.5 .

1. CSS – Formular ans Design anpassen
Bei der Gestaltung von Formularen ist man oft etwas begrenzt und es ist schwer das Formular optisch passend für seine Webseite zu gestalten. Dennoch gibt es mit CSS einige Möglichkeiten sein Formular anschaulich zu gestalten.
So ist es zum Beispiel von Vorteil das aktuelle Formularfeld hervorzuheben. Hier für sind lediglich ein paar Eigenschaften für die Elemente von Nöten.

2. Anordnung der Felder
Wie sollte man sein Formular am Besten aufbauen. Darüber scheiden sich glaub ich die Geister, einige meinen, dass die Beschreibung für das was man ins Feld eintragen soll drüber stehen soll (s. Beispiel).
Andere meinen hingegen wieder, man sollte die Beschreibung und das Eingabefeld nebeneinander setzen. Wenn ihr euch für diese Methode entscheidet, dann achtet bitte auf die Ausrichtung eurer Felder! Das man vor allem hier optische Linien einhält ist wichtig. (s. Beispiel)
Egal für was ihr euch entscheidet, wichtig ist meiner Meinung nach auch, dass Zusammengehörigkeit erkennbar ist. Soll heißen, wenn ihr die Labels untereinander anordnet, lass genug Platz dazwischen. Sonst kann es halt vorkommen, dass das Auge des Nutzer zu sehr irriert wird und er nicht weiß was er jetzt wohin schreiben soll.

3. Mit Tab-Taste navigieren
Für mich gibt es nichts besseres, als mich durch ein Formular mit der Tab-Taste zu navigieren. Hierfür sollte man vor allem auf seine Anordnung der Eingabefelder und deren logischen Zusammenhang achten.

4. Pflichtfelder kennzeichnen
Ein wichtiger Punkt in der Gestaltung ist auch oft, wie kennzeichne ich was Pflichtfelder sind und was kann bzw. muss aber nicht ausgefüllt werden. Ob ihr dies mit Sternchen macht oder anderen Symbolen ist eigentlich egal, es sollte nur deutlich werden was ein Pflichtfeld ist und somit ausgefüllt werden muss.

An dieser Stelle sei noch erwähnt, dass man auf die Begrenzung der Zeichen für die Eingabe achten sollten. Denn Postleitzahlen haben in Deutschland immer nur 5 Zeichen – nicht mehr und nicht weniger!

5. Fehlermeldungen kennzeichnen
Fehlermeldungen an sich sind schon ziemlich ärgerlich, von daher ist es gut, wenn fehlenden oder falschen Angaben direkt kennzeichnet werden. Ein ganz gutes Beispiel hierfür liefert die Website web-spirit.de.

Quellen:
http://www.paul-kroening.de/tutorials-css/formulare-mit-css-gestalten-teil-1
http://www.webmaster-crashkurs.de/formulare-ueber-css-gestalten.htm
http://www.web-spirit.de/webdesign-tutorial/8/HTML-Formulare-effektiv-gestalten
http://www.akademie.de/programmierung-administration/html-und-css/tipps/css-stylesheet-praxis/html-formulare-gestalten-per-css.html

Gern hätte ich euch an dieser Stelle einmal mein Anmeldeformular von der Zwischenprüfung gezeigt. Allerdings darf ich diese noch nicht veröffentlichen, da der ein oder andere im Okt./Nov. seine Zwischenprüfung macht. Ich hoffe sehr, das ich mein Ergebnis der Zwischenprüfung in den nächsten Wochen online stellen kann.

Wenn euch noch wichtige Sachen zum Thema Formulare einfallen, dann ruhig her damit.

P.S. Ich übernehme keine Garantie auf Vollständigkeit und Richtigkeit des von mir geschriebenen Beitrages. Hierbei handelt es sich um eine Art Zusammenfassung in Hinsicht auf meine Abschlussprüfung.

Auch bei diesen Beitrag handelt es sich um ein Thema, welches in meiner Prüfung vorkommt. Nur in welchem Umfang und Schwiegkeit ist noch unklar. Das wird sich dann auch erst am 1. Dez. in meiner Prüfung rausstellen. Tja, und mit irgendwem muss ich ja mein Wissen teilen. Also los gehts …

Wenn ihr User zu dauerhaften Besuchern oder gar Kunden machen wollt, dann sollte euer Formular auch entsprechend gestaltet sein. Und einige andere Kriterien erfüllen.
In Vorbereitung auf meine Prüfung habe ich mich im Internet ein bisschen schlau gemacht und stell euch hier ein paar Fakten und Links zusammen.

Bei Dr. Web findet ihr z.B. moderne Lösungen für die Gestaltung von Formularen.
http://www.drweb.de/magazin/formulare-und-umfragen-moderne-losungen/

Aber vielleicht sollten wir erstmal klären was ein Formular überhaupt ausmacht? Ein Formular ist eine strukturierte Darstellung mit beschrifteten Feldern, in welche man etwas eintragen kann – also Informationen hinterlassen bzw. ändern kann.
An sich treffen wir Formulare auch überall an, sei es beim Schreiben eines Kommentars bei Blogbeiträgen oder Produkten, beim Buchen einer Reise im Internet. beim Bestellen von Büchern, Kleidung usw. oder bei der Kontaktaufnahme mit jemanden.

Aber worauf sollte man technischer Sicht sonst noch achten?

1. Testen
Formulare nicht nur clientseitig testen, soll heißen die Formulare sollten nicht nur mit JavaScript geschrieben werden. Wenn möglich sollte man sogar ganz darauf verzichten. Denn die Gefahr ist zu hoch, dass das Formular missbraucht werden kann. Dies gilt vor allem dann, wenn ihr mit dem Formular etwas verkaufen wollt.
Lieber sollte ihr auf serverseitig basierte Scripte zurückgreifen – z.B. PHP.

2. Lange Formulare meiden!
Kann durch unhandliche Formulare schnell seine Besucher vergraulen. Was aus Benutzersicht dazu führen kann, dass man sich mit dem Formular und der Seite nicht weiter beschäftigt. Dies kann dann zwangsläufig auch zum Verlust des Kunden führen.
Von daher sollte man gut durchdachte, gut gestaltetet und saubere Formulare niemals unterschätzen!

3. Welche Abfragen benötige ich wirklich?
Formulare sollten nur die nötigsten Sachen abfragen.
Bei längeren Formularen sollte darauf geachtet werden, dass sie strukturiert und überschaubar sind. Also baut das Formular so auf, dass die Abfragen inhaltlich zusammenpassen, d.h. frag nicht erst nach dem Namen und 10 Felder später nach dem Vornamen oder der Adresse. So etwas führt nur zu Verwirrungen.
Nutzt ruhig 2-3 Hintergrundfarben um Inhalte die zusammengehören farblich zu kennzeichnen und von anderen abzugrenzen. Aber treibt es bitte nicht zu bunt! Immerhin soll die Farbe ja nicht von der eigentlichen Eingabe ablenken.

4. Auf mehrseitige Formulare setzen
Noch besser ist es natürlich, wenn man lange Formulare versucht zu vermeiden, denn davon fühlt man sich schnell erschlagen. Was man u.a. von Umfragen kennt.
Stattdessen sollte man solche Formulare lieber auf mehrere Seiten aufteilen. Wichtig ist es hier, das der User immer weiß an welcher Stelle des Formulare er sich befindet, also wie viel hat er schon geschafft und was liegt noch vor ihm. Was auch hilfreich ist, wenn der User das ausfüllen des Formulars zu einem späteren Zeitpunkt fortsetzen kann.

5. Fehler vermeiden und deutlich hervorheben!
Das Abfragen von Fehlern und Falscheingaben ist auch ziemlich wichtig. Bei mehrseitigen Formularen bietet es sich deshalb an, die Abfragen nach jeder Seite zu überprüfen. So muss der User später nicht selber nach seinen Fehlern suchen.
Egal wie kurz oder lang euer Formular ist, die entstandenen Fehler sollten aufgelistet oder farblich gekennzeichnet werden. Das erspart dem User eine Menge ärger.
Passt auch darauf auf, dass durch einen Fehler nicht alle bisherigen Eingaben gelöscht werden und man wieder von vorne anfangen darf. Solche Formulare sind echt übel und verärgern einen wirklich.

6. Sinnhaftigkeit
Auch sind Reset-Buttons nur mit Vorsicht zu genießen. Überleg dir also genau, ob du ihn wirklich brauchst.
Gleiches gilt für die Verwendung von Drop-Down-Menüs, auch diese führen oftmals zu Problemen.

eMail-Addressen sollten zwar schon auf ihre Gültigkeit hin überprüft werden, aber man sollte es mit der Genauigkeit vielleicht nicht übertreiben.

Quellen:
http://usability-now.com/usability/formulare-richtig-gestalten/
http://www.usability-interactive.com/blog/2009/02/07/interaktionsmoglichkeiten-der-website-nutzerfreundlich-gestalten/

Im zweiten Teil wird ein bisschen um die Gestaltung gehen und evlt auch um den Aufbau mit den verschiedenen Mitteln.
Übere weitere Informationen oder Links würde ich mich freuen.

P.S. Ich übernehme keine Garantie auf Vollständigkeit und Richtigkeit des von mir geschriebenen Beitrages.  Hierbei handelt es sich um eine Art Zusammenfassung in Hinsicht auf meine Abschlussprüfung.

Zu dem Thema musste ich mich im Internet erst einmal ein bisschen schlau machen, denn leider kam das Thema während der Ausbildung nicht vor. Sowohl in der Schule, als auch im Betrieb war es nie ein Thema. Was ich ein bisschen schade fand, denn umso mehr ich mich damit jetzt beschäftige, desto mehr hätte ich mir einen Umgang damit gewünscht. Aber wer weiß was die Zukunft bringt, vielleicht kann ich ja schon nächstes Jahr erste Erfahrungen damit sammeln. Wünschenswert fänd ich es ja.

Aber zurück zum Thema. Was sind eigentlich Layout-Frameworks? Layout-Frameworks kann man sich vorstellen wie ein Spaltenraster. Zudem macht man hier die Unterscheidung zwischen Grid-Frameworks und CSS-Frameworks. Die bekanntesten Frameworks sind YAML, 960.gs oder YUI, aber es gibt auch noch zahlreiche andere Systeme. Auf den verschiedenen Websites gibt es einiges an Infomaterial und Beispielen zu sehen.

Der ein oder andere von euch ist mit dem Thema sicher genauso ahnungslos wie ich, von daher kann euch den Artikel vom T3N-Magazin nur empfehlen.  Wer sich intensiver damit beschäftigen will kann sich auch die aktuelle Ausgabe des Webstandards-Magazin zulegen. In dieser Ausgabe liegt der Themenschwerpunkt bei den Frameworks. Was ich euch auch noch ans Herz legen kann wär der Podcast von Technikwürze.

Falls wer von euch noch interessante Links zu dem Thema hat, der sollte sie mir unbedingt zukommen lassen. Denn noch habe ich nur ein leichtes Grundwissen zu dem Thema.

P.S. Ich übernehme keine Garantie auf Vollständigkeit und Richtigkeit des von mir geschriebenen Beitrages. Hierbei handelt es sich um eine Art Zusammenfassung in Hinsicht auf meine Abschlussprüfung.