[mr_who]

[c_k_84]

Hi, hab da mal etwas zusammengestellt:

[b]Allgemeines[/b]
- in normalen HTML-Dokumenten wird immer nur ein einseitiger Informationstransport genutzt
- um diese Art der Kommunikation zu umgehen, werden HTML-Formulare eingesetzt

- ein Formulare wird vom Webmaster leer ins Netz gestellt, Anwender kann das Formular nach bestimmten Vorgaben ausfüllen, per Button an den Server zurückschicken, um dann verarbeitet zu werden

- man kann Formulare genau wie HTML-Code mit CSS formatieren

Ein Formular wird mit <form> geöffnet und mit </form> geschlossen. Dazwischen stehen die Anweisungen.
(Wichtig: Zieladresse sowie Methode mit der das Formular verschickt wird, muss angegeben werden.)

<form action=“formular.php“ method=“post“>
Hier können Formularelemente folgen…(siehe weiter unten)
</form>

Action-Attribut
= Pflicht, da ohne diese Angabe, die Formulardaten nicht verschickt werden können.
z.B. mit
mailto: Daten werden so an die angegebene E-Mailadresse geschickt
Scripte (PHP, CGI..): um die Daten anschließend weiterverarbeiten zu können

Method-Attribut
= bestimmt, nach welcher http-Übertragungsmethode die Formulardaten an das angegebene Ziel gelangen
1. „get“ = Daten werden an die Aufrufadresse angehängt
2. „post“ = Daten werden vom Webserver über den Standard Eingabekanal zur Verfügung gestellt. Ein verarbeitetes Script behandelt die Daten wie eine Benutzereingabe


[b]Formular-Elemente[/b]

Einzeilige Eingabefelder
<input name=“feldname“ type=“text“ size=n readonly maxlength=n value=“..“>

standardmäßig braucht man nur name und type angeben
name= dafür da, um in einem Formular mit mehreren dieser Eingabefeldern, jedes Eingabefeld genau zu benennen, um es später explizit entwerten zu können. Es dürfen keine Umlaute oder Sonderzeichen verwendet werden.
type-Attriput legt fest, welche Art der Eingabe gemacht werden soll

size-Attribut = legt die Anzahl der Zeichen fest, die angezeigt werden sollen

maxlength-Attribut = legt fest, wie viele Zeichen max. eingegeben werden dürfen

value-Attribut = so kann man einen Vorgabewert bzw. –text angeben

readonly-Attribut = legt fest, das man in dem Feld weder schreiben noch hineinklicken kann


[b]Mehrzeilige Eingabefelder[/b]
<textarea name=“feldname“ rows =n cols=n>
Kommentar
</textarea>

rows-Attribut gibt an, wie viele Zeilen dieses Eingabefeld besitzen bzw. zur Verfügung stellen soll

cols-Attribut legt die Anzahl der Spalten für das Eingabefeld fest


[b]Auswahlliste[/b]

<select name=“listenname“>
<option> Auswahl 1 </option>
<option> Auswahl 2 </option>
<option> Auswahl 3 </option>
</select>

Zwischen den option-Tags können die einzelnen Elemente der Auswahlliste definiert werden.

Mit dem selected-Attribut kann man auch eine Vorselektierung vornehmen, je nach dem welches Attribut ausgewählt sein soll:

<select name=“listenname“>
<option> Auswahl 1 </option>
<option> Auswahl 2 </option>
<option selected=“slected“> Auswahl 3 </option>
</select>


[b]Radiobuttons[/b]

<input type=“radio“ name=“feldname“ value=“name1“> Button 1
<input type=“radio“ name=“feldname“ value=“name2“> Button 2
<input type=“radio“ name=“feldname“ value=“name3“> Button 3

Radiobuttons bestehen aus einer Reihe von beschrifteten Schaltflächen, von denen man immer nur eine auswählen kann. Fügt man das Attribut checked zu einem Button hinzu, wird dieser Button vorselektiert:

<input type=“radio“ name=“feldname“ checked=”checked” value=“name1“> Button 1
<input type=“radio“ name=“feldname“ value=“name2“> Button 2
<input type=“radio“ name=“feldname“ value=“name3“> Button 3


[b]Checkbuttons[/b]

<input type=“checkbox“ name=“feldname“ value=“name1“> Button 1
<input type=“checkbox“ name=“feldname“ value=“name2“> Button 2
<input type=“checkbox“ name=“feldname“ value=“name3“> Button 3

Vorselektierung wie oben Radiobuttons



[b]Versteckte Elemente [/b](diese Art von Feldern bekommt der User nicht zu Gesicht)

<input type=“hidden“ name=“feldname“ value=“adresse“>

Man könnte z.B. mit value=“...“ eine E-Mail-Adresse notieren, an die das Formular geschickt wird oder man notiert dort eine URL, die beim Senden aufgerufen werden soll. Genauso kann man einen Zähler laufen lassen, mit dem man zählt, wie oft das Formular abgeschickt wurde.


[b]Befehls-Schaltflächen[/b]
Sende-Button
<input type=“submit“ value=“Abschicken“>
Mit value=“Abschicken“ gibt an an, was auf dem Button stehen soll.

Reset-Button
<input type=“reset“ value=“Löschen“>
Klickt man auf diese Schlaltfläche, so werden die Formulareingaben gelöscht.


[b]Tabulator-Reihenfolge[/b]
Durch die Angabe tabindex=“...“ kann festgelegt werden, in welcher Reihenfolge die Elemente mit dem Tabulator angesteuert werden sollen:

<form action=“tabindex.htm“>
<p>
Feld 1: <input type=”text” size=”40” maxlength=”40” tabindex=”4”> <br>
Feld 2: <input type=”text” size=”40” maxlength=”40” tabindex=”1”> <br>
Feld 3: <input type=”text” size=”40” maxlength=”40” tabindex=”3”> <br>
<input type=”button” tabindex=”2” value=”Klick mich”></p>
</form>

Es sind Zahlen zwischen 0 und 32767 erlaubt. Zu beachten ist, dass sich der tabindex immer auf die komplette Datei bezieht, dabei werden auch Verweise, Objekte mit einbezogen.


[b]Tastaturkürzel[/b]
Sie können den Nutzern auch anbieten, Formularelemente mit einem Tastaturkürzel anzuspringen. Allerdings werden diese nur angesprungen, nicht ausgeführt.

Mit accesskey kann man ein Zeichen auf der Tastatur bestimmen.
Den Anwendern muss allerdings ersichtlich sein, dass man die Felder mit einer Tastenkombination ansteuern kann.


[b]Verarbeitung von Formularen[/b]Man kann es direkt per Email verschicken, ein CGI-Script verwenden oder es mit PHP verarbeiten.

[u]E-Mail[/u]
<html>
<head>
<title> Formular per E-Mail </title>
</head>
<body>
<form action:”mailto:info@…de” method:”post”>
<input type=”text” name=”text”>
<input type=”subit” value=”Abschicken”>
</form>
</body>
</html>

Daten werden direkt per E-Mail versendet, man hat aber keinen Einfluss auf die Formatierung.



[u]CGI-Script[/u]
<html>
<head>
<title> Formular CGI-Script </title>
</head>
<body>
<form action:http://www.ihreadresse.de/cgi-bin/selfmail.pl method:”post”>
<input type=”text” name=”text”>
<input type=”subit” value=”Abschicken”>
</form>
</body>
</html>

[b]PHP[/b]

<html>
<head>
<title>Formular per E-Mail</title>
</head>
<body>
<form action=”formular.php” method=”post”>
<input type=”text” name=”name”>
<input type=”submit” value=”Abschicken”>
</form>
</body>
</html>




Ein einfacher Form-Mailer mit PHP:

1: <?php
2: //Daten aus dem Formular holen
3: $name = $_POST['name'];
4:
5: //Zusammenstellen der Nachricht
6: $message = „Hallo, Sie haben sich gerade für einen Newsletter eingetragen “.$name;
7: $subject = „Eintragung in einen Newsletter!“;
8: $mail_adress = "ihrname@website.de“;
9:
10: //Verschicken der E-Mail
11: mail ( $mail_adress, $subject, $message ) or die ( „Ihre Nachricht konnte nicht
versendet werden“ );
12: echo „Ihre E-Mail wurde versendet!“;
13: exit;
14: ?>

[anflo]

wow - danke!

[Zodak]

Danke für die hilfreichen Beiträge.
Ob wir screens oder eine lauffähige website abliefern müssen ist nicht 100% vorherzusagen,
jedoch dürften es zu 99% wie in den vergangenen Jahren wieder die screens werden.

[anflo]

hier meine Zusammenfassung zum Screendesign ...

http://people.freenet.de/unikum-theater/screendesign.doc

Danke an alle, die dazu beigesteuert haben!

Noch einmal aktualisiert:

Navigationelemente ...

http://people.freenet.de/unikum-theater/navigationselemente.doc

[Janine]

ich hab hier für euch nen paar infos übers screendesign, hoffe es hilft euch weiter...

Screendesign

Scribbels (= Ideenskizzen):

- alle spontanen Ideen, Gedanken, Geistesblitze bildlich festhalten zum gestellten Thema (Sammlung erstellen von Entwürfen, Kontroll- und Navigationselemente, Gestaltungsraster, Bildideen, Seitenaufteilung, Farbentwürfe und Grafikmodule, Vorder- wie Hintergrundbilder, Seitenübergänge und Animationsideen)

Gestaltungsraster:

- querformatige Bildschirme im Bildverhältnis 4:3 => andere Anforderungen an die Gestaltung, Aufteilung und Umsetzung der Ideen als in der hochformatigen Printproduktion

Wozu benötigt man ein Gestaltungsratser?

- um eine klare Struktur in der Navigation, Leseführung und der optischen Zusammengehörigkeit verschiedener Kapitel zu entwickeln
- einheitliches Aussehen der Seiten wird dadurch gewährleistet ( z.B. Titel eines Kapitels steht immer an der gleichen Stelle, Bilder werden immer an der „gewohnten Stelle“ eingeblendet, Navigationselemente stehen immer auf der gleichen Position auf dem Screen)
- Übersichtlichkeit der Multimedia-Anwendung wird erhöht
- Navigation durch die Kaptitel und Seiten wird erleichert

Worauf muss ein Screendesigner achten bei der Gestaltung?

- Benutzerfreundlichkeit des Produktes steht im Vordergrund ( der Benutzer muss sich sofort auf dem Screen zurecht finden, ist dies nicht der Fall, verlässt er die Anwendung und der Zweck der Seite ist verfehlt)
- Bestimmte auf der Seite vorkommende Elemete (Anfang eines Kapitels, Anordnung der Animationen, Digitalvideos, …) sollten immer an der gleichen Stelle positioniert werden und auf die gleiche Art und Weise genutzt werden können
- Übersichtlichekeit: keine überfüllten Seiten => verteilen der Infos auf mehreren Screens und Inhalte auf das Wesentliche reduzieren

Background:

- es wird nicht nur horizontal und vertikal strukturiert, sondern auch in die dritte Dimension
- es gibt die Hintergrundebene und die Elemente, die davor agieren
- Hintergrund = einfarbige Fläche, abgesoftes Bild, Bildkomnination, wechselnde Bilder…
- es kann Sound unterlegt werden

Worauf sollte bei der Hintergrundgestaltung geachtet werden?

- muss den statischen Teil des Screens ausmachen, darf sich nur wenig verändern
- sollte während eines Kapitels oder Themas beibehalten werden, um die Zusammengehörigkeit optisch zu signalisieren
- Aufbau eines (neuen) Hintergrunds benötigt viel Ladezeit
- sollte nicht zu dominat erscheinen, nicht unruhig wirken, die Farbigkeit und Struktur sollten die Lesbarkeit der Texte nicht beeinträchtigen
- weiß auf dem Monitor erscheint im Gegensatz zum Papierweiß hell und strahlend

Navigationselemente (Bedienung des Multimedia-Produktes):

- Elemente die durchgängig die gleiche Funktionalität aufweisen = sollten sich nicht verändern, sollten innerhalb des Gestaltungsrasters ihre feste Position beibehalten, damit der Anwender sich schnell daran gewöhnen kann
- Sichtbare Navigationselemente: sofort erkennbar, Anwender kann durch sie sich auf allen Screens bewegen und weis wo er sich gerade befindet, immer verfügbar, in ihrer Funktionalität klar definiert und selbsterklärend
- Versteckte Navigationselemente: Verknüpfungen zu Elementen, die nicht auf den ersten Blick erkannt werden sollen, durch „Rollover-Effekte“ erkennbar (bewirken eine Veränderung des Cursers, den Austausch eines Bildes, Textfarbenänderung, das Abspielen eines Sounds…), auch „Hot Spots“ genannt, dienen dazu die interaktive Gestaltung attraktiver zu machen, Benutzer soll animiert werden multimediales Produkt zu erkunden
- Hyperlinks: vor allem auf Internetseiten vorhanden, machen nur Sinn auf Seiten mit viel Text, verknüpfen Textstellen, die sich auf beliebigen Seiten befinden können

Gestaltung von Navigationselementen:

- müssen nicht nur Text sein, können auch eindeutige Methapern verwendet werden (Papierkorb, Pfeil,…), bei Rollover-Effekten muss die Interaktionsfunktion eindeutig signalsiert werden, Schieberegler und ähnl. Tools muss so dimensioniert sein, dass auch weniger geübte Computerbenutzer diese mit der Maus treffen
- bei Internetauftritt: am oberen oder linken Rand anordnen = damit ist gewährleistet, dass bei allen Bildschirmgrößen und Browsereinstellungen die Navigationselemente sichtbar und damit benutzbar sind
- bei CD-ROM: in der Regel zentrierte Anordnung auf dem Bildschirm des Screens = Navigationselemente unterliegen keiner Einschränkung

Farben:

- Monitore verwenden die Lichtfarben Rot, Grün, Blau
- Darstellung der Farben hängt von der Qualität und von den Einstellungen des eingesetzten Monitors und von der Grafikkarte ab, wesentl. Faktoren sind: Alter des Monitors, Blickwinkel auf den Monitor (insbesondere bei TFT-Monitoren), Lichtverhältnisse am Arbeitsplatz, Helligkeit- und Kontrast-Einstellungen am Monitor, Farbtemperatur des Monitors, Farbtiefe der Grafikkarte
- Lesen am Monitor strengt das Auge mehr an als Lesen auf Papier
- Metallische Farben müssen durch normale Farben simuliert werden
- Glänzende oder matte Farben können nicht dargestellt werden
- RGB-Farbraum ist deutl. größer als CMYK-Farbraum, viele Farben können dargestellt, aber nicht gedruckt werden
- sRGB-Farbraum für alle Monitore
- Für das Internet sind 216 Farben websicher und verbindlich definiert

Grundregeln für die Farbwahl:

- auf deutl. Farbkontraste zwischen Vorder- und Hintergrundfarbe achten, ohne dass es zu Flimmereffekte kommt
- bei der Farbwahl für (längere) Texte sollte beachtet werden, dass Lesen am Monitor anstrengend für die Augen ist, deshalb Farbkombinationen wählen, die lesefreundlich und augenschonend sind
- Farbverläufe vermeiden, da auf vielen Grafikkarten eine farbtiefe von 8 oder 16 Bit eingestellt ist, es kommt in diesem Fall zu Farbabrissen bzw. zum Dithering der Farben
- Bunte oder leuchtende Hintergrundfarben vermeiden, da sonst die Aufmerksamkeit des Betrachters vom wesentlichen Elementen der Seite abgelenkt wird
- Auf die Dateigröße der Bilder achten, viele Farben bedeutet große Dateien und damit längere Ladezeiten der Webseite
- Eine Farbe kann in unterschiedlicher Sättigung und Helligkeit eingesetzt werden, die sich ergebenden Bunt-Unbunt- und Hell-Dunkel-Kontraste harmonieren
- Weniger ist mehr! Viele bunte Farben sollten allenfalls bei Produkten für Kinder verwendet werden
- Negative Schrift (helle Schriftfarbe auf dunklem Hintergrund) ist bei ausreichend Kontrast gut lesbar, für längere Texte empfielt sich eher die Verwendung positiver Schrift, reines Weiss als Hintergrundfarbe sollte vermieden werden, da hier der Kontrast zur Schrift zu hoch ist

Bildschirmtypografie:

1. Monitorauflösung:
- Monitorauflösung beträgt zwischen 72 und 96 ppi
- 800 dpi kann unser Auge auflösen, deshalb können wir problemlos einzelne Pixel am Monitor unterscheiden und schräge Linien als Stufen erkennen
- Konsequenzen für die Darstellung und Verwendbarkeit von Schriften in Fließtexten: gekrümmte Linien werden stufig und zerhackt dargestellt, alle Feinheiten und Details der Schrift gehen verloren
- Buchstabenabstände sind uneinheitlich und unausgeglichen, Schriftcharakter geht verloren, Schriftbild wird unruhig und ungleichmäßig, Lesbarkeit wird stark beeinträchtig
- Viele Schriften in den Lesegrößen zwischen 8 und 12 Punkt sind nicht für die Bildschirmausgabe geeignet = Schriften mit filigranen Serifen und feinen Duktusunterschieden, kursive Schriften/Schriftschnitte, Schreibschriften, schmal laufende Schriften/Schriftschnitte und gebrochene Schriften

2. Bildschirmschriften:
- Schriften speziell für die Darstellung am Monitor, grobe Monitorraster (72 bis 96 ppi) wurde berücksichtigt, Buchstaben und deren Abstände wurden an dieses Raster angepasst = gute Lesbarkeit
- Häufig als Systemschriften verwendet: PC = Times New Roman, Arial, Verdana, Tahoma; Mac = Schriften mit Städtenamen (Chicago, Geneva, New York), Verdana, Epsy Sans, Epsy Serif
- Verdana ist gut für Websiten geeignet, weil sie auf PC und Mac vorhanden ist

3. Antialiasing:
- Kantenglättung der Schriften
- An den Kanten werden Pixel hinzugefügt, die einen Tonwert zwischen Schrift- und Hintergrundfarbe besitzen
- Für das Auge entsteht der Eindruck einer glatten (stufenlosen) Kante
- Nachteil: eine gewisse Unschärfe der Schrift entsteht, für geringe Schriftgrößen unter 10 Punkt ist Antialiasing nicht geeeignet
- Html-Websites ermöglichen kein Antialiasing => muss Schrift als Grafik gespeichert werden, führt aber zu längeren Ladezeiten
- Andere Möglichkeit der kantenglättung ist Flash zu verwenden

4. Problem der Schriftgröße:
- aufgrund der unterschiedlichen Definition der Größe eines Pixels werden identische Schriftgrößen auf MAC und PC völlig unterschiedlich dargestellt
- 90% der Internetnutzer sitzt an einem PC => Gestaltung mehr daran anpassen, Schriften sollten trotzdem auf dem MAC lesbar sein (Schriftgrade unter 9 Punkt sollten vermieden werden)

weitere Themen kommen demnächst

Jani

[Janine]

hier noch eine Erweiterung zu Screendesign...

Screendesign

Recherche: zu Beginn steht eine intensive Zielgruppenanalyse und Produktrecherche
Konzept und Expose: in schriftl. und skizzierter Form werden, häufig nac einem Brainstorming, die wichtigsten Ideen estgehalten
Erste Prototypen: anhand einiger Bilder wird dem Kunden die Konzeption, Strategie und Benutzeroberfläche deutl. gemacht
Mood- und Flow-charts: in Mood-charts werden die Stimmung und der Stil der Anwendung optisch eingefangen; Flow-charts sind Flussdiagramme, die den Aktionsspielraum des Anwenders definieren
Testings: in fast allen Phasen der Entwicklung werden Tests gemacht, um die Anwendung oder Teile davon in ihrer Verständlichkeit für den Anwender und in ihrer Programmierung zu überprüfen

Flussdiagramme:
- Drei Grundmodelle:
- das Leitermodell = gut geeignet für Wissensvermittlung, wo die Lerneinheiten Stufe für Stufe aufeinander aufbauen, Einschränkung des interaktiven Spielraums – dadurch weniger Ablenkungsmöglichkeiten und Lernziel wird schneller erreicht, Anwender wird linear durch die einzelnen Lektionen geführt
- das Baummodell = verästelt sich ausgehend von einem Hauptmenue in mehrere Untermenues, werden verwendet, wenn zu einer Hauptinformation Nebeninformationen angeboten werden oder wenn der zu vermittelnde Inhalt bereits selbst hierarchisch in Haupt- und Unterthemen gegliedert ist
- das Netzwerkmodell = alle Screens werden miteinander in einer Weise verknüpft, die es dem Benutzer ermöglicht, bequem in alle Richtungen zu navigieren, die gewünschte Information kann dadurch oft schneller und auf frei wählbaren Verknüpfungswegen erreicht werden, Benutzer kann selbstständig durch das aufwendig vernetzte System navigieren –> geübter Benutzer, unerfahrende Benutzer brauchen erst mal vordefinierten Leitfaden

Metaphern (Orientierungshilfen für den Anwender):
- für interaktive Anwendungen lassen sich viele Formen aus unserer Umwelt als Methapher verwenden, um uns das Zurechtfinden erheblich zu erleichtern
- bekannte Metaphern = Bücher, Steuer- und Bedienungselemente technischer Geräte, aber auch simulierte Gebäude, die zum Erkunden einladen, vertraute Programmoberflächen wie Menueleisten oder die grauen, eckigen Windows-Buttons, weil dem Anwender ihre Funktion bekannt ist
- hat zur Folge das einige Multimediaanwendungen langweilig und uninspiriert aussehen -> ein gelungendes Screendesign besteht aus Metaphern, die eine visuell interessante Umsetzung zulassen und geeignet sind, die zu vermittelnden Inhalte leicht zugänglich und transparent zu machen

Navigationsanzeigen:
- Bücher: jedes Buch ermöglicht seinem Leser eine haptische und visuelle Kontrolle der zurüchgelegten und der noch zurückzulegenden Lesestrecke; fast jeder weiß aus eigener Leseerfahrung, wie wichtig diese halbbewussten, permanenten Statusmeldungen der Hand und des Auges über die augenblickliche Leseposition sind; Bücher werden beiseite gelegt, wenn sie zu dick sind, und sie werden anders gelesen, wenn sie sehr dünn sind; das gelegentliche Aufschlagen bereits gelesender oder noch zu lesender Passagen gehört gleichfalls zu den ganz selbstverständlichen Angewohnheiten und Bedürfnissen während der Lektüre;
- Interaktive Anwendungen: solche Möglichkeiten zur Kontrolle und Orientierung sollten vorkommen; z.B. dem Anwender seine letzten Navigationen anzuzeigen

Lesezeichen:
- in einigen Anwendungen kann der Benutzer Lesezeichen anbringen, die ihm das spätere Auffinden der betreffenden Stellen erleichtern
- miniaturisierte Ablaufdiagramme, machen den Aufbau der Informationen nachvollziehbar (Sitemaps)
- Anwendungen mit großer Informationstiefe sollten einen Index besitzen

Bildschirmtypografie:
- Schriftart: Antiquaschriften sind in Grundschriftgröße weniger für den Bildschirm geeignet als Groteskschriften; man sollte darauf achten nicht zu dünne Serifen und Abstriche vorkommen zu lassen
- Schriftgrad: Schriften werden am Bildschirm schlechter dargestellt; gedruckter Text hat eine Auflösung von 1200 oder 2400 Bildpunkten pro Inch; Bildschirm 72 bis 96 Inch; Schriften ab 6 pt sind so grob aufgelöst, dass man sie kaum lesen kann; Bildschimtext = 10 bis 14 pt
- Schriftschnitt: weiße Flächen auf einem Bildschirm sind heller als weißes Papier; dies führt dazu, dass Randbereiche der Schrift überstrahlt werden, wodurch sie dünner erscheinen; um diesem Überstrahlen entgegenzuwirken kann man die Strichstärken dicker machen oder den Hintergrund abdunkeln
- Textmenge: Bildschirmtexte sind anstrengend zu lesen; deshalb auf längere Texte verzichten; um den Leseanreiz zu erhöhen, sollten Texte großzügig und mit weiten Zeilenabständen angelegt werden

Jani

[Janine]

Sagt mal Leute, was lernt ihr eigentlich für den Sozialkunde Bereich, hab keinen Plan was ich mir dafür anschauen kann...

Jani