Webdesign

Wie erwähnt, müssen wir als Aufgabe drei verschiedene Artikel zusammenfassen (ca. 500 – 600 Wörter/Artikel).

http://dev.opera.com/articles/view/9-building-up-a-site-wireframe/

Man sollte verstehen können, wie eine Website aufgebaut ist, bevor man sich an eine heran wagt.
Im folgendem geht es um eine Erstellung einer Website für ein fiktives Unternehmen, welches ich aber außen vor lasse.
Selbst wenn Design und Farbe eine wichtige Rolle spielen, sollte man zuerst in Erfahrung bringen, was der Kunde damit aussagen und erreichen will. Hat er eine CI/ein Branding und eine Marketingstrategie oder muss dieses noch erstellt werden? Wenn es noch erstellt werden muss und man selbst nicht die nötige Erfahrung hat, sollte man das Spezialisten überlassen.
Soll die Website rein informativ sein oder will sie etwas verkaufen? Blog? Kontaktformular oder eine Fotogallerie? Ist das von Belang?
Schon bevor man an Design und Farbe denkt, lässt sich sagen: Die Website soll jedem zugänglich sein (z.B. Menschen mit körperlicher Behinderung) und leicht nutzbar/verständlich.

Dazu braucht es eine gut strukturierte Seite in HTML und CSS, bei der man vorher überlegen sollte, wo Flash, JavaScript usw. eingesetzt wird,  um es später dem Designer und dem Programmieren (manchmal die selbe Person) leichter zu machen.

Die ersten Schritte

1. Website-Name: Reflektiert er das Unternehmen? Ist er aussagekräftig genug?
2. Logo und Branding: Alles sollte gesammelt werden, alte Fyler/Broschüren/Geschäftspapiere etc., um sich ein besseres Bild des Unternehmens zu bilden. Auch Telefonnummer, Adressen etc. sollten in einer Datei gesammelt werden, das erleichtert das einfügen später.
3. Domain-Name: Der Name, den man im Browserfenster eingeben muss, um auf die Website zu gelangen. Man sollte ihn vorher kennen, um es ggf. in den Inhalt einzubinden. Ist er auch frei?
4. Wie sehen die Seiten der Konkurrenz aus? Welche Bildsprachen, Diagramme und grafischen Elemente benutzen sie? Wichtig, wenn man etwas besseres Zustande bringen will.
5. Wie sieht die Linkstruktur aus? Wird die Seite statisch bleiben oder sich in Zukunft verändern?
6. Wie sieht der Inhalt aus? Der Inhalt kann ausschlaggebend für die Typografie sowie das restliche Design spielen.
7. Suchen des richtiges Hosts: Manche Anbieter bieten keine Datenbanken an (die wichtig für Blogs/Shops sind) oder nur eine begrenzte Zahl von Traffic.
8. Verlassen der Seite: Jeder potenzielle Kunde verlässt irgendwann die Seite, also warum keine inhaltsbezogene Werbung durch einen externen Link platzieren? Sowas kann dem Unternehmen zusätzlich Geld einbringen.
9. Deadlines: Wann wird die Website scharfgestellt?

Auch ein wichtiger Punkt ist die Suchmaschienenoptimierung. Wie optimiere ich das HTML, um von Suchmaschinen schnell gefunden zu werden? Auch hier gilt: Spezialisten beauftragen.

Was das Layout angeht: immer abhängig von Zielgruppe und dem Inhalt. Ein Blog sieht anders aus als ein Shop für einen Händler, aber sowas weiß man mittlerweile.

Validierung: Ist die Website valide? HTML und CSS fehlerfrei?

http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/

In diesem Artikel werden Eigenschaften vorgestellt mit denen man Text formatieren kann.

Der Weißraum den man in einer HTML-Datei sieht (der Raum zw. den Wörtern) kann durch Leertaste, return-Tase und tab-Taste erzeugt werden. Dieser Weißraum wird in den meisten Browsern nur mit einer Leertaste angezeigt. Das kann man ändern, aber dazu gleich mehr.

Block Elemente

Zuerst gibt es die Möglichkeit die wichtigsten Zeilen mit einem header-Element (h1 –h6) zu umgeben, wobei <h1> die größte Schriftgröße und <h6> die kleinste Schriftgröße anzeigt.
So ist ein <h1>Hallo Welt!</h1> größer als ein <h6>Impressum</h6>.
Das ist wichtig für Suchmaschienen, weil der Inhalt einer Website nach header-Elemente durchsucht wird.

Paragraphen werden dazu benutzt, um anzuzeigen, dass gerade ein Paragraph zu lesen ist. Wie in einer Zeitschrift o.a. Der Paragraph wird in <p> gehüllt.

Das blockquote-Element ziert Zitate. Wenn es darum geht, Zitate aus anderen Blogs usw. anzuzeigen, wird <blockquote> benutzt, was aber nie alleine stehen kann, sondern in der jeweiligen Eigenschaft, die es in dem Blog usw. hatte, z.B. <blockquote><p>…

Vorher formatierter Text, sprich Weißräume die in der HTML-Datei vorformatiert sind (s. oben), kann man im Browser anzeigen lassen, indem man die Eigenschaft <pre> davor setzt.

Inline Elemente

Kurze Zitate haben die Eigenschaft <q>, da das Element <blockquote> meist einen eingerückten text zufolge hat. So kann <p> (genauso wie <blockquote>) durch die CSS-Datei weiter formatiert werden, z.B. die Anführungszeichen.

Hervorhebungen in Sätzen ist die Eigenschaft <em> zugeschrieben. Wenn man einzelne Wörter hervorheben möchte (<em> sorgt dafür, dass der Text italic wird). Sollte man einen ganzen Satz hervorgehoben haben und möchte ein Wort darin extra hervorheben, benutzt man <strong>, was zur Folge hat, dass das Wort bold wird.

Sonst werden im Artikel nur noch Eigenschaften gezeigt, die man heutzutage nicht mehr benutzen darf, deshalb zähle ich sie nicht auf, warum auch?