SchmaRs World » xhtml http://www.schmars-world.de Sun, 20 Nov 2011 20:42:28 +0000 en hourly 1 http://wordpress.org/?v=3.2.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 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 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 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 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