Webseiten richtig zu machen und zu gestalten.Sie lernen nicht nur, wie Webseiten erstellt werden, sondern auch wie man Informationen optimal aufbereitet.
lernen Sie:
Wenn man von dem „Internet“ spricht, ist gewöhnlich das „World Wide Web“ kurz WWW oder Web gemeint. Im Web bekommt die Gestaltung der Schnittstelle zwischen Mensch und Computer eine völlig neue Bedeutung, da die Flut an Informationen und Angeboten im Internet tagtäglich wächst, und somit immer unübersichtlicher wird. Webkataloge und Suchmaschinen sind voll Websiteanbietern mit unzählig vielen Informationen. Auch, wenn gute Absichten zu erkennen sind, so ist ein Besuch der Website allerdings dann oft ernüchternd. Hier blinkt es, da öffnet sich ein Pop-up-Fenster, dann ist da noch ein Banner eingeblendet, ewig lange Einführungstexte, die sowieso kein Mensch liest, lenken vom Wesentlichen ab. Man weiß eigentlich gar nicht so recht, was man auf der Seite soll und geht weiter zur nächsten. Als Lost in Hyperspace (verloren im Hyperraum) bezeichnet man das Gefühl der Desorientierung, das Leser bei der Lektüre von Hypertext-Dokumenten erleben können. Sind die Informationen auf mehreren Seiten verteilt, die über Hyperlinks miteinander verknüpft sind und werden dem Leser mehrere Optionen geboten, mit denen er innerhalb des Textes „umherspringen“ kann, weiß er nicht sicher, welche Teile des Textes er noch nicht gelesen hat. Das kann z. B. daran liegen, dass ein Besucher nicht genau weiß:
Zeit ist im Internet ein knappes Gut. Websurfer sind anspruchsvolle Menschen. Sie haben es stets eilig, sind schrecklich ungeduldig und verlangen immerfort nach Neuigkeiten. Diese Leute wollen sofort bedient und zufriedengestellt werden – und sie tun nicht unbedingt das,was ihnen nahegelegt wurde. Wenn die Informationen auf mehreren Seiten verteilt sind und über Hyperlinks miteinander verbunden sind, kann der Leser verschiedene Wege wählen, um den Text zu lesen.Ein Besucher kann nicht genau wissen: Wann ist er gerade im Dokument? Das gilt vor allem für mobile Nutzer, die nicht die Geschwindigkeit von DSL besitzen. Grafiken können die Downloadzeit einer Webseite erheblich erhöhen. Sie steigern weder die Attraktivität einer Site noch den Spaß am Surfen. Der entsteht erst, wenn das Gesuchte gefunden und das Gestellte erreicht ist. Dann spielen die Downloadzeiten keine große Rolle mehr. Wer das gewünschte Objekt gefunden hat, wartet gerne. Wer es nicht bekommt, wird wütend. Designer, die dreißig oder sechzig Grafiken auf eine Seite bringen, müssen sich nicht wundern, wenn der Besucher wegläuft. Viele Leute haben DSL, aber es gibt immer noch Gebiete ohne Internet. Wer mobil ins Internet geht, hat auch schlechtere Verbindungen. Grundlagen der Terminologie Um im Web Informationen zu finden, müssen wir aufmerksam sein. Schließlich wollen wir ja Stammbesucher haben. Wir müssen die Größe von Bildern kleiner machen. Wir müssen die richtige Grafik-Datei auswählen und eine Webseite aufbauen. Sie wissen nie genau, wer Ihre Seiten aufruft. Die Leute haben oft bei Google gesucht. Sie sind zufällig auf Ihre Seite gekommen. Sie möchten jetzt schnell wissen, ob Sie die gesuchte Information auf dieser Seite finden oder ob es für Sie interessant sein könnte. Ein erster Eindruck ist sehr wichtig.
Um auf der Seite zu bleiben, sollte der Benutzer sich zurechtfinden und keine negativen Überraschungen erleben. Links, die ins Leere führen. Es gibt auch Leute, die ihren Browser aus verschiedenen Gründen nicht benutzen. Man kann Javascript oder Plug-ins benutzen, zum Beispiel. Der Besucher kann die Webseite mit der Technik ändern, die er benutzt. Webdesign versus Webdesign Design bedeutet so viel wie „bezeichnen“. Design bedeutet, einen Gegenstand zu entwerfen, zu gestalten und zu gestalten. Beim Webdesign geht es um die Gestaltung von Webseiten. Der Begriff Webentwicklung beschreibt eher technische Dinge. Es ist üblich, dass Webdesigner nur Code erstellen. Viele Webdesigner sind nicht sehr kreativ. Es soll nicht heißen, dass es keine Leute gibt, die sich dem Thema „Web“ eher von technischer Seite genähert haben. Es gibt viele ausgebildete Grafikdesigner, die sich intensiv mit der technischen Seite des Internets befasst haben. Der Begriff "Webdesigner" wird oft falsch verwendet, wenn man ihn im weitesten Sinne betrachtet. Wie gehen wir in diesem Studienheft damit um? Es wendet sich an die Zielgruppe der Entwickler. Wir benutzen den Begriff Webdesigner auch hier. Er ist einfacher zu lesen als das etwas sperrige Wort Webentwickler. Jetzt wissen wir, was gemeint ist. Webentwickler sollten zumindest grundlegende Designkenntnisse haben. Deshalb widmet sich ein weiteres Studienheft diesem Thema. Im vorliegenden Heft werden diese Punkte bewusst nur oberflächlich behandelt. Dietechnischen Konsequenzen bestimmter gestalterischer Aspekte werden wir hier jedoch bereits aufgreifen und erläutern.
Im nächsten Abschnitt erklären wir die Begriffe Website und Webseite. Der Begriff "Site" stammt aus dem Englischen und bezieht sich auf ein Grundstück, eine Anlage, einen Liegeplatz oder einen Standort. Eine Website ist ein Projekt, das aus mehreren Webseiten, Bildern, Audio- und Videodateien, PDFs und Animationen besteht. Eine Website ist eine Webseite, die über eine eindeutige URL (Uniform Resource Locator) erreichbar ist. Eine Webseite ist ein einzelnes Dokument im World Wide Web, das über einen Webbrowser von einem Webserver abgerufen und betrachtet werden kann. Wir müssen erklären, was "Homepage" bedeutet. Es ist nur die Startseite einer Webseite. Es hat sich jedoch eingebürgert, den Begriff "Homepage" auch für einen gesamten Internetauftritt zu verwenden ("...mein Freund Michael hat jetzt auch eine Homepage"). Dies ist nicht ganz korrekt (da welche Website besteht schon nur aus einer Seite), aber solange alle verstehen, was gemeint ist, ist dies akzeptabel. Zu beachten ist, dass der Dateiname der Startseite einer Website immer "index.html" sein muss.
|
|
Webdesigns haben sowohl gestalterische als auch technische Aufgaben. Internetinformationen müssen so gestaltet werden, dass sie leicht zu verstehen sind. Der Webdesigner muss die Wünsche des Auftraggebers, der Besucher und der technischen Möglichkeiten gut zusammenbringen. Im Design gilt: "Form follows function". Das bedeutet, dass der Inhalt am Anfang steht und nicht das Farbschema oder das Layout. Das Design muss der Aufgabe dienen. Websites können nicht immer erfolgreich sein, weil sie gut aussehen. Erfolgreich ist, wenn alles gut läuft. Dies wurde bereits von Jakob Nielsen in seinem Buch "Der Erfolg des Einfachen" betont. Websites, die attraktiv aussehen, ziehen Besucher an. 1.4 HTML, CSS und JavaScript: Aufbau und Funktion Der Sockel ist das Fundament für das nächste Gebäude. Dieses Prinzip kann man auch auf das Webdesign anwenden. HTML, CSS und JavaScript sind die Grundlagen für die Seiten und deren Inhalte im World Wide Web. Man sollte sich frühzeitig mit den drei Hauptprogrammen der Webdesigner beschäftigen und ihre Funktionen erklären. In diesem Kapitel wird ein grober Überblick gegeben. Die Details werden im Laufe des Kurses in weiteren Studienheften erarbeitet. HTML ist die Sprache, die man benutzt, um Webseiten zu schreiben. HTML legt fest, welche Elemente eine Webseite enthält und wie sie strukturiert ist. HTML wird daher fälschlicherweise oft als Programmiersprache angesehen. Tatsächlich handelt es sich bei HTML um eine Auszeichnungssprache zur Strukturierung und Darstellung von Text (Englisch "Markup"). Webseiten werden geschrieben und nicht programmiert. Ein Browser liest den Quellcode und wandelt ihn in eine lesbare Bildschirmseite um. oder pressen Sie CTRL + Enter zum Umformulieren
HTML verwendet Tags (Deutsch: "Markierungen und Kennzeichnungen") Tags sind Abkürzungen, die in langen Klammern stehen. Sie helfen, einen Absatz als "p" (p für Paragraph) zu kennzeichnen. Diese Tags können Ergänzungen mit definierbaren Werten enthalten. Hier ist ein Beispiel für einen HTML-Verteiltext.
<p class="inhalt">Hier steht der Text des Absatzes</p> In diesem Beispiel machen wir einen Absatz p mit dem Namen "Inhalt". Man benutzt Tags, die öffnen und schließen. Diese Tags sind mit einem Strich gekennzeichnet. Attribute werden im Start-Tag mit Leerzeichen vorangestellt und ihre Werte in Doppel- oder einfachen Anführungszeichen geschrieben. In der aktuellen HTML5-Version kann man die Anführungszeichen weglassen, wenn die Werte keine Leerzeichen haben. HTML ist eine der wichtigsten Eigenschaften von HTML. Hyperlinks ermöglichen es, zu anderen Textstellen zu gelangen. .inhalt Der Absatz definiert eine Liste bevorzugter Schriftarten und die Schriftgröße. HTML und CSS zeigen gut, wie man Webseiten richtig macht. Das hilft dabei, gute Websites zu machen. Der letzte Punkt, den wir kurz erwähnen, ist JavaScript. Diese Programmiersprache kann in den HTML-Code eingefügt und dann vom Browser des Nutzers ausgeführt werden. Hier ein einfaches Beispiel: Der echte JavaScript-Code wird in die speziellen HTML-Tags eingefügt. Die Funktion alert macht im Browser ein kleines Fenster mit der Nachricht "Hallo Welt". JavaScript wird vom Browser nacheinander ausgeführt, da es sich um Skriptsprachen handelt. JavaScript ermöglicht die Steuerung von Websites durch JavaScript. Seit HTML5 ist JavaScript sehr wichtig für das moderne Webdesign. HTML, CSS und JavaScript sind Sprachen. Diese Sprachen nennt das W3C (World Wide Web Consortium) Das W3C wurde gegründet, um einheitliche Technologien zu entwickeln, die das Web verbessern und kompatibel machen. Tim Berners-Lee, der Erfinder des Internets, ist Vorsitzender. Die Web-Standards sorgen dafür, dass Websites gut auf dem Computer und auf der Plattform laufen und gut für Suchmaschinen sind. Sie sollten auch die Anforderungen für Barrierefreiheit erfüllen. Diese Standards sollen helfen, Browserkriege der 90er Jahre zu vermeiden. In den letzten Jahren gab es eine zweite Organisation, die HTML5 zum Durchbruch verhalf. HTML5 wird als "Living Standard" angesehen. Die Versionsnummer ist nicht mehr wichtig. Safari und Chrome verwenden die Webkit Rendering-Engine, um ihre Konkurrenten zu übertreffen. Dies führt dazu, dass Webdesigner attraktive Gestaltungseffekte nutzen, die nicht von allen Browsern unterstützt werden.
Unterschied zwischen Print und Web Anfänger haben oft Schwierigkeiten, den Begriff "Seite" für eine Webseite zu verwenden. Es gibt eigentlich nichts an dem Begriff. Als Gestalter und Entwickler von Internetseiten müssen Sie immer im Hinterkopf behalten, dass eine Webseite mehr Anforderungen als eine gedruckte Seite erfüllen muss. Eine gedruckte Seite hat zum Beispiel folgende Merkmale: Passt gut in die Höhe und Breite. Wir platzieren Texte und Bilder so, dass sie gut passen. Schreibe feste Schriftgrößen. In der Farbe CMYK gibt es viele Farben. Diese Farben sehen auf dem Monitor und beim Druck fast gleich aus. Hier sind die Informationen hintereinander angeordnet. Um Informationen zu finden, muss man blättern oder ein Inhaltsverzeichnis verwenden. Man kann eine gedruckte Seite kontrollieren und ändern. Web-Dokumente sind anders als gedruckte Papiere. Je nach Größe des Browserfensters und Endgeräts: Vom 16:10 PC-Monitor über Tablets bis zum Smartphone. Die Gestaltung des Layouts hängt von der verwendeten Technik ab. Je nach Einstellung, Monitorauflösung und Endgerät variieren die Schriftgrößen. Die Farbe kann vom Computer, vom Betriebssystem, dem Browser oder vom Monitor abhängen. Monitore arbeiten mit RGB-Farben (siehe Kapitel Farben) Wenn man auf Links klickt, kann man zu anderen Seiten oder Inhalten gelangen. So kann man im Internet surfen. Die Informationen kommen oft in Gruppen. Jeder kann sich die wichtigen Infos anschauen. Der Benutzer bestimmt, welche Informationen er als nächstes erhält. Eine Webseite ist ein interaktives Dokument, das auf vielen verschiedenen Geräten gelesen werden kann. Der Webdesigner muss Dialoge gestalten, z.B. bei Formularen. Der Benutzer hat die Möglichkeit, das Aussehen der Seite zu ändern. Man kann die Regeln von gedruckten Seiten nicht eins zu eins auf Webseiten übertragen. Webseiten sind in direkter Konkurrenz zu ihren Mitbewerbern. Das eigene Angebot muss immer besser und attraktiver sein als das der Konkurrenz. |
|
Die Startseite und die Inhaltsseiten Innerhalb einer Website gibt es verschiedene Seitentypen, die jeweils eine bestimmte Funktion erfüllen. Die Startseite soll die Besucher über den Absender, den Adressaten, das Thema und die Aktualität der Website informieren. Moderne Webdesigner argumentieren, dass die Startseite nicht wesentlich anders gestaltet sein sollte als die Unterseiten, da viele Nutzer heute direkt zu spezifischen Unterseiten gelangen. Eine schnelle Ladezeit und eine einfache Navigation sind entscheidend für die Geduld der Nutzer. Viele Benutzer bevorzugen teure "Splash-Seiten" mit aufwendigen Multimedia-Effekten, weil sie schnell zu den eigentlichen Inhalten gelangen möchten. |
