Archiv für Februar 2008
29. Februar 2008 | 
Autor: In dieser Woche habe ich bei der Henkel AG über das KW Trainingszentrum ein zweitägiges Seminar über die Webtechnologien im heutigen Internet gehalten.
Leider war wie immer die Zeit viel zu kurz um alles Wichtige bestmöglich anzusprechen, aber ich habe, so hoffe ich, es geschafft ein klein wenig das riesige Geflecht der Webtechnologien zu entwirren. Am Ende des Seminars wurden dann folgende Punkte als Seminarinhalt festgehalten:
- Entstehung des Web
- HTML-Grundlagen
- Ausgabedefinierung mit CSS
- Funktionalität mit JavaScript
- Bedeutung von Cookies
- Serverseitige Verarbeitung von Informationen mit PHP und mySQL
- Sicherheitsrisiken von Programmierung am Beispiel von JavaScript und PHP
- Zusätzliche Webtechologien durch Plugins (z.B. Flash und SVG)
Für mich war es sehr interessant zu sehen, wie ein solch großes Unternehmen intern arbeitet. Welche Technologien bzw. welche Soft- und Hardware eingesetzt wird.
Veröffentlicht in 
Schlagworte: 
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.
