SchmaRs World » CSS http://www.schmars-world.de Sun, 20 Nov 2011 20:42:28 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Mal wieder ein Blick auf dev.opera.com & ein neuer Partner http://www.schmars-world.de/index.php/blick-auf-dev-opera-com-2008-10-09/ http://www.schmars-world.de/index.php/blick-auf-dev-opera-com-2008-10-09/#comments Thu, 09 Oct 2008 17:40:50 +0000 SchmaR http://www.schmars-world.de/?p=73 Es ist schon über 2 Monate her das ich das letzte Mal von der "developer – community" des Browserherstellers berichtet habe. Inzwischen scheint das Konzept der Seite gut gefruchtet zu haben, als Opera mit dem Projekt Online ging machte es auf mich den Anschein als wenn es nur eher schleppend in Fahrt kommt, nun Tummeln sich jedoch recht viele Entwickler auf der Plattform. Das rührt sicherlich von den guten und sehr aufschlussreichen Fachartikeln, wie zum Beispiel die Artikelserie „Introduction to The Web Standards Curriculum“.

Die Artikelserie wurde seit dem ich das letzte Mal darüber berichtete stark ausgebaut. Inzwischen füllen 39 Artikel das Curriculum. In der letzten Zeit wurden viele interessante Artikel zu hauseigenen Technologien von Opera veröffentlicht. Darunter fallen zum Beispiel eine Anleitung zur Verwendung von „User JavaScript“ oder ein Tutorial zum effizienten debuggen von Widgets für den Opera.

Der wohl interessanteste aktuelle Artikel dürfte wohl „Automatic numbering with CSS Counters“ sein. Dieser bezieht sich auf CSS 2.1 Allgemein und zeigt eine schöne Methode zum Nummerieren von Elementen (wie z.B. h2-tags) auf. Leider wird diese Methode noch nicht vom IE unterstützt, aber die Implementierung ist für den IE8 geplant.

Soviel zu Opera :-) . Nun noch ein par Worte in eigener Sache. Ich habe in Markus Thömmes den Betreiber von Semantifiziert.de einen neuen Partner gefunden, und hoffe auf eine gute Zusammenarbeit. Wie der Name schon vermuten lässt geht es in dem Blog um xHTML und CSS wobei das Hauptaugenmerk auf der „semantik“ des xHTML codes liegt.

]]> http://www.schmars-world.de/index.php/blick-auf-dev-opera-com-2008-10-09/feed/ 0 CSS drop down Navigation http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/ http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/#comments Wed, 10 Sep 2008 18:28:36 +0000 SchmaR http://www.schmars-world.de/?p=65 Heute gibt es mal wieder ein kleines Tutorial auf SchmaRs-World.de. Dieses Mal geht es um eine Simple „drop down Navigation“. Die „Inspiration“ zu diesem Tutorial habe ich durch ein Codesnippet zum Thema „Mouseover mit CSS“ von Raph im Eurostyle-Webmedia.de Forum bekommen. Herzlichen Dank an dieser Stelle dafür ;) .

Wir werden die Navigation mit 4 ineinander verschachtelten Listen realisieren. 1 Dieser Listen ist die „Hauptnavigation“ in welche die anderen eingebettet werden.

Dieses Tutorial richtet sich an Anfänger/Fortgeschrittene um es verstehen zu können sollte man bereits einige Grundkenntnisse in (x)html und CSS haben.


Hier ist eine Preview unseres Ziels

Das xhtml Grundgerüst

Als erstes Fangen wir mit dem xhtml- Code an. Den Anfang bildet wie immer der obligatorische Link zum Stylesheet innerhalb der <head></head> tags. 

  1.  
  2. <link href="style.css" media="screen" type="text/css" rel="stylesheet" />

Als nächstes brauchen wir eine Liste hierfür eignet sich eine ungeordnete Liste also <ul></ul>. Diese liste bekommt nun 3 Einträge für die Kategorien unserer Navigation. Jedem dieser Einträge weisen wir die CSS-Klasse „navi“ zu, welche wir später noch definieren werden. Die list-Items (<li>) bekommen jetzt noch den Inhalt „Kategorie 1-3“. Unser Quellcode sieht nun wie folgt aus.

  1.  
  3. <li class="navi">Kategorie 1</li>
  4. <li class="navi">Kategorie 2</li>
  5. <li class="navi">Kategorie 3</li>
  6. </ul>
  7.  

Jetzt bekommt jedes Element unserer Liste eine weitere Liste als Inhalt, auch hier bietet sich eine wieder eine ungeordnete Liste an. Jeder dieser „Unterlisten“ weisen wir die CSS-Klasse „submenu“ zu. Alle Listen mit der „submenu- Klasse“ bekommen jeweils 3 list-tems mit dem Inhalt „link1-3“. 

  1.  
  3. <li class="navi">Kategorie 1
  4. <ul class="submenu">
  5. <li>link1</li>
  6. <li>link1</li>
  7. <li>link1</li>
  8. </ul>
  9. </li>
  10. <li class="navi">Kategorie 2
  11. <ul class="submenu">
  12. <li>link2</li>
  13. <li>link2</li>
  14. <li>link2</li>
  15. </ul>
  16. </li>
  17. <li class="navi">Kategorie 3
  18. <ul class="submenu">
  19. <li>link3</li>
  20. <li>link3</li>
  21. <li>link3</li>
  22. </ul>
  23. </li>
  24. </ul>
  25.  

So das war es auch schon von der xhtml Seite, weiter geht’s mit dem Cascading Style Sheet.

Die style.css

Der CSS Code ist recht minimalistisch, jedoch sehr wirkungsvoll.

Als erstes beginnen wir mit einigen Allgemeinen Eigenschaften.

  1. *,
  2. html,
  3. body{
  4. 	margin:0;
  5. 	padding:0;
  6. }
  7.  
  8. body{
  9. 	color:#000000;
  10. 	background-color:#EFEFEF;
  11. 	font-family:Arial, Helvetica, sans-serif;
  12. 	font-size:12px;
  13. }

(Der Code der in der body klasse enthalten ist, dient lediglich dem Layout.)

Nun ist die Klasse "Navi" dran. Wir setzen die Eigenschaft display auf inline um aus den (in den meisten Fällen) standardmäßig als Block-Elemente deklarierten List-items ein Inline-Element zu formen. Die restlichen Angaben in dieser Klasse sind lediglich für das Layout zuständig und können nach belieben gestaltet oder weggelassen werde.

  1. .navi{
  2. 	display:inline;
  3. 	background:#97E1FD;
  4. 	font-size:16px;
  5. 	border:#66FFFF 2px dotted;
  6. 	margin-left:100px;
  7. }

In diesen kleinen aber feinen Schritt definieren wir die Klasse „submenu“. Sie bekommt lediglich die Eigenschaft „display“ mit dem Wert „none“ zugewiesen wodurch alle „submenu-Elemente“ nicht angezeigt werden.

  1. .submenu{
  2. 	display:none;
  3. }

Jetzt kommt das Herzstück unserer Navigation. Die Deklaration des Verhaltens der Klasse „submenu“, wenn sich der Mauszeiger über einen „navi“ Element befindet. Die Eigenschaft „display“ wird auf „inline“ gesetzt wodurch die zuvor nicht sichtbare Liste als inline-Element dargestellt wird. Das setzen der Eigenschaft „position“ auf „absolute“ ist neben den eben bei display angewandten verfahren Elementar. Das setzen von absolute entfernt die „submenu-Elemente“ aus dem normalen Textfluss sodass sie über oder unter den anderen Elementen angezeigt werden und nicht das Layout zerstören. Mit der Eigenschaft „z-index“ wir angeben welches Element über welchen liegt. z.B. wird ein Element das einen „z-index“ von 1 hat unter einem mit einem „z-index“ von 2 dargestellt. Die Eigenschaft „margin-left“ hat in diesem Fall nur Layouttechnische Bedeutung.

  1. .navi:hover .submenu{
  2. 	display:inline;
  3. 	position:absolute;
  4. 	z-index:2;
  5. 	margin-left:1px;
  6. }

Nun ist es fast geschafft jetzt folgt noch eine kleine Definition des Verhaltens von List-Items innerhalb eines „submenu“ Elements. Hierbei sind die Eigenschaften „display“ und „list-style-position“ wichtig. Die auf Block gestellte Eigenschaft „display“ sorgt dafür dass die Listenelemente untereinander also als Block Elemente dargestellt werden. list-style-position:outside; ist lediglich ein Fix für den IE7 da dieser ansonsten vor den Inhalt der List-Item einen freien platz darstellt.

  1. .navi:hover .submenu li{
  2. 	display:block;
  3. 	background-color:#6699FF;
  4. 	border:#66FFFF 1px dotted;
  5. 	list-style-position:outside;
  6. }

Hier die Tutorial Dateien.

So da war es auch schon mit unserem kleinen Turorial ich hoffe es hat euch weitergeholfen und war gut zu verstehen. Für Kritik positive wie negative bin offen, also lasst eure Meinung in den Kommentaren da.

]]> http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/feed/ 4 Contentslider/Specialbox – Tutorial http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/ http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/#comments Mon, 25 Aug 2008 00:50:56 +0000 SchmaR http://www.schmars-world.de/?p=41 Da im Eurostyle-webmedia.de Forum in letzter Zeit viele Fragen zu den Thema kursieren wie man eine Specialsbox oder einen Contenslider realisiert, werde ich hier eine einfach gehaltene (mit AJAX realisierte) Möglichkeit vorstellen und in Form eines Tutorials erklären. Als besonderes Schmankerl biete ich das Tutorial Multimedial an, einmal in Textform und einmal als Video.

Vorschau
Link zum unseren Ziel :-)

Am Anfang stand die HTML

Beginnen wir mit den xHTML-code zu den Werde ich nicht viele Worte verlieren, da ich Grundkenntnisse in xHTML einfach mal vorrausetze.

  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">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link href="style.css" media="screen" type="text/css" rel="stylesheet" />
  6. <script language="javascript" type="text/javascript" src="functions.js"></script>
  7. <title>SchmaRs-World: Contentslider/Specialbox - Tutorial Demo</title>
  8. </head>
  9. <body onload="sndReq(1)"><!-- Contentslider/Specialbox - Tutorial SchmaRs-World.de -->
  10. <div id="wrapper">
  11. <div id="title">
  12. <h1>Contentslider/Specialbox - Tutorial </h1>
  13. </div>
  14. <div id="contentslider"></div>
  15.  
  16.   <br style="clear:both;" />
  17. </div>
  18.  
  19. </body>
  20. </html>

In den Zeilen 5 und 6 werden die Dateien geladen die für die Realisierung nötig sind. Zum einen ist das die "style.css" welche die Angaben zum Layout enthält. Zum anderen die "functions.js" welche das Herzstück unseres Vorhabens darstellt. Das Bodytag ist mit einem onLoad Ereignis versehen um beim erstmaligen Laden der Seite die "specialbox" mit Inhalt zu versehen. Soviel nun zu den kleinen xHTML Fetzen.

Javascript meets PHP

Kommen wir nun zu den Javascriptcode welcher für das Nachladen von Inhalten verantwortlich ist. Im Wesentlichen besteht der Code aus 3 Funktionen welche mit dem XMLHttpRequest-Objekt arbeiten bzw. es erzeugen. Alternativ könnte man auch eine AJAX Bibliothek wie Prototype verwenden, ein Beispiel hierfür erkläre ich später.

  1. // Contentslider/Specialbox - Tutorial SchmaRs-World.de
  2. // Erzeugen eines HttpRequestObjects samt Browserweiche fuer den IE.
  3. function genXMLHttpRequestObject(){
  4.    var resObjekt = null;
  5.    try{
  6.       resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
  7.    }
  8.    catch(Error){
  9.        try {
  10.            resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
  11.        }
  12.        catch(Error){
  13.            try {
  14.                resObjekt = new XMLHttpRequest();
  15.            }
  16.            catch(Error){
  17.                 alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
  18.            }
  19.        }
  20.    }
  21.    return resObjekt;
  22. }
  23.  
  24. // Senden der Anfrage an den Server.
  25. function sndReq(contentnr){
  26.     resObjekt = genXMLHttpRequestObject();
  27.     resObjekt.open('get', 'content.php?content='+contentnr,true);
  28.     resObjekt.onreadystatechange = handleResponse;
  29.     resObjekt.send(null);
  30. }
  31.  
  32. // Warten bis der Datentransfer beendet ist (readystate = 4) und Ausgabe des neuen Contents.
  33. function handleResponse(){
  34.     if(resObjekt.readyState == 4){
  35.         document.getElementById("contentslider").innerHTML = resObjekt.responseText;
  36.     }
  37. }

genXMLHttpRequestObject()

In der ersten Funktion "genXMLHttpRequestObject()" wird eine Instanz von dem XMLHttpRequest-Objekt erzeugt, da die Art der Erzeugung je nach Browser unterschiedlich ist, bedarf es einer Browserweiche. Die Browserweiche ist in diesem Fall in form eines try-catch Konstrukts gelöst. Das Javascript Statement try-catch erlaubt es Code auszuführen und Werte während der Ausführung zu prüfen und im gegebenen Fall einen Fehler abzufangen.


Im ersten try Block wird versucht das XMLHttpRequest-Objekt mit einer Funktion für den IE zu instanzieren. Sollte dies fehlschlagen wird das Error aufgefangen und es wird versucht eine neuere Version des Objekts für den IE zu instanzieren. Wenn dies wiederum fehlschlägt wird versucht das Objekt mit der für den Großteil der Browser gängigsten Methode zu instanzieren. Für die unwahrscheinliche Annahme das auch dies Fehlschlägt wird eine Fehlermeldung in Form eines alert()´s ausgegeben.

sndReq() & handleResponse()

Die Funtion sndReq ist das eigentlich Herzstück des Javascriptcodes sie ruft alle notwendigen Funktionen zum Asynchronen Datenaustausch auf. Die Funktion sendet die eigentliche Anfrage an den Server und verarbeitet auch dessen Antwort.

Die erste Zeile instanziert durch den Aufruf von genXMLHttpRequestObject() ein neues XMLHttpRequest-Objekt und speichert es in der Variable resObjekt ab. Die zweite Zeile öffnet die eigentliche Verbindung zum Server und sendet die Abfrage. Die Methode open des XMLHttpRequest-Objekts übernimmt in unserem Fall 3 Parameter, die Methode (get oder post), Die zu sendenen Daten und das Flag zur bestimmt ob der Datenverkehr Asynchron sein soll oder nicht, in unserem Fall true(asynchron). Die dritte Zeile(siehe zusätzlich die Funktion handleResponse() ) dient dazu sobald der Datenverkehr abgeschlossen ist (resObjekt.readyState == 4) die Daten in das xHTML Dokument einzubinden. Dies geschieht mit der Funktion getElementById. Die Funktion übernimmt einen String der ID des betreffenden Elements innerhalb des xHTML codes, für unsere Zwecke wäre dies "contentslider". Die Eigenschaft responseText des XMLHttpRequest-Objekt enthält die empfangenden Daten.

So Das War’s mit dem Javascriptteil fürs erste, bei der Variante mit Prototype kommen wir noch einmal kurz auf Javascript zu sprechen.

PHP kurz aber knackig

Ich finde der PHP code erklärt sich durch die Kommentare selbst, ich werde zu vorrangeschrittener Stunde die Ausführungen hierzu noch etwas spezifizieren. Was das Tutorialvideo betrifft, trifft selbiges zu.

  1. <?php
  2.      // Contentslider/Specialbox - Tutorial SchmaRs-World.de
  3.     // Konfiguration
  4.     $imgpath = 'images/specials'; // Pfad zu den Bildern
  5. 	$type = 'gif'; // Dateityp der Bilder
  6.  
  7. 	// Anwendungscode
  8.     $toval = $_REQUEST['content'];
  9.     if(is_numeric($toval) && file_exists("$imgpath/$toval.$type")) // prüfe ob der übergebene Wert numerisch ist und eine Datei mit dem Namen existiert
  10.     {
  11.         $img = $toval;
  12.     }
  13.     else // wenn nicht ist der Name 1
  14.     {
  15.         $img = 1;
  16.     }
  17.  
  18.     $next = $img+1;
  19.     $back = $img-1;
  20.     echo "<img src=\"$imgpath/$img.$type\" alt=$img /><br/><br/>";
  21.  
  22.     if($img > 1)//wenn der Übergebene Wert größer als eins ist werden 2 Navigationspunkte zurückgeliefert
  23.     {
  24.         echo "
  25. <div id=\"buttons\">
  26. <input type=\"button\" value=\"<< zur&uuml;ck\" onclick=\"sndReq($back)\" id=\"btn_left\" />
  27. <input type=\"button\" value=\"vorw&auml;rts >>\" onclick=\"sndReq($next)\" id=\"btn_right\" /></div>
  28.  
  29. ";
  30.     }
  31. 	else
  32.     {
  33.        echo "
  34. <div id=\"buttons\">
  35. <input type=\"button\" value=\"vorw&auml;rts >>\" onclick=\"sndReq($next)\" id=\"btn_right\" /></div>
  36.  
  37. ";
  38.     }
  39. ?>

Prototype für die ganz fixen

So hier ist noch die angesprochene alternative Möglichkeit der realisierung mit Prototype. Die Realisierung ist mit der Bibliothek um einiges leichter das sie uns so gut wie alles an Arbeit mit Javascript abnimmt.

functions.js

  1.  
  2.  
  3. function sndReq(contentnr){
  4.     new Ajax.Updater('contentslider', '/content.php?content='+contentnr, { method: 'get' });
  5. }

Link zum unseren Ziel :-)

Tutorial Dateien

Das Video kommt aus Reallife technischen Gründen erst Morgen sorry an alle die es schon gerne hätten.

Soo das wars ersteinmal ich hoffe auf gutes gelingen. Sollte es Ungereimtheiten geben oder sollte ich einen Fehler oder etwas nicht ganz richtig erklärt haben, was ich aber eher weniger glaube, oder wenn euch das Tutorial gefällt lasst einen Kommentar da.

]]> http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/feed/ 0 Über 54 Top eBooks über Informatik und das Web http://www.schmars-world.de/index.php/ueber-54-top-ebooks-ueber-informatik-und-das-web-2008-08-20/ http://www.schmars-world.de/index.php/ueber-54-top-ebooks-ueber-informatik-und-das-web-2008-08-20/#comments Wed, 20 Aug 2008 20:24:53 +0000 SchmaR http://www.schmars-world.de/?p=39 In den letzten Wochen und Monaten habe ich viele kostenlose eBooks(openbooks) in den weiten des Internets gefunden. Nicht alle die von außen wie Gold aussahen waren das aber die, die auf den 2ten Blick auch noch gut aussehen möchte ich euch nicht Vorenthalten.


Es wird garantiert nicht jeder mit jedem eBook etwas anfangen können jedoch dürfte für jeden Web interessierten etwas dabei sein.

Inzwischen sind schon Sage und Schreibe 69 kostenlose Ebooks in der Liste, danke für eure Anregungen!

PHP

CSS

Web

MySQL

Linux

Programmierung

Informatik Allgemein

Allgemein

Wenn ihr noch Ergänzungen zu der Liste habt immer her damit, am besten via eines Kommentars.

]]> http://www.schmars-world.de/index.php/ueber-54-top-ebooks-ueber-informatik-und-das-web-2008-08-20/feed/ 29 Textgestaltung im Web?! http://www.schmars-world.de/index.php/textgestaltung-im-web-2008-08-11/ http://www.schmars-world.de/index.php/textgestaltung-im-web-2008-08-11/#comments Sun, 10 Aug 2008 22:23:30 +0000 SchmaR http://www.schmars-world.de/?p=31 Eine Sache die bisher im Web stark vernachlässig wird ist die Textgestaltung. Im vergleich zu Printmedien werden im Web eher mittelalterliche Methoden zur Textgestaltung verwendet. Diesen "Missstand" versucht Craig Grannell auf dev.opera.com mit einem sehr informativen Artikel entgegenzuwirken.

Der Artikel behandelt alle Schritte von der Erstellung eines simplen xhtml Dokuments bis hin zur Internet Explorer freundlichen Gestaltung von Texten mit der Maßeinheit em. Zuerst werden einem jedoch die Vorteile einer solchen Textgestaltung mit einem "baseline grid" anhand eines konkreten Beispiels. Die formalen unterschiede zwischen den beiden Beispieltexten fällt zwar erst auf den zweiten Blick auf, dennoch sind die Auswirkungen auf die Lesbarkeit gravierend. Der Artikel ist für jeden der den Grundlagen und dem englischen mächtig zu empfehlen, selbst alte CSS Hasen können noch den einen oder anderen Kniff abgreifen. Trotzdem sich der Artikel an Entwickler richtet die bereits die Grundlagen von CSS beherrschen ist er auch für Anfänger sehr wertvoll, da alle Schritte zur optimalen Textgestaltung bis ins kleinste Detail beschrieben werden.

Link zum Artikel

]]> http://www.schmars-world.de/index.php/textgestaltung-im-web-2008-08-11/feed/ 0 Warum CSS und kein Tabellenlayout?! http://www.schmars-world.de/index.php/warum-css-und-kein-tabellenlayout-2008-06-27/ http://www.schmars-world.de/index.php/warum-css-und-kein-tabellenlayout-2008-06-27/#comments Fri, 27 Jun 2008 13:24:03 +0000 SchmaR http://www.schmars-world.de/?p=22 „des ist ja easy xD dachte muss da alles mit css machen.“

„hmm
tabellenanpassung reicht doch völlig aus oder nicht?“

Solche Aussagen liest man in einschlägigen Foren vor allem aus der eSports Szene, in welcher ich meine Wurzeln bezüglich dem Web habe, und auch Allgemein viel, viel zu häufig.

Doch woran liegt es?
Wieso haben die Leute so viel „angst“ vor etwas „neuem“?

Technik von vor 10 Jahren – was früher gut war ist es heute immer noch!

Das ist ein möglicher Gedankengang bei den betreffenden Personen, doch hat es sich nicht schon in vielerlei Hinsicht gezeigt das, dass alte zwar gut sein mag aber das neue besser ist?! Aber selbst diese Aussage kann man nicht auf die Verwendung von Framesets und Tabellenlayouts beziehen, beide sind keinesfalls gut.

Und das aus folgenden Gründen.

Framesets

Ja die guten alten Framesets und Inline-Frames eigentlich könnte man meinen so etwas gibt es heutzutage nicht mehr, doch leider ist es Gegenteilig es gibt sie immer noch. Meinem persönlichen Empfinden nach häufen sich in letzter Zeit Seiten mit Frames, mag aber auch nur Zufall sein das ich zur Zeit verstärkt auf solche Seiten treffe. Frames sind neben den Obenbenannten Tabellenlayouts das schlimmste was man dem Web antun kann. Suchmaschinen Indexieren (wenn sie es überhaupt tun) die einzelnen Inhalte der Frames. Gehen wir mal von dem Beispiel des klassischen 3teiligen Framesets aus, was in so gut wie jedem WYSIWYWG Editor vorgefertigt enthalten ist (warum eigentlich?). Die Dreiteilung ist aus Header, Navigation und Content zusammengesetzt. Wenn jetzt ein Bot die Seite crawlt werden wie gesagt die einzelnen Bestandteile des Framesets indexiert, sprich die Navigation alleine, der Content, sowie der Header. Sollte jetzt ein User die Seite über eine Suchmaschine finden, so wird lediglich der Indexierte Inhalt geladen, zum Beispiel die Navigation ohne Content oder andersherum, es wird nur in den seltensten Fällen das Frameset geladen. Beide Möglichkeiten sind auf jeden Fall alles andere als Optimal. Weitere Probleme bei Framesets sind die unterschiedlichen Ladezeiten der Frames. Ein weiterer großer Kritikpunkt an Frames ist es das man sie nicht direkt Verlinken kann, sondern immer nur auf die Seite mit dem Frameset verweisen kann. Des Weiteren sind Frames einfach Benutzerunfreundlich, es ist einfach nervig in einem Frame durch die Navigation scrollen zu müssen. Jetzt werden mir einige Frame-Befürworter sicherlich das Argument an den kopf werfen, das sie es nervig empfinden wenn die Navigation wegscrollt und nicht immer in erreichbarer nähe ist, doch dieses Argument ist hinfällig mit einigen CSS befehlen kann man den selben Effekt erreichen, ohne die negativen Eigenschaften von Frames mit sich zu bringen.

Tabellenlayouts

Das gruseligste was ich kenne, ist es wenn mich jemand fragt ob ich mal einen Blick auf seine Seite werfen könnte und es ein Tabellenlayout ist. Diese Art von Weblayout sind für Mitarbeiter oder Personen die sich später mit dem Quelltext befassen müssen der reine Graus weil ein Tabellenlayout für gewöhnlich stark verschachtelt ist und damit verdammt unübersichtlich wird. Dieser Kritikpunkt setzt sich darin weiter fort das Screenreader von Sehgeschädigten Menschen mit diesen Layouts absolut nicht klar kommen. Ich hatte vor einiger Zeit das Vergnügen der Diskussion einer Landtagsabgeordneten der Linken, welche unter einer Sehbehinderung leidet, mit einem CDU Abgeordneten beizuwohnen zu dürfen. In dieser Diskussion hat sie sehr deutlich gemacht was Tabellenlayouts für negative Auswirkungen auf Screenreader haben. Man müsste schon aus Gründen der Menschlichkeit den auf vielen Seiten hochgelobten Tabellenlayouts abschwören. Wem dieser Grund noch nicht reicht sollte wissen, dass Webcrawler dieselben Probleme wie Screenreader mit Tabellenlayouts haben und somit eine gute Platzierung bei Suchmaschinen beeinträchtigt wird. Tabellen waren als Gestaltungsmittel gedacht um Zahlen oder ähnliches zu veranschaulichen, dafür sind sie auch hervorragend geeignet, aber keinesfalls als Layoutwerkzeug.

Grundsätzlich ist zu sagen das beide Techniken Frames und Tabellenlayouts nicht mehr dem Aktuellen Standard entsprechen. Weiterhin braucht man für ein Tabellenlayout auch zeitmäßig länger und um auf die Frage in dem Zitat am Anfang des Artikels zurückzukommen NEIN reicht es nicht!


Leute habt keine Scheu davor etwas Neues zu lernen!

Die Vorteile von CSS liegen auf der Hand, angesichts der oben genannten negativen Beispiele. CSS hat auch noch andere Vorzüge wie etwa die Trennung von Struktur und Gestaltung oder die Möglichkeit einer schnellen Designänderung. CSS hat zwar den Nachteil, dass man für den IE6 ein, zwei hacks braucht und das man valides html schreiben muss, doch letzteres hat wiederum Vorteile. Wie zum Beispiel, dass Screenreader besser mit eurer Seite klarkommen und damit gleichzeitig auch die Robots der Suchmaschinen, aber das wichtigste an der Geschichte ist, dass ihr mit dem einhalten der aktuellen Webstandards das Web in seiner Entwicklung nach vorne bringt. Ganz nebenbei schont ihr auch noch eure Kollegen da diese sich nicht mehr mit maßlos verschachtelten Tabellenlayouts Auseinadersetzen müssen.

Man braucht nicht viel Zeit!

CSS zu lernen braucht wirklich nicht viel Zeit und das Aufwand/Nutzen Verhältnis hält sich wirklich im positiven Bereich. Als gutes Lehrmaterial kann ich euch wärmstens die Seite CSS4You.de empfehlen welche sich auch als sehr gute Sprachreferenz eignet. Als Videomaterial zu dem Thema kann ich euch „Jetzt lerne ich CSS Design“ von Video2Brain empfehlen. Das wäre das Grundmaterial mit dem man schon sehr viel machen kann. Wenn ihr Anleitungen zu spezielleren Sachen sucht, googlet ne Runde es gibt sehr viele gute Blogs die sich mit spezifischen Dingen befassen. Ich werde um auch den letzten Skeptiker unter euch zu Überzeugen das es nicht schwerer ist ein Design in xhtml/CSS umzusetzen, als ein Tabellenlayout zu schreiben, demnächst auf diesem oder einem Partnerblog ein ausführliches Tutorial Posten. Dieses Tutorial wird sich mit dem kompletten Prozess des Umsetzens, Angefangen bei dem Design als PSD bis hin zum fertigen Layout, befassen.

In diesem Sinne horns up! Und nehmt euch den Artikel zu Herzen. :-)

Zum Abschluss noch eine kleine Umfrage
Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

]]> http://www.schmars-world.de/index.php/warum-css-und-kein-tabellenlayout-2008-06-27/feed/ 16 kleine, aber feine Innovation für Webentwickler http://www.schmars-world.de/index.php/innovation-webentwickler-2008-06-22/ http://www.schmars-world.de/index.php/innovation-webentwickler-2008-06-22/#comments Sun, 22 Jun 2008 16:11:37 +0000 SchmaR http://www.schmars-world.de/?p=19 Man kennt die alte Leier, man ist grade fertig ein Design in xhtml/css umzusetzen, alles ist in Browser x perfekt da dieser css richtig implementiert, dann noch ein schneller Test in Browser y und das Entsetzen ist groß. Das ganze Design ist durch Fehlinterpretationen seitens des Browsers verunstaltet.

Eine mögliche Schlussfolgerung hieraus wäre während der Entwicklung Tests in anderen Browsern durchzuführen doch dies unterbricht meiner Meinung nach bei der Masse an Browsern (Versionen) den Workflow maßgeblich. Was zu einen schlechteren Ergebnis bzw. größeren Zeitanspruch führt. Neben diesen beiden Faktoren kommt hinzu dass man seine Festplatte auch noch mit den jeweiligen Browsern sowie Versionen belasten muss.

Browsershots.org ist eine geniale Idee um Webentwicklern das Leben in Hinsicht auf die oben genannten Punkte zu vereinfachen. Anstatt die Seite in allen möglichen/wesentlichen Browsern zu betrachten muss man lediglich die URL seiner zu testenden Seite auf Browsershots.org angeben und muss einen kleinen Moment warten. (bei meinen Tests durchschnittlich 2 – 3 Minuten bei der Auswahl aller Browser) Diese Wartezeit kann man effektiv mit der Weiterarbeit an der Seite nutzen, anstatt die Browser x,y und z öffnen zu müssen.

Der Dienst von Browsershots.org funktioniert folgender maßen:

Der Dienst nimmt eine URL auf einen zentralen Server entgegen. Die URL wird von dort aus an so genannte „Fabriken“ verteilt. Bei den Fabriken handelt es sich um Rechner welche dann in einer Vielzahl von Browsern unter 4 verschiedenen Betriebssystemen (Linux, Windows, Mac OS und BSD) die URL aufrufen und Screennshots angefertigten. Diese Screenshot werden dann auf den zentralen Server geladen und dem Nutzer zu Verfügung gestellt.

Um den Browsertest zu spezifizieren hat man die Möglichkeit aus Browsern und Betriebssystemen zu wählen. Weiterhin hat man die Möglichkeit Festlegungen bezüglich Bildschirmgröße(Auflösung), Farbtiefe, und der Verwendung von Java, Javascript und Flash zu treffen.

Ich habe bis jetzt nur exemplarische Tests mit dem Dienst gemacht, aber ich bin ziemlich von ihm überzeugt, sodass er auch bald in der Praxis bei mir Anwendung finden wird.

]]> http://www.schmars-world.de/index.php/innovation-webentwickler-2008-06-22/feed/ 3