Ähnliche Beiträge

• Website – Q’uchu
• Website – Watermelon Ministries
• PHP">Template-Engine mit PHP
• Website – Old Pulteney Row to the Pole
• Tag 14 – Template Class

Ähnliche Beiträge

• Website – The Lakeside Heritage Society
• Website – Watermelon Ministries
• PHP">Template-Engine mit PHP
• Website – Old Pulteney Row to the Pole
• Tag 14 – Template Class

Ähnliche Beiträge

• Website – The Lakeside Heritage Society
• Website – Q’uchu
• PHP">Template-Engine mit PHP
• Website – Old Pulteney Row to the Pole
• Tag 14 – Template Class

Das besondere an dieser Schulung war, dass der erste Schulungstag von 4 Wochen und der zweite am letzten Samstag war. Es ist nicht gut so lange Pause zwischen diesen Terminen zu haben. In diesem Fall ging es zwar nicht anderes, aber es hat sich wieder mal gezeigt dass es nicht von Vorteil ist. Am 2. Seminartag haben wir fast 2 Stunden nur wiederholt – hätten jedoch die Zeit besser nutzen können.

Ähnliche Beiträge

• Einzelcoaching – Cinema 4D
• Cinema 4D Grundlagen und Aufbau
• JavaScript – Grundlagen
• Flash – Grundlagen und Aufbau
• Flash 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

Sehr gut finde ich das neue Design von WordPress, welches sich zur alten Version deutlich unterscheidet.

Für alle die es interessiert, veröffentliche ich hier mal meine verwendeten Plugins und meine interne Statistik.

Plugins

• aktive Plugins
• Abbreviation Replacer
• Akismet
• File Icons
• Google XML Sitemaps
• Math Comment Spam Protection
• o42-clean-umlauts
• PJW WordPress Version Check
• Really Simple Sitemap
• Simple Tags
• WordPress Database Backup
• WP-SlimStat
• WP 2.3 Related Posts
• WP 2.3 statistics
• inaktive Plugins
• 123 Multihost
• 123 No Rewrite Permalink
• Contact Form 7
• Dagon Design Sitemap Generator
• HeadSpace2
• Hello Dolly
• Landing sites (de)
• Redirection
• WP-ContactForm

Statistik

Ich habe 51 Beiträge in 17 Kategorien, 133 Stichworte und 25 Kommentare.

• März 2008
• Hits: 15176
• Visits: 1781
• Februar 2008
• Hits: 9197
• Visits: 1429
• Januar 2008
• Hits: 9001
• Visits: 1162
• Dezember 2007
• Hits: 6710
• Visits: 590
• November 2007
• Hits: 1558
• Visits: 78
• Oktober 2007
• Hits: 961
• Visits:60

Laut Google habe ich seit dem 16. Oktober 2007 1.344 eindeutige Besucher gehabt, die durchschnittlich 2:59 Minuten meine Seiten besucht haben und im Durchschnitt 2,52 Seiten gelesen haben.

Ähnliche Beiträge

• Website – The Lakeside Heritage Society
• Website – Q’uchu
• Website – Watermelon Ministries
• Cinema Schulung bei Tools
• Dreamweaver-Schulung für den Solar Verlag

Nebenbei stellte Torsten und ich fest, dass ich den Flash Advanced Unterricht für dieses Semester übernehmen kann. Also bin ich jetzt Dozent bei Macromedia und zeige den Studenten wie sie mit ActionScript, nen guten Interface und viel Gedult gute mobile bzw. Webanwendungen erstellen können.

Ich hoffe es klappt alles so wie ich es mir vorstelle.

Ähnliche Beiträge

• Flashvideo-Player einfach eingesetzt
• Flash Programmierung – LR Health & Beauty
• Mobil Games mit Flash – Buch
• Flash Enginneering – Buch
• ActionScript 3 & Flex

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

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

• AJAX Adressbuch 1.1

Bugfix:

1. Ich habe eine SQL-Datei hinzugefügt, um die Datenbank schneller zu installieren. Jetzt muss nur noch in der include-Datei der Zugriff auf die Datenbank geregelt werden.
2. Der init()-Methode des Adressbuches wird jetzt der Form-Container übergeben, so dass das Adressbuch flexibler auf das DOM reagieren kann.
3. Die Literal-Namen wurden in eine einheitliche Schreibweise (RED_AdrBook, RED_AJAX) umbenannt.
4. Eine update-Funktion für bestehende Datensätze wurde hinzugefügt.
5. Eine Lösch-Funktion wurde hinzugefügt. Deswegen wurde ein delete.php-Script, welches einen Datensatz löscht, angelget.
6. Die Anzahl der Datensätze und der aktuelle Datensatz wird nun im Interface angezeigt.

Ähnliche Beiträge

• AJAX Adressbuch – Tutorial Teil 4
• Tag 21 – Erweiterung durch AJAX
• Alle Türchen von 2007 sind offen
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial 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

Ähnlich wie in Teil 2 und Teil 3 werde ich mehrere Datei benutzen um alles geordnet zu haben. Aber als erstes die Scripte zum Erzeugen der Datenbank und des Datenbestandes.

1. CREATE DATABASE `demodb` DEFAULT CHARACTER SET latin1 COLLATE latin1_general_ci; USE `demodb`;

1. CREATE TABLE `mitarbeiter` (
2. `id` int(11) NOT NULL auto_increment,
3. `nachname` varchar(255) NOT NULL,
4. `vorname` varchar(255) NOT NULL,
5. `email` varchar(255) NOT NULL,
6. `telefon` varchar(255) NOT NULL,
7. PRIMARY KEY (`id`)
8. );

Also phpMyAdmin, das ultimative Datenbank-Tool, öffnen und die Codes einfügen. Dazu noch einen Datenbank-Benutzer und ein dazugehöriges Passwort anlegen. In meinem Fall heißt der Benutzer “demouser” und sein Passwort ist “password“.

Als nächstes lege ich mir immer eine PHP-Datei an, die die Verbindung zur Datenbank regelt. Somit muss ich die Daten nicht in jedes Script hineinschreiben.

1. <?php
2. $connect = mysql_connect('localhost', 'demouser', 'password');
3. mysql_select_db('mitarbeiter', $connect);
4. ?>

In der Variable $connect wird dann die Verbindung zum Datenbank-Server gespeichert und kann von nun an genutzt werden. Ich habe hier der Einfachheit halber auf Fehlermeldungen verzichtet.

1. header('Content-Type: text/xml');
2. $xml = new DOMDocument('1.0', 'utf-8');
3. $root = $xml->createElement('mitarbeiter');
4. $xml->appendChild($root);
7. echo $xml->saveXML();

Um mit PHP eine XML-Ausgabe zu erzeugen, reicht der obige Quellcode. Wichtig dabei ist das der richtige Header an den Browser geschickt wird.

Danach wird ein XML-Objekt mit dem Zeichensatz “utf-8″ generiert. Weiterhin wird ein Hauptknoten erzeugt und an das XML-Dokument dran gehangen. Zum Schluss alles an den Browser geschickt.

Soweit die Grundstruktur der XML-Ausgabe. Aber es fehlen ja noch die eigentlichen Inhalte aus der Datenbank.

1. <?php
2. include_once('include.php');
4. $sql = 'SELECT * FROM personen ORDER BY nachname';
5. $result = mysql_query($sql, $connect);
6. while($rs = mysql_fetch_assoc($result))
7. {
8. $nachname = $xml->createElement('nachname');
9. $nachname->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['nachname'])));
10. $vorname = $xml->createElement('vorname');
11. $vorname->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['vorname'])));
12. $email = $xml->createElement('email');
13. $email->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['email'])));
14. $telefon = $xml->createElement('telefon');
15. $telefon->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['telefon'])));
16. $person = $xml->createElement('person');
17. $person->setAttribute('id', $rs['id']);
18. $person->appendChild($nachname);
19. $person->appendChild($vorname);
20. $person->appendChild($email);
21. $person->appendChild($telefon);
22. $root->appendChild($person);
23. }
25. mysql_close($connect);
26. ?>

Dazu binde ich als erstes die externe Datei zum Verbinden mit dem Datenbank-Server ein. Danach speichere ich das SQL-Statement in einer Variablen zwischen und hole von der Datenbank alle Ergebnisse dieser Anfrage.

In der darauffolgenden while-Schleife werden neue Knoten erzeugt und an den Root dran gehangen. Dabei setzt sich der Nachname-Knoten z.B. wie folgt zusammen. Ich erzeuge als erstes einen <nachname>-Tag und hänge dann mit der createTextNode()-Methode einen Text-Knoten dran. Den Text den ich da dran hänge, konvertiere ich zuvor noch mit der iconv()-Funktion in den richtigen Zeichensatz. Zum Schluss hänge ich dem <person>-Tag alle Unterknoten dran.

Soweit die Ausgabe zum Browser, bzw. zu JavaScript und meiner AJAX-Klasse. Was noch fehlt ist ein Script um Daten von JavaScript in Empfang zu nehmen und in die Datenbank einzufügen.

1. <?php
2. include('include.php');
3. $sql = sprintf('REPLACE INTO personen SET
4. id=%d,
5. nachname="%s",
6. vorname="%s",
7. email="%s",
8. telefon="%s"'
9. ,$_POST['f0'],$_POST['f1'],$_POST['f2'],$_POST['f3'],$_POST['f4']);
10. mysql_query($sql, $connect);
11. mysql_close();
12. ?>

Auch hier ist der Quellcode sehr überschaubar. Als erstes binde ich wieder Das Script zum Erzeugen einer Verbindung zum Datenbank-Server ein. Dann speichere ich wieder in einer Variablen das SQL-Statement zwischen. Um ein korrektes Ergebnis zu bekommen, verwende ich hier die sprinf()-Funktion. Diese bietet mir eine kleiner Kontrolle über die übergebenen Werte. Zum Schluss schicke ich das Ganze nur noch an der Server und fertig ist das Einfügen neuer oder das Ändern von bestehenden Datensätzen. Ich verwende dazu immer ganz gern das REPLACE-Statement. Wenn dieses Statement keine ID besitzt wird ein neuer Datensatz erzeugt, ansonsten wird der Bestehende verändert.

• Download

So und das war es auch schon mit der serverseitigen Programmierung. Gerade mal 3 kleine Script brauche ich hier um der ganzen Webanwendung auch das Speichern auf dem Server bzw. das Einlesen von Daten hinzuzufügen.

Ich hoffe es hat euch gefallen 24 meist kleine Beträge aus meinen Arbeitsalltag zu lesen. Ich gebe zu, es war nicht immer leicht die Texte rechtzeitig fertig zu stellen und ich verspreche, wie immer und alle, nächstes Jahr rechtzeitig mit den Vorbereitungen zu beginnen.

Ähnliche Beiträge

• AJAX Adressbuch
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• AJAX Adressbuch – Tutorial Teil 1
• Einzelcoaching – PHP-XML Schulung

Ok, als erstes wieder einmal die Zusammenfassung aller Eigenschaften und Methoden der RED-Ajax-Objektes.

1. // JavaScript Document
2. var RED_Ajax =
3. {
4. req : null,
5. url : null,
6. method : 'GET',
7. async : false,
8. body : null,
9. headers : [],
10. timer : null,
11. responseXML : null,
12. responseText : null,
13. init : function() { },
14. run : function() { },
15. header : function() {},

16. response : function() {},

17. callback : function() {},
18. update : function() {},
19. error : function() { }
20. }

Ich werde jetzt nicht alle Eigenschaften im Detail erklären, denn das passiert auf jeden Fall noch bei der Erklärung der einzelnen Methoden. Ich fange lieber direkt mit den Methoden an.

1. init : function()
2. {
3. this.req = (window.XMLHttpRequest)
4. ?
5. new XMLHttpRequest()
6. :
7. ((window.ActiveXObject)
8. ?
9. new ActiveXObject('Microsoft.XMLHTTP')
10. :
11. null
12. );
14. if(this.req != null)
15. {
16. this.req.onreadystatechange = this.response;
17. }
18. },

Wie immer gibt es bei mir eine init()-Methode. Diese hier legt in der reg-Eigenschaft ein Objekt ab, welche eine Verbindung zum Server aufbauen kann. Da jeder Browser ein anderes Objekt dazu benutzt, muss hier immer erst noch geprüft werden ob das ganze auch funktioniert. Wenn alles geklappt hat wird noch auf den readystatechange-Event ein Methodenverweise gemacht.

1. run : function(u,m,f,b)
2. {
3. this.method = m || this.method;
4. this.async = f || this.async;
5. this.body = b || this.body;
6. this.url = u;
7. if(this.req != null)
8. {
9. this.req.open(this.method, this.url, this.async);
10. if(this.headers.length > 0)
11. {
12. for(var i=0; i<this.headers.length; i+=2)
13. {
14. this.req.setRequestHeader(this.headers[i], this.headers[i+1]);
15. }
16. }
17. this.req.send(this.body);
18. }
19. },

Um dann aber auch die eigentlichen Daten vom bzw. zum Server zu schicken gibt es die run()-Methode. Ihr kann bis zu 4 Parameter mit übergeben werden, wobei der erste, die URL-Angabe, nur Pflicht ist. Die weiteren Parameter sind die Übertragungsmethode (GET oder POST), ob die Ubertragung synchron (true) oder asynchron (false) stattfinden soll und der beim Senden mitgelieferte Body.

Bevor der Request aber geschickt wird, werden die im Vorfeld gesetzte Header-Angaben verarbeitet.

1. header : function(k,v)
2. {
3. if(k != null)
4. {
5. this.headers.push(k);
6. this.headers.push(v);
7. }
8. },

Um eine Header-Angabe, die später mit übertragen werden soll, zu setzten, reicht es die header()-Methode mit ihren beiden Parametern key und value aufzurufen.

1. response : function()
2. {
3. var a = ajax.req;
4. switch(a.readyState)
5. {
6. case 1:
7. break;
8. case 2:
9. this.timer = window.setTimeout(this.error, 10000);
10. break;
11. case 3:
12. this.timer = window.setTimeout(this.error, 10000);
13. break;
14. case 4:
15. window.clearTimeout(this.timer);
16. if(a.status==200 || a.statusText=='OK')
17. {
18. RED_Ajax.responseXML = a.responseXML;
19. RED_Ajax.responseText = a.responseText;
20. RED_Ajax.callback();
21. }
22. }
23. },

Beim Ausführen der Sende- bzw. Empfang-Vorganges durchläuft das Verbindungsobjekt verschiedene Stadien, die in der response()-Methode geprüft werden. Folgende Stati gibt es:

1. Das Verbindungsobjekt existiert aber die open()-Methode wurde noch nicht aufgerufen.
2. Die send()-Methode wurde noch nicht ausgeführt.
3. Die send()-Methode wurde zwar ausgeführt, aber der Server hat noch nichts zurück geschickt.
4. Der Server hat angefangen Daten zu übermitteln, aber ist damit noch nicht fertig.
5. Der Übermittlungsvorgang wurde beendet und alle Date sind angekommen.

Um den Übertragungsvorgang auch irgendwann abzubrechen, falls ein Fehler aufgetreten ist, habe ich im Status 2 und 3 eine Timeout eingefügt und hebe ihn im Status 4 wieder auf, da da ja alles angekommen ist. Wenn dann auch noch der Server mit “alles ok” übertragen hat, dann werden die übertragenen Werte einmal als reine Text und als XML-Objekt abgespeichert. Zum Schluss rufe ich nur noch die callback()-Methode auf.

1. callback : function(){},
2. update : function(){},

Meine callback()-Methode ist ein sogenannter Huck und muss erst noch definiert werden. Ich habe deshalb offen gelassen, weil die Verarbeitung der übertragenen Daten sehr unterschiedlich sein kann. In Teil 2 habe ich erklärt wo und wie man diese Definition einsetzt.

Auch habe ich eine update()-Methode zwar eingesetzt, aber noch nicht definiert. Hier lasse ich mir die Möglichkeit offen zu einem späteren Zeitpunkt einen zyklischen Aufruf des Server zu bauen.

1. error : function()
2. {
3. alert('Die Zeit ist um!');
4. this.req.abort();
5. }

Meine letzte Methode ist die error()-Methode. Sie dient ausschließlich dazu bei zu langen Ladezeiten diesen Vorgang abzugrechen.

Wie immer gibt es zum Schluss den Download der beschriebenen Dateien:

• RED_AJAX Datei

Ähnliche Beiträge

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

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

Anders als bei PHP gibt es in JavaScript keine direkte DOM-Objekte, sondern alles muss über das document-Objekt laufen. Auch hier gibt es nur ein paar wichtige Methoden die man kennen sollte:

• document.createElement();
• document.createTextNode();
• element.appendChild();
• element.setAttribute();

Ich habe mir als Beispiel überlegt in einen <div>-Container eine ähnline Mitarbeiter-Liste zu erzeugen wie gestern mit PHP. Hier nun erstmal der Quellcode 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">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>RED - JavaScript - XML-Loader</title>
6. <script language="javascript" type="text/javascript" src="red_xml.js"></script>
7. <script language="javascript" type="text/javascript">
8. window.onload = function()
9. {
10. RED_DOM.create('container');
11. }
12. </script>
13. </head>
14. <body>
15. <div id="container"></div>
16. </body>
17. </html>

Wie man deutlich sehen kann, wird nach dem Laden des Dokumente die Methode meiner Objectes aufgerufen und als Parameter die ID des Containers übergeben.

In diesen Container wird nun die Mitarbeiterliste erzeugt.

1. var RED_DOM =
2. {
3. create : function(node)
4. {
5. var dom = document.getElementById(node);

Als erstes erzeuge ich einen Verweis auf das Element.

1. var mitarbeiter = dom.appendChild(document.createElement('ul'));

Dann füge ich eine ungeordnete Liste hinzu.

1. var person = mitarbeiter.appendChild(document.createElement('li'));
2. person.setAttribute('id','2007-12-15-RE');

Danach wird ein neuer Listeneintrag generiert und mit einer ID versehen.

1. var vorname = person.appendChild(document.createElement('span'));
2. vorname.appendChild(document.createTextNode('Enrico'));
3. var nachname = person.appendChild(document.createElement('span'));
4. nachname.appendChild(document.createTextNode('Reinsdorf'));

Der Vor- und Nachname wird, um ihn zu kapseln in einen <span>-Tag gelegt.

1. var contacts = person.appendChild(document.createElement('ul'));
2. var email = contacts.appendChild(document.createElement('li'));
3. email = email.appendChild(document.createElement('a'));
4. email.setAttribute('href', 'mailto:enrico@re-design.de');
5. email.appendChild(document.createTextNode('enrico@re-design.de'));

Um alle Kontakt auflisten zu können, erzeuge ich eine weitere Unterliste. In die die Email als Verweis abgelegt wird.

1. var telefon = contacts.appendChild(document.createElement('li'));
2. telefon.setAttribute('class', 'mobil');
3. var vorwahl = telefon.appendChild(document.createElement('span'));
4. vorwahl.appendChild(document.createTextNode('0177'));
5. var nummer = telefon.appendChild(document.createElement('span'));

6. nummer.appendChild(document.createTextNode('2822557'));
7. }

8. } ;

Zum Schluss füge ich noch die Listeneintrag für die Telefonnummer hinzu, welcher sich wiederum in 2 <span>-Tags aufsplittet.

Wie man erkennen kan ist der Ablauf dem von PHP sehr ähnlich. Was das spätere Arbeiten mit AJAX sehr erleichtert. Auch verhält sich ActionScript fast gleich, da es ähnlich strukturiert ist wie JavaScript.

• HTML-Datei
• JavaScript-Datei
• komplettes Set

Ähnliche Beiträge

• schnelle Erstellung von XML mit PHP
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1

Im Prinzip gibt es in PHP nur 3 wichtige DOM-Klassen:

1. DOMDocument
2. DOMElement
3. DOMNode

Wobei

Um eine XML-Struktur von folgender Syntax zu schaffen, reicht ein relativ einfaches Script.

1. <?xml version="1.0" encoding="utf-8"?>
2. <mitarbeiter>
3. <person nr="2007-12-15-RE">
4. <nachname>Reinsdorf</nachname>
5. <vorname>Enrico</vorname>
6. <contacts>
7. <email>enrico@re-design.de</email>
8. <telefon type="mobil">
9. <vorwahl>0177</vorwahl>
10. <nummer>2822557</nummer>
11. </telefon>
12. </contacts>
13. </person>
14. <person nr="2007-04-01-MM">
15. <nachname>Mustermann</nachname>
16. <vorname>Max</vorname>
17. <contacts>
18. <email>max@mustermann.de</email>
19. <telefon type="büro">
20. <vorwahl>1234</vorwahl>
21. <nummer>1234567</nummer>
22. </telefon>
23. </contact>
24. </person>
25. </mitarbeiter>

Diese XML-Datei beinhaltet 2 Personen mit den dazugehörigen Vor- und Zuname und den Kontaktmöglichkeiten per Email und per Telefon.

Hier nur das PHP-Script zum Erzeugen diese XML-Datenstruktur.

1. <?php
2. header('content-type: text/xml charset=utf-8');
3. /* @var $dom DOMDocument */
4. /* @var $mitarbeiter DOMElement */
5. /* @var $person DOMElement */
6. /* @var $contacts DOMElement */
7. /* @var $telefon DOMElement */

Als erstes wird über die header-Funktion der richtige Inhaltstyp festgelegt, so dass die Browser auch die Sonderzeichen korrekt anzeigen können. Die weiteren Kommentare dienen nur meinem Zend-Studio zur Hilfe.

1. $dom = new DOMDocument('1.0', 'utf-8');

Als nächste wird ein neues DOM-Dokument angelegt.

1. $mitarbeiter = $dom->appendChild(new DOMElement('mitarbeiter'));

In dieses DOM-Objekt wird ein erster Knoten hineingelegt.

1. $person = $mitarbeiter->appendChild(new DOMElement('person'));
2. $person->setAttribute('id','2007-12-16-RE');
3. $person->appendChild(new DOMElement('vorname','Enrico'));
4. $person->appendChild(new DOMElement('nachname','Reinsdorf'));

Dann wird dem <mitarbeiter>-Knoten ein Unterknoten person hinzugefügt. Diesem Knoten wird ein Attribute und 2 Unterknoten mit direkten Texten zugewiesen.

1. $contacts = $person->appendChild(new DOMElement('contacts'));
2. $contacts->appendChild(new DOMElement('email','enrico@re-design.de'));
4. $telefon = $contacts->appendChild(new DOMElement('telefon'));
5. $telefon->setAttribute('type','mobil');
6. $telefon->appendChild(new DOMElement('vorwahl','0177'));
7. $telefon->appendChild(new DOMElement('nummer','2822557'));

Zum Schluss wird der <person>-Knoten mit dem Unterknoten contacts erweitert. Dieser erhält wiederum einem einfachen Unterknoten email und einem komplexen Unterknoten für die Telefonnummer.

1. $person = $mitarbeiter->appendChild(new DOMElement('person'));
2. $person->setAttribute('id','2007-04-01-MM');
4. $person->appendChild(new DOMElement('vorname','Max'));
5. $person->appendChild(new DOMElement('nachname','Mustermann'));
7. $contacts = $person->appendChild(new DOMElement('contacts'));
8. $contacts->appendChild(new DOMElement('email','max@mustermann.de'));
10. $telefon = $contacts->appendChild(new DOMElement('telefon'));
11. $telefon->setAttribute('type','büro');
12. $telefon->appendChild(new DOMElement('vorwahl','1234'));
13. $telefon->appendChild(new DOMElement('nummer','1234567'));

Das ganz nun nochmals für die 2. Person. In späteren Script wird natürlich diese Zusammenstellung über eine Schleife erstellt und nicht, wie ich es jetzt gemacht habe von Hand.

1. echo $dom->saveXML();
2. ?>

Als Abschluss gebe ich das DOM-Object als XML-Datenformat an den Browser aus.

• PHP-Datei
• XML-Datei
• komplettes Set

Ähnliche Beiträge

• Mit JavaScript DOM erzeugen
• Einzelcoaching – PHP-XML Schulung
• AJAX Adressbuch – Tutorial Teil 4
• PHP">Template-Engine mit PHP
• Flashvideo-Player einfach eingesetzt

Die einfache und trotzdem flexible Verwendung der erstellten Klasse lag mir dabei besonders am Herzen.

Verwendung der AJAX-Klasse

Eingebunden und verwendet wird die Klasse über folgende Befehle:

1. <script type="text/javascript" src="ajax.js"></script>
2. <script type="text/javascript">
3. //<![CDATA[
4. function afterLoad(xml)
5. {
6. alert(xml.toString());
7. }
8. ajax.callback = function()
9. {
10. afterLoad(this.responseXML);
11. }
13. ajax.init();
14. ajax.load('getXML.php');
16. //]]>
17. </script>

Wie ihr seht ist diese Verarbeitung sehr einfach einzusetzen. Als erstes muss natürlich die Klasse in das HTML-Dokument eingebunden werden. Dann legt man fest was passieren soll, wie die Daten verarbeiter werden sollen. Zusätzlich sollte man in der eigentlichen Klasse definieren das diese Funktion auch aufgerufen wird, sonst passiert gar nichts. Dazu habe ich einen sogenannten Hock vordefiniert, der dann einfach mit Funktionalität gefüllt wird. Zum Schluß initialisiert man nur nach die Klasse, um das XMLHttpRequest-Objekt anzulegen und läd dann die entsprechende Datei von Server. Fertig ist ist ein flexibles Ladesystem per JavaScript.

Detail zur AJAX-Klasse

Natürlich möchte ich euch auch noch den Inhalt meiner Klasse kurz präsentieren, denn ich denke dadurch wird der Ausbau ud die Erweiterung relativ einfach.

1. var ajax = {
2. req : null,
3. url : null,
4. method : 'GET',
5. async : false,
6. responseXML : null,
7. responseText : null,
8. init : function()
9. {
10. try
11. {
12. this.req = new XMLHttpRequest();
13. }
14. catch(e)
15. {
16. try
17. {
18. this.req = new ActiveXObject('Microsoft.XMLHTTP');
19. }
20. catch(e)
21. {
22. this.req = null;
23. }
24. }
25. if(this.req != null)
26. {
27. this.req.onreadystatechange = this.response;
28. }
29. },
30. load : function(u,m,a)
31. {
32. this.url = u;
33. this.method = m || this.method;
34. this.async = a || this.async;
35. if(this.req != null)
36. {
37. this.req.open(this.method,this.url,this.async);
38. this.req.send();
39. }
40. },
41. response : function()
42. {
43. var a = ajax.req;
44. if(a.readyState == 4)
45. {
46. if(a.status==0 || a.status==200 || a.statusText=='OK')
47. {
48. ajax.responseXML = a.responseXML;
49. ajax.responseText = a.responseText;
50. ajax.callback();
51. }
52. }
53. },
54. callback : function(){}
55. };

Ich habe mich bei der Erstellung der Klasse für Literal-Objekt entschieden, da ich die Verwendbarkeit dadurch als sehr einfach empfinde und das Instanzieren des Objektes entfällt.

Eigenschaften der Klasse

• req
  Hier wird später das XMLHttpRequest-Objekt abgespeichert, welches ja für den Verbindungsaufbau zu Datenquellen nötig ist.
• url
  Um später die URL auch in einem regelmäßigen Verfahren immer wieder abzurufen, wird sie in dieser Eigenschaft abgespeichert.
• method
  Auch wird für weitere Verwendung die Übertragungsmethode als Eigenschaft festgehalten. Mögliche sinnvolle Werte sind in diesem Fall HEAD, PUT und GET, wobei letzteres der Defaultwert ist.
• async
  Um eine synchrone Übertragen der Daten ein zustellen, setzt man diese Eigenschaft auf true.
• responseXML und responseText
  In diesen beiden Eigenschaften wird nach erfolgreicher Übertragung der Daten die Ergebnis gespeichert. Einmal als normale Zeichenkette und einmal als ein XML-Objekt.

Methoden der Klasse

• init()
  Diese Methode sollte immer vor allen anderen Methodenaufrufen benutzt werden, da sie das XMLHttpREquest instanziert und gleichzeitig wird festgelegt, dass die response()-Methode beim Statuswechsel aufgerufen werden soll.
• load(u,m,a)
  Durch die 3 übergebenen Parameter wird als erstes die URL der Datenquelle, die Übertragungsmethode und synchrone oder asynchrone Art festgelegen. Dann wird die Datenquelle geladen.
• response()
  In dieser Methode wird der Status der Übertragung und der Status des Übertragenen überprüft. Im Erfolgsfall werden die übertragenen Daten in die entsprechenen Eigenschaften übertragen und die callback()-Methode aufgerufen.
• callback()
  Dieser Hock dient zur flexiblen Benutzung der Klassen. Mit dem Überschreiben der leeren Funktion bestimmt man extern was mit dem Daten nach dem Laden geschehen soll.

Download der Dateien

• AJAX-Klasse
• HTML-Datei
• Kompletes Beispiel als ZIP-Datei

Ähnliche Beiträge

• dynamische Linkliste bringt mehr Usability
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• AJAX – PHP Schulung in Stuttgart
• AJAX Adressbuch

Ich schreibe gerade an einer Kalender-Komponente. Diese hat 2 Bereiche zur Verwaltung. Einmal gibt es da die Auflistung der Termine und es soll die Auflistung von Kategorien geben in denen sich die Termine befinden. Dazu habe ich nun im Admin-Bereich 2 Icons in die Toolbar gelegt und ein eigenes JavaScript geschrieben, denn das Icon für die Termine übergibt 2 Werte:

1. <a class="toolbar" href="javascript:submitbutton('list', 'dates');">Termine</a>

In dem JavaScript habe ich dann folgenden Code geschrieben:

1. function submitbutton(task, section)
2. {
3.     document.adminForm.task.value=task;
4.     document.adminForm.section.value=section;
5.     try {
6.         document.adminForm.onsubmit();
7.         }
8.     catch(e){}
9.     document.adminForm.submit();
10. }

Ganz so wie es Joomla braucht. Klar habe ich noch eine unsichtbares Feld für der Wert section erstellt. Nun ist aber bei mir zuhause beim Ausführen des Scriptes der Apache-Server immer abgestürzt und ich wusste eine sehr lange Zeit nicht warum. Bis ich aus Verzweiflung den Namen der unsichtbaren Feldes geändert habe. Nun heißt es area und alles funktioniert. Anscheinend wird der Wert section schon in Joomla anderweitig gebraucht und blockiert dadurch das korrekte Ausführen des Scriptes.

Ich hoffe, ich konnte euch mit dieser kleinen Feststellung helfen.

Ähnliche Beiträge

• Dozent an der Macromedia Fachhochschule
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1

Zuerst einmal die grundlegende Vorgehensweise. Die sich auf meiner Sicht heraus als sehr einfach erweist.

1. $tpl = new Template('path/to/template/directory/');
2. $tpl->load('file.name');
3. $tpl->set('##KEYWORD##', 'Replace String');
4. $tpl->write();

Klar das ich als erstes die Template-Klasse instazieren muss. Dies tue ich mit der gleichzeitigen Übergabe der Template-Ordners. Als nächstes lade ich dann die eigentliche Template-Datei. Und dann gebe ich allen Keywords, also Schlüsselworten, die ich im Template gebrauche einen Wert. Zum Schluss schicke ich das Template zum Browser.

Bestimmt gibt es jetzt noch viele Einwände was man noch einbauen könnte oder sollte, was noch alles fehlt und nicht berücksichtige wird, aber ich glaube gerade diese Einfachheit macht die Klasse so schnell nutzbar.

Das Template, welches geladen wird und später dann an den Browser geschickt wird, ist eine reine HTML-Datei. Ich brauche also keine spezielle Konfiguration meines Editors um die Template-Dateien zu öffnen. Ich nutze einfach normale HTML-Dateien und dort wo der dynamische Text hinkommen soll definiere ich ein Schlüsselwort, welches folgende Syntax hat: ##UPPERCASE_WORD##.

Nun zu meiner eigentlichen Template-Klasse. Sie besitzt mehr als die oben gezeigten Funktionalitäten.

Folgendes kann in dieser Klasse genutzt werden:

RED_Template($path=null)

Dies ist der Konstruktor der einen Pfad zum Template-Ordner erwartet. Falls die Parameter leer bleibt wird auf Root-Ebene ein Default-Ordner als Stammverzeichnis für die Templates genutzt.

load($file)

Diese Methode lädt die Template-Datei in die Klassen-Eigenschaft $source falls sie vorhanden ist. Falls sie nicht existiert wird in die Klassen-Eigenschaft $error eine Fehlermeldung geschrieben und der Wert false zurück gegeben.

reload()

Es kommt immer wieder vor, dass die geladene Template-Datei erneut geladen werden muss. Dabei habe ich mir aber überlegt, dass es überflüssig und Ressourcen verschwendend ist, wenn sie tatsächlich erneut geladen werden müsste. Deshalb wird beim ersten Laden der Datei eine Kopie in eine weitere Klassen-Eigenschaft $cache abgelegt. So muss hier nur noch ein Überschrieben die $source-Eigenschaft stattfinden.

setSource($src='')

Diese Methode benutze ich kaum. Ich habe sie nur eingebaut, um die Möglichkeit zu haben nach dem laden der Template-Datei eine andere Datei zu laden. Das ist aber bis jetzt noch nie vorgekommen.

set($key, $value)

Hier nun die wichtigste Methode. Hier werden die Schlüsselbegriff und ihre Werte in einen Array gesammelt um später eingesetzt zu werden.

replace()

Mit der relace-Methode werden die gesammelten Schlüsselbegriffe in das geladene Templat eingesetz, bzw. die Schüsselbegriffe durch ihre Werte ersetzt. Diese Methode sollte eigentlich niemals direkt aufgerufen werden, aber da es in PHP 4 noch keine Zugriffsrechte für Variablen gab habe ich sie einfach so geschrieben.

get($source=false)

Um mit der ersetzten Template-Datei in PHP weiterarbeiten zu können, habe ich eine get-Methode eingefügt, die nicht direkt das Template an den Browser gibt. Mit dem Parameter $source kann ich bestimmen ob ich den lesbaren Quellcode haben möchte oder lieber doch die benutzbaren Quellcode.

write($source=false)

In vielen Fällen möchte ich aber dass das Template direkt an den Browser gesendet wird. Die write()-Methode ruft eigentlich nur die get()-Methode auf und reicht der Parameter weiter.

error($msg)

Alle Fehlermeldungen werde mit dieser Methode in einem Array gesammelt um ihn später abrufen zu können. es wäre z.B. auch denkbar, dass diese Fehler dann in eine Logdatei umgeleitet werden.

getError()

Meine letzte Funktion gibt immer die letzte Fehlermeldung aus dem Array zurück.

Mit diesem System wäre es z.B. sehr einfach einzelne HTML-Blöcke in Template-Dateien auszulagen und sie dann nacheinander in sich zu laden um so eine komplette Ausgabe zu kommen.

1. $news = load_all_news();
2. $content = '';
4. $tpl = new Template('nachrichten/template/');
5. $tpl->load('nachricht.html');
7. foreach($news as $item)
8. {
9. $tpl->set('##TITLE##', Sitem->title);
10. $tpl->set('##TEASER##', Sitem->teaser);
11. $tpl->set('##DATE##', Sitem->date);
12. $tpl->set('##MORELINK##', Sitem->link);
14. $content = $tpl->get();
16. $tpl->replace();
17. }
18. $tpl->load('uebersicht.html');
19. $tpl->set('##HEADLINE##', 'Aktuelle Meldungen');
20. $tpl->set('##CONTENT##', $content)
21. $tpl->write();

Hier der Download meiner PHP Template Klasse

• Template-Klasse

Ähnliche Beiträge

• Website – The Lakeside Heritage Society
• Website – Q’uchu
• Website – Watermelon Ministries
• Tag 14 – Template Class
• AJAX Adressbuch – Tutorial Teil 4

Ich fand es schon immer umständlich für jedes FLV-Video einen eigenen Video-Player zu erstellen. Es wäre doch schönen wenn man nur einen Player nutzen müsste und ihn über externe Parameter steuern könnte, z.B. welches Video er anzeigen sollte.

Mit diesem kleinen Tool-Set habe ich versucht diese Idee umzusetzen. Wie aber funktioniert das ganze nun? Als erstes erstmal eine Auflistung aller Beteiligten:

• videoplayer.html
• Video-Player.swf
• videos.xml
• videos
  • test-01.flv
  • test-02.flv
  • test-03.flv

Der Vorgang

Wie habe ich mir nun den Ablauf vorgestellt? Nun, ich dachte mir ich übergebe per GET an den Videoplayer eine ID. Mit dieser ID sucht der Videoplayer in der XML-Datei den Knoten mit allen wichtigen Informationen. So einfach.

Aufbau der XML-Datei

Dieser ist relativ. Es gibt das Root-Verzeichnis und dann die Unterknoten die mit dem id-Attribut versehen werden. In diesen Unterknoten werden alle weiteren Informationen eingebunden die der Videoplayer braucht.

1. <?xml version="1.0" encoding="utf-8"?>
2. <videos>
3. <video id="2007-12-13">
4. <name>Test 1</name>
5. <source>videos/test_01.flv</source>
6. </video>
7. <video id="2007-12-24">
8. <name>Test 2</name>
9. <source>videos/test_02.flv</source>
10. </video>
11. <video id="2007-12-01">
12. <name>Test 3</name>
13. <source>videos/test_03.flv</source>
14. </video>
15. </videos>

Der ActionScript

Hier wird als erstes der übergebene Parameter in eine globale Variable geladen. Dann die XML-Datei geholt. Die Knoten werden über eine for-Schleifen durchlaufen und die IDs mit dem Parameter verglichen.

1. _root.onLoad = function()
2. {
3. if (_level0.file_id == undefined) {
4. _global.id = 0;
5. } else {
6. _global.id = _level0.file_id;
7. }
8. status_txt.text = _global.id;
9. status_txt.text += 'n';
10. var xml:XML = new XML();
11. xml.ignoreWhite = true;
12. xml.onLoad = function(s:Boolean)
13. {
14. if(s)
15. {
16. status_txt.text += 'loadedn';
17. var nodes:XMLNode = this.firstChild;
18. for(var i:Number=0; i<nodes.childNodes.length; i++)
19. {
20. var node:XMLNode = nodes.childNodes[i];
21. if(node.attributes['id'] == _global.id)
22. {
23. status_txt.text += node.childNodes[0].firstChild.nodeValue;
24. status_txt.text += 'n';
25. status_txt.text += node.childNodes[1].firstChild.nodeValue;
26. myPlayer.contentPath = node.childNodes[1].firstChild.nodeValue;
27. }
28. }
29. }
30. }
31. xml.load('videos.xml');
32. };

Zum Schluss nur noch die Videos in das angegebene Verzeichnis ablegen und glücklich sein.

• HTML-Datei
• XML-Datei
• Flasch-Datei
• SWF-Datei
• komplettes Set

Ähnliche Beiträge

• Dozent an der Macromedia Fachhochschule
• Flash Programmierung – LR Health & Beauty
• Mobil Games mit Flash – Buch
• Flash Enginneering – Buch
• ActionScript 3 & Flex

Warum macht es Sinn eine solche Linkliste zu erstellen? Nun fast jeder der sich mit benutzerfreundlichen Websites auseinandersetzt weiß, dass Links innerhalb von Fließtext den Lesefluss stören. Außerdem kann es möglich sein Leser zu verlieren, wenn sie den Links innerhalb des Textes folgen und nicht wieder zurück kommen. Es ist besser erst am Ende des Textes alle im Text empfohlenen Links aufzulisten.

Leider kann es sehr mühselig sein, die Passagen im Text mit Fußnoten zu kennzeichnen und dann im unteren Bereich eine Linkliste mit Ankerpunkten zu erstellen. Sowas kann wunderbar JavaScript mit einem Automatismus übernehmen.

Einbindung des Link-Generators

Ich habe mir überlegt, dass die Einbindung möglichst einfach sein sollte. Deshalb habe ich ein externes Script geschrieben, welches eine Variable mit einem Literal erzeugt. Dieses Script muss nur in die eigene Website eingebunden werden und ein Event festgelegt werden, wann die Abarbeitung beginnen soll.

1. <script src="RED_LinkGenerator.js" type="text/javascript"></script>
2. <script type="text/javascript">
3. //<![CDATA[
4. window.onload = function()
5. {
6. var content = document.getElementById('content');
7. RED_LinkGenerator.init(content);
8. RED_LinkGenerator.writeList();
9. }
10. //]]>
11. </script>

Als Übergabeparameter für die Initialisierung wird der Container gewählt in dem die Links enthalten sind. Hier z.B. der <div>-Container mit der ID content. Als nächstes muss nur noch die writeList()-Methode ausgeführt werden und das Script erzeugt am Ende des übergebenen Containers eine sortierte Liste.

Ich habe extra diesen Vorgang in 2 Schritte unterteilt, um flexibel zu bleiben, denn ich kann mir vorstellen später eine Methode zu schreiben, die in einen komplett anderen Container die Liste schreibt oder auch einfach nur den Array zurückgibt.

Der Link-Generator selbst

Ich werde jetzt hier nicht jeden einzelnen Schritt erklären. Ich versuche mich auf die wichtigsten Punkte zu beschränken.

Die Initialisierung

Hier wird einfach nur der übergebene Container abgespeichert.

1. init: function(content)
2. {
3. this.container = content;
4. },

Die Methode writeList()

1. writeList: function()
2. {
3. var nodes = this.container.getElementsByTagName('A');
4. var ol = document.createElement('OL');
5. for(var n=nodes.length-1, f=nodes.length; n>=0; n--, f--)
6. {
7. var parent = nodes[n].parentNode;
8. var a = document.createElement('A');
9. a.setAttribute('href', '#a_'+n);
10. a.appendChild(document.createTextNode('['+f+']'));
11. var foot = document.createElement('SUB');
12. foot.appendChild(a);
13. var span = document.createElement('SPAN');
14. span.appendChild(document.createTextNode(nodes[n].firstChild.nodeValue));
15. span.appendChild(foot);
16. var li = document.createElement('LI');
17. var a = document.createElement('A');
18. a.appendChild(document.createTextNode(nodes[n].firstChild.nodeValue));
19. a.setAttribute('href', nodes[n].href);
20. a.setAttribute('id', 'a_'+n);
21. li.appendChild(a);
22. this.list.push(li);
23. parent.insertBefore(span, nodes[n]);
24. parent.removeChild(nodes[n+1]);
25. }
26. for(var n=this.list.length-1; n>=0;n--)
27. {
28. ol.appendChild(this.list[n]);
29. }
30. this.container.appendChild(ol);
31. }

In Zeile 15 werden aus dem Text alle Link gesucht und in Zeile 16 schon mal ein HTML-Knoten für die sortierte Liste angelegt.

Danach wird über eine for-Schleife alle Link-Knoten von hinten nach vorne verarbeitet, die Erklärung folgt später. Dabei wird als Erstes ein Verweis auf den Eltern-Knoten gespeichert und dann ein Link als Fußnote generiert (Zeile 22 – 27).

Diese Fußnote wird zusammen mit dem Linktext in einen neuen <span>-Tag gestellt (Zeile 29 – 31).

Danach wird der Listeneintrag mit einer Kopie des Orginallinks erzeugt (Zeile 33 – 39). Dieser Listeneintrag wird erstmal in einem Array zwischengespeichert.

Anschließend wird der Span-Knoten vor dem eigentlichen Link eingesetzt (Zeile 42) und der Link gelöscht (Zeile 43). Dabei muss aber darauf geachtet werden, dass in der Variablen nodes ein Verweis auf alle Links innerhalb des Container ist und wenn wie hier ein neuer Link, die Fußnote, hinzukommt auch die Anzahl der Links innerhalb des Textes steigt. Deshalb muss beim Löschen n+1 gerechnet werden. Durch diese dynamische Änderung der Menge der Links im Array hat mich auch veranlasst von hinten nach vorne zu arbeiten, denn dadurch wird der Löschvorgang vereinfacht.

Zum Schluss muss nur noch die geordnete Liste erzeugt werden. Da aber die Links im Array in der verkehrten Reihenfolge stehen, habe ich wieder von hinten nach vorne gearbeitet, um die richtige Reihenfolge zu bekommen (Zeile 45 – 48).

Fazit

Ich hoffe ich konnte mit diesem kleine Beispiel zeige, wie JavaScript das Arbeiten im Web erleichtern kann. Keine Ahnung ob das schon ein Ansatz von Web 2.0 ist, aber ich finde der Automatismus kann sich schon sehen lassen.

• Download

Ähnliche Beiträge

• AJAX-Klasse, einfach gebaut
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1

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

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

Internetbenutzer sind meist auf der Suche nach Informationen. Sie haben dabei aber nur sehr wenig Zeit. Deshalb scannen sie die HTML-Seite nur nach wichtigen Schlagwörtern. Vergleichbar ist das mit dem Betrachten eines Plakates beim Vorbeifahren und zwar auf der Autobahn.

Dieser Artikel richtet sich besonders an die Redakteure von Websites, denn meistens wird der Text nicht vom Webdesigner oder -entwickler geschrieben sondern vom Kunden bzw. von einem Mitarbeiter des Kunden. Klar versucht man als Auftragnehmer erstmal die Texte zu überarbeiten also mediengerecht aufzubereiten, aber später, gerade bei einem CMS, ist das Sache des Kunden selbst.

Schreibstil & Wortwahl

Wählen sie ihren Schreibstil mit Bedacht. Nichts ist schlimmer als die falsche Wahl der Worte. Es sollte klar sein, dass ein Text für eine Klassik-Website eine andere Zielgruppe hat, als die von einer Jugendzeitschrift. Und deshalb sollte auch der Schreibstil dem angepasst sein. Aber wie kann man nun den Stil der Zielgruppe herausfinden? Am besten versucht man sich in die Situation der Zielgruppe hineinzuversetzen. Das gelingt am besten in dem man sich mit Zeitungen und Zeitschriften der Zielgruppe besorgt. Auch hilft es immer wieder Sendungen im Fernsehen bzw. im Radio zu verfolgen. Nach einer relativ kurzen Zeit bekommt man ein gutes Gespür für die richtigen Worte.

Doch aufgepasst, wenn man sich nicht genau in dem Metier auskennt merken das die Leser recht schnell. Dann lieber jemanden Fragen der aus der Szene kommt oder einen neutralen Stil benutzen.

Leser sind Suchmaschinen

Ähnlich wie eine Suchmaschine die Text nach Schlüsselworten absucht, machen das die Leser auch. Wenn der Leser also die HTML-Seite scannt, dann sucht er nach Wörtern die zu seiner Suchen passen. Ein kleines Beispiel: Geht man im Internet auf die Suche nach einem guten Sommerurlaub, dann sind Worte wie Reise, Urlaub, Sonne aber auch exclusiv, billig, allinclusive wohl am ehesten passend.

Wenn diese Worte dann auch noch möglichst früh im Text erscheinen ist die Chance dass der Betrachter weiterliest sehr hoch und das wollen wir doch eigentlich erreichen oder? Um solche Begriff im Text noch etwas mehr an Bedeutung gewinnen zu lassen, kann man sie zusätzlich entweder fett oder kursiv erscheinen lassen. Dann fallen sie noch mehr auf und Suchmaschinen finden diese Worte auch noch bedeutender. In diesem Zusammenhang sind auch Auflistungen sehr praktisch. Sie vermitteln in einer schnellen Übersicht alles wichtige.

Satzbau

Ich weiß zwar dass ich dazu neige ellenlange Sätze zu bilden. Und ich weiß auch dass das Falsch ist und nicht dem entspricht was ich hier gleich schreiben werden. Aber…

Das Lesen am Bildschirm ist sehr anstrengend und man sollte deshalb sich möglichst kurz halten. Das beinhaltet natürlich auch die Länge des Satzes selbst. Je kürzer der Satz ist um so einfacher kann er gelesen werden. Hinzu kommt noch, dass er dadurch auch verständlicher wird. Um z.B. die Verständlichkeit eines Text zu ermitteln gibt es den Lesbarkeitsindex von Rudolf Flesch und über einen kleinen Test kann man relativ gut heraus finden für welches Niveau der Text geschrieben ist.

Der kurz Einstieg

Jeder Text (Aufsatz) den wir schreiben hat einen klaren Aufbau. Einleitung, Hauptteil und zum Schluss eine Zusammenfassung. Bei Texten für das Internet sollte man aber so nicht unbedingt schreiben, denn dann würde man erst alles lesen müssen um das Ergebnis des Textes zu bekommen. So viel Zeit habe leider nur sehr Wenige die im Internet etwas suchen. Deshalb sollte man den Aufbau in etwa umkehren. Als erstes sollte man mit einer Zusammenfassung des Inhaltes beginnen und dann diese Zusammenfassung erklären. Die Leser im Internet wollen immer erst wissen um was es geht um dann genaueres zu erfahren. Aber selbst bei der ausführlichen Erklärung der einleitenden Zusammenfassung sollte man sich kurz halten. Steve Krug, einer der führenden Uability-Experten, schrieb in seinem Buch “Don’t make me think! Web Usability: Das intuitive Web” folgendes: Streichen Sie die Hälfte der Wörter auf jeder Seite, und kürzen Sie dann den Rest um die Hälfte. Ein recht wahre Aussage finde ich.

Was gehört nur alles in eines Text und was nicht. Am besten versuchen sie die wichtigsten W-Fragen zu beantworten: wer, was, wie, wann, wo, warum und aufblähende Füllworte wie: schon, übrigens, also, noch, demnach zu vermeiden.

lebendig schreiben & positive Gefühle wecken

Auch hier bin ich nicht unbedingt der Beste. Mit dem lebendigen Schreiben ist vor allem das Vermeiden eines Passives gemeint. Schreiben sie lieber in einer aktiven Form. Man sollte eher dem Leser direkt ansprechen, z.B. “drücke hier um den Download zu starten”. Auch helfen konkreten Beispielen, die in der Vergangenheit passiert sind, dem Leser besser sich in das Geschehen hineinzuversetzen. Bei einer Referenzliste könnten z.B. Zitate von zufriedenen Kunden neben den Projekten stehen. Dadurch wirken die Beispiele lebendiger und näher. Zugleich bekommt der Besucher der Website ein positiveres Gefühl beim Lesen, was oft zu einer glaubwürdigeren Darstellung der gesamten Website verhilft.

Ähnliche Beiträge

• Suchmaschinenoptimierung (SEO)
• Website – The Lakeside Heritage Society
• Website – Q’uchu
• Website – Watermelon Ministries
• Free Monitor for Google

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

Eine sinnvolle und immer wiederkehrende Beschriftung von Container man natürlich nicht nur beim Arbeiten in einem Team, sondern bringt auch für einen selbst mehr Sicherheit. Dabei sollte immer darauf geachtet werden den HTML-Code nicht unnötig aufzublähen. Gerade im mobilen Web sind kline Datenmengen Gold wert.

Welche Komponenten können bei einem Weblayout vorkommen?

Da wäre wohl als erstes der Kopfbereich einer Website zu nennen. Dann gibt es auf jeden Fall noch die Navigationen, natürlich den eigentlichen Inhalt und als Abschluss benutzen viel Designer einen Fußbereich. Jeder von diesen Bereichen besitzt dann natürlich noch Unterbereiche.

Doch bevor ich die einzelnen Bereiche definiere, lege ich einen <div>-Container mit einem id-Attribute an, um die gesamte Markup besser koordinieren zu können.

Kopfbereich

Fangen wir mal mit dem Kopfbereich an. Hier sollte die allgemeinen, aber wichtigsten Information bezüglich der Website stehen. Das wäre dann wohl der Website-Titel und die Tagline. Diese kennzeichne ich immer mit den <h1>- und <h2>-Tags, um ihre Wichtigkeit zu verdeutlichen. Die Tagline, also der Untertitel der Website hat in den meisten Fällen irgendetwas mit einer Aussage zu tun, weswegen ich dafür oft den <blockquote>-Tag benutze. Auch könnte hier schon eine erste Aufzählung der Bereiche der Website aufgelistet werden. Meist werden diese Bereiche auch noch mit verlinkt. Über den Kopfbereich bekommt die einzelne HTML-Seite seine Markierung zu welcher Website sie gehört. Man nennt das auch das Branding.

Navigationen

Auf einer HTML-Seite gibt es verschiedene Navigationen, weshalb ich sie immer mit einem class-Attribute zusammenfasse. Trotzdem hat jede Navigation ihre eigene Semantik und deshalb erweitere ich jede Navigation mit einem id-Attribute. Doch welche Tags benutze ich bei den verschiedene Navigationen? Das kommt ganz auf ihren Inhalt an.

Um bei einer Sprachsteuerung bzw. einem PDA-Design schnell an die richtigen Stellen zu springen beginnt bei mir jeder <body>-Tag mit einer Skip-Navigation hier verwende ich oft eine unsortierte List, da ja auch der Inhalt der Liste keiner bestimmten Sortierung folgt.

Auch die Servicenavigation, wo es die Möglichkeit gibt schnell zur Kontaktseite, zum Impressum bzw. zum Inhaltsverzeichnis zu springen, folgt keiner bestimmten Reihenfolge, weswegen ich auch da einen <ul>-Tag bevorzuge.

In der Pfadnavigation wird symbolisch der Weg nach oben zur Homepage definiert. Um die Verschachtelung auch semantisch richtig zu definieren reicht eine unsortierte, in sich verschachtelte Liste mit immer nur einem Eintrag pro Ebene.

Die Bereichsnavigation hat natürlich immer ein bestimmte Reihenfolge, auch wenn der Benutzer nicht unbedingt diese befolgen muss. Deshalb kann es nur eine sortierte Liste sein.

Auch sollte am Ende eines jeden Inhaltes die Verweise in einer Liste nochmals zusammengefasst werden. Hier kann man wunderbar das Auftauchen im Text als Sortierung der Fußnoten in einer sortierten Liste mit einem <ol>-Tag nutzen.

Alle weiteren Navigationen, wie z.B. die Sprachauswahl, sind dann fast immer unsortiert und somit eignet sich der <ul>-Tag ideal dafür.

Inhalt

Leider würde es den Rahmen des Artikels sprengen, wenn alle möglichen Arten von Inhalten aufzählen würde. Vielleicht werde ich darüber später einen separaten Artikel schreiben. Deshalb an dieser Stelle nur soviel, idealer Weise fasst man diesen Bereich mit einem <div>-Container zusammen um gezielt Formatierung nur dort anbringe nur können.

Fußbereich

Im Fußbereich können Kontaktangaben bzw. rechtliche Hinweise oder auch eine weitere Servicenavigation untergebracht werden. Um die unterschiedlichsten Contaner ideal zusammenzufassen lohnt sich wiederum ein <div>-Container.

Beispiel

1. <body dir="ltr">
2. <div id="page">
3. <ul id="skip" class="navigation">
4. <li><a href="#area">Navigation</a></li>
5. <li><a href="#content">Inhalt</a></li>
6. <li><a href="#service">Service</a></li>
7. <li><a href="#footer">Adressangabe und rechlicher Hinweis</a></li>
8. </ul>
9. <div id="branding">
10. <h1>Websitetiel</h1>
11. <h2>Tagline</h2>
12. <ol id="area" class="navigation">
13. <li><a href="#">Hauptkategorie</a></li>
14. <li><a href="#">Hauptkategorie</a>
15. <ol>
16. <li><a href="#">Unterkategorie</a></li>
17. <li><a href="#">Unterkategorie</a></li>
18. </ol>
19. </li>
20. <li><a href="#">Hauptkategorie</a>
21. <ol>
22. <li><a href="#">Unterkategorie</a>
23. <ol>
24. <li><a href="#">Unterkategorie</a></li>
25. <li><a href="#">Unterkategorie</a></li>
26. </ol>
27. </li>
28. <li><a href="#">Unterkategorie</a></li>
29. </ol>
30. </li>
31. </ol>
32. </div>
33. <div id="body">
34. <ul id="path" class="navigation">
35. <li><a href="#">Startseite</a>
36. <ul>
37. <li><a href="#">Hauptkategorie</a>
38. <ul>
39. <li>Unterkategie</li>
40. </ul>
41. </li>
42. </ul>
43. </li>
44. </ul>
45. <div id="content">
46. <h2>Seitentitel</h2>
47. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus ligula non nisi. Proin mauris ligula, dignissim vitae, aliquet at, luctus eu, nisl. Aliquam eget justo non augue adipiscing pretium. Vestibulum eget lacus eget massa varius viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mi. Donec et justo id erat pulvinar lobortis. Suspendisse faucibus, risus sed dictum viverra, orci sapien malesuada arcu, pharetra aliquet ligula libero sit amet magna. Sed non neque. Aliquam mi. Cras in tortor. Nunc feugiat. Aliquam dolor pede, tristique et, accumsan id, semper eget, sapien. Proin non metus nec arcu sollicitudin gravida. Vestibulum feugiat tristique velit. Vestibulum tincidunt nisl a nisl. Ut feugiat pede nec tortor.</p>
48. <p>Suspendisse adipiscing euismod metus. Ut in urna. Sed tortor. Phasellus pellentesque turpis ornare tortor. Praesent ac nunc. In hac habitasse platea dictumst. Ut pulvinar tempor leo. Aenean dignissim, enim vel tristique adipiscing, enim mauris porta nisl, eget faucibus risus massa ac ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque quis nisl non neque ornare vulputate.</p>
49. <h3>Hauptüberschrift</h3>
50. <p>Pellentesque suscipit odio at sapien. Nullam iaculis vehicula augue. Aenean sodales viverra massa. In in leo. Morbi venenatis ullamcorper ipsum. Aliquam lobortis, eros quis pulvinar porta, felis libero sodales enim, sit amet placerat tortor felis nec sem. Integer dapibus ultrices quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis accumsan. Fusce ac ligula.</p>
51. <h4>Unterüberschrift</h4>
52. <p>Phasellus pellentesque massa at turpis. Vestibulum libero orci, fringilla sit amet, tempus sed, imperdiet vitae, nunc. Sed mollis elit at arcu. Proin euismod porttitor urna. Sed vitae tortor. Maecenas et nisi vitae pede tincidunt lacinia. Vestibulum adipiscing pede porttitor diam. Curabitur eleifend justo quis purus. Duis pretium dui sed elit. Cras laoreet lorem a ipsum.</p>
53. <p>Sed cursus facilisis metus. Vestibulum placerat, eros porta euismod aliquam, lorem velit hendrerit ligula, posuere tempor metus nisl nec arcu. Aliquam quis purus. Sed orci. Donec tincidunt posuere lorem. Aliquam ultricies turpis vitae diam. Maecenas eleifend mi in ante. Mauris commodo lorem quis lacus. Phasellus semper scelerisque nunc. Suspendisse sollicitudin odio in nisi.</p>
54. <h6>weiterführende Links</h6>
55. <ol id="footnote" class="navigation">
56. <li><a href="#">Fußnote</a></li>
57. <li><a href="#">Fußnote</a></li>
58. <li><a href="#">Fußnote</a></li>
59. </ol>
60. </div>
61. </div>
62. <ul id="service" class="navigation">
63. <li><a href="#">Kontakt</a></li>
64. <li><a href="#">Impressum</a></li>
65. <li><a href="#">Inhaltsverzeichnis</a></li>
66. </ul>
67. <div id="footer">
68. <p>Adressangabe und rechtlicher Hinweis</p>
69. <p><a href="#page">nach oben</a></p>
70. </div>
71. </div>
72. </body>

Download der Dateien

• HTML-Datei

Ähnliche Beiträge

• Deutendes Design der Inhalte
• CSS Layouts am Fließband
• flexible Layouts mit CSS
• CSS Import macht Probleme
• Jahresabonnement des Spotlight 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

Ich habe in den letzten Jahren Adobe Photoshop immer seltener genutzt. Photoshop hat in den letzten Versionen viel an Umfang gewonnen und fast all diese Funktionen berauche ich selen bis gar nicht. Einzig die Bildretusche bzw die Funktion “Für das Web speichern” soind für mich interessant.

Ähnlich ging es mir auch bei Adobe Premiere. Die Videos die ich entweder von Kunden bekommen oder selbst gedreht habe, mussten ausschließlich für die Wiedergabe im Internet, also ein Flash Video, oder als einfache DVD optimiert werden.

Nach einer genaueren Studie, dem Download der Elements Versionen, bin ich zum Schluß gekommen, dass diese für meine Bedürfnisse komplett ausreichen. Ich habe sogar noch einige Features bekommen die ich als sehr angenehm empfinde. So ist z.B. bei Adobe Photoshop Elements ein Orgenaizer mit dabei, der meine Bilder, Videos und Sounddateien mit eine Verschlagwortung verwaltet. In Adboe Premiere Elements bekomme ich neben dem umfangreichen Videoschnitt auch die Möglichkeit geboten eine Steuerung mittels Menüs für DVDs zu erstellen. Einfach wunderbar.

Hinzukommend zu diesen Erweiterungen überzeugt mich auch der Preis zum Kauf dieses Paketes. Adobe Photoshop hätte ich mir für fast 1100 € und Adobe Premiere für 1010 € kaufen müssen. Die beiden Elements Versionen kosten im Set gerade mal 150 €. Was für ein Unterschied.

Ähnliche Beiträge

• Adobe Premiere Elements – Color Expert
• Website – The Lakeside Heritage Society
• Website – Q’uchu
• Website – Watermelon Ministries
• Adobe Browser Lab

Da bei den Teilnehmer ein großes Interesse im Bereich von Produktdesign und Visualisierung von Innenausstattung bestand, lag auch der Schwerpunkt der Kurse auf dem gewünschten Thema. So erstellten wir neben einem Sofa aus Grundformen auch einfache Produkte mit dem Loft-Nurbs und konstruierten ein Ladenregal und einen Schmicktisch.

Ähnliche Beiträge

• Cinema Schulung bei Tools
• Cinema 4D – Weinglas
• Cinema 4D – Taschenlampe
• Cinema 4D – Apple MacPro
• Cinema 4D Workshop