Google bietet ja jede menge APIs an, mit welchen man sich das Leben vereinfachen (?) kann. Unter anderem gibt es da die Google Chart API, mit welcher man im Handumdrehen Diagramme erstellen kann. Zur auswahl stehen die üblichen Balken-, Kuchen-, Linien-, usw. Diagramme.
Das ganze funktioniert in dem man eine Url von Google aufruft und dort einige Parameter angibt; zurück kommt dann ein Bild. So kann man die Url gleich beim img Tag als src angeben.
Eine Anleitung und übersicht mit allen möglichen Diagrammen und Parametern gibts bei Google.

Ich habe einen kurzen Test gemacht und die die Verteilung der Artikel in den Themen dargestellt, recht einfach und das Resultat kann sich sehen lassen:

Über Falki bin ich wieder auf den Dienst Browsershots gestossen. Jeder, der schon mal eine Homepage erstellt hat kennt das Problem wohl. Man hat das Design fertig gestellt und schaut es dann in einem anderen Browser an. Und es sieht völlig anders aus.
Bei privaten Homepages ist das ja nicht so gravierend, aber Firmen Homepages sollten doch in jedem Browser gleich aussehen. Und valides (X)HTML und CSS garantiert ja auch nicht, dass die Homepage überall gleich aussieht (IE).
Nun kann man ja nicht jeden Browser auf dem Computer installiert haben und zudem gibt es ja auch noch Darstellungs-Unterschiede im Firefox unter Windows und Linux. Nicht zuletzt auch wegen den verschiedenen Schriftarten.

Browsershots ermöglicht es einem zu sehen, wie eine Homepage in verschiedenen Browsern aussieht. Einfach die URL eingeben und die gewünschten Browser auswählen. Alle momentan populären Browser stehe zur Verfügung. IE, Firefox, Opera, Safari und das auch unter Windows, Linux und Mac OS.


Ich habe meine Seite natürlich auch getestet und bin wirklich zufrieden mit dem Ergebnis. Sogar im IE 6, der ja nicht gerade für seine CSS Kompatibilität bekannt ist, sieht die Seite sehr gut aus. Nicht zuletzt dank dem IE 6 CSS hack.


Der einzige Browser, in dem es überhaupt nicht gut aussieht ist der IE 5. Allerdings mache ich da keine grossen Aufwände mehr, damit die Seite auch dort gut aussieht. Sehr viele Benutzer sind mit dem IE 5 ja nicht mehr unterwegs.
Man achte auf die Navigation

Ich habe ja schon seit längerem davon gesprochen und nun bin ich fertig. t-error.ch präsentiert sich im neuen Kleid.
Darum bitte ich alle Feedleser mal wieder die Seite zu besuchen und sich ein Bild vom neuen Auftritt zu machen. Mir ist klar, dass das Design noch nicht perfekt ist. Hier und da kann man sicher noch etwas verbessern, aber bisher bin ich zufrieden damit.
Farblich habe ich mich an das alte Design gehalten, sonst hat sich aber viel geändert. Unter anderem auch die Navigation oben.

Im Internet Explorer 6 sieht es noch nicht ganz so aus wie es sollte, aber das kriege ich auch noch irgendwie hin.

Natürlich freue ich mich über Feedback. Entweder hier als Kommentar, oder einfach über das Kontakt Formular (welches momentan auch noch etwas zu breit ist).

Aber nun wünsche viel Spass, seht euch um. Ich hoffe das Design gefällt

Vor zwei Wochen habe ich mich ja bereits darüber beklagt, dass man im Internet Explorer 6 Div Container nicht vernünftig mit CSS ausrichten kann. margin-left:auto;margin-right:auto;, die eigentlich korrekte Lösung wird einfach Ignoriert.
Dank einem Kommentar von Evert aus Holland (den ich dummerweise im Zuge einer Spamsäuberungsaktion gelöscht habe, sorry) kenne ich nun eine gute Lösung. Sie ist eigentlich sehr simpel. Man erstellt einen DIV Container um alles herum und zentriert den Inhalt. Da das aber nur im IE 6 so ist, darf das CSS-File dazu auch nur im IE 6 geladen werden. Glücklicherweise gibt es da Kommentare, die als Browserweichen funktionieren.

Nun aber von vorne. Ich erstelle einen neuen DIV-Container (fett) um mein bestehendes Design herum.

<div id="container">
<div id="main">
    <div id="navLeft">
        Navigation
    </div>
    <div id="content">
        inhalt
    </div>
</div>
</div>

Nun muss das CSS-File im IE 6 geladen werden. Wie gesagt, fungieren hier die Kommentare als Browserweiche.

<!--[if IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Und zum Schluss noch der Inhalt der CSS-Datei. Für den Container #main muss man die Ausrichtung wieder zurücksetzten, da sonst der ganze Text zentriert ist.

#container {
    text-align: center;
    }

#main {
    text-align:left;
    }

Thank you Evert for this comment and sorry for deleting it. It was a mistake.

Und wieder mal etwas von der HTML/CSS Front. Und zwar habe ich beim erstellen des neuen Designs mit der festen Breite bemerkt, dass gewisse Texte (hauptsächlich Code) zu lang für das Design ist. Sprich, der Code ragt zu weit nach rechts.
Hier ein Beispiel von diesem Artikel.


Eine Möglichkeit um das Problem zu lösen wäre das Umbrechen des Textes nach einer bestimmen Anzahl von Buchstaben. Bei einer Schriftart mit einer festen Breite wie Courier würde das auch recht gut funktionieren. Nur macht das den Code völlig unleserlich, wenn da einfach irgendwo umgebrochen wird.
Es muss also eine andere Lösung her. Das CSS Element Overflow bietet sich da an. Mit der Angabe scroll kann man definieren, dass es um das Div Element Scrollbalken hat. Dadurch ist das Element nicht breiter als es sollte. Nur haben so auch Div Element die nicht zu breit sind Scrollbalken und das sieht wiederum schlecht aus.
Mit overflow:auto; kann man dem Browser die Wahl überlassen. Und hier scheinen sich die meisten Browser mal mehr oder weniger einig zu sein. Div Elemente die nicht zu breit sind habe keine Scrollbalken, diejenigen die zu breit sind haben aber Scrollbalken:


Dies funktioniert im Firefox, Opera und im IE 6 & 7. Andere Browser habe ich nicht getestet. Der einzige Unterschied ist, dass der IE auch vertikale Scrollbalken anzeigt, obwohl diese nicht nötigt wären. Firefox und Opera verzichten darauf, wie es sich gehört.

Als Kunde der ZKB und Informatiker bin ich ein Nutzer der Java Onlinebank. Damit kann ich meine Bankgeschäfte schön Online abwickeln, ohne einen Browser benutzen zu müssen. Vor allem aus Sicherheitsgründen ist das ein meinen Augen ein grosser Vorteil.

Vor einiger Zeit bin ich ja von Windows auf Linux umgestiegen, habe die Onlinebank aber weiter unter Windows genutzt. Allerdings halt im virtuellen Windows unter VirtualBox. Da Java ja eigentlich bedeutet, dass die Software auf allen Betriebssystemen laufen kann, wollte ich die Onlinebank mal unter Linux installieren. Es gibt sogar eine Linux Version zum Download. Mit 25.7 MB zwar mehr als viermal grösser als die Mac Version, aber was solls.

Also habe ich mir die Datei heruntergeladen. setup_bin_htm.File.bin ist zwar ein spezieller Dateiname, aber das muss ja nichts bedeutet. Wie es in der Installationsanleitung steht habe ich die Rechte der Datei geändert und wollte die Installation danach auch starten.

david@pluto:~/downloads$ chmod 755 setup_bin_htm.File.bin
david@pluto:~/downloads$ ./setup_bin_htm.File.bin

Doch was müssen meine Augen da sehen? Eine Fehlermeldung reiht sich an die andere:

./setup_bin_htm.File.bin: line 1: !DOCTYPE: No such file or directory
./setup_bin_htm.File.bin: line 2: syntax error near unexpected token `('
'/setup_bin_htm.File.bin: line 2: `<!-- saved from url=(0041)http://www.zkb.ch/onba/download/setup.bin -->

Dass keine Datei mit dem Nahmen !DOCTYPE existiert ist mir auch klar, der Installationsdatei scheinbar aber nicht. Ein Blick in die .bin Datei zeigt das Problem auch recht schnell auf:

david@pluto:~/downloads$ less setup_bin_htm.File.bin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0041)http://www.zkb.ch/onba/download/setup.bin -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2900.2976" name=GENERATOR></HEAD>
<BODY><PRE>#!/bin/sh

Die Damen und Herren bei der ZKB haben die .bin Datei wohl in irgendein HTML Template gepackt und dass man die Datei dann nicht ausführen kann ist dann auch nicht weiter verwunderlich. Wenn ich die Datei zum Bsp. mit dem VI bearbeite, also den HTML Code lösche wird die Datei völlig unbrauchbar, die ZKB muss also ran.

Der ZKB habe ich über das Kontaktformular eine genaue Fehlerbeschreibung geschickt, bisher allerdings noch keine Antwort erhalten. Nicht mal eine Eingangsbestätigung oder etwas in der Art. Schade eigentlich. Nicht, dass ich auf die Linuxversion angewiesen wäre, aber wenn sie sich schon die Mühe machen und eine Linux Version Programmieren, dann dürfte sie doch auch funktionieren.

Wie schonmal erwähnt arbeite ich momentan an einem neues Design für die Homepage. Das Grunddesign steht momentan und ich bin auch wirklich damit zufrieden. Und auf etwas bin ich besonders stolz. Die Seite sieht im Firefox und Opera unter Linux und Windows genau gleich aus. Eigentlich keine grosse Kunst, aber das besonders schöne: Auch im Internet Explorer 7 wird die Seite korrekt angezeigt. Der Grund warum ich IE 7 und nicht einfach IE schreibe, ist eigentlich der Grund warum ich diesen Beitrag schreibe. Im IE 6 sieht es nicht mehr so rosig aus. Die Seite sollte eigentlich zentriert sein, aber im IE 6 klebt sie schön am linken Rand. IE 6 und CSS verträgt sich leider nicht so gut.

Die neue Seite ist ähnlich aufgebaut, wie die jetzige. Oben ein Header, danach das Menu und dann auf der linken Seite eine Navigation und rechts daneben der Inhalt. Aufs gröbste gekürzt sieht der Code so aus:

<div id="main">
    <div id="navLeft">
        Navigation
    </div>
    <div id="content">
        inhalt
    </div>
</div>

Nur mit HTML kommt man da natürlich nicht so weit, also braucht man auch noch etwas CSS Code:

#main {
    width:                   745px;
    margin-top:              5px;
    margin-bottom:           0px;
    margin-left:             auto;
    margin-right:            auto;
    }

#navLeft {
    margin-left:             0px;
    width:                   160px;
    float:                   left;
    }

#content {
    margin-left:             165px;
    width:                   580px;
    }

Grundsätzlich ist es derselbe Code wie bei dieser Seite, nur hat der Container #main eine feste Breite und ist zentriert, oder sollte es zumindest sein. Wie gesagt funktioniert dieser Code im Firefox, Opera und IE7 wunderbar, nur im IE 6 ist die Seite nicht zentriert. Der Container wird ja mit den Elementen margin-left:auto; und margin-right:auto; zentriert. Nur scheint das im IE 6 nicht zu funktionieren.
Kennt da jemand eine andere, funktionierende Lösung? Idealerweise XHML und CSS valide?

Das Thema habe ich vor längerer Zeit schon mal angesprochen. Allerdings habe ich mich damals über die Designs mit einer festen Breite geärgert. Ich habe in letzter Zeit vermehrt darauf geachtet, welche Designs nun Benutzerfreundlicher sind. Schlussendlich ist das ganze sicher immer noch eine Ansichtssache, aber ich finde, dass man Text besser lesen kann, wenn er sich nicht über die ganze Seite erstreckt. Also bei einem Design mit einer festen Breite. Dies setzt aber voraus, dass der Text auch sauber strukturiert ist und Absätze hat. Sonst verliert man sich schnell in einem Textblock.
Nun bin ich mir am überlegen, ob ich mein Design umstellen soll. Von der dynamischen zur festen Breite.
Ich habe bereits einen kleinen Test gemacht und das sieht nicht schlecht aus. Nur mit Codeschnippseln gibt es Probleme, da diese nicht umgebrochen werden. Bei den Bildern habe ich mich sowieso an eine maximale Breite von 555 Pixeln gehalten. Von daher sollte es keine Probleme geben.
Allerdings würde ich gerne noch einige Meinungen von Lesern dazu hören. Ich denke die regelmässigen Leser benutzen sowieso einen Feedreader und der Feed ist davon ja nicht betroffen. Aber ich würde mich über Feedback von Lesern freuen, die ab und zu mal wieder hier vorbeisurfen.

Für Leute die das Thema sonst noch interessiert gibt es auf dem Beast Blog einen interessanten Artikel (en)

Ich bin gerade etwas mit den Scriptaculous Libraries am Pröbeln. Eine sehr nette, und einfache Sache. Einige Teile sind sicher etwas Eyecandy, aber das kommt je länger desto mehr. Auch im Webbereich.
Mit Scriptaculous kann man "Aufklappeffekte" wie ich sie bei meiner Tourenverwaltung habe, ganz einfach und noch etwas schöner realisieren. Dazu benötigt man nur die neusten Scriptaculous (blödes Wort) Libraries. Dieso kopiert man zusammen mit der Datei prototype.js in einen Ordner. Vorzugsweise javascript/. Wie man erahnen kann, basiert Scriptaculous auf Prototype, allerdings muss Prototype nicht zusätzlich heruntergeladen werden.
Nun müssen die Libraries noch in die Seite eingebunden werden. Dies funktioniert wie bei jedem JavaScript. Bei Scriptaculous kann noch angegeben werden, welche Module geladen werden sollen. Dies macht man mit dem load Parameter. Wenn dieser Parameter nicht angegeben wird, werden alle Module geladen. Ich benötige aber nur das Effects Modul also lade ich auch nur dieses.

<script type="text/javascript" language="JavaScript" src="js/prototype.js"></script>
<script type="text/javascript" language="JavaScript" src="js/scriptaculous.js?load=effects"></script>

Auf der Scriptaculous Homepage hat es schon diverse Beispiele zu den verschiedenen Effekten. Mich interessierte der Effekt toggle mehr, da es damit möglich ist, ein Element auf und zu zu klappen. Mit einem Klick auf ein Element kann so ein anderes Element geöffnet oder geschlossen werden. Hier ein simples Codebeispiel.

<div onClick="new Effect.toggle($('element'),'blind')">click</div>
<div id="element"><div>test test test</div></div>

Damit kann man mit einem Click das Element element öffnen und wieder schliessen. Hier wird der Effekt blind verwendet. Wichtig ist, dass im zu öffnenden Element noch ein zusätzlicher Divcontaoiner ist, sonst funktionieren einige Effekte nicht korrekt. Das Beispiel sieht mit etwas zusätzlichem CSS dan so aus:

Oft möchte man es ja so haben, dass das Element von Anfang an geschlossen ist. Dazu kann man ganz einfach das CSS Element display mit dem Wert none benutzen. Das sieht dann so aus.

Zusätzlich gibt es noch die Effekte slide und appear welche mich persönlich nicht so ansprechen. Mit gefällt blind am besten. Zum Schluss aber noch je ein Beipsiel.

Achtung: Lightbox2 verwendet schon Scriptaculous und Prototype. So muss man diese Libraries nicht mehr laden.

Für eine kleine Webapplikation im Geschäft, die wir verwenden werden um die Flugtarife zu verwalten, arbeite ich mich nun in Ajax ein. Ich war erstaunt wie einfach das war. Eine übersicht an Ajax Tutorial gibt bei Dr. Web. Ich habe mir die kürzeste Version rausgepickt und das ganze auf meine Bedürfnisse angepasst.
Als erstes benötigt man ein Objekt, mit dem man die Daten sendet bzw. empfängt. Dies sieht so aus:

function createRequestObject()
{
    var ro;
    var browser=navigator.appName;
    if(browser=="Microsoft Internet Explorer")
    {
        ro=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        ro=new XMLHttpRequest();
    }
    return ro;
}

var http=createRequestObject();

Um nun die Daten zu senden benötigt man eine weitere Funktion. Hier sendReq genannt:

function sendReq(url)
{
    http.open('get',url);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

Diese Funktion sendet einen GET Request an die per Parameter übergebene URL. Danach wird die Funktion handleResponse() aufgerufen, welche die Daten verarbeitet.

function handleResponse()
{
    if(http.readyState == 4)
    {
        var response=http.responseText;
        document.getElementById('showData').innerHTML=response;
    }
}

Diese überprüft zuerst, ob die Übermittlung vollständig ist und schreibt die Daten dann in den div Container mit der ID showData. Hier die verschieden Werte und deren Bedeutung die http.readystate haben kann.

	0 = uninitialized
	1 = loading
	2 = loaded
	3 = interactive
	4 = complete

Diese funktionen werden aber nicht direkt aus der HTML-Seite aufgerufen. Ich habe dafür eine kleine Wrapperfunktion gebaut, die das ganze einwenig übersichtlicher macht.

function flights()
{
    var airline=document.filter.airline.value;
    var destination=document.filter.destination.value;
    var date=document.filter.date.value;
    var class=document.filter.class.value;

    sendReq('rpc.php?action=flights&airline='+airline+'&destination='+destination+'&date='+date+'&class='+class);
}

Wird nun also die Funktion flights() von der HTML-Seite aufgerufen, so liest das Script die Werte der Input-Felder airline, destination, date und class aus. Diese Daten werden mit einem GET Request an das PHP-Script rpc.php weitergegeben. Nach der Verarbeitung der Daten gibt das PHP-Script die Daten aus und die JS-Funktion schreibt sie in den Div-Container. Eigentlich recht simpel und es verweinfacht die Arbeit mit der Applikation merklich.