HTML5. Webseiten innovativ und zukunftssicher

Ähnliche Beiträge

• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1
• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS

Weiterhin konzentrierten wir uns auf die Möglichkeiten von HTML 5 und CSS 3.

Beide Teilnehmer sind Auszubildende des WDR und bereiteten sich auch die Zwischen- bzw. Abschlussprüfung zum Mediengestalter vor.

Ähnliche Beiträge

• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS
• HTML Grundlagen und Aufbau
• HTML Aufbau
• HTML- und CSS-Grundlagen

Ähnliche Beiträge

• Webdesign–Aufbau
• Webprogrammierung mit HTML und CSS
• HTML Aufbau
• HTML Grundlagen und Aufbau
• HTML- und CSS-Grundlagen

Ähnliche Beiträge

• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• HTML Grundlagen und Aufbau
• JavaScript – Grundlagen
• HTML Aufbau

Wie gewohnt kann man innerhalb von einem Tag nicht wirklich weit in die Tiefe von diesen 2 umfangreichen Themen einsteigen – aber ich glaube ich konnte einen relativ großen Überblick über die Technologien vermitteln.

Ähnliche Beiträge

• HTML & CSS – Grundlagen
• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS
• HTML Aufbau

Ähnliche Beiträge

• HTML- und CSS-Grundlagen
• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS
• HTML Aufbau

Mittlerweile reicht es aber nicht aus einfache, statische, klassische HTML-Seiten zu machen. Meistens verlangt der Kundeschon bei kleinen Projekten die zusätzliche Einbindung von Web-Technologien die über XHTML hinausgehen. Und so kommt immer in meinen Schulungen eine gute Portion CSS, SEO und Web 2.0 hinzu.

Ähnliche Beiträge

• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS
• PHP – Grundlagen und Aufbau
• Flash – Grundlagen und Aufbau

Warum möchten Teilnehmer Dreamweaver in einer Schulung lernen, wo es doch so viele Bücher, Lern-DVDs und online Tutorials gibt? Ich glaube es liegt an der Bequemlichkeit. In den Schulungen kann man den Trainer direkt fragen. Wenn man ein Problem mit der Erstellung seiner Website hat, kann der Trainer direkt helfen. Bei allen anderen Medien muss man erst selber auf die Suche nach einer Lösung gehen und hoffen, dass jemand dieses spezielle Problem schon mal gelöst und veröffentlicht hat.

Ähnliche Beiträge

• HTML- und CSS-Grundlagen
• Dreamweaver Grundlagen
• HTML & CSS – Grundlagen
• Dreamweaver-Schulung für den Solar Verlag
• flexibles CSS Layout

Da die Adobe Werbung suggeriert ohne HTML- und CSS-Kenntnisse professionelle Website zu erzeugen, war es auch diesmal bei der Dreamweaver-Schulung so, dass sie überrascht waren was zu guten Website alles dazugehört. So war also 2 weitere wichtige Themen in der Schulung (X)HTML und CSS. Wir sprachen aber auch über Suchmaschinen-Optimierung, Barrierefreiheit und Benutzbarkeit von Websites.

Alles in allem war es eine sehr interessant Woche in München – und auch mein erstes Mal in der Landeshauptstadt von Bayern.

Ähnliche Beiträge

• HTML5 – Buch
• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS
• HTML- und CSS-Grundlagen

Die Schwierigkeit in der Schulung war, dass die Teilnehmerinnen bis dato nur mit Frontpage als Entwickler-Tool gearbeitet haben und somit viele neue Features des Webdesigns, wie z.B. das Layouten mit CSS nicht wirklich kannten. Deshalb haben wir gleichzeitig beim Erlernen von Dreamweaver auch noch eine Einführung in CSS und Standard HTML gemacht.

Ähnliche Beiträge

• flexibles CSS Layout
• CSS">Dreamweaver und CSS
• CSS-Seminar bei VVA
• HTML- und CSS-Grundlagen
• Dreamweaver Grundlagen

Bemerkenswert finde ich ihre Ansicht über die Abwärtskompatibilität von Browsern. Sie sind der Meinung, dass es ruhig erlaubt sein sollte die neuen Features der modernen Browser zu unterstützen, solange der Benutzer von älteren Browsern seine gewohnten Möglichkeiten behält.

Weiterhin haben sie in ihrem Buch verschiedene Print-Designs als Vorlage für Web-Designs genommen, was mich auf die Idee gebracht hat selber Print-Vorlagen im Web nachzubasteln.

Meine bisherigen Artikel findet ihr unter der Kategorie "Print-Design"

Ähnliche Beiträge

• Little Boxes
• Das Website Handbuch
• Dreamweaver-Schulung für den Solar Verlag
• CSS-Seminar bei VVA
• vereinfachter CSS-Import von verschiedenen Medien

1. Die große Little Boxes-Box. Webseiten gestalten mit CSS. Grundlagen
2. Little Boxes, Teil 2. Webseiten gestalten mit CSS. Navigation, Inhalte, YAML & mehr

Ähnliche Beiträge

• Transcending CSS
• Das Website Handbuch
• Dreamweaver-Schulung für den Solar Verlag
• CSS-Seminar bei VVA
• vereinfachter CSS-Import von verschiedenen Medien

In diesem Buch werden alle wichtigen Web-Technologien beschrieben:

• HTML
• CSS
• JavaScript
• Ajax
• PHP
• MySQL
• CMS
• Webdesign
• Flash
• Suchmaschinen-Optimierung
• E-Business
• Barrierefreiheit
• Hackerschutz
• Weblogs
• uvm.

Ähnliche Beiträge

• Transcending CSS
• Little Boxes
• Dreamweaver-Schulung für den Solar Verlag
• CSS-Seminar bei VVA
• vereinfachter CSS-Import von verschiedenen Medien

Leider war wie immer die Zeit viel zu kurz um alles Wichtige bestmöglich anzusprechen, aber ich habe, so hoffe ich, es geschafft ein klein wenig das riesige Geflecht der Webtechnologien zu entwirren. Am Ende des Seminars wurden dann folgende Punkte als Seminarinhalt festgehalten:

• Entstehung des Web
• HTML-Grundlagen
• Ausgabedefinierung mit CSS
• Funktionalität mit JavaScript
• Bedeutung von Cookies
• Serverseitige Verarbeitung von Informationen mit PHP und mySQL
• Sicherheitsrisiken von Programmierung am Beispiel von JavaScript und PHP
• Zusätzliche Webtechologien durch Plugins (z.B. Flash und SVG)

Für mich war es sehr interessant zu sehen, wie ein solch großes Unternehmen intern arbeitet. Welche Technologien bzw. welche Soft- und Hardware eingesetzt wird.

Ähnliche Beiträge

• HTML5 – Buch
• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS
• HTML- und CSS-Grundlagen

Teil 1 war ein zweitägiges Seminar in dem wir folgenden Punkte angesprochen haben:

• semantische HTML-Strukturen
• Einbindung von externen CSS-Dateien
• verschiedene Arten von Selektoren
• Gestaltungsideen für Tabellen, Formulare und Listen
• Grundaufbau von einem mehrspaltigen Layout
• spezielle CSS-Eigenschaften für das Print-Design
• Design-Richtlinien für das mobile Web

2 Wochen später folgte dann ein eintägiger Auffrischungsworkshop. Ziel dieses Seminars war es die in der Praxis verwendeten Ideen aus dem ersten Teil zu diskutieren. Ich habe in diesem Workshop den Teilnehmern ein in Fireworks erstelltes Design gegeben und sie sollten dieses mit den bekannten Möglichkeiten umsetzen. Da bei ihnen ein eigenes CM-System zur Erstellung von Websites benutzt wird, entstanden daraus immer wieder interessante Diskussionen welche Vorgehensweisen die Sinnvollsten wären.

Bei diesem Seminar habe auch ich ein paar neue Ideen für die Umsetzung von Designs mittels CSS bekommen. Deshalb in dieser Stelle ein großes Dankeschön an alle Kursteilnehmer.

Ähnliche Beiträge

• Dreamweaver-Schulung für den Solar Verlag
• flexibles CSS Layout
• Cinema 4D Workshop
• HTML- und CSS-Grundlagen
• HTML & CSS – Grundlagen

Ich weiß, diese Idee ist nicht unbedingt die neuste, aber sie gefällt mir und deshalb schreibe ich darüber

Also, im Grunde reicht es, wie gehabt, über den <link>-Tag die externen CSS-Dateien einzubinden. Diese mal werden aber nicht alle direkt per Link eingebunden, sondern nur eine zentrale Verwaltungsdatei pro Ausgabemedium, die dann die Restlichen nachlädt.

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   2: <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

   3: <head>

   4:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5:     <title>RE-Design - CSS - externe Stylesheets</title>

   6:     <link rel="stylesheet" href="screen/zentral.css" type="text/css" media="screen" />

   7:     <link rel="stylesheet" href="print/zentral.css" type="text/css" media="screen" />

   8:     <link rel="stylesheet" href="handheld/zentral.css" type="text/css" media="screen" />

   9: </head>

  10: <body dir="ltr">

  11:  

  12: </body>

  13: </html>

Die zentrale Medien-Datei bekommt dann folgenden Code:

   1: /* CSS Document */

   2:  

   3: @import url('reset.css');

   4: @import url('layout.css');

   5: @import url('design.css');

Es gibt also für jedes Ausgabe-Design einen eigenen Style-Ordner in dem dann jeweils eine CSS-Datei für den global Reset, das grundlegende Layout und die weiteren Design-Angaben, wie z.B. Farb- und Typographie-Angaben, definiert werden.

@Media-Regel

Ein weitere Ansatz wäre die Nutzung der @import-Regel von CSS. Diesen habe ich aber leider noch nicht in allen, heutzutage genutzten Browsern getestet. Hierbei reicht es wieder in der HTML-Datei nur eine externe CSS-Datei einzubinden und in der CSS-Datei werden die nachzuladenen Datei durch die @media-Regel von einander getrennt.

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   2: <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

   3: <head>

   4:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5:     <title>RE-Design - CSS - externe Stylesheets</title>

   6:     <link rel="stylesheet" href="zentral.css" type="text/css" />

   7:  

   8: </head>

   9: <body dir="ltr">

  10: </body>

  11: </html>

   1: /* CSS Document */

   2:  

   3: @media screen {

   4:     @import url('screen/reset.css');

   5:     @import url('screen/layout.css');

   6:     @import url('screen/design.css');

   7: }

   8:  

   9: @media print {

  10:     @import url('print/reset.css');

  11:     @import url('print/layout.css');

  12:     @import url('print/design.css');

  13: }

  14:  

  15: @media handheld {

  16:     @import url('handheld/reset.css');

  17:     @import url('handheld/layout.css');

  18:     @import url('handheld/design.css');

  19: }

Wer in diesem Zusammenhang Erfahrung oder vielleicht Verweise zu weiterführenden Informationen hat, kann ja hier einen Kommentar abgeben.

Auf jeden Fall werde ich natürlich an der Sache dran bleiben und über neue Erkenntnisse berichten.

Ähnliche Beiträge

• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch
• CSS-Seminar bei VVA

Üblicherweise importieren ja fast alle Webentwickler und -designer ihre externen CSS-Dateien mit dem HTML eigenen Tag <link rel="stylesheet" href="path/to/file.css" type="text/css" />. Wenn man nur auch noch unterschiedliche Design für die verschiedenen Ausgabemedien einbinden möchte, erweitert man diesen Tag mit dem Attribute media="screen".

Um eine bessere Trennung im Design zu bekommen, benutze ich 2 CSS-Dateien. Eine für das Layout und eine für die Farben und die Typographie. Nun entsteht aber der unschöne Umstand, dass ich für jedes Ausgabemedium 2 externe Dateien einbinden muss. Wenn ich also für den Bildschirm, den Drucker und den mobilen Endgeräten jeweils ein Design entwerfen, so sind das insgesamt 6 externe CSS-Dateien, plus einer Normalisierungsdatei. All dies über den <link>-Tag zu machen, finde ich umständlich.

Schöner wäre es doch man könnte nur eine externe CSS-Datei einbinden und der Rest wird dann von ihr geladen. Dann sieht der Quellcode etwas aufgeräumter aus.

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   2: <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

   3: <head>

   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5: <title>RE-Design - CSS - @import</title>

   6: <style type="text/css">

   7: /*<![CDATA[*/

   8:  

   9: @import url('style/import.css');

  10:  

  11: /*]]>*/

  12: </style>

  13: </head>

Wenn man nun in der CSS-Datei die restlichen Dateien lädt, wäre ja alles in Ordnung.

   1: @import url('normalization.css');

   2:  

   3: @import url('screen_layout.css') screen;

   4: @import url('screen_design.css') screen;

   5:  

   6: @import url('print_layout.css') print;

   7: @import url('print_design.css') print;

   8:  

   9: @import url('handheld_layout.css') handheld;

  10: @import url('handheld_design.css') handheld;

Doch leider macht an dieser Stelle der Internet Explorer uns wieder einmal einen Strich durch die Rechnung. Denn der ignoriert die @import-Regel wenn sie mit dem Zusatz der Medienausgabe belegt wird. In diesem Fall würde also nur die Normalisierungsdatei geladen.

Interessant ist auch, dass mein über alles geliebter Opera-Browser nur die screen-Erweiterung versteht und die anderen ignoriert, was bedeutet: er druckt das Screendesign aus.

Fazit

Mein Fazit zu diesem Experimentes ist, dass ich leider wieder zurück zum <link>-Tag gehen muss, um eine volle Unterstützung aller Browser zu haben. Eigentlich schade, denn es ist doch eigentlich eine einfache und bequeme Art zu arbeiten.

Ähnliche Beiträge

• Jahresabonnement des Spotlight Verlag
• Umsetzung von Print-Design
• AJAX Adressbuch – Tutorial Teil 1
• Button wieder neu entdeckt
• Slideshow mit einer HTML-Seite Teil 2

Hier nun als erstes die gedruckte Version der Anzeige, daneben findet ihr eines Screenshot meine Online-Version.

Ich erspare euch die Darstellung es gesamten HTML-Quellcodes und zeige euch lieber eine gekürzte Version davon:

1. <div id="content">
2.   <h1>
3.   <ul id="bonus">
4.     <li><strong>
5.     ...
6.     <li><strong>
7.     <ul id="covers">
8.       <li><img> 
9.       ...
10.   <h2>
11.   <ul id="guides">
12.     <li><img><cite>
13.     ...
14.   <h3><a>
15.   <p>
16.   <form>
17.     <fieldset id="coupon">
18.       <h3>
19.       <fieldset id="magazin">
20.         <h4>
21.         <p>
22.         <ul>
23.           <li><p>
24.           <ul>
25.             <li><label><input>
26.             ...
27.           <li>
28.             <p><br><label><input>
29.         <p>
30.         <p>
31.       <fieldset id="address">
32.         <h4>
33.         <p><label><input>
34.         ...
35.         <p>
36.       <fieldset id="bank">
37.         <h4>
38.         <p>
39.         <p><label><input>
40.         ...
41.         <h5>
42.         <p>
43.         <p><label><input>
44.         <p><label><input>
45.         <p><button>

Ich hoffe ihr kommt mir der Kurzfassung zurecht. Falls nicht, bitte ich euch eine Kommentar mit Verbesserungen zu hinterlassen. Ist ja mein erster Versuch und ich kann bestimmt auch noch viel von euch lernen.

Wie ihr seht habe ich versucht den Quellcode möglichst wenig mit zusätzlicher Beschriftung aufzublähen. Damit habe ich es erreicht, dass die HTML-Datei gerade mal 8800 Byte groß ist.

Im Head habe ich dann nur noch eine Link zur externen CSS-Datei gelegt. Diese regelt dann das gesamte Screen-Design.

1. <link rel="stylesheet" href="screen/layout.css" media="screen" />

Das Design besteht aus insgesamt 4 Datei:

1. normalisation.css
   Hier werden alle Formatierungen die in den verschiedenen Browser unterschiedlich dargestellt werden und/oder mit einer Vorformatierung belegt sind auf einen einheitlichen Normalwert zurückgesetzt.
2. layout.css
   Sie beinhaltet die Positionierung der einzelnen Elemente.
3. color.css
   Mit dieser Datei wird die Farbwirkung des Designs bestimmt.
4. typographie.css
   Alle typographischen Regeln sind in hier zusammengefasst.

Um alle Dateien zu laden, werden die anderen in die Layout-Datei einfach importiert und dann die Formatierung des Layouts definiert.

1. @import url(normalisation.css);
2. @import url(color_final.css);
3. @import url(typographie_final.css);

Auch hier werde ich nicht den gesamte Code der 4 CSS-Dateien anzeigen, sondern nur, meiner Meinung nach, die wichtigsten Bereiche. Falls aber dann doch noch Definitionen unklar bleiben, bitte ich euch einfach einen Kommentar zu schreiben.

Normalisation

In meinem Artikel CSS Layouts am Fließband habe ich schon mal erklärt wie ein CSS-Datei aussehen könnte um alle browserspezifischen Formatierungen zurückzusetzen.

Layout

In der Layout-Datei werden erstmals die restlichen Dateien eingebunden.

1. @charset "utf-8";
2. /* CSS Document */
3. @import url(screen/normalisation.css);
4. @import url(screen/color.css);
5. @import url(screen/typographie.css);

Ok, fangen wir mit der generellen Layout-Formatierung an:

1. html {
2. position:relative;
3. text-align:center;
4. }
5. body {
6. position:relative;
7. width: 920px;
8. margin:0 auto;
9. text-align:left;
10. }

Als erstes wird alles was in dem <html>-Tag steht zentriert. Im <body>-Tag wird dann der Inhalt 920px breit formatiert. Gleichzeitig wird dessen Innenleben wieder linksbündig gestellt.

1. #content {
>position:relative;
2. width:420px;
3. margin:0 auto;
4. padding:20px;
5. }
6. #covers {
7. width:920px;
8. margin:1em -260px 0;
9. }
10. #covers>li {
11. display:block;
12. float:left;
13. width:120px;
14. margin:0 5px;
15. }
16. #covers img {
17. display:block;
18. }

Jetzt wird der eigentliche Content auf eine Breite von 420px und ein Abstand von 20px zum Rand eingestellt, so dass eine schmale Spalte entsteht. Da aber die Covers aus der Spalte herausläuft, habe ich über ein negatives Margin diesen Bereich verbreitert. Dann werden noch die einzelnen Listeneinträge nebeneinander ausgelistet und die Bild als Blockelement definiert, um die Bildunterschriften unterhalb zu platzieren.

1. h2 {
2. clear:both;
3. }
4. #guides {
5. width:920px;
6. height:130px;
7. margin:1em -260px 0 -245px;
8. }
9. #guides>li {
10. display:block;
11. float:left;
12. width:120px;
13. margin:0 5px;
14. }
15. #guides img {
16. display:block;
17. margin:0 auto;
18. }

Um das Floating der Cover-Liste zu beenden, habe ich die folgende Überschrift mit einem clear-Befahl belegt. Die Darstellung der Guide-Heft ist im Grunde gleich der der Covers, weswegen ich hier nur ein paar kleine Änderungen vorgenommen habe um die kleineren Bild gleich zu positionieren.

1. #content+h3 {
2. clear:both;
3. text-align:center;
4. margin:1em 0 0;
5. }
6. #content+h3+p {
7. text-align:center;
8. }

Die folgende Überschrift und der dazugehörige Absatz wird noch mittig gesetzt und dazwischen lasse ich Platz für das darzustellende Dreieck.

1. #coupon {
2. border-top:thick dashed #FFF;
3. margin:1em 0;
4. }
5. fieldset>fieldset {
6. float:left;
7. width:290px;
8. padding:5px;
9. }
10. fieldset>fieldset+fieldset {
11. margin:0 10px;
12. }
13. fieldset>fieldset+fieldset+fieldset {
14. margin:0;
15. }
16. fieldset+p,
17. fieldset+p+p {
18. display:none;
19. }
20. button {
21. clear:both;
22. display:block;
23. float:right;
24. }

Zum Schluss noch das Formular mit dem der Besucher ein Abo bestellen kann. Hier habe ich als erstes die gepunktete Linie eingestellt. Alle Kästen innerhalb meines Coupons werden wieder über float nach links ausgerichtet und bekommen die gleiche Breite. Als Abschluss habe ich dann noch, anders als im Magazin einen Button mit eingefügt, um das Formular auch abschicken zu können.

Farben

So, nun komme ich zu den Farbeinstellungen. Da gibt es Gott sei Dank nicht so viel zu erklären.

1. html {
2. background-color:#FF0;
3. }
4. #content {
5. background-color:#F00;
6. color:#FFF;
7. }

Klar das erstmal der gesamte Hintergrund gelb und die Spalte rot wird.

1. #covers>li {
2. color:#000;
3. }
4. #covers li+li+li {
5. color:#FFF;
6. }
7. #covers li+li+li+li+li+li {
8. color:#000;
9. }

Beim genauen hinsehen wird man feststellen, dass in der Liste der verschiedenen Covers die ersten beiden und die beiden letzten Texte schwarz und der Rest weiß geschrieben ist. Um den Quelltext nicht unnötig mit Klassen aufzublähen, habe ich mich für eine klassenfreie Variante entschieden.

1. #address input,
2. #bank input {
3. background-color:inherit; 
4. color:#900;
5. border:none;
6. border-bottom:thin solid #000;
7. }
8. #address input:focus,
9. #bank input:focus {
10. background-color:#FF0;
11. outline:thin solid #000;
12. border-bottom:none;
13. }

Um die Eingabefelder nicht nach typischen Webformular-Feldern aussehen zu lassen, habe ich diesen nur einen unteren Rahmen gegeben und die Hintergrundfarbe dem der Fieldsets angepasst.

Typographie

Auch bei den typografischen Einstellungen gibt es keine besonderen Überraschungen.

1. body {
2. font: 82%/1.5 "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
3. }
4. h1 {
5. font-size:450%;
6. line-height:1.1em;
7. text-indent:.15em;
8. font-weight:bold;
9. }
10. strong {
11. font-weight:bold;
12. font-size:130%;
13. }
14. h5 {
15. display:inline;
16. }

Beim Designen der Schriften habe ich versucht die Schriftart und Schriftgröße dem Printprodukt anzupassen, um auch Zeilenumbrüche gleich zu halten. Da ich nicht genau weiß welche Schriftart der Designer verwendet hat und da ja auch nicht jede Schriftart im Web unterstützt wird, habe ich mich für Lucida Grande entschieden. Man möge es mir verzeihen.

In der Hauptüberschrift musste ich die erste Zeile ein wenig einrücken, um die beiden Zeilen genau zueinander auszurichten. Die fettgedruckten Texte in der Auszählung sind dann leider auch nicht nur fett sondern leicht größer dargestellt, so dass dieses mit berücksichtigt wurde. Auch ist die kleine Wiederspruchsrecht-Überschrift nicht in einer separaten Zeilen, sondern der folgende Absatz beginnt direkt dahinter.

Fazit

Obwohl ich am Anfang diese Anzeige als relativ leicht empfunden habe, erwies sich das detailgetreue Gestalten doch als kleine Herausforderung.

Aber es hat nicht nur Spaß gemacht dieses Design umzusetzen, sondern brachte mir euch neue Sichtweisen und Lösungsansätze beim Gestalten von Websites.

Update 17. März 2008

Ich habe gerade mit der Online-Redaktion des Verlages gesprochen, da sie verwundert
waren ihre Anzeige online zu sehen. Da bei der Erstellung der Online-Anzeige nicht die Darstellung von alten Browsern berücksichtigt wurden, waren sie verwundert, dass ihre Anzeige so schlecht aussieht.

Zur Zeit wird jetzt geklärt, ob eine Umsetzung ihrer Anzeige zu Demonstrationszwecken von ihnen gewünscht ist. Und so lange ist die Online-Version leider nicht verfügbar.

Update 25. März 2008

Endlich habe ich eine Antwort vom Verlag bekommen, was mit meiner nachgebauten Anzeige passieren soll. Leider ist die Chefin meiner Ansprechpartnerin im Verlag absolut nicht damit einverstanden, dass die Anzeige zu Demonstrationszwecken genutzt wird. Auch wenn dadurch kostenlos Werbung (mit Verlinkung) gemacht wird.

Deshalb hier nochmals der Hinweis, dass HTML-Version nichts mit dem Spotlight-Verlag zu tun hat und dieser sich ausdrücklich davon distanziert.

Um auch nicht mehr über Google gefunden zu werden, habe ich mich entschlossen das Beispiel umziehen zu lassen und zusätzlich mit einem Passwortschutz belegt. Alle weiteren Experimente auf dieser Website findet ihr jetzt im Weblabor. Um im Ordner Print-Designs die verschiedenen Beispiele anzusehen, müsst ihr euch mit dem Benutzernamen "gast" und dem Passwort "zugang" anmelden, dann könnt ihr auch das Beispiel wiedersehen. Ich hoffe dadurch ist

Ähnliche Beiträge

• CSS Import macht Probleme
• Umsetzung von Print-Design
• AJAX Adressbuch – Tutorial Teil 1
• Button wieder neu entdeckt
• Slideshow mit einer HTML-Seite Teil 2

Beflügelt durch die gute Resonanz meines Adventskalenders 2007 möchte ich eine weitere Rubrik in meinem Arbeitsbuch eröffnen. In ihr möchte ich, in hoffentlich regelmäßigen Abständen, Seiten-Designs aus Zeitungen, Zeitschriften oder Magazinen in eine Webdesign-Fassung bringen. Das bedeutet ich werde mir eine gut gestaltete Seite aussuchen und versuchen sie dann ins Internet zu übertragen.

Es ist nicht nur erstaunlich sondern auch faszinierend was man mit den Internet-Technologien und den heutigen, modernen Browsern erschaffen kann. Dabei werde ich versuchen mich auf XHTML, CSS und JavaScript zu beschränken und möglichst sinnvoll, nicht aufgeblähten und gut strukturierten Quellcode zu verwenden.

Ähnliche Beiträge

• CSS Import macht Probleme
• Jahresabonnement des Spotlight Verlag
• AJAX Adressbuch – Tutorial Teil 1
• Button wieder neu entdeckt
• Slideshow mit einer HTML-Seite Teil 2

1. Designer vergessen die Gestaltung
2. Deutendes Design der Inhalte
3. Beschriftung von Containern
4. flexible Layouts mit CSS
5. Der gescannte Text
6. Small Screen Browser Design
7. Icons helfen bei der Orientierung
8. CSS Layouts am Fließband
9. Die Macht der Selektoren
10. Suchmaschinenoptimierung (SEO)
11. Redirect hilft bei Veränderungen
12. dynamische Linkliste bringt mehr Usability
13. Flashvideo-Player einfach eingesetzt
14. Template-Engine mit PHP
15. AJAX-Klasse, einfach gebaut
16. schnelle Erstellung von XML mit PHP
17. Mit JavaScript DOM erzeugen
18. Slideshow mit einer HTML-Seite Teil 1
19. Slideshow mit einer HTML-Seite Teil 2
20. Button wieder neu entdeckt
21. AJAX Adressbuch – Tutorial Teil 1
22. AJAX Adressbuch – Tutorial Teil 2
23. AJAX Abressbuch – Tutorial Teil 3
24. AJAX Adressbuch – Tutorial Teil 4

Ähnliche Beiträge

• Small Screen Browser Design
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch

Die Programmierung besteht hier nun aus 2 JavaScript-Dateien. Die eine ist für die Verarbeitung der Daten und die andere regelt die Übertragung zum und vom Server.

Fangen wir nun mir der Verarbeitung an. Um in diesem Stadium der Programmierung nicht schon die serverseitigen Scripte geschrieben zu haben, arbeite ich immer mit einer Demo-XML-Datei.

1. // JavaScript Document
2. var RED_Adrbook =
3. {
4. data : [],
5. alerts : { },
6. zeiger : 0,
7. init : function(){ },
8. loadXML : function() { },
9. loadData : function(xml) { },
10. loadEvents : function() { },
11. loadSlides : function() { },
12. pager : function() { },
13. add : function() { },
14. insert : function() { },
15. edit : function() {},
16. update : function() {},
17. remove : function() {}
18. }

Wie schon bei den letzten Beispielen verwende ich bei solcher Programmierung gerne Literale. Die Eingenschaft data dient dann später dazu alle vom Server bekommen Kontakte in einen einzigen Array zu sammeln. Über die Eigenschaft zeiger wird dann das Weiterschalten zum nächsten Mitarbeiter geregelt. Die letzte Eigenschaft innerhalb des Objektes verwende ich um Meldungen vom System an den Benutzer zu kapseln. Ich habe mir dazu ein Unterobjekt angelegt.

Kommen wir nun zu den einzelnen Methoden des Obejktes:

1. init : function()
2. {
3. RED_Ajax.init();
4. this.loadXML();
5. },

In fast jedem Objekt lege ich eine init()-Methode an, um alle wichtigen Prozesse zu starten, die vor der eigentlichen Benutzung durch den Anwender gebraucht werden. In diesem Fall ist das die Vorbereitung der Verbindung zum Server und dann das Laden der XML-Daten vom Server.

1. loadXML : function()
2. {
3. RED_Ajax.callback = function()
4. {
5. RED_Adrbook.loadData(this.responseXML);
6. };
7. RED_Ajax.run('mitarbeiter.xml','GET',false);
8. },

Um die empfangen XML-Daten auch später zu verarbeiten, muss der Huck, also die callback()-Methode des RED_AJAX-Objektes definiert werden. Ich rufe hier die loadData()-Methode des RED_AdrBook auf und übergebe ihr die empfangenen XML-Werte. Nach allen Vorbereitungen rufe ich die run()-Methode auf und übergebe ihr als erstes die zu ladende Datei, dann mit welcher Methode die Übertragung stattfinden soll und zum Schluss ob es sich um eine synchrone Übertragung handelt. Nur selten ändern sich die beiden letzten Werte.

1. loadData : function(xml)
2. {
3. this.data = [];
4. var personen = xml.getElementsByTagName('person');
5. for(var i=0; i<personen.length; i++)
6. {
7. var person = {
8. Nachname : personen[i].childNodes[0].firstChild.nodeValue,
9. Vorname : personen[i].childNodes[1].firstChild.nodeValue,
10. Email : personen[i].childNodes[2].firstChild.nodeValue,
11. Telefon : personen[i].childNodes[3].firstChild.nodeValue,
12. ID : personen[i].getAttribute('id')
13. };
14. this.data.push(person);
15. }
16. this.loadEvents();
17. this.loadSlides();
18. },

Nachdem alle Daten vom Server übertragen wurden, kann die eigentliche Verarbeitung beginnen. Als erstes leere ich den Array und hole mir aus den übergebenen Wert einen Array mit allen Mitarbeitern. Diesen Array durchlaufe ich und erzeuge mir ein eigenes Personen-Objekt zur späteren besseren Verarbeitung. Dieses Personen-Objekt wird dann im Data-Array abgespeichert.

Zum Schluss müssen natürlich noch die Events für die Buttons festgelegt werden und das aktuelle Slide, also der aktuelle, hier der erste, Mitarbeiter angezeigt werden.

1. loadEvents : function()
2. {
3. document.getElementById('btn_next').onclick = function() {
4. RED_Adrbook.pager(true);
5. }
6. document.getElementById('btn_prev').onclick = function() {
7. RED_Adrbook.pager(false);
8. }
9. document.getElementById('btn_edit').onclick = function() {
10. RED_Adrbook.edit();
11. }
12. document.getElementById('btn_add').onclick = function() {
13. RED_Adrbook.add();
14. }
15. document.getElementById('btn_remove').onclick = function() {
16. RED_Adrbook.remove();
17. }
18. },

Das festlegen welche Funktionen welcher Button hat ist recht einfach, da es dafür separate Methoden gibt.

1. loadSlides : function()
2. {
3. var s = document.getElementById('RED_Book').getElementsByTagName('span');
4. s[0].innerHTML = this.zeiger;
5. s[1].innerHTML = this.data[this.zeiger]['Nachname'];
6. s[2].innerHTML = this.data[this.zeiger]['Vorname'];
7. s[4].innerHTML = this.data[this.zeiger]['Telefon'];
8. var link = '<a href="mailto:';
9. link += this.data[this.zeiger]['Email'];
10. link += '">';
11. link += this.data[this.zeiger]['Email'];

12. link += '</a>';
13. s[3].innerHTML = link;
14. },

Bei Laden des aktuelle Slides werden als erstes alle <span>-Tags aus dem Formular mit der ID RED_Book in eine Array geladen. Dann werden die Daten aus dem aktuellen Silde per innerHTML in die Spans zugewiesen. Das this.zeiger immer den aktuellen Zeiger repräsentiert ist das ganze kein größeres Problem. Selbst eine mailto:-Link zu erzeugen stellt keine große Hürde da.

1. pager : function(d)
2. {
3. if(d)
4. {
5. (this.zeiger == this.data.length-1) ?alert(this.alerts.last) :this.zeiger++;
6. }
7. else
8. {
9. (this.zeiger == 0) ?alert(this.alerts.first) :this.zeiger--;
10. }
11. this.loadSlides();
12. },

Für der vor und zurück Blättern gibt es eine kleine und einfache Methode, die als erstes prüft wo der Zeiger steht und am Ende bzw. am Anfang der Liste diesen korrigiert. Dann wird noch per loadSlides()-Methode der richtige Mitarbeiter angezeigt.

1. add : function()
2. {
3. var s = document.getElementById('RED_Book').getElementsByTagName('span');
4. s[0].innerHTML = 'neuer Datensatz';
5. s[0].innerHTML += '<input type="hidden" name="f0" value="" />';
6. s[1].innerHTML = '<input type="text" name="f1" />';
7. s[2].innerHTML = '<input type="text" name="f2" />';
8. s[3].innerHTML = '<input type="text" name="f3" />';
9. s[4].innerHTML = '<input type="text" name="f4" />';
10. s[4].innerHTML += '<br />';s[4].innerHTML += '<input type="button" id="btn_save" value="speichern" />';
11. s[4].innerHTML += '<input type="button" id="btn_cancel" value="abbrechen" />';
12. document.getElementById('btn_save').onclick = function() {
13. RED_Adrbook.insert(document.getElementById('RED_Book'));
14. };
15. document.getElementById('btn_cancel').onclick = function() {
16. RED_Adrbook.loadSlides();
17. };
18. document.getElementsByTagName('input')[1].focus();
19. },

In der add()-Methode werden die Inhalte der <span>-Tags gelöscht und durch leere Eingabefelder erstetzt. Zusätzlich wird ein Speichern- und Cancel-Button eingefügt und ihnen natürlich auch noch die richtige Funktionalität zugewiesen. Zum Schluss bekommt das erste Eingabefeld den Focus, so dass der Anwender direkt losschreiben kann.

1. insert : function(form)
2. {
3. var inputs = form.getElementsByTagName('input');
4. var body = 'f0='+escape(inputs[0].value)+'&'+ 'f1='+escape(inputs[1].value)+'&'+ 'f2='+escape(inputs[2].value)+'&'+ 'f3='+escape(inputs[3].value)+'&'+ ‘f4='+escape(inputs[4].value);
5. RED_Ajax.callback = function()
6. {
7. RED_Adrbook.loadXML();
8. };
9. RED_Ajax.header('Content-Type', 'application/x-www-form-urlencoded');
10. RED_Ajax.run('eingabe.php','POST',false,body);
11. },

Um die neu eingefügten, bzw. später geänderten Daten auch an der Server und damit in die Datenbank zu schreiben, wird beim Klick auf den Speichern-Button die insert()-Methode aufgerufen. Sie lädt alle Eingabefelder und fügt sie zu einem langen String mit URL-konformer Schreibweise zusammen. Dann wird eine neue callback()-Methode des RED_Ajax-Objektes definiert, der Header zum Übertragen von Formular-Daten geändert und die Date an das Verarbeitungsscript gesendet. Nach dem Senden wird wiederum die loadXML()-Methode aufgerufen, um die neuen Daten vom Server abzufragen und anzugeigen.

1. edit : function() {},
2. update : function(form) {},
3. remove : function() {}
4. }

Bleiben zum Schluss noch 3 weiter Methoden übrig. Als kleine Herausforderung habe ich mir überlegt diese von euch selber erstellen zu lassen. Das ist auch gar nicht so schwer.

Z.B. ähnelt die edit()-Methode ja der add()-Methode, nur dass hier jetzt noch die Daten des aktuellen Mitgliedes eingefügt werden müssen. Auch die update()-Methode ist nur eine abgewandelte Version der insert()-Methode und bei der remove()-Methode brauch ja nur die aktuelle ID an den Server übermittelt werden, um den richtigen Datansatz zu löschen. Ich glaube fest daran, dass das jeder Lesen schaffen kann.

Hier nochmals die gesamte JavaScript-Datei zum Download.

• Adressbuch-Datei

Ähnliche Beiträge

• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 1
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1
• AJAX Adressbuch – Tutorial Teil 4

In diesem Tutorial möcht ich euch die Entwicklung, bzw. die wichtigsten Schritt zum Erstellen eines Web-Adressbuches zeigen. Dabei habe ich alles in 3 Teile aufgeteilt. Dass heißt heute zeige ich euch das Interface der Webanwendung, also die HTML-Datei und das dazugehörige Design. Morgen gibt es dann die clientseitige und übermorgen die serverseitige Programmierung.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>RE-Design - AJAX - Adressbuch</title>

6. <link rel="stylesheet" href="adressbook.css" type="text/css" media="screen" />
7. </head>
8. <body>
9. <div class="RED_Adrbook">
10. <h1>Adressbuch Demo</h1>
11. <noscript>
12. <p>Ohne JavaScript ist hier nix los.</p>
13. </noscript>
14. <form id="RED_Book">
15. <table>
16. <tr>
17. <th>ID:</th>
18. <td><span></span></td>
19. </tr>
20. <tr>
21. <th>Name:</th>
22. <td><span></span></td>
23. </tr>
24. <tr>
25. <th>Vorname:</th>
26. <td><span></span></td>
27. </tr>
28. <tr>
29. <th>Email:</th>
30. <td><span></span></td>
31. </tr>
32. <tr>
33. <th>Telefon:</th>
34. <td><span></span></td>
35. </tr>
36. </table>
37. <ul class="RED_Buttons">
38. <li><a id="btn_prev">previous</a></li>
39. <li><a id="btn_next">next</a></li>
40. <li><a id="btn_edit">edit</a></li>
41. <li><a id="btn_add">add</a></li>
42. <li><a id="btn_remove">delete</a></li>
43. </ul>
44. </form>
45. </div>
46. </body>
47. </html>

Wie ihr seht ist in diesem Quellcode keine besonderen Tricks enthalten. An Anfang lade ich noch das externe Design. Die gesamte Anwendung ist dann in eine <div>-Container gebettet und die einzelnen Ein- und Ausgabefelder sind in eine Tabelle integriert. Dort wo später die Ein- und Ausgabe erfolgen soll habe ich <span>-Tags gesetzt um später einfacher per JavaScript darauf zu zugreifen.

Die Button zur Steuerung dieser Anwendung habe ich dann unterhalb der Tabelle un eine Liste leget. Es sind einfache Links, die aber kein Ziel haben. Klar sie sollen ja auch nicht irgendwohin anderes gehen!

1. @charset "utf-8";
2. /* CSS Document */
3. body
4. {
5. margin:0 auto;
6. padding:0;
7. text-align:center;
8. width:28em;
9. }
10. th, td
11. {
12. vertical-align:top;
13. }

Als erstes lege ich in der CSS-Datei fest wie die gesamte Seite auszusehen hat. Dabei beschränke ich mich hier erstmal nur auf die Zentrierung des Inhaltes und die Definierung der Gesamtbreite. Weiterhin werden alle Zellen der Tabelle vertikal oben ausgerichtet.

1. .RED_Adrbook
2. {
3. margin: 1em 0 0;
4. padding:1em;
5. background-color:#fc3;
6. border:thin solid #960;
7. text-align:left;
8. font-family: Verdana, Arial, Helvetica, sans-serif;
9. }
10. .RED_Book table {
11. width:28em;
12. border-collapse:collapse;
13. }
14. .RED_Book th
15. {
16. text-align:left;
17. width: 6em;
18. }
19. .RED_Book h1
20. {
21. font-size:1.0em;
22. text-decoration:underline;
23. }

Als nächstes definiere ich das Aussehen des eigentlichen Adressbuches. Hier wird die allgemeine Schriftart, Hintergrundfarbe etc. angegeben. Zusätzlich mache ich Angaben über die Breite der Tabellen und ihre Tabellenköpfe. Als letztes lege ich noch das Aussehen der Überschrift meiner Anwendung fest.

1. .RED_Buttons
2. {
3. margin:1em 0 0;
4. padding:0;
5. }
6. .RED_Buttons li
7. {
8. margin:0;
9. padding:0;
10. list-style-type:none;
11. display:inline;
12. }

Nun zur Button-Liste, auch hier verwende ich nur rudimentäre Formatierung. Alle Buttons sollen nebeneinander und nicht untereinander stehen. Am einfachsten geht das mit dem inline-Wert der display-Eigenschaft.

1. #btn_prev,
2. #btn_next,
3. #btn_edit,
4. #btn_add,
5. #btn_remove,
6. #btn_save,
7. #btn_cancel
8. {
9. cursor:pointer;
10. padding:.2em;
11. background-color:#c63;
12. color:#fff;
13. text-decoration:none;
14. border:thin outset;

15. font-weight:normal;
16. }
17. #btn_prev:hover,
18. #btn_next:hover,
19. #btn_edit:hover,
20. #btn_add:hover,
21. #btn_remove:hover,
22. #btn_save:hover,
23. #btn_cancel:hover
24. {
25. background-color:#804000;
26. }
27. #btn_prev:active,
28. #btn_next:active,
29. #btn_edit:active,
30. #btn_add:active,
31. #btn_remove:active,
32. #btn_save:active,
33. #btn_cancel:active
34. {
35. border:thin inset;
36. }

Zum Schluss nach das Aussehen der eigentlichen Buttons. Da es ja offiziell Links sind, wird ihre Darstellung komplett geändert. Zusätzlich bekommen sie noch eine hover- und einen active-Effekt, um das Feeling einer Interaktion weiter zu unterstützen.

1. <?xml version="1.0" encoding="utf-8"?>
2. <mitarbeiter>
3. <person id="1">
4. <nachname>Reinsdorf</nachname>
5. <vorname>Enrico</vorname>
6. <email>enrico@re-design.de</email>
7. <telefon>0177 - 2822557</telefon>
8. </person>
9. <person id="2">
10. <nachname>Doe</nachname>
11. <vorname>John</vorname>
12. <email>john@doe.com</email>
13. <telefon>0123 - 1234567</telefon>
14. </person>
15. <person id="3">
16. <nachname>Doe</nachname>
17. <vorname>Jane</vorname>
18. <email>jane@doe.de</email>
19. <telefon>0123 - 1234567</telefon>
20. </person>
21. </mitarbeiter>

Als letztes möchte ich euch noch die XML-Datei zeigen, die ich zur ersten Verarbeitung in der Anwendung benutzt habe. Späte wird diese komplett dynamisch von PHP bzw. in ähnlicher Form von JavaScript, erzeugt. Und spielt in der finalen Version keine große Rolle mehr.

Zum Schluss noch die gerade besprochenen Dateien zum Download:

• Download

Ähnliche Beiträge

• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1
• CSS Import macht Probleme

Diesen Tag gibt es schon seit der HTML 4.0 Version. Bis dahin konnten die Designer immer nur über den <input>-Tag mit den type-Attribut Buttons erzeugen. Zulässige Werte um einen Button zu erzeugen sind submit, reset und image, Erst ab der 4er Version von HTML bezeichnet man Buttons auch in ihrer Bezeichnung so was sie auch tatsächlich sind, nämlich Buttons. Und das Schöne daran ist, sie funktionieren zusätzlich auch noch in allen gängigen Browsern.

Die Syntax um einen Button zu erzeugen ist recht simple. Man setzt einfach um das was ein Button werden soll den <button>-Tag und gibt, wie auch beim <input>-Tag, im type-Attribute einen der drei Werte submit, um das Formular abzuschicken, reset, um das Formular auf den Orginalzustand zurückzusetzen, oder button, um ein freiprogrammierbares Element zu bekommen, ein.

1. <button type="button" onclick="alert('Oh Wundern es geht!')">Drück mich</button>

Drück mich

Das ist schon das ganze Geheimnis zur Verwendung von Buttons. Nun kann man fast beliebig viel in diesen Container hinsetzen. Es gibt nur zwei Ausnahmen die nicht funktioniert. Erstens, da der Button selbst schon eine Art Verweis ist, dürfen in ihm keine Verweis erzeugende Elemente eingesetzt werden. Und zweitens, da der Button meistens für Formulare genutzt wird, darf in ihm keine weiteren Formular-Elemente verwendet werden.

Weiterhin ist zu Beachten, dass ein submit- bzw. reset-Button natürlich nun innerhalb eines Formulares funktioniert und der frei definierbare nur mit aktiviertem JavaScript.

Hier nun ein paar schöne Beispiele für die freie Verwendbarkeit solcher Buttons. Dabei habe ich die CSS-Formatierung der Einfachheit inline gesetzt.

1. <button type="button" style="padding:1em">Klick mich!</button>

Klick mich!

1. <button type="button" style="">
2. <image src="icon.png" width="100" height="100" alt="Abschicken" />
3. </button>

1. <button type="button" style="">
2. <style type="text/css">td:hover{background-color:#99CC00;</style>
3. <table style="border-collapse:collapse;">
4. <tr>
5. <th scope="col">Spalte 1</th>
6. <th scope="col">Spalte 2</th>
7. <th scope="col">Spalte 3</th>
8. </tr>
9. <tr>
10. <td>Inhalt 1</td>
11. <td>Inhalt 2</td>
12. <td>Inhalt 3</td>
13. </tr>
14. <tr>
15. <td>Inhalt 4</td>
16. <td>Inhalt 5</td>
17. <td>Inhalt 6</td>
18. </tr>
19. </table>
20. </button>

Spalte 1	Spalte 2	Spalte 3
Inhalt 1	Inhalt 2	Inhalt 3
Inhalt 4	Inhalt 5	Inhalt 6

Interessant ist, dass die hover-Angabe z.Z. ausschließlich beim IE funktioniert.

1. <button type="button" style="width:20em;padding:1em;text-align:left">
2. <h4>Lizenzvertrag</h4>
3. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
4. </button>

Lizenzvertrag

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

Leider versteht der IE die Breitenangabe im Style nicht.

Ähnliche Beiträge

• CSS Import macht Probleme
• Jahresabonnement des Spotlight Verlag
• Umsetzung von Print-Design
• AJAX Adressbuch – Tutorial Teil 1
• Slideshow mit einer HTML-Seite Teil 2

Die gesamte Funktionalität habe ich in ein eigenes Objekt gekapselt, um eine übersichtlichere, einfach erweiterbare und flexible Programmierung zu haben. Für solchen Kapseln benutze ich fast immer Literale.

1. var RED_Slideshow = {
2. slides : [],
3. current : 0,
4. messages : {
5. first : 'Sie sind am Anfang.',
6. last : 'Sie sind am Ende der Präsentation.'
7. },
8. init : function(element) { } ,
9. load : function() {},
10. goto : function(d) {},
11. create : function() {}
12. };

Zusätzlich zu den 4 Funktion gibt es noch 3 Eigenschaften. In der Eigenschaft slides werden die anzuzeigenden Slides zwischengespeichert um sie schnell ein- und auszublenden. Die Eigenschaft current repräsentiert das aktuelle Slide welches gerade angezeigt wird und in der Eigenschaft messages existiert ein Unterobjekt welches Meldungen beinhaltet, die im Verlauf der Benutzung dem Betrachter angezeigt werden können.

Mit der Methode init wird die Anwendung gestartet. Sie sucht dabei im angegebenen Container die Slides.

1. init : function(element)
2. {
3. var div = document.getElementById(element).getElementsByTagName('div');
4. for(var i=0; i<div.length; i++)
5. {
6. if(div[i].className == 'slide')
7. {
8. this.slides.push(div[i]);
9. }
10. }
12. this.load();
13. this.create();
15. document.getElementById('helper').onclick = function()
16. {
17. slideshow.goto(+1);
18. }
19. },

Als erstes werden die <div>-Tages innerhalb des Containers gesucht, der Klassenname überprüft und dann in die Eigenschaft slides abgelegt. Dann rufe ich die load()-Methode auf, um das aktuelle Slide anzuzeigen. Danach lasse ich über die create()-Methode die dynamische Navigation erzeugen.

Zum Schluss füge ich dem Objekt mit der ID helper einen Klick-Event hinzu. Dies soll nur verdeutlichen, wie auch ohne Buttons navigiert werden kann.

1. load : function()
2. {
3. for(var i=0; i<this.slides.length; i++)
4. {
5. this.slides[i].style.display = 'none';
6. }
7. this.slides[this.current].style.display = 'block';
8. },

Die load()-Methode ist super einfach. In ihr durchlaufe ich den Array mit den Slides und füge einen Style hinzu, der alle Slides unsichtbar schaltet. Zum Schluss wird dann das aktuelle Slide explizit auf sichtbar gesetzt.

Damit habe ich eine Methode die bei jedem Aufruf immer das aktuelle Slide anzeigt und alle anderen auf Unsichtbar setzt. So kann diese Methode später auch das Anzeigen von Slides außerhalb der Reihenfolge benutzt werden.

1. create : function()
2. {
3. var form = document.createElement('form');
4. form.setAttribute('id', 'navigation');
6. var btn1 = document.createElement('button');
7. btn1.setAttribute('type', 'button');
8. btn1.setAttribute('id', 'btn_prev');
9. btn1.appendChild(document.createTextNode('zurück'));
10. btn1.onclick = function()
11. {
12. RED_Slideshow.goto(-1);
13. }
15. var btn2 = document.createElement('button');
16. btn2.setAttribute('type', 'button');
17. btn2.setAttribute('id', 'btn_next');
18. btn2.appendChild(document.createTextNode('nächster'));
19. btn2.onclick = function()
20. {
21. RED_Slideshow.goto(+1);
22. }
24. form.appendChild(btn1);
25. form.appendChild(btn2);
27. var body = document.getElementsByTagName('body')[0];
28. var footer = document.getElementById('footer');
30. body.insertBefore(form, footer);
31. }

Nun zu der umfangreichsten Methode, da sie die dynamische Navigation erzeugt. Ich habe mich hier für ein kleines Formular entschieden, welches einfache Buttons beinhaltet. Ich erzeugt also zunächst den <form>-Tag und dann die 2 Buttons. Weiterhin fügt ich diesen Buttons noch Klick-Events hinzu, die wiederum eine Literal-Methode aufrufen.

Hier ist auf jeden Fall zu beachten, dass man nicht mit dem Schlüsselwort this arbeitet. Denn würde ich im Klick-Event this verwenden, dann würde sich das this auf den jeweiligen Button beziehen und nicht auf das Literal. Deshalb gehe ich den Umweg über den direkten Aufruf der Literal-Methode.

Zum Schluss setze ich das Formular vor meinen Fußbereich ein, in dem ich als erstes eine Verweis auf den <body>-Tag und dann einen Verweis auf den Fußbereich erzeuge.

1. goto : function(d)
2. {
3. this.current += d;
4. if(this.current == this.slides.length)
5. {
6. //alert(this.messages.last);
7. this.current = 0;
8. }
9. if(this.current < 0)
10. {
11. //alert(this.message.first);
12. this.current = this.slides.length-1;
13. }
14. this.load();
15. },

Die letzte Methode ist für die Navigation bestimmt. Ihr wird entweder der Wert 1 oder -1 übergeben. Dieser Parameter wird zum aktuellen Zähler hinzugefügt.

Als nächstes überprüft die Methode, ob das Ende oder der Anfang der Slideshow erreicht ist und setzt dann eigenständig den Zähler auf den passenden Wert um einen Schleifen-Vorgang zu erzeugen.

Zum Schluss ruft die Methode die load()-Methode auf, um das neue Slide auch anzuzeigen.

Damit ist auch schon das gesamte Slideshow-Literal erklärt. Es fehlt nur die Einbindung dieses Scriptes in die HTML-Datei und der Aufruf der Initialisierung mit der Parameter-Übergabe wo die Slides in der HTML-Datei liegen.

1. // JavaScript Document
2. <script type="text/javacript" src="RED_Slideshow.js"></script>
3. <script type="text/javascript">
4. //<!{CDATA[
5. window.onload = function()
6. {
7. RED_Slideshow.init('body');
8. };
9. //]]>
10. </script>

Da wir mit der create()-Methode ein neues DOM-Objekt mit der ID navigation erzeugen, habe ich meine CSS-Datei um folgende Formatierung erweitert.

1. #navigation {
2. position:absolute;
3. bottom:3em;
4. border:1px solid;
5. width:50%;
6. height:2em;
7. margin:auto;
8. text-align:center;
9. z-index:2;
10. left:25%;
11. }

Downloads

• HTML-Datei
• CSS-Datei
• JavaScript-Datei
• komplettes Set

Ähnliche Beiträge

• Slideshow mit einer HTML-Seite Teil 1
• AJAX Adressbuch – Tutorial Teil 2
• AJAX Adressbuch – Tutorial Teil 1
• HTML5 – Buch
• CSS Import macht Probleme

Fangen wir mit dem HTML an. Den Aufbau habe ich bewusst nicht sehr komplex gestaltet, um die spätere Programmierung einfach zu halten. Im Grunde besteht die Datei aus 5 Hauptkontainern:

1. header
   Hier besteht die Möglichkeit der Präsentation eine Überschrift und eine Tagline zu geben.
2. body
   Dieser Bereich enthält alle Slides die nacheinander angezeigt werden. Zusätzlich wird hier auch ein <noscript>-Tag eingebunden, um den Benutzern darauf hinzuweisen, dass die Präsentation nicht wie vorgesehen funktionieren kann bei deaktiviertem JavaScript.
3. helper
   Der helper-Bereich ist für zusätzliche Informationen vorgesehen und am Anfang noch leer.
4. navigation
   Dieser wird erst durch JavaScript erzeugt und beinhaltet die Navigationselemente.
5. footer
   Im letzen Bereich kann Platz für weitere Angaben, wie z.B. rechtliche Hinweise, genutzt werden.

Hier nun de gesamte Quellcode mit gekürzten Texten:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>RE-Design - JavaScript - Slideshow Präsentation</title>
6. <link rel="stylesheet" href="ssp.css" type="text/css" media="screen" />
7. <script type="text/javascript" src="ssp.js"></script>
8. <script type="text/javascript">
9. /*<!CDATA[*/
10. window.onload = function()
11. {
12. slideshow.init();
13. }
14. /*]]>*/
15. </script>
16. </head>
17. <body>
18. <div id="header">
19. <h1>Powerpoint Präsentation</h1>
20. <h2>Eine Slideshow mit JavaScript</h2>
21. </div>
22. <div id="body">
23. <noscript>
24. <p>Sie brauchen unbedingt JavaScript, um die ganze Funktionalität benutzen zu können.</p>
25. </noscript>
26. <div class="slide">
27. <h3>Slide 1</h3>
28. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
29. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
30. </div>
31. <div class="slide">
32. <h3>Slide 2</h3>
33. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
34. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
35. <p>Morbi consequat felis vitae enim ... Mauris aliquam dui eget purus.</p>
36. <p>Sed ut metus sed wisi commodo viverra ... Curabitur a turpis at ligula lobortis cursus.</p>
37. </div>
38. <div class="slide">
39. <h3>Slide 3</h3>
40. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
41. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
42. </div>
43. </div>
44. <div id="helper"></div>
45. <div id="footer">
46. © 2007 - <a href="http://www.re-design.de">RE-Design</a>
47. </div>
48. </body>
49. </html>

Als nächstes erkläre ich die wichtigsten Punkte in der CSS-Datei

1. @charset "utf-8";
2. /* CSS Document */
4. body {
5. margin:0;
6. padding:0;
7. font: 16px/130% normal normal Arial, Helvetica, sans-serif;
8. background-color:#b3d1e1;
9. }

Als erstes die Body-Formatierung. Hier wird der Abstand zum Rand auf Null gesetzt, um jeden Platz der da ist auch zu nutzen. Zusätzlich habe ich Anpassungen an der Typographie vorgenommen und die Basis-Hintergrundfarbe eingestellt.

1. #header {
2. position:absolute;
3. overflow:hidden;
4. top:0;
5. width:100%;
6. height:6em;
7. background-color:#069;
8. color:#fff;
9. padding:0 1em;
10. }

Der Kopfbereich wird absolut links oben platziert. Mit einer relative Höhe wird fester Platz für ihn reserviert. Weiterhin habe ich eine passende Hintergrund- und Schriftfarbe festgelegt. Um absolut positionierte Layer auch über die gesamte Breite fließen zu lassen wird die Breite auf 100% gesetzt.

1. #body {
2. position:absolute;
3. overflow:auto;
4. top:6em;
5. bottom:4em;
6. width:100%;
7. }

Auch der mittlere Präsentationsbereich ist absolut positioniert. Um keine Überlappung mit die Kopfbereich zu erhalten, fängt der Layer erst dort an wo der Kopfbereich endet. Gleiche habe ich auch für den Fußbereich eingestellt.

1. #footer {
2. position:absolute;
3. overflow:hidden;
4. height:3em;
5. bottom:0;
6. width:100%;
7. padding:.5em 1em;
8. background-color:#069;
9. }

Ähnlich wie der Kopfbereich wird auch der Fußbereich eine feste Positionierung zugewiesen. Allerdings im unteren Bereich des Browsers. Dabei musste ich darauf achten, dass die Höhe des Fußbereiches sich aus der Layerhöhe plus dem Innenabstand des Layers zusammensetzt.

1. #helper {
2. position:absolute;
3. overflow:hidden;
4. width:50%;
5. height:2em;
6. bottom:3em;
7. left:25%;
8. z-index:2;
9. }

Zwar ist in meinem helper-Layer noch nichts drin aber platzieren kann ich ihn auf jeden Fall schon mal. Das besondere daran ist, dass ich ihn über den Fußbereich halb überlappen lassen wollte. Um dieses zu erreichen muss über die z-index-Eigenschaft der Layer vor dem nachfolgenden Fußbereich gelegt werden.

1. .slide {
2. margin:1em;
3. }

Die Formatierung der einzelnen Slides habe ich nicht großartig verändert, um dem Umfang der CSS-Datei möglichst übersichtlich zu halten. Es ist aber jeder Zeit möglich, den einzelnen Slides über IDs ein individuells Design zu geben.

Und morgen im Teil 2 beschreibe ich die JavaScript-Programmierung die nötig ist um dem Ganzen Leben einzuhauchen.

Downloads

Ähnliche Beiträge

• Slideshow mit einer HTML-Seite Teil 2
• AJAX Adressbuch – Tutorial Teil 2
• AJAX Adressbuch – Tutorial Teil 1
• HTML5 – Buch
• CSS Import macht Probleme

Ein Website kann noch so gut geplant sein, im Laufe der Zeit werden sich immer wieder die Strukturen und damit die URIs von Ressourcen ändern. Das ist ganz normal. Normal ist auch, dass solche Ressourcen Spuren im Web hinterlassen haben. Zum einen natürlich in Suchmaschinen, die diese indexiert haben. Zusätzlich habe vielleicht aber auch Besucher diese Adressen in ihren sozialen Netzwerken wie del.icio.us, Mister Wong, Yigg oder Google Bookmarks oder aber ganz normal als Favorit abgespeichert. Wenn sich nun die Adressierung ändert, sollten natürlich Besucher die noch zur alten Adressen wollen weitergeleitet werden. Und genau da kommt die Apache Direktive redirect ins Spiel.

Per Definition ist folgende Syntax zulässig:

1. Redirect [Status] <Pfad> <URI>

Aber wohin schreibt man diese Zeile? Ganz einfach! In die .htaccess-Datei in das Hauptverzeichnis seines Webspaces.

Und was bedeutet Sie? Auch das ist ganz einfach! redirect bedeutet wir wollen einen Weiterleitung definieren. Mit dem Status, der optional ist, gibt man den Weiterleitungsstatus an. Es gibt verschiedene Stati:

301 Moved Permanently

Die Ressource ist dauerhaft unter einer anderen URI erreichbar. Dadurch wird z.B. direkt bei Suchmaschinen veranlasst, dass die Adresse im Index aktualisiert wird.

302 Temp

Die Ressource ist vorübergehend unter einer anderen URI erreichbar.

403 Forbidden

Der Zugriff auf die Ressource wird verweigert. Durch eine Weiterleitung können störende Fehlermeldungen des Servers korrigiert werden.

404 File not Found

Die Ressource wird unter der URI nicht gefunden. Sinnvolle Weiterleitung wäre z.B. auf die interne Suche, um dort die Ressource zu finden.

410 Gone

Die Ressource existiert nicht mehr. Bei vielen Suchmaschinen wird dadurch der Verweis zur Ressource aus dem Index gelöscht.

Da der Status ein optionaler Wert ist, kann man ihn auch weglassen, dabei wird dann aber der Default-Wert 302 eingesetzt.

Unter dem Pfad gibt man die angefragte Ressource an und bei der URI schreibt man dann die neue Adresse als absoluten Pfad auf.

Um das Ganze etwas besser zu verdeutlichen hier ein kleines Beispiel. Eine zum Download hinterlegte Datei wird aus dem Download-Ordner dauerhaft in den Projekt-Ordner verschoben:

1. Redirect 301 /Downloads/Software.exe http://www.re-design.de/Projekt/Download/Software.exe

Eine weitere nützliche Hilfe bietet die serverseitige Weiterleitung bei unterschiedlichen Schreibweisen der Adressierung bzw. bei Tippfehlern. Beim nächsten Beispiel leiten alle Angaben auf die gleiche URI weiter:

1. Redirect 301 /Kontakt.html http://www.re-design.de/kontakt.html
2. Redirect 301 /kontakt.htm http://www.re-design.de/kontakt.html
3. Redirect 301 /contact.html http://www.re-design.de/kontakt.html
4. Redirect 301 /contact.htm http://www.re-design.de/kontakt.html
5. Redirect 301 /contact/ http://www.re-design.de/kontakt.html

Zusätzlich hat natürlich die serverseitige Weiterleitung gegenüber der clientseitigen Weiterleitung durch JavaScript oder mit der Meta-Angabe refresh, dass Suchmaschinen bei der Weiterleitung keine Doorway-Seite vermuten, da sie diesen gesamten Vorgang nicht mitbekommen.

Um jetzt nicht umdständliche Weiterleitungslisten zu schreiben, gibt es die Apache Direktive redirectMatch. In dieser kann man mit regulären Ausdrücken arbeiten und so mit Suchmustern die verschieden Schreibweisen abfangen. Aber das ist nicht unbedingt Thema dieses Artikel und würde zu weit schon in die Tiefe gehen. Es soll lediglich als Ausblick dienen, genauso wie die Apache Direktive mod_rewrite die ich vielleicht in einem späteren Artikel genauer behandeln werden.

Ähnliche Beiträge

• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch
• CSS-Seminar bei VVA

Was ich hier vorstellen wollte, waren neben die Hintergründen das Spaltensystem und die Zusätzlichen Möglichkeiten von Rahmen. All diese Dinge funktionierten überhaupt noch nicht. Eigentlich sehr schade, denn dadurch wären viel Umstände im Designen von Websites Geschichte.

Ähnliche Beiträge

• CSS Layouts am Fließband
• Icons helfen bei der Orientierung
• flexible Layouts mit CSS
• flexibles CSS Layout
• Dreamweaver-Schulung für den Solar Verlag

1. Besucher wollen nur qualifizierten Inhalt
2. Durch Schlüsselbegriffe den Inhalt definieren
3. interne und externe Verlinkung zählen
4. Seitentitel geben den Inhalt vor
5. Missgunst vermeiden
6. Fehlerseite bieten Möglichkeiten
7. Maschinen lieben Technik
8. Besucher lieben Klicks
9. Den richtigen Platz finden
10. Sitemap

Diese Liste soll als Hilfsmittel dazu dienen, dass die eigene Website von Suchmaschinen besser gelistet wird. Dabei stell ich aber auch immer wieder fest, dass nicht alle Punkte aus der Liste ohne weiteres umzusetzen sind.

Inhaltserzeugung

Klar ist “Content is King“. Nur wer qualifizierten und dabei noch interessanten Inhalt auf seiner Website präsentiert, wird auch regelmäßig Besucher begrüßen können. Vor allem spricht sich das rum und bringt zusätzliche Besucher. Selbst Macher von Firmenwebseiten sollten sich überlegen welchen Mehrwert sie den Besucher bieten können außer der eigentlichen Firmenpräsents. Ein kleines Tool online oder zum Download zieht Besucher immer wieder auf die Seite. Oder eine interessante Linkliste mit Informationen die regelmäßig aktualisiert und verbessert wird.

Außerdem misst Google z.B. die Verweildauer der Suchenden auf der Website und ermittelt unter anderem daraus die Plazierung. Deshalb ist ein Interessanter, lesenswerte oder benutzbarer Inhalt auch für die Plazierung in Suchmaschinen gut.

Auf jeden Fall sollte jedem Website-Betreiber klar sein, dass eine Website nichts statisches ist wie ein Printprodukt, sondern regelmäßig überwacht und aktualisiert werden sollte.

Schlüsselbegriffe gezielt einsetzen

Jeder einzelne Seite innerhalb der Website sollte einen klaren Inhalt haben. Zu diesem Inhalt sollte man sich 4 bis 6 Begriffe aussuchen. Also markante Worte die den Inhalt widerspiegeln. Diese Schlüsselbegriffe werden dann auf der Seite an strategisch wichtigen Punkte benutzt um den Suchmaschinen klarzumachen, dass man darunter gefunden werden möchte.

Zu den wichtigen Punkten gehören auf jeden Fall der Seitentitel, der Dateiname der Seite und die Überschriften, ja selbst im Alternativtext der Bilder bzw. der Dateiname der Bilder. Eine gute Wiederholfrequenz liegt bei ca. 5 %. Man sollte aber beachten nicht über 8 % zu kommen, denn sonst macht das die Suchmaschinen misstrauisch.

Mehrwert durch Verlinkung

Jede eingehende Verlinkung zeigt der Suchmaschine, dass diese Seite interessant ist. Dazu zählten zum Teil auch die Verlinkungen von der eigenen Seite. Das bedeutet Querlinks innerhalb der eigenen Seite geben nicht nur dem Besucher nette Möglichkeiten surfen, sondern steigern auch die Plazierung bei Suchmaschinen.

Aber wichtiger als die interne Verlinkung ist sind die Links von anderen Websites. Deshalb ist es wichtig Verlinkungen aus der gesamten digitalen Welt zu sammeln. Dadurch überträgt sich nicht nur die Beliebtheit der verlinkenden Websites zum Teil mit auf die Eigene, sondern bringt auch gleichzeitig neue Besucher, die bei gutem Inhalt natürlich auch wieder Links setzen.

Spuren hinterlassen

Nicht jeder gute Inhalt einer Website wird gleich auch von der Welt gefunden und besucht. Am besten ist wenn man dem Ganzen etwas nachhilft. Hat man was interessantes zu bieten, kann man z.B. in einschlägigen Foren darauf aufmerksam machen. Überhaupt sollte man immer seine Webadresse mit angeben, wenn man im Internet etwas schreibt.

In Weblogs kann man z.B. auf themenspezifische Artikel reagieren und eine Antwort schreiben. Dabei sollte man immer wenn es angeboten wird seine Website mit angeben, denn dadurch schafft man einen externen Link zu sich selbst. Das gleiche gilt für Beiträge in Foren. In den meisten kann man sich anmelden und eine Signatur festlegen. Dort sollte unbedingt auch die Website mit angegeben werden und natürlich auch fleißig Einträge machen. Nicht nur dass dadurch die Anzahl von externen Links zunimmt, sondern wenn die Einträge eine gute Qualität haben werden auch darüber Besucher kommen.

Auch sind Profile im Internet keine schlechte Idee Spuren und somit Verweise auf die eigene Website zu hinterlassen. Es gibt viele Online-Netzwerke in denen man ein eigenes, öffentlich zugängliches Profil anlegen kann, zum Beispiel bei Xing oder StudiVZ, aber auch Google, Windows Live oder Yahoo.

Wissenswertes zum Seitentitel

Der Seitentitel gehört für Suchmaschinen zu den wichtigsten Erkennungsmerkmalen. Deshalb sollten Webdesigner bzw. Webredakteure besonderen Wert auf den richtigen Inhalt legen. Grob gesagt sollte der Titel ein komprimierte Zusammenfassung des Inhaltes sein, also mit wenigen Worte das sagen was dem Besucher erwartet.

Dabei sollte man aber einiges Beachten. Zum Beispiel sollte man auf eine Zeichenlänge von max. 50 Buchstaben beschränken und der Seitentitel sollte eindeutig sein, also nur einmal in dieser Form auf der Website vorkommen.

Spam, Doorway oder Cloaking

Einmal aus einer Suchmaschine rausgeflogen, ist es sehr schwer wieder mit der selben Domain reinzukommen.

Spam

Klar, wer Spam-Mails verschickt ist nicht beliebt. Kommt man auf eine sogenannte schwarze Liste von Spammern, dann hat das auch Auswirkungen auf die Website unter dieser Domain. Deshalb sollte man darauf achten, dass auf der einen Seite der eigene Server vor Missbrauch von andern Spammern geschützt ist. Sie versuchen oft über andere Domains ihre lästige Post zu verschicken. Auf der anderen Seite sollte man selber nicht anfangen massenhaft Mails, z.B. über Outlook, zu verschicken.

Doorway

Hinter dem Begriff Doorway verbirgt sich ein Verfahren eine Suchmaschinen optimierte HTML-Seite zu erstellen, die aber für den Betrachter keinen Inhalt bietet und nur dazu dient die Suchmaschine zu überlisten und die Betrachter auf die eigentliche Website weiterzuführen.

Cloaking

Beim Cloaking wird beim Besuch des Suchmaschinen-Robots ein anderer Inhalt präsentiert als das was die Besucher der Website selbst sehen.

Fehlerseiten sind Hilfen

Die bekannteste Fehlerseite ist wohl die mit dem Status 404 (File not found). Es kann immer mal wieder vorkommen das Seiten nicht erreichbar sind, z.B. durch Umbenennung der Dateien oder Umstrukturierung der Website. Aber warum dem Besucher dann nur einen Fehlertext anbieten wenn man bei den meisten Providern eigene Fehlerseiten erstellen kann? Zum Beispiel wäre es möglich auf solchen Seiten ein Inhaltsverzeichnis und/oder eine Suche anzubieten, so dass der Besucher auf jeden Fall weiterkommt und nicht entmutigt die Seite verlässt. Auch schafft man dadurch weiter interne Verlinkungen.

Aus technischer Sicht

Maschinen, gerade Suchmaschinen können nur vernünftig arbeiten, wenn die Seiten auch technisch in Ordnung sind. Das bedeutet die HTML-Seiten sollten fehlerfrei und valide sein. Alle unnötigen Quellcode, wie z.B. CSS und JavaScript sollte zusätzlich ausgelagert werden. Dadurch werden die Dateien nicht nur schlanker und werde deshalb schneller geladen, sondern der Text innerhalb der Seite bekommt auch mehr an Gewichtung.

Außerdem sollte gerade die Navigation, also Verlinkungen, über keine andere Technik als mit HTML erzeugt werden, denn nur so können die Suchmaschinen sie auch optimal benutzen.

3 Klicks vom Ziel

Bei der Planung der Navigationsstruktur sollte man berücksichtigen, dass die Besucher mit möglichst wenigen Klicks an ihrem Ziel angekommen sind. Am besten wenn sie das mit nur 3 Klicks schaffen, deshalb sollte man immer bei der Planung die Zielgruppe mit einbeziehen.

Durch Verzeichnisse sich positionieren

Sowohl Yahoo als auch Google bieten dem Website-Betreiber die Möglichkeit seine eigene Website unter einem Verzeichnis zu platzieren. Aber es gibt auch noch das Open Directory Project, welche nicht direkt von einem Unternehmen betreut wird. Auch hierüber werden Besucher und natürlich auch Suchmaschinen kommen. Zusätzlich kann die Website dann auch außerhalb ihrer eigenen Informationsangaben in eine Bereich bzw. Branche gesteckt werden, was zu einer leichter Identifikation beiträgt.

Überschicht durch ein Inhaltsverzeichnis

Gerade bei einer komplexen Website ist es hilfreich ein Inhaltsverzeichnis dem Besucher anzubieten. Durch die Auflistung alle Seiten der Website kann nicht nur der Besucher schnell an sein gewünschtes Ziel kommen, sondern die Suchmaschine auch. Auch schwer zugängliche, weil in der Navigationshierachie weit unter liegenden Seiten bekommen dadurch ein bisschen mehr Gewichtung.

Fazit

Mit dieser kleinen Auflistung hoffe ich etwas mehr Licht ins schwierige und komplexe Thema der Suchmaschinenoptimierung geschaffen zu haben. Ich weiß das es noch viel mehr und detailierter Informationen bedarf, um das Optimum zu erreichen. Gerade Kunden und Betreuern von Websites sollte mit diesem Artikel ein Hilfestellung an die Hand gegeben werden.

Ähnliche Beiträge

• Icons helfen bei der Orientierung
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch

Arten von Selektoren

Ok, fangen wir mit den üblichen Verdächtigen an.

1. Tag {
2. color: red; 3
3. }
4. .Klasse {
5. color: blue;
6. }
7. Tag#ID {
8. color: green;
9. }

Attributs-Selektoren

Dann gibt es aber auch noch Attributes-Selektoren. Viel Tags unterscheiden sich ja durch die Verwendung von Attributen und genau diese Unterscheidungen kann man auch in CSS nutzen.

Das erste Beispiel formatiert alle -Tags mit einem titel-Attribute

1. a[title] {
2. color: red;
3. }

Das nächste Beispiel formatiert alle <a>-Tags mit dem rel-Attribute und dem Wert copyrigth blau.

1. a[rel=copyright] {
2. color: blue;
3. }

Im dritten Beispiel werden die <a>-Tags grün formatiert, die im lang-Attribute den Wert en stehen haben. Dabei kann der Wert in einer durch Leerzeichen getrennten Liste stehen.

1. a[lang~=en] {
2. color: green;
3. }

Das folgende Beispiel formatiert alle <a>-Tags die im href-Attribute mit mailto beginnen.

1. a[href|=mailto:] {
2. color: yellow;
3. }

Das letzte Beispiel zeigt wie <a>-Tags grau formatiert werden, die im href-Attribute mit dem Wert .pdf enden.

1. a[href^=.pdf] {
2. color: grey;
3. }

Nachbarn, Kinder und Nachfahren

Weiter Möglichkeiten ohne Klassen und IDs gezielt auf Tags zu zugreifen besteht darin Kombinationen der oben beschriebenen Möglichkeiten zu nutzen.

Fangen wir mit den Nachfahren an. Kombiniert man zwei Selektoren mit einem Leerzeichen dann trifft diese Formatierung auf alle Elemente zu die unterhalb des erst genannten Elements sich befinden, egal in welcher Hierarchie-Ebene. Im Beispiel werden alle Verlinkungen in einer ungeordneten Liste rot formatiert, egal ob sie in Unterlisten ober auf der obersten Ebene liegen.

1. ul a {
2. color: red;
3. }

Kindern sind die direkten Nachfahren von Elementen. Das Beispiel zeigt wie die direkt in <div>-Tags eingebunden sind umrandet werden, nicht aber Bilder in einem Absatz innerhalb eines <div>-Tags.

1. div > img {
2. border: thin solid black;
3. }

Bei Nachbarn kann das folgenden Element eines Elementes formatieren, hier ist es der erste Absatz nach einer Überschrift.

1. h3 + p {
2. boder: thin dashed darkred;
3. }

Pseudo-Klassen

CSS bietet auch schon vorgegebene Klassen um schnell auf Elemente in der HTML-Seite zugreifen zu können. Dabei beschränkt sich die Selektion nicht nur auf die reine Struktur, sondern auch auf Zustände bzw. Interaktivität.

Zum Beispiel kann man mit der Pseudo-Klasse :first-child das erste Kind eines Elementes formatieren. Im Beispiel bekommt das erste Kind, also der erste Listeneintrag einen Rahmen an der Oberseite.

1. ul:first-child {
2. border-top: thin solid black;
3. }

Man kann aber auch die Zustände von Verlinkungen durch :link und :visited unterschiedlich darstellen.

1. a:link {
2. color: blue;
3. }
4. a:visited {
5. color: purpel;
6. }

Aber nicht nur Zustände von Verlinkungen, sondern auch Interaktivität des Benutzers kann man über CSS darstellbar machen. Das Beispiel zeigt Verlinkungen bei ihrer Aktivierung rot, Eingabefelder bei ihrer Fokusierung mit einer roten Umrandung und Tabellenzeilen beim Drüberfahren mit hellgrauen Hintergrund an.

1. a:active {
2. color: red;
3. }
4. input:focus {
5. boder: thin solid red;
6. }
7. tr:hover {
8. background-color: silver;
9. }

Zusätzlich gibt gibt es auch eine Sprach-Klasse :lang. Dort kann man Formatierungen definieren die durch das lang-Attribut bestimmt werden.

1. blockquote:lang(de) > p {
2. quotes: ‘»’ ‘«’ ‘2039′ ‘203A’
3. }

Pseudo-Elemente

Neben den Pseudo-Klassen existieren in CSS auch sogenannte Pseudo-Elemente.

1. p:first-line {
2. color: red;
3. }
4. p:first-letter {
5. font-size: 2em;
6. }
7. li:before {
8. content: ‘►’;
9. }
10. a:after {
11. content: ‘ [’ attr(href) ‘]’:
12. }

In dem letzen Beispiel werden die verschiedenen Pseudo-Elemente aufgelistet. Dazu zählt unter anderem :first-line welches die erste Zeile des Elementes, hier eines Absatzes, formatiert. Mit :first-letter kann der erste Buchstabe eines Elementes gesondert formatiert werden.

Die beiden letzten Formatierungen zeigen jeweils vor bzw. hinter dem Element Inhalt an, der aber nicht im Quellcode vorhanden ist. Ein besondere Form, die gut im Ausdruck verwendet werden kann, liegt bei der Formatierung des Links vor. Hier wird nach jeder Verlinkung der Wert des href-Attributs in eckigen Klammern angezeigt.

Ausblicke

Ab CSS 3 wird die Selektierung von Elementen noch differenzierter. Hier einmal eine Auflistung der zusätzlichen Möglichkeiten:

• Attributs-Selektoren
  • E[foo^="bar"] an E element whose “foo” attribute value begins exactly with the string “bar”
  • E[foo$="bar"] an E element whose “foo” attribute value ends exactly with the string “bar”
  • E[foo*="bar"] an E element whose “foo” attribute value contains the substring “bar”
  • E[hreflang|="en"] an E element whose “hreflang” attribute has a hyphen-separated list of values beginning (from the left) with “en”
• Pseudo-Klassen
  • E:root an E element, root of the document
  • E:nth-child(n) an E element, the n-th child of its parent
  • E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
  • E:nth-of-type(n) an E element, the n-th sibling of its type
  • E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
  • E:last-child an E element, last child of its parent
  • E:first-of-type an E element, first sibling of its type
  • E:last-of-type an E element, last sibling of its type
  • E:only-child an E element, only child of its parent
  • E:only-of-type an E element, only sibling of its type
  • E:empty an E element that has no children (including text nodes)
  • E:target an E element being the target of the referring URI
  • E:enabled
  • E:disabled a user interface element E which is enabled or disabled
  • E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
  • E::selection the portion of an E element that is currently selected/highlighted by the user
  • E:not(s)an E element that does not match simple selector s
• Kombination
  • E ~ F an F element preceded by an E element

Ähnliche Beiträge

• Icons helfen bei der Orientierung
• HTML5 – Buch
• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS

Um die Verwaltung des Framework einfach zu halten, habe ich mich dazu entschlossen die CSS-Dateien aufzuteilen. In der HTML-Datei existieren zwar nur 3 relative Verlinkungen zu den jeweiligen Ausgabedesigns, aber für jedes Design sind dann weitere 3 Dateien zuständig. Um die Designs flexibel administrieren zu können, benutze ich eine Layout-Datei für die Positionierung der Boxen, eine Color-Datei für die Farbgebung und eine Typographie-Datei für die Texteinstellung.

Der Aufbau der HTML-Datei ist nach den Semantik-Regel wohlgeformt und besteht aus der üblichen 3 großen Bereichen: Kopf, Körper und Fuß. Um innerhalb des Körpers mit bis zu 3 Spalten arbeiten zu können, existieren dort eine Content-, Navigations- und Marginal-Box.

Hier die Originalstruktur der HTML-Datei:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" lang="de xml:lang="de">
3. <head></head>
4. <body>
5. <div id="header"></div>
6. <div id="body">
7. <div id="wrapper">
8. <div id="content"></div>
9. </div>
10. <div id="navigation"></div>
11. <div id="marginal"></div>
12. </div>
13. <div id="footer"></div>
14. </body>
15. </html>

Um die 3 benötigten Design-Dateien in die HTML-Datei zu laden, importiert die verlinkten Style-Datei die restlichen Dateien:

1. @charset "utf-8″;
2. /* Screen Style Document */
4. @import url("reset.css");
5. @import url("screen/layout.css");
6. @import url("screen/color.css");
7. @import url("screen/typographie.css");

Die mit importierte Reset-Datei normalisiert die von Browsern vorgegebene Formatierung.

1. body, div, dl, dt. dl, ul, ol, li, h1, h2, h3, h4, h5, h6,
2. pre, form, fieldset, input, p, blockoute, th, td
3. {margin:0;padding:0}
4. h1, h2, h3, h4, h5, h6
5. {font-size:100%}
6. ol, ul
7. {list-style:none}
8. address, caption, cite, code, dfn, em, strong, th, var
9. {font-style:normal;font-weight:normal}
10. table
11. {border-collapse:collapse;border-spacing:0;font-size:100%}
12. fieldset, img
13. {border:0}
14. caption, th
15. {text-align:left}
16. q:before, q:after
17. {content:""}

Ich habe schließlich, um die Flexibilität des Frameworks zu demonstrieren, für das Layout, die Farben und die Typographie jeweils 3 Versionen erstellt. Dadurch stehen mal eben 18 verschiedene Darstellungen nur alleine für das Screen-Design zur Verfügung. Wenn man nun mit dem gleichen Verfahren auch noch verschiedene Print- und SSB-Darstellungen erzeugt, hat man wirklich schnelle und effektive Fließbandarbeit.

• HTML-Datei
• Screen-Datei
• Layout-Datei
• Color-Datei
• Typographie-Datei
• komplettes Set

Ähnliche Beiträge

• CSS 3-Unterstützung der Browser
• flexible Layouts mit CSS
• Beschriftung von Containern
• Designer vergessen die Gestaltung
• flexibles CSS Layout

Ja, ja, ich weiß das die nicht alle Browser dieses Feature unterstützen. Besonders der heutzutage noch oft verwendete Internet Explorer 6 macht dem Ganzen einen großen Strich durch die Rechnung. Aber warum müssen deswegen die Benutzer von neueren Browsern darauf verzichten? OK Schluss mit mit dem leidigen Thema der verschiedenen Browser-Versionen. Auf zu der Formatierung von schönen, manchmal auch bunten Verlinkung.

1. a[href$=".pdf"],
2. a[href$=".txt"],
3. a[href$=".zip"],
4. a[href$=".mp3"], a[href$=".wma"],
5. a[href$=".mpg"], a[href$=".mpeg"],a[href$=".wmv"],
6. a[href$=".swf"],
7. a[href$=".xls"], a[href$="ods"],
8. a[href$=".doc"], a[href$="odt"],
9. a[href*="rss2"], a[href*="rss"], a[href*="feed"],
10. a[href|="mailto:"], a[href|="skype:"], a[href|="msnim:"],
11. {
12. padding-bottom:2px;
13. padding-left:22px;
14. padding-top:2px;
15. background:transparent;
16. }

Als erstes habe ich nur alle relevanten Links mit einem Innenabstand versehen und die Hintergrundfarbe auf transparent gestellt. Dabei bedeutet der Selektor mit dem Dollarzeichen ($) z.B. das alle Links die im href-Attribut mit dem angegebenen Wert enden formatiert werden. Bei der Schreibweise mit dem Stern (*) sucht man irgend ein Vorkommen des Wertes und die Kombination mit dem Pipe (|) selektiert nur Links die mit den Wert beginnen.

1. a[href$=".pdf"]
2. {
3. background: url(images/acrobat.png) no-repeat scroll left center;
4. }
5. a[href$=".txt"]
6. {
7. background: url(images/text.png) no-repeat scroll left center;
8. }
9. a[href$=".zip"]
10. {
11. background: url(images/archive.png) no-repeat scroll left center;
12. }
13. a[href$=".mp3"], a[href$=".wma"]
14. {
15. background: url(images/audio.png) no-repeat scroll left center;
16. }
17. a[href$=".mpg"], a[href$=".mpeg"], a[href$=".wmv"]
18. {
19. background: url(images/video.png) no-repeat scroll left center;
20. }
21. a[href$=".swf"]
22. {
23. background: url(images/flash.png) no-repeat scroll left center;
24. }
25. a[href$=".xls"], a[href$=".ods"]
26. {
27. background: url(images/table.png) no-repeat scroll left center;
28. }
29. a[href$=".doc"], a[href$=".rtf"], a[href$=".odt"]
30. {
31. background: url(images/document.png) no-repeat scroll left center;
32. }
33. a[href*="feed"], a[href*="rss"]
34. {
35. background: url(images/feed.png) no-repeat scroll left center;
36. }
37. a[href|="mailto:"]
38. {
39. background: url(images/mail.png) no-repeat scroll left center;
40. }
41. a[href|="skype:"]
42. {
43. background: url(images/skype.png) no-repeat scroll left center;
44. }
45. a[href|="msnim:"]
46. {
47. background: url(images/messenger.png) no-repeat scroll left center;
48. }

Danach definiere ich für jede Verlinkungsart ein Hintergrundbild, welche sind nicht wiederholt, die Ausrichtung links mittig ist und nicht mitscrollt. Fertig ist die schöne, bunte Linkwelt. Und das super Gute daran ist, dass Browser die diese Art der Selektierung nicht kennen einfach ihren gewohnten Standard zeigen und alle zufrieden sind.

Zum Schluss hier nochmals die Dateien zum Download:

• CSS-Datei
• Icons als Zip-Datei

Ähnliche Beiträge

• CSS 3-Unterstützung der Browser
• Suchmaschinenoptimierung (SEO)
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes

Das schön am mobilem Web ist, dass es schon seit 1997 WAP als Übertragungsprotokol und WML als Sprache gibt. Aber leider hat sich dieses nicht wirklich durchgesetzt. Seit Oktober 2001 gibt es jetzt XHTML-MP als neue Sprache für das sogenannt WAP 2.0. Damit lassen sich theoretisch ganz gut Websites für mobile Endgeräte bauten. Und um das ganze auch noch nett aussehen zu lassen, gibt WCSS.

Mobile Web Best Practices 1.0

Das deutsche W3C hat dieses Jahr ein kleinen Guide herausgebracht, welches die wichtigsten Praktiken im Umgang mit dem mobilem Web herausstellt. Ich habe hier diese Punkte aufgegriffen und die dahinter stehenden Aussagen mal mit meinen eigenen Worten versucht zu erklären:

Gestalten für das Eine Web

Durch die kleineren Displays gerade für bei den Mobiltelefonen muss nicht nur das Design dementsprechend angepasst werden, sondern auch der eigentliche Inhalt. Durch diese Übergreifende Optimierung der Inhalte schafft man es die Kosten für die Erstellung zu minimieren und gleichzeitig mit Ausgabemedien zu unterstützen, was wiederum mehr Besucher auf die Seite bringt.

Einhalten der Webstandards

Ich habe keine Ahnung wie viele unterschiedliche Mobiltelefone es weltweit gibt. Aber ich glaube fast jedes hat seine eigene Spezifikation. Ich glaube es ist noch schlimmer als bei den verschiedenen Browser, es gibt einfach noch keine Normierung. Gerade deshalb sollte man sich als Designer unbedingt an die aktuellen Standards halten und valide Dokumente erzeugen. Denn nur so kann man eine technische Zugänglichkeit gewährleisten.

Vermeiden von Problemen

Durch die unterschiedlichen Displaysgrößen von Mobiltelefonen ist es fast ausgeschlossen mit festen Designs zu arbeiten. In den meisten Fällen kommt man mit flexiblen Designs die sich an der Breite des Displays orientieren besser klar. Das einspaltige Layout ist z.B. heutzutage ein sehr beliebtes Design. Man sollte aber auch Popups, Frames (auch IFrames) und Image Maps vermeiden da diese in den seltensten Fällen vernünftig funktionieren.

Beachten der Gerätelimits

Gerade die Unterstützung von zusätzlicher Web-Technologie kann bei vielen Geräten nicht vorausgesetzt werden. Viele unterstützen z.B. kein JavaScript. Was zur Folge hat, dass auch keine Cookies unterstützt werden. Selbst der Einsatz von speziellen Schriftarten kann schon zu Problemen führen, wenn diese im Gerät nicht installiert sind.

Optimieren der Navigation

Alle z.Z. auf dem Markt befindlichen Geräte besitzen keine Maus. Die Navigation erfolgt in den meisten Fällen über die Tastatur oder einen Touchscreen. Man sollte deshalb auf eine möglichst einfach zu bedienende Navigation achten. Durch die Vergabe von Tastatur-Nummer für wichtige Sprungziele und Funktionen kann die Benutzbarkeit deutlich erhöht werden. Auch sollten Einstiegseiten eine möglichst einfach einzugebende URI haben und Verlinkungen zu anderen Ressourcen eine Angabe über das Format enthalten.

Prüfen von Grafik & Farben

Nicht jedes Grafikformat was im Internet funktioniert kann auch auf mobilen Ausgabegeräten angezeigt werden. Hinzukommt, dass bei einigen Geräten zu große Grafiken einfach nicht angezeigt werden. Deshalb sollte man immer einen aussagekräftigen Alternativtext mit angeben. Auch ist zu beachten, dass Handys und PDAs sehr häufig im Freien benutzt werden und dadurch feine Nuancen im Bild verloren gehen.

Minimieren der Größe

Klar sollte sein, dass jeder Gewinn bei der Reduzierung von Dateigrößen zählt. Also sollte man nicht nur die Grafiken und zusätzlichen Ressourcen möglichst klein halten sondern auch die eigentliche Inhaltsseite und das dazugehörige CSS. Alles was nicht unbedingt gebraucht für die Formatierung gebraucht wird, sollte auch am besten gar nicht erst mit zum Endgerät übertragen werden.

Sparen am Datentransfer

Zusätzliche vermeidbare Übertragungen sollte man auf jeden Fall unterbinden. Zum Beispiel sind clientseitige, automatische Weiterleitungen auch über den Server regelbar. Auch können Verbindungen zu externen Ressourcen, z.B. Wetterbericht, sehr langsam sein und sollten deshalb vermieden werden.

Helfen bei Nutzereingaben

Freie Nutzereingaben können gerade bei Handys sehr umständlich sein. Besser ist es in diesem Zusammenhang wenn man hier mit Vorgaben arbeitet. Dadurch hält man die Tastendrücke relativ klein. Bei Formularfeldern hilft es den Benutzer ungemein, wenn es eine eindeutige, aussagekräftige Beschriftung existiert.

Planen für mobile Nutzer

Anders als beim Surfen über den normalen PC, wo man sich manchmal von einer Seite zur nächsten treiben lässt, wollen die Benutzer des mobilen Webs schnell und gezielt zu ihren Informationen. In den meisten Fällen wissen sie schon wo sie die Information finden, z.B. Bahnauskunft. Deshalb sollte der Inhalt bei mobilen Angeboten immer eine klare, nutzungsorientierte Sprache haben, der Seitentitle kurz und aussagekräftig sein, wichtige Inhalte von den weniger Wichtigen stehen und die Ablenkung von eigentlichen Inhalt möglichst gering ausfallen.

Ähnliche Beiträge

• Alle Türchen von 2007 sind offen
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch

Die einfachste Lösung ein Layout für die Website zu erstellen ist mit festen Größenangaben zu arbeiten. Sie ist aber auch am Unflexibelsten, denn das Layout kann sich dann nicht den Bedürfnissen des Betrachters anpassen. Viele heutige Design haben als Maßeinheit für ihr Layout Pixel. Der große Vorteil liegt in der genauen Platzierung von Elementen, wie z.B. Spalten oder aber auch Designelemente wie Hintergrundbilder. Der große Nachteil liegt aber auch gerade in diesen festen Größenangaben. Und hier setzen die flexiblen Design an.

Probleme mit Pixeln und Prozenten

Eine gute Möglichkeit ein flexibles Layout zu entwerfen und trotzdem gewisse Gestaltungsproportionen einhalten zu können besteht darin, die Maßeinheiten EM zu nutzen. Ein EM ist die einfache Größe eine Großbuchstabens. Die Maßeinheit Pixel hat den klaren Nachteil, des eine Spalte die mit 200 Pixel definiert ist immer 200 Pixel breit ist, egal ob der Betrachter seine Schrift vergrößert, weil er einen großen Monitor benutzt oder verkleinert. Nun könnte man aber die Spaltenbreite in Prozent angeben. Auch hier entsteht das gleiche Problem wie bei den Pixeln. Die Spalte bleibt immer z.B. 20% von der gesamten Browserbreite breit, auch wenn man die Schrift vergrößert oder verkleinert. Der Vorteil gegenüber dem Pixel-Layout liegt in der flexiblen Anpassung an die verschiedenen Monitorgrößen. 20% bei einer Auflösung von 1024 * 768 ist deutlich breiter als bei einer Auflösung von 800 * 600.

Layout mit EM

Mein Ansatz ist es nun zwar eine feste Breite wie bei der Pixelangabe zu benutzen, aber diese Breite richtet sich immer nach der Schriftgröße. Wenn also ein Betrachter bei seiner Monitorauflösung von 1280*800 die Darstellung einer Website als zu klein empfindet, dann kann es durch eine schnelle Anpassung der Schriftgröße dieses wunderbar korrigieren. Umgekehrt geht dieses natürlich auch. Ist die Website für 1024*768 optimiert und ein Betrachter besitzt nur 800*600. Dann kann er schnell und meist auch sehr einfach die Schriftgröße seines Browsers ändern und alles ist wieder bestens. In den meisten Browser kann man durch betätigen der Plus- bzw. Minustaste mit gleichzeitigen drücken der STRG-Taste die Schrift des Browsers anpassen.

Wie könnte nun z.B. ein solches 3-spaltiges Layout aussehen?

Als erstes möchte ich die Grundstruktur der HTML-Seite erklären. Dazu erstmal das DOM der Seite

body
 +div#page
   +div#header
   | +div#head
   | +div#bar
   +div#body
   | +div#main
   | | +div#content
   | | +div#left
   | +div#right
   +div#footer

Bei der Identifizierung der einzelnen Container habe ich auf Eindeutigkeit geachtet. Es sollte hoffentlich klar werden was wofür ist. Um eine schnell umsetzbare 3-Spaltigkeit zu bekommen, habe ich die linke Spalte und den eigentlichen Inhalts-Container zusammengefasst. Somit habe ich auch erreicht, dass der Inhalt noch vor den restlichen Spalten im Quelltext steht, was wiederum Suchmaschinen als angenehm empfinden, da das wichtige am Anfang steht.

Das CSS-Grundgerüst

1. * {margin:0;padding:0;}
2. body {
3. font:14px/130% "Lucida Grande", "Lucida Sans Unicode", Sans-Serif;
4. background-color:#666;
5. color:#fff;
6. text-align:center;
7. }

Hier ist nichts weiter überraschendes dabei. Erwähnen möchte ich nur, dass die gesamte Seite in der horizontalen Mitte ausgerichtet ist. Weswegen ich die Eigenschaft text-align auf center gesetzt habe.

1. #page {
2. width:68em;
3. margin:0 auto;
4. text-align:left;
5. background-color:#fff;
6. color:#000;
7. }

Die Gesamtbreite der Seite entspricht hier also 68 Großbuchstaben. Das entspricht ungefähr 120 Zeichen. Um die Seite auch mittig zu platzieren wurde der linke und rechte Außenabstand der Wert auto zugewiesen. Zusätzlich wurde der Text wieder linksbündig ausgerichtet.

1. #header {
2. background:#333;
3. color:#fff;
4. height:8em;
5. }
6. #body {
7. clear:both;
8. }
9. #footer {
10. clear:both;
11. background:#333;
12. color:#fff;
13. height:3em;
14. }

Auch die Container head, body und footer enthalten nichts überraschendes. Nur das der body- und der footer-Container mit der Eigenschaft clear und den Wert both für das Aufheben der float-Eigenschaft der vorhergehenden Container zuständig sind.

1. #main {
2. float:left;
3. width:52em;
4. }
5. #left {
6. float:left;
7. width:15em;
8. }
9. #content {
10. float:right;
11. width:45em;
12. }
13. #right {
14. float:right;
15. width:15em;
16. }

Nun formatiert man den mittleren Teil. Als erstes wird dieser in 2 Teile getrennt. Der Main-Container wird nach links gelegt und der Right-Container dementsprechend nach rechts. Zusammen ergibt sich eine Breite die gleich ist mit der Gesamtbreite des Page-Containers. Innerhalb des Main-Containers wird wiederum der Platz in 2 Spalten aufgeteilt, so dass diese Gesamtbreite der Breite des Main-Containers entspricht.

Zum Schluss die komplette CSS-Formatierung:

1. * {margin:0;padding:0;}
2. body {
3. font:14px/130% "Lucida Grande", "Lucida Sans Unicode", Sans-Serif;
4. background-color:#666;
5. color:#fff;
6. text-align:center;
7. }
8. #page {
9. width:68em;
10. margin:0 auto;
11. text-align:left;
12. background-color:#fff;
13. color:#000;
14. }
15. #header {
16. background:#333;
17. color:#fff;
18. height:8em;
19. }
20. #body {
21. clear:both;
22. }
23. #footer {
24. clear:both;
25. background:#333;
26. color:#fff;
27. height:3em;
28. }
29. #main {
30. float:left;
31. width:52em;
32. }
33. #left {
34. float:left;
35. width:15em;
36. }
37. #content {
38. float:right;
39. width:45em;
40. }
41. #right {
42. float:right;
43. width:15em;
44. }

und die Downloads der Dateien:

• HTML-Datei
• CSS-Datei
• komplettes Set

Ähnliche Beiträge

• flexibles CSS Layout
• CSS 3-Unterstützung der Browser
• CSS Layouts am Fließband
• Beschriftung von Containern
• Dreamweaver-Schulung für den Solar Verlag

In den letzten Jahren hat ein Umdenken stattgefunden, in dem man immer mehr das optische Design von der inhaltlichen Struktur trennt. Nicht nur das man jetzt fast ausschließlich mit externen CSS-Dateien arbeitet. Sondern man versucht auch den Inhalt in seiner Bedeutung zu strukturieren. Das ist die Semantic.

Das Branding

Fast jede Website besitzt einen Titel. Bei Firmen ist dies fast immer gleichgesetzt mit dem Firmennamen. Zusätzlich besitzen solche Titel auch immer ein Motto oder Slogan, die sogenannt Tagline. Der Site-Titel sollte, weil es sich ja um eines der wichtigsten Elemente auf der ganzen Website handelt, auf jeden Fall in einen <h1>-Tag gelegt werden. Bei der Tag-Line handelt es sich dann meist um eine Art Zitat, auch wenn es nicht immer eine Quelle dazu gibt. Also sollte man dafür den <blockquote>-Tag benutzen. Beide Elemente können dann wunderbar mit einen <div>-Kontainer gruppiert werden.

Die Navigation

Es gibt verschiedene Arten von Navigationen. Für mich gibt es 3 wichtige Navigationen.

Inhaltsnavigation

In ihr werden alle Inhalte die auf der Website präsentiert werden abgebildet und gruppiert. Ähnlich wie in einer Dokumentation oder einem Buch sollte die verschiedenen Inhalte einem roten Faden folgen. Weswegen ich für eine geordnete Liste plediere.

Servicenavigation

Neben den reinen Inhaltsseiten gibt es weitere Seiten auf der Website die sich um die Kommunikation, Bedienung der Website und dem Rechtlichen kümmern. Hier meine ich z.B.:

• Startseite,
• Kontakt,
• Imperssum,
• Inhaltsverzeichniss,
• Hilfe,
• Glossar und
• Stichwortverzeichniss.

Hier benutze ich meistens eine ungeordnete Liste.

Pfadnavigation

Gerade bei komplexeren Websites bzw. Website mit einer Verschachtelungstiefe von mehr als 2 Ebenen sollte der Betrachter über eine Brotkrümelspur, wie bei Hänsel und Gretel, zur Startseite also nach hause gebracht werden. Dabei eignet sich eine ungeordnete, ineinander verschachtelte Liste am besten.

Der Inhalt

Der Inhalt sollte auf jeden Fall mit dem Seitentitel beginnen und über der <h2>-Tag als zweit wichtigstes Element definiert werden. Alle weiteren Strukturierungen sind dann je nach Inahlt abhängig. Die häufigsten verwendeten Tag sind in diesem Zusammenhang:

• <p>,
• <img>,
• <ul>, <ol>, <dl>,
• <blockquote>,
• <table> und
• <form>

Die Seiteninformationen

Meistens legt man solche Informationen an das Ende der HTML-Seite. Dazu gehören z.B. das Copyright, ein rechtlicher Hinweis, Kontaktmöglichkeiten und vielleicht ein paar Bedienmöglichkeiten, wie:

• “nach oben” und
• “Seite drucken”

Ähnliche Beiträge

• Beschriftung von Containern
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch

Oft habe ich in den letzten Jahren erlebt, dass Designer vergessen sich Gedanken über die Gestaltung von Formularen, Tabellen oder aber auch von Listen innerhalb des Inhaltsbereiches zu machen. Sie gestalten immer sehr schöne Websites mit tollen Layoutbildern und Dekorationsobjekten. Machen tolle grafische Aufteilungen. Vergessen aber zu definieren wo sich der Seitentitel befindet und wie er aussehen soll. Sie stellen sich auch selten die Frage wie in der 3. oder 4. Ebene der Hauptnavigation die Menüpunkte gestaltet werden sollen. Ganz zu schweigen von der Definition wie bei einem Rollover die Links aussehen sollen.

Diese kleine Dokumentation soll ein Bewusstsein für die restlichen, genauso wichtigen Elemente einer Website schaffen.

Mögliche Inhalte eines Dokumentes

Auf Websites findet man immer wieder ein und die selben Arten Inhalte zu strukturieren. Hier die häufigsten:

• einfacher Text mit Bildern
• Zitate
• Tabellen
• Listen
• Formulare

Einfache Texte

Am häufigsten wird wohl der einfache Text als Transportmittel für Inhalte genutzt. Gerade Suchmaschinen finden in einem guten Text viele Informationen, die für gute Platzierung wichtig sind. Dabei sollte man sich bei der Strukturierung des Textes auf einfache, nicht zu lange Absätze beschränken. Diese Absätze sind dann sinnvoller Weise mit Überschriften gegliedert. Falls es wichtig sein sollte innerhalb eines solchen Textes Informationen hervorzuheben, dann kann dieses durch die Auszeichnung <strong> für kräftig und <em> für einfühlsam getan werden.

Neben diesen Auszeichnungen können innerhalb des Textes natürlich auch noch Querverweise zu weiterführenden Informationen innerhalb und außerhalb der eigenen Website gesetzt werden.

Vermeiden sollte man das Unterstreichen von Textpassagen, denn im Internet sehen viele Menschen unterstrichenen Text als Verweise an und deshalb wird es zu Verwirrung kommen können.

Text mit Bildern

Immer wenn der einfache, geschriebene Text nicht ausreicht um den Inhalt wiederzugeben, könnte man versuchen das durch aussagekräftige Bilder zu unterstützen. Dabei ist aber zu beachten, dass nicht jedes Ausgabegerät Bilder auch anzeigen kann. Weswegen jedes Bild wiederum eine alternative Beschreibung des Bildinhaltes braucht. Dass heißt das jeder <img>-Tag mit einem alt-Attribute ergänzt werden sollte. Hierbei sollte darauf geachtet werden, dass nicht nur der Bildinhalt mit einem kurzen Kommentarwort beschrieben wird, sondern man sollte eher eine tatsächliche Bildbeschreibung hinterlassen, so das jeder, also auch diejenigen die das Bild nicht sehen können, den Bildinhalt versteht.

Zusätzlich finde ich es gerade bei Zeichnungen sehr gut, wenn das Bild eine Bildunterschrift bekommt, wo genau erklärt wird, was diese Zeichnung darstellt. Ich verwende dabei immer eine <div>-Tag der das Bild und einen kleinen Absatz umschließt. Alternativ kann man auch über das title-Attribute eine Bildunterschrift einbinden.

1. <div class="image">
2. <img src="pfad/zum/bild.gif" alt="Hier befindet sich die Bildbeschreibung." title="Bildunterschrift" />
3. <p>Abb. 1: Die Bildunterschrift</p>
4. </div>

Zitate

Immer wieder werden innerhalb von Texten andere Texte zitiert. Um diese Zitate auch korrekt auszuzeichnen, gibt es 2 Auszeichungstags. Um ein Zitat innerhalb eines Fließtextes zu benutzen, kann man den <q>-Tag einsetzen. Sollte aber das Zitate über mehrere Zeilen oder gar einen Absatz umfassen dann ist der <blockquote>-Tag besser.

1. <blockquote src="http://quelle.url">
2. <p>Das eigentliche Zitat</p>
3. </blockquote>

Neben den einfachen Benutzen dieser Tags sollte auch immer die Quelle des Zitats genannt werden. Die Angabe, woher man dieses Zitat hat, kann in einem src-Attribute angeben werden. Auch kann man innerhalb eines <blockquote>-Tage den <cite>-Tag benutzen um genauer den Autor bzw. die Quelle des Zitats zu definieren.

CSS bietet hier einige Möglichkeiten an das eigentliche Zitat mit dazugehörigen Anführungszeichen zu erweitern. Mit den Pseudoklasse :before und :after kann man den Quellcode erweitern. Ein Beispiel:

1. blockquote p:before {
2. content: open-quote;
3. }
4. blockquote p:after {
5. content: close-quote;
6. }

In diesem Beispiel wird vor dem Zitatsabsatz das öffende Anführungszeichen und danach das schließende Anführungszeichen hinzugefügt.

Tabellen

Es gibt Situationen in denen eine tabellarische Darstellung besser ist als jeder ausgeschriebene Text. Dabei vergessen aber viele die vielen Möglichkeiten die Tabellen bieten. Es wäre zu viel hier alles aufzuzählen. Oft wird aber das summary-Attribut vergessen. In diesem kann manbei einer sehr komplexen Tabelle eine Beschreibung hinterlegen, die eine Zusammenfassung bzw. Erklärung der Tabelle beinhaltet.

Auch werden die <thead>, <tbody> und <tfood>-Tags meines Erachtens zu wenig genutzt, obwohl sie doch eine Fülle an Möglichkeiten bieten. Zum Beispiel kann man mit CSS den Bodybereich der Tabelle scrollbar machen, was gerade bei langen Tabellen sehr nützlich ist. Auch sollen die Browser beim Ausdruck von langen Tabellen den Kopf- und den Fußbereich auch jeden ausgedruckte Seite mit anzeigen, um die Übersicht der Spalten zu verbessern. Denkbar wären auch 2 scrollbare Bodybereiche für Vergleiche.

Tabellen bieten somit eine große Fülle an gestalterischen Freiraum an, was aber meistens von Designer vergessen wird.

Dabei ist aber zu achten, dass der <tfood>-Tag immer vor dem <tbody>-Tag steht.

Listen

Listen werden viel häufiger eiungesetzt als man es wohl vermutet. Mittlerweile gilt es wohl als bekannt, dass Menüs eine Auslistung von Verlinkungen ist. Dabei unterscheide ich zwischen der Inhaltsnavigation, was aus Sicht der Linearisierung eine geordnetet Liste sein sollte und der Servicenavigation, die z.B. die Sprachauswahl oder den Link zur Hauptseite beinhalten könnte.

Aberr was ist mit einem Glossar für die Begriffserklärung. Fast jede Seite enthält Fachwörter, gerade Produktseiten. Ist das nicht auch eine Liste. Hier würde ich eine Definitionsliste bevorzugen, da man da wunderbar das Fachwort mit der Definition erklären kann. Oder die Hileseite, die meistens eine FAQ-Liste in die Website integriert. Auch hier ist die Frage der zu definierente Term und die Definition die Antwort.

Designer vergessen sehr häufig die Gestaltung solcher Elemente.

Formulare

Fast jede Website biete in irgendeiner Form Formulare an. In den meisten Fällen dienen diese Formulare dazu Informationen vom Betrachter der Website zu erhalten. Die Strukturierung und die Gestaltung von Formularen hängt ganz stark von die angeforderten Informationen ab. Bei einem einfachen Kontaktformular reicht es meist, dass die Angaben des Benutzer in einzeilige oder mehrzeilige Eingabefelder eingetragen werden.

Man sollte bei der Gestaltung darauf achten, dass die Eingabefelder einen einheitlichen Stil folgen. Gerade der <textarea>-Tag wird, anders als der <input>- oder der <select>-Tag, in den meisten Browsern mit einer nicht proportionalen Schrift dargestellt. Das sollte man angleichen.

Weiterhin sollte man jedes Formelement mit einem <label>-Tag kombinieren, so dass der Browser die Zusammengehörigkeit von Beschriftung und Eingabeelement erkennt. Nebenbei entsteht dadurch auch eine bessere Benutzerfreudlichkeit, denn wenn man dann auf die Beschriftung klickt aktiviert sich automatisch das Eingabeelement.

Falls man kompliziertere Formulare haben sollte, kann man mit dem <fieldset>-Tag und einer Beschriftung mit dem <legend>-Tag einzelne Formelemente gruppieren. So kann man das komplexe Formular ein wenig übersichtlicher Gestalten. Es ist sogar denkbar, dass per JavaScript die einzelnen Fieldsets zu einer Art Mappe mit Registerkarten gefalter werden.

Fazit

Nicht nur die Standardelemente einer Website, wie das Grundlayout, die Navigation oder der Kopf einer Website muss ein Designer gestalten, sondern auch der Inhalt sollte Ziel seiner Bemühungen sein. Oft wird die Gestaltung einer Website nur auf die wichtigsten Punkte beschränkt und vergessen, dass es dem Benutzer ja um die Inhalte geht warum er die Website besucht. Und genau deshalb sollte der Inhalt auch mit in Mittelpunkt der Gestaltung sein.

Ähnliche Beiträge

• CSS Layouts am Fließband
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch

Nach ein paar Überlegungen kamen wir dann auf die Teilung des CSS-Designs in 4 Dateien:

• basic.css
• 2column.css
• 3column.css
• content.css

In der Basisdatei werden alle grundlegenden Formatierungen für das Layout, wie z.B. Kopf- und Fußbereich bzw. Navigationsspalte festgelegt. Zusätzlich wird das gesamte Design zentriert und auf eine festen Breite eingestellt. Wobei die feste Breite nicht zwingend mit Pixeln zu lösen sein muss, denn in CSS können z.B. Breitenangaben auch in Em angegeben werden.

In der Inhaltsdatei werden dann alle restlichen für die Darstellung wichtigen Formatierungen, wie z.B. Absätze Listen und Tabellen, definiert. Zusätzlich können dort auch Ausrichtungen von Bilden angegeben werden.

Falls man nun aber einige Unterseiten brauchen sollte, die ein 2 spaltigen Layout benötigen, dann bindet man einfach, zusätzlich zu den beiden Grunddateinen, die 2-Spaltige mit ein. In der HTML-Datei gruppiert man nun noch über 2 DIV-Container die Inhalte in die jeweiligen Spalten.

Gleiches gilt auch für ein 3 spaltiges Layout. Hier gibt es auch eine zusätzliche CSS-Datei und auch hier muss man den jeweiligen Inhalt in die 3 Spalten aufteilen.

Ähnliche Beiträge

• Dreamweaver-Schulung für den Solar Verlag
• flexible Layouts mit CSS
• CSS">Dreamweaver und CSS
• CSS-Seminar bei VVA
• CSS 3-Unterstützung der Browser