[Oceans_eleven]

hallo Designer,

hilft keiner bei der Stoffsamlung mit ???

[Oceans_eleven]

Guten Nacht allerseits,

hab was für Screen-Design vorbereitet, hoffe alles richtig. Morgen kommt der zweite Teil davon


Screendesign

Screen- und Webdesign sind nicht dasselbe. Beim Screendesign geht es ums Visuelle, um die sichtbare, von Monitoren oder vergleichbaren Displays dargestellte Oberfläche.


Nachteile “Bildschirm-Design” gegenüber” “Print-Design”
- Geringere Auflösung ( niedrig 72-96 ppi im Prindesign z.b. 2400 dpi)
- Fehlende Farbempfindlichkeit (RGB-Farbraum -> Monitorabhängig)
- Stark eingeschränkter Schriftenauswahl (nur bildschimtaugliche Schriften bzw. Systemschriften
- Festlegung auf eine querformatige Ausgabe (Querformat, meistens im Seitenverhältniss 4:3)


Vorteile “Bildschirm-Design” gegenüber “Print-Design”
- Aktualität (einfach und günstig)
- Verbreitung (regional bis global -> Internet)
- Multimedialiät (Sound, Video und Animation)
- Interaktivität (z.B. Formulare, Email und Foren,...)


Gemeinsamkeiten Bilschirm- und Print-Design
- Gestalterische Grundlagen
- Seitenaufteilung
- Farbenlehre
- Typografie


Format
Der Format digitaler Produkte ist vom Monitor abhängig. Diese besitzen ein festes Verhältnis von Breite zu Höhe, beispielsweise 4:3. Die Auflösung des Monitors, also Breite x Höhe in Pixel, hängt einerseits von dessen Größe und andererseits von der Grafikkarte ab.

Nutzfläche beim Screen-Design -> Bei allen browserabhängigen Produkten muss berücksichtigt werden, dass das Browserfenster vor allem in vertikaler Richtung Platz benötigen.

Beschränkung auf 800x600 Pixel --> so bleibt auf großen Monitoren jede Menge platz frei. Konzipiert er seine Seiten umgekehrt für eine Auflösung von beispielsweise 1280x1024 Pixel , so wird die Site auf kleineren Monitoren nicht komplett dargestellt. Screen-Designer sollten das Scrollen allerdings auf die vertikale Richtung beschränken – horizontale Scrollen ist ungewohnt und wenig benutzerfreundlich.

Gestaltunsraster
Man beginnt mit einem Seitenlayout und teilt die verfügbaren Flächen auf. Den entsthenden Teilflächen werden die gewünschten Funktionen zugewiesen, z.B:
- Hauptnavigation
- Unternavigation
- Inhaltsbereich – Text
- Inhaltsbereich – Bild
- Firmenpräsentation, Logo
- Such- und Hilfsfunktion
- Freiraum, Freifläche
Das enstandene Raster ist mit einem Gestaltungsraster beim Printproduktion vergleichbar. Entscheidend ist die Anwendung des Rasters auf sämtliche Screens des multimedialen Produktes. Diese werden einmal erstellt und bilden dann die Vorlage für alle weiteren Seiten. Und so eine Musterseite nennt man im Screen-Design “Template”. Ein Template enthält alle Seitenelemente die auf jedem Screen zu sehen sein sollen. Für alle veränderlichen Inhalte ( Texte und Bilder) werden “Platzhalter” eingefügt.

Der große Vorteil dieser Vorgehensweise ist, dass eine nachträgliche Anderung des Layouts problemlos möglich ist: Eine Modifikation des Templates wirkt sich auf alle bereits erstellten Seiten aus.

Farben:
Farbdarstellung verwenden Monitore die Lichtfarben RGB. Die Darstellung dieser Bildschirmfarben hängt maßgeblich von der Qualität und von den Einstellungen des eingesetzten Monitors und von der Grafikkarte ab.
Wesentlich Faktoren sind:
- Alter des Monitors
- Konvergenz des Monitors
- Blickwinkel auf dem Monitor
- Lichverhältnisse am Arbeitsplatz
- Helligkeit- und Kontrast-Einstellunge am Monitor
- Farbtemperatur des Monitors
- Farbtiefe der Grafikkarte
Leuchtende, stark gesättigte – Farben im Rot-, Grün- und Blaubereich kann man zwar am Monitor darstellen, aber drucken kann man es nicht. Wenn Farben benötigt, die sowohl gedruckt als auch auf dem Monitor dargestellt werden können, dann sind sie der Schnittmenge des RGB- und CYMK-Farbraums zu entnehmen.

Farbkontraste:
Schlechte Kontraste
- Sehr hohe Kontraste wie z.B. Schwarz/Weiß
- Sehr geringe Kontraste
- Komplementär-Kontraste: Farben die im Farbkreis gegenüberliegen, lösen sehr starke Reize im Auge aus. Dies kann zum Flimmereffekt führen, bei dem die Schriftkonturen nicht mehr scharf wahrgenommen werden.
- Helle(nevatige) Schrift auf dunklem Hintergrund: Dies entspricht nicht unserem Sehgewohnheiten und ist bei größrer Textmenge zu vermeiden.
- Grelle und stark gesättigte Farben im Hintergrund, die den Vordergrund überstrahlen
Gute Kontraste
- Bunt-Unbunt-Kontraste: Kombination einer Farbe mit Grau, Schwarz oder mit einer wenig gesättigten (unbunten) Farbe.
- Kalt-Warm-Kontrast: Kombination von warmen (Gelb, Orange) mit kalten ( Blau) Farben.
- Intensitäts-Kontraste: Kombination von Farben, die sich in Helligkeit und Sättigung deutlich voneinander unterscheiden.
- Dezente Farben oder ein helles Grau eignen sich als Hinergrund besser ein reines Weiß
- Wenn negative Schrift verwendet wird, dann darf der Kontrast zum Hintergrund nicht zu groß sein.

viel spaß beim Lernen

[batthemadbat]

Ich hab mir mal bei wikipedia die verschiedenen Technologien/Sprachen zur erstellung von dynamischen websites zusammengesucht. Hier mein Ergebnis (Da ich auf dem gebiet blutiger Anfänger bin und mir quasi alles erst anlesen muss bitte ich um ergänzung und korrektur wo nötig):

PHP (Hypertext Preprocessor)
Open-Source Software/Programmiersprache. Wird serverseitig ausgeführt, d.h. der client schickt eine Anfrage, das PHP Script sucht sich die Daten auf dem Server zusammen, und gibt diese dann mittels des Interpreters dann als http/pdf Datei im Browser aus. Zeichnet sich durch leichte Erlernbarkeit aus. Lehnt sich in der Syntax an Java und Perl an. Unterstützt viele Funktionsbibliotheken z.B. Einbindung von Bildern und Grafiken, zur dynamischen Erstellung von Homepages. Bietet breite Datenbankunterstützung und Internetprotokolleinbindung.
Mit PHP lassen sich auch nicht webgestützte Anwendungen realisieren, Es spielt seine Vorteile aber vor allem im Web aus.
Nachteil: PHP muss bei jeder neuen Anfrage des Clients an den Server den Interpreter neu starten, was stark zu lasten der Performance geht. Dies lässt sich jedoch mit der Einbindung von Zusatzsoftware umgehen.

ASP (Active Server Page)
Ursprünglich von Microsoft als Nachfolger von SSI entwickelte Technologie. Wird seit Einführung der Nachfolgetechnologie ASP.NET nicht mehr weiterentwickelt.

ASP.NET
Mit ASP.NET können Webanwendungen in anderen von Microsofts .NET unterstützten Programmiersprachen erstellt werden. Theoretisch ist eine reine Entwicklung im Texteditor möglich, jedoch empfiehlt sich die Arbeit mit einer Entwicklungsoberfläche. Aufgrund des großen Umfangs ist ASP.NET schwer zu erlernen.

AJAX (Asynchronos Javascript and XML)
Konzept der asynchronen Datenübertragung zwischen Server und Client. Dabei muss bei einer Anfrage nicht die komplette Seite zur Aktualisierung neu geladen werden, sondern lediglich die benötigten Daten/bestimmte Teile der HTML-seite.

PERL (Practical Extraction and Report Language)
Freie und plattformunabhängige Programmiersprache. Entwickelt als eine Synthese aus C und den UNIX-Befehlssätzen und anderen Einflüssen. Ursprünglich zur Netzwerkadministration entwickelt ist Perl mittlerweile auch bei der Entwicklung dynamischer Webinhalte verbreitet. Ziel der Sprache sind schnelle Problemlösung sowie größtmögliche Freiheit für den Programmierer. Der Umgang mit Text und viele frei verfügbare Module sind die Stärke der Sprache.
Nachteile: Durch die freie Programmierung, ist es möglich für andere Programmierer nahezu unverständlichen Quellcode zu produzieren.

JSP (Java Server Page)
Von Sun Microsystems entwickelte Technologie die zur einfachen Ausgabe von dynamisch erzeugten HTML/XML-Elementen eines Webservers dient. Sie erlaubt es JAVA-Code bzw. spezielle JSP-Aktionen in statischen Inhalt einzubetten. Dies hat den Vorteil, dass Logik und Design unabhängig voneinander entwickelt werden muss (Der Designer muss also keine Ahnung von Java haben.

Cold Fusion
Von Allaire (von Macromedia geschluckt mittlerweile Adobe) entwickelte serverseitige Technologie zur einfachen Erstellung von dynamischen Webanwendungen. Die Tag basierte Entwicklungssprache CFML (Cold Fusion Markup Language) erlaubt einen einfachen Einstieg in die Programmierung. Von den Möglichkeiten her ähnlich wie PHP. Vor allem in den USA verbreitet/ wegen der hierzulande starken PHP Community in Deutschland nicht sehr verbreitet.

[Oceans_eleven]

Schriften:
Die Verwendung von Schriften in digitalen Produkten erweisen sich als problematisch. Die wesentlichen Gründe hierfür sind:
- Die sehr geringe Monitorauflösung
- Die Notwendigkeit der Verwendung von Systemschriften für (HTML-basierte) Webseiten


Monitorauflösung
Schriften am Bildschirm haben deutliche Unterschiede gegenüber einer gedruckten Schrift. Der Grund dafür ist, die unterschiedliche Auflösung. Je höher die Auflösung ist, umso feinere Details lassen sich wiedergeben.
-> Monitorauflösung 72 und 96 ppi (Pixel pro Inch)
-> Druckbild mittels Berlichterauflösung beträgt 2540 dpi (Dots per Inch)
Da der menschliche Auge “nur” etwa 800 dpi auflösen kann, wirken gedruckte Schriften glatt und stufenlos.

Für die Darstellung und Verwendbarkeit von Schriften in Fließtexten ergeben sich aus obiger Erkenntnis erhebliche Konsequenzen:
- Gekrümmte Linien werden stufig und “zerhackt” dargestellt.
- Alle Feinheiten und Details der Schrift gehen verloren.
- Buchstabenabstände sind uneinheitlich und unausgeglichen.
- Der Schriftcharakter geht verloren.
- Das Schriftbild wird unruhig und ungleichmäßig.
- Die Lesbarkeit wird beeinträchtigt.

Systemschriften
Eine weitere große Einschränkung stellt die Auswahl von Schriften für Webseiten dar. Da in HTML-Dateien – im Unterschied zu PDF- oder Flasch-Dateien – Schriften nicht eingebettet werden, bleibt für Webseiten nur die Beschränkung auf Systemschriften übrig.

Diese wurden mit dem Betriebssystem installiert und stehen somit dem Web-Browser zur Darstellung der HTML-Seiten zur Verfügung. Wenn kein Systemschrift benutzt wird, wird die von Ihnen gewählte Schrift am Windows-PC durch eine andere Schrift ersetzt.


Hab die Navigationselemente, sprich (Textlinks, Buttons, Menü, Slices, Imagemap) nicht geschrieben da sie schon als Thema gepostet worden ist.

[Oceans_eleven]

hi Non-Printler wooooooo seid ihr!!!! Wird langsam mal zeit das Ihr auch mal was postet

Mein nächstes Thema ist :

Barrierefreie Internetseiten


Begriff:

Screen-Reader:
Screen-Reader lesen die Inhalte von HTML-Seiten vor oder setzen sie in eine Blindenschrift um.


Wer barrierefreie Webseiten erstellen muss zwei Maßnahmen beachten:
- Deaktivieren Sie die Anzeige von Grafiken in Ihrem Browser.(Diese Option bieten sämtliche Web-Browser)
- Versuchen Sie, die Webseite “mausfrei” ausschließlich mit der Tastatur zu steuern.


Problembereiche der Webseite mit Barrieren:
- Bildinformationen gehen komplett verloren.
- Zu viele Zusatzinformationen unterbrechen den Lesefluss.
- Layout mit Tabellen haben für Nutzer keinerlei Funktion, da sie die Information nicht nachvolziehbar gliedert,
- Abkürzungen werden nicht korrekt vorgelesen
- Die Namensgebung der Button-Dateien bietet dem Nutzer keine Information über deren Funktion
- Die Bedienung von Buttons mittels Tastatur ist äußerst schwierig, da ein Blinder nicht weiß, auf welchem Button er sich aktuell befindet


Barriere Freie Webseiten(Semantische Gliederung): --> “Semantik = Bedeutungslehre”
- Tabellen dürfen nur dann verwendet werden, wenn sie zur tabellarischen Darstellung von Informationen benötigt werden. Das beliebte Layouten mit unsichtbaren Tabellen ist verboten!
- Die Formatierung und Gestaltung der Seite erfolgt nicht mit HTML, sondern konsequent mit Stylesheets(CSS) --> Für menschen mit eingeschränter Sicht --> hoher Kontrast zwischen Schrift und Hintergrund
- Schriftgrößen nicht absolut pt oder px, sondern relativ in em angeben --> dies gibt die Möglichkeit für Sehbehinderte, den darsgestellten Schriftgrad in den Browsereinstellungen zu erhöhen


Texte:
- Die Texte einer behindertengerechten Webseite sind so zu verfassen, dass das Vorlesen einen möglichst sinvollen Text ergibt
- Auch Sonder- und Satzzeichen müssen durch Screen-Reader umgesetzt werden und stören den Textfluss

Bilder/Grafiken
Das Einbinden eines Bildes oder einer Grafik ermöglicht das <img>-Tag die Angabe eines Alternativtextes,

z.B.: <img src= “Frankfurt.jpg” alt=”Bild vom OceansEleven”/>.

Der Text wird angezeigt, falls die Seite ohne bilder betrachtet wird. Außerdem wird er duch ein Schreen-Reader vorgelesen
Er sollte kurz und prägnant die wesentliche Bildaussage beschreiben. Bei Buttons muss aus dem Alternativtext die Funktion des Buttons zu entnehmen sein.


Tabellen:
Wie bereits erwähnt stellen Layout-tabellen eine der größten Barrieren auf Webseiten dar, insbesondere, wenn sie auch noch ineinander verschachtelt sind.
Auch wenn es etwas gewöhnungsbedürftig ist: Layouten funktioniert auch ohne Tabellen mit Hilfe von Stylesheets (CSS)
Statt Tabellenreihen und spalten wird das ansonsten funktionslose <dig>-Tag verwendet. Diesem können beliebig Style-Eigenschaften wie Höhe, Breite, Randbreite, Farbe zugeordnet werden

Abkürzungen:
Abkürzungen werden durch Screen-Reader nur korrekt umgesetzt, wenn sie als solche kenntlich gemacht werden. HTML stellt hierfür das <acronym>-Tag zur Verfügung:

<acronym title=”WordWideWeb”>WWW</acrnoym>

Hyperlinks:
Blinde oder stark sehbehinderte Menschen die Navigationselemente einer Site nicht sehen können, ist ihnen die Bedienung mit Hilfe der Maus nicht möglich und sie sind auf die Tastatur angewiesen
Die Navigation von Button zu Button ist standardmäßig mit de Tabulator-Taste möglichkeit.
Wer nichts sieht muss darüber hinaus aber auch noch wissen, auf welchem Button er sich gerade befindet. HTML stellt hierfür im <a>-Tag zwei Eigenschaften zur Verfügung:

<a href=”index.html” tabindex=”1” accesskey=”1” >HOME<a>
Mit “tabindex” lässt sich die Reihenfolge festlegen, in der die Links durch Betätigen der Tab-Taste angesteuert werden
“accesskey” ermöglicht ie Zuordnung einer Alt-Tastenkombination zur Aktivierung des Buttons


Zusammenfassung:
Eine barrierefrei Site(Hürden für Behinderte Menschen enthält) muss optisch nicht von einer normalen Site sich unterscheiden.

Barrirefreiheit beginnt bei der Konzeption der Site (Navigation, Texte, Bildauswahl) und endet bei deren Umsetzung mit HTML-Tags zur semantischen Beschreibung des Seiteninhalts und CSS zur tabellenfreien Gestaltung.


Anforderungen an eine barrierefreie Webseite:
- Keine layouttabellen verwenden
- Navigationsmöglichkeite per Tastatur ermöglichen
- Alternativtexte bei Bildern ergänzen
- HTML-Tags zur semantischen (inhaltlichen) Gliederung einsetzten – nicht zur Formatierung der Webseite
- CSS zur Formatierung der Webseite einsetzen
- Farben so wählen,dass die Webseite auch Fehlsichtige(ohne Farbe) bedienbar ist
- Sprachliche Besonderheiten wie Abkürzungen kenntlich machen


viel spaß beim lernen!!!

[batthemadbat]

hey, ich fühl mich langsam angegriffen!... oder ignoriert

[anflo]

[twinsspirit]

Hi, da ich seit kurzer zeit erst hier angemeldet bin werde ich mich zuerst schlau machen wie weit ihr gekommen seit!

Muss mal gas geben da ich jetzt erst los lerne