SchmaRs World » xhtml http://www.schmars-world.de Mon, 03 Aug 2009 23:47:53 +0000 http://wordpress.org/?v=2.8 en hourly 1 RDFa – Web meets Desktopanwendung http://www.schmars-world.de/index.php/rdfa-web-meets-desktopanwendung-2008-10-17/ http://www.schmars-world.de/index.php/rdfa-web-meets-desktopanwendung-2008-10-17/#comments Fri, 17 Oct 2008 17:32:42 +0000 SchmaR http://www.schmars-world.de/?p=118 Wäre es nicht eine schöne Sache wenn man jemand bei StudiVZ o.ä. diensten kennen lernt und einfach sein Profil in eine Desktopanwendung zu verwalten von Kontakten zieht und alle relevanten Daten eingetragen sind. Ein anderes Beispiel wäre, wie oft findet man Bilder im Netz über deren Lizenz man sich nicht klar? Auch hier wäre RDF bzw. RDFa eine wunderbare Lösung.

Der Pilotartikel der neuen Kategorie ist als eine Einleitung zu verstehen und geht vorerst nicht so sehr in die Tiefe.

RDFa ist eine Abwandlung der Technik (RDF + xHTML) des RDF (Resource Description Framework) sowie von xHTML und dient wie der Name schon sagt zum Beschreiben von Webinhalten. Die Technik ist meiner Meinung nach ein entscheidender Schritt um das Web weiter voran zu bringen und für den User komfortabler zu machen. Durch das RDFa wird es ermöglicht das Programme die Inhalte von Webseiten effizient auslesen und verwerten können.

Die Problematik kurz erläutert

An folgenden Bespiel will ich kurz den Sinn und Zweck von RDFa aufzeigen

RDFa in Anwendung

Auf der Linken Seite sieht man was der Browser bzw. ein Programm aus (x)HTML interpretiert. Die rechte Seite stellt dar was der User sieht bzw. interpretiert.

Und genau an dieser Lücke setzt RDFa ein durch das hinzufügen von RDF Eigenschaften in xHTML werden die einzelnen Elemente genauer ausgezeichnet, sodass sie von Programmen/Maschinen im Kontext lesbar werden.

Hier ein Beispiel:

Ohne RDFa Auszeichnung

  1. &lt;div <span style="color: red;">xmlns:dc="http://purl.org/dc/elements/1.1/"</span>&gt;
  2.    &lt;h2 <span style="color: red;">property="dc:title"</span>&gt;The trouble with Bob&lt;/h2&gt;
  3.    &lt;h3 <span style="color: red;">property="dc:creator"</span>&gt;Alice&lt;/h3&gt;
  4.    ...
  5. &lt;/div&gt;

Mit RDFa Auszeichnung

  1.  
  2. <div xmlns:dc="http://purl.org/dc/elements/1.1/">
  3. <h2 property="dc:title">The trouble with Bob</h2>
  4. <h3 property="dc:creator">Alice</h3>
  5.  
  6.    ...
  7. </div>
  8.  

Wie man an den Beispiel schon sehen kann benötigt RDFa ein Ressourcendokument welches die RDF Eigenschaften auszeichnet, so ist aber auch gewährleistet, das dass Framework nicht daran Krankt, dass es für einen vom Autor gewünschten Kontext keine Auszeichnung gibt. Jeder der sich eingehender mit dieser Technik beschäftigt soll eigene Ressourcendokumente erstellen können.


Soweit erst einmal mit dem Thema RDF werde ich mich in folgenden Artikeln noch eingehender beschäftigen. Dieser Artikel bezieht sich auf die News vom W3C: „RDFa in XHTML: Syntax and Processing Is a W3C Recommendation; RDFa Primer Updated“ In dem Newsartikel findet ihr auch weiterführende Links zum Thema.

Examples (code and image) Copyright © 14 October 2008 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University). All Rights Reserved. http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231

]]> http://www.schmars-world.de/index.php/rdfa-web-meets-desktopanwendung-2008-10-17/feed/ 3 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 Ist Open Source wichtig? http://www.schmars-world.de/index.php/ist-open-source-wichtig-2008-08-30/ http://www.schmars-world.de/index.php/ist-open-source-wichtig-2008-08-30/#comments Sat, 30 Aug 2008 16:13:03 +0000 JimBamir http://www.schmars-world.de/?p=59 Zuerst einmal zu meiner Person. Ich heiße Amir Hodzic, bin 18 Jahre alt, lebe in Österreich und besuche eine Handelsakademie in Tirol. Im Internet nenne ich mich JimBamir. Mit Webentwicklung beschäftige ich mich seit etwa 2 Jahren. Als neues Teammitglied - und damit neuer Autor auf diesem Blog - von Schmars-world möchte ich euch jetzt etwas über das Thema Open Source erzählen.

Wenn man die Situation nüchtern betrachtet ist Open Source nicht wichtig. 99 % der Kaufkraft interessiert nicht das sie den Code betrachten können. Warum auch, wenn sie ihn nicht korrekt manipulieren können. Mit Open Source schwingt immer auch ein gewisser Hauch von Freiheit mit. Die Sache ist aber, das man sich auch einfach Ikarusflügel bauen könnte um dann auf den Mond zu fliegen, wenn man wollte. Also was nutzt einem die Freiheit etwas zu tun wenn man nicht die Fähigkeit dazu hat? Natürlich kann man jetzt argumentieren, dass Open Source nicht unbedingt für 0815-Käufer gedacht wäre, dass man damit den Fortschritt unterstützt und das irgendwann jeder den Grundgedanken von Open Source verstehen würde.

Vergleichen wir erst einmal Open- mit Closedsourceprodukten. Beide brauchen in etwa eine gleich lange Entwicklung, beide sind ähnlich zu bedienen und beide erfühllen etwa den gleichen Zweck.
Und trotzdem unterscheiden sich beide Produkte ziemlich stark. Woran liegt das wohl?

Genau, der Quellcode ist bei OpeSourceprodukten offen und damit jedem zugänglich. Dadurch ergibt sich der angenehmen Umstand das jeder, der etwas Ahnung von Programmierung hat, einen Fix zu Problemen schreiben kann und den, der Community zur Verfügung stellen kann. Es ergibt sich eine freie Software, die ständig gewartet wird, den Communitygeist aufrecht erhält und dadurch einen in sich geschlossenen Komplex erstellt der sich um die Software kümmert.

Daher – das ist meine persönliche Meinung – ist Open Source wichtig.

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Bringen nun auch Sie, Ihre Meinung zur Geltung. Worin liegt für Sie der Mehrwert?

]]> http://www.schmars-world.de/index.php/ist-open-source-wichtig-2008-08-30/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 Opera setzt Kurs auf ein standardisiertes Web http://www.schmars-world.de/index.php/opera-kurs-auf-standardisiertes-web-2008-07-09/ http://www.schmars-world.de/index.php/opera-kurs-auf-standardisiertes-web-2008-07-09/#comments Wed, 09 Jul 2008 19:36:10 +0000 SchmaR http://www.schmars-world.de/?p=26 Der Softwarehersteller Opera auf welchen der gleichnamige Browser zurückzuführen ist, macht sich in einer neuen Artikelserie stark für Einhaltung der Webstandards des W3C. Zu diesem Thema hatte ich mich hier bereits in kleinerer Form geäußert.

Opera veröffentlicht die Artikel auf der hauseigenen Entwickler-Community-Plattform Dev.Opera, frei nach dem Slogan FOLLOW THE STANDARDS| BREAK THE RULES. Die Artikelserie ist in Form von Kursen angelegt und ist für folgende Zielgruppen gedacht:

  • Studenten und Schüler von Berufschulen
  • webaffine Schüler
  • Webdesinger und Webentwickler
  • Ausbilder in Firmen
  • Allgemein Interessenten die etwas über Webtechnologien lernen wollen

Da die Artikelserie dermaßen umfangreich ist, könnte man sie auch unter den Titel setzen "Wie realisiere ich ein erfolgreiches Webprojekt - für Anfänger". Es werden alle Themen abgearbeitet angefangen bei der Geschichte des Web/Internet und grundlegenden Informationen über die Grundlagen des Webdesigns bis hin zu mehreren Artikeln (Kursen) zu (x)HTML. Dieser Themenumriss bezieht sich auf die 21 Kurse der Artikelserie die bereits veröffentlicht wurden. Weitere sollen in den nächsten Wochen folgen.

]]> http://www.schmars-world.de/index.php/opera-kurs-auf-standardisiertes-web-2008-07-09/feed/ 1 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