25. Februar 2008 | 
Autor: Endlich durfte ich einmal ein Seminar geben, welches sich nicht nur an Anfänger bzw. Einsteiger richtet, sondern auch mal die fortgeschrittenen Themen behandelt. Bei der VVA Kommunikation in Düsseldorf habe ich über das KW Trainingszentrum ein zweiteiliges Seminar über die Möglichkeiten von CSS gehalten.
In meinem letzten Artikel habe ich über die Probleme beim Import von externen CSS-Dateien berichtet. Nun habe ich eine vereinfachten Import gefunden, denn das Einbinden von bis zu 6 Dateien bläht nicht nur der Quellcode auf, sondern sieht auch irgendwie unübersichtlich aus.
Ich weiß, diese Idee ist nicht unbedingt die neuste, aber sie gefällt mir und deshalb schreibe ich darüber
Gestern habe ich bei einem Projekt versucht über die @import-Regel in CSS externe Dateien nachzuladen und bin auf eine sehr interessant Problematik gestoßen.
Ü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.
In meinem Adventskalender habe ich ein kleines Tutorial über die Erstellung eines Adressbuch per AJAX geschrieben. Leider waren aber die Demodateien nicht direkt benutzbar. Ich habe sie nun korrigiert und stelle sie euch hiermit zur Verfügung.
Bugfix:
- 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.
- Der init()-Methode des Adressbuches wird jetzt der Form-Container übergeben, so dass das Adressbuch flexibler auf das DOM reagieren kann.
- Die Literal-Namen wurden in eine einheitliche Schreibweise (RED_AdrBook, RED_AJAX) umbenannt.
- Eine update-Funktion für bestehende Datensätze wurde hinzugefügt.
- Eine Lösch-Funktion wurde hinzugefügt. Deswegen wurde ein delete.php-Script, welches einen Datensatz löscht, angelget.
- Die Anzahl der Datensätze und der aktuelle Datensatz wird nun im Interface angezeigt.
Veröffentlicht in Adventskalender 2007, Programmierung | 
Schlagworte: adressbuch, adventskalender, ajax, design | 
4 Kommentare »
Mein erstes Beispiel ist eine ganzseitige Anzeige im monatlich erscheinenden Magazin Ecos des Spotlight Verlags. Sie bewerben darin ihre Jahresabonnements. Obwohl die gedruckte Version nicht besonders aufwendig aussieht, habe ich trotzdem ca. 5 Stunden an der Umsetzung getüftelt. Aber zu guter Letzt habe ich es geschafft und nur möchte ich euch das Ergebnis präsentieren.
Inspiriert durch das Lesen des Buches CSS Transcending, wo die Autoren Andy Clarke und Molly E. Holzschlag in mehreren guten Beispielen zeigten wie man schöne Print-Designs ins Internet übertragen kann. Das Ganze verband er natürlich mit valide und gut strukturierten Quellcode.
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.
Zum Schluss mein Adventsreihe möchte ich euch nochmals eine gesamten Überblick über die veröffentlichten Artikel geben:
- Designer vergessen die Gestaltung
- Deutendes Design der Inhalte
- Beschriftung von Containern
- flexible Layouts mit CSS
- Der gescannte Text
- Small Screen Browser Design
- Icons helfen bei der Orientierung
- CSS Layouts am Fließband
- Die Macht der Selektoren
- Suchmaschinenoptimierung (SEO)
- Redirect hilft bei Veränderungen
- dynamische Linkliste bringt mehr Usability
- Flashvideo-Player einfach eingesetzt
- Template-Engine mit PHP
- AJAX-Klasse, einfach gebaut
- schnelle Erstellung von XML mit PHP
- Mit JavaScript DOM erzeugen
- Slideshow mit einer HTML-Seite Teil 1
- Slideshow mit einer HTML-Seite Teil 2
- Button wieder neu entdeckt
- AJAX Adressbuch – Tutorial Teil 1
- AJAX Adressbuch – Tutorial Teil 2
- AJAX Abressbuch – Tutorial Teil 3
- AJAX Adressbuch – Tutorial Teil 4
Nun ist es soweit, heute ist Weihnachten und das letzte Türchen hat sich geöffnet. Der letzte Teil meine Adressbuches steht noch aus und das möchte ich euch jetzt geben. Es ist der serverseitige Teil meine kleinen Weanwendung. Ich habe dazu eine mySQL-Datenbank angelegt und greife mit PHP auf den Datenbestand zu.
Veröffentlicht in Adventskalender 2007, Programmierung |
Schlagworte: adressbuch, ajax, design, mysql, php, tutorial |
1 Kommentar »
Im dritten Teil meines Tutorials möchte ich euch zeigen wie ich per JavaScript eine Verbindung zum Server aufbaue und Daten zum Server schicke bzw. vom Server hole. Durch die Beschreibung in Teil 1 und Teil 2 meines Tutorials habe ich hoffentlich eine gute Basis geschaffen einen Schritt weiter zu gehen.
Veröffentlicht in Adventskalender 2007, Programmierung |
Schlagworte: ajax, design, javascript, tutorial, Webanwendung |
2 Kommentare »
Nachdem ich gestern erklärt habe wie die HTML-Datei, das dazugehörige CSS-Design und die XML-Datenstruktur aufgebaut sind, werde ich mich nun der clientseitigen Programmierung widmen.
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.
Veröffentlicht in Adventskalender 2007, Programmierung |
Schlagworte: ajax, css, design, javascript, tutorial |
5 Kommentare »
