dynamische oder feste Breite?

In letzter Zeit ist mir vermehrt aufgefallen, dass immer mehr Webseiten eine feste Breite für ihr Design verwenden. Vor allem bei Blogs ist das weitverbreitet. Das typische Blogdesign hat eine feste Breite, oben ein Logo und entweder oben, links und/oder rechts eine Navigation. Es sieht also so aus:
http://images.t-error.ch/news/290/fixed_top.jpg http://images.t-error.ch/news/290/fixed_left.jpg http://images.t-error.ch/news/290/fixed_right.jpg

Ich frage mich aber, was der grosse Vorteil an einer festen Breite ist. Ich habe hier im Geschäft eine Auflösung von 1680x1050 Pixel. Mit dieser Auflösung sieht die Homepage der Gratiszeitung Heute so aus:
http://images.t-error.ch/news/290/heute.jpg

Das ist doch Schade. Ich muss sehr weit nach unten scrollen, aber horizontal hätte die Webseite gut 2.5 mal Platz. Dass man das herunterscrollen, vor allem bei Blogs, nicht verhinden kann, ist mir klar. Aber das heisst ja nicht, dass man das Browserfenster nicht ausnutzen darf. Vor allem werden heuzutage immer mehr Widescreen Bildschirme verkauft und die wenigsten Leute können/wollen ihren Bilschirm um 90 Grad drehen.
Für den Webdesigner ist es halt schon von Vorteil, wenn er eine feste Breite hat. Man kann Bilder genau einpassen und auch der Text sieht immer genau gleich aus. Für den User bringt einevariable Breite in meiner Meinung aber einen klaren Vorteil. Man mehr Text lesen ohne immer wieder herunterscrollen zu müssen. Ich habe misch schon oft über Webseiten geärgert, die einen langen Text haben und ich dann nach jedem Abschnitt wieder herunterscrollen muss, nur weil die Seite nur halb so breit wie mein Bildschirm ist. Für mich als (Hobby) Webdesigner ist es zwar ein höherer Aufwand. Wenn dies allerdings eine höhere Usability mit sich bringt, ist dieser Auswand sicher auch gerechtfertigt.
Ich wäre erfreut, wenn ich in Zukunft mehr Webseiten (auch Blogs) sehen würde, die den Bildschirm auch ausnützen würden. Den eigentlich könnte ich ja immer noch mit einer Auflösung von 800x600 surfen. Ich hoffe, ich sehen in Zukunft mehr Webseiten mit einem solchen Design
http://images.t-error.ch/news/290/variable_top.jpg http://images.t-error.ch/news/290/variable_left.jpg http://images.t-error.ch/news/290/variable_right.jpg

Opensearch Plugins mit Search-Suggestions

Dass man zum Suchfeld im Firefox und IE noch zusätzliche Seiten hinzufügen kann ist jas nichts neues. In letzter Zeit haben Markus Baumi und BloggingTom darüber berichtet.
Im Mozilla Development Center findet man eine schöne Anleitung, wie man so ein OpenSeach Plugin erstellt. Man kann es natürlich auch von jemand anderem klauen und anpassen.

Was ich noch interessant finde und was in den oben genanten Beiträgen nicht erwähnt wird, ist dass man, zumdindest im Firefox, "Supporting search suggestions" einblenden kann. Also dasselbe, dass man schon von Google kennt. Wenn man einen Suchbegriff eingibt, werden einem passende Vorschläge angezeigt.
Das zu realisieren ist nicht wirklich schwierig. Im XML File wird eine neue Zeile eingefügt, welche zu einer Datei zeigt, die JSON Daten zurückgibt. Und diese Daten werden vom Firefox dann angezeigt.

Die genannte Zeile sieht so aus:
<Url type="application/x-suggestions+json" template="http://search.t-error.ch/?q={searchTerms}&type=json"/>

Das aufgerufene Script muss nun alle möglichen Vorschläge anzeigen. Ich habe da auf die Tags zurückgegriffen und zeige sie nun sortiert nach der Anzahl an.
Eine Suche nach link zeigt nun das folgende an:
["link",["linktipps","linkchecker","linkification","links"]]

Im Firefox sieht das dann so aus:
http://images.t-error.ch/news/226/vorschlaege.jpg

Eine offizielle Anleitung (Englisch) gibt es im MDC

Anmerkung: Meine Suchseite ist noch nicht perfekt. Ich habe sie hauptsächlich erstellt, um die Searchplugins zu testen.

Autokompletierung abschalten

Die autovervollständigen Funktionen der heutigen Browser sind ja schon schöne Sachen. Nur den ersten Buchstaben eintippen und schon werden schon benutzte Texte angezeigt. Manchmal möchte man das allerdings nicht. Zum Beispiel bei Ajax-Suchen wo die Vorschläge von eine Script zur Verfügung gestellt werden. Wenn nun der Browser auch noch seine Vorschläge anzeigt, kommt das zu hässlichen Überschneidungen.
Mit JavaScript kann man diese Funktion relativ simpel für bestimmt Textfelder deaktvieren. Die Methode setAttribute() macht das möglich. Zuerst schreibt man eine kleine Funktion, die entweder direkt in den Head oder halt in eine externe Datei eingebunden wird. Eine externe Datei hat en Vorteil, dass sie weniger Traffic verursacht, da sie gecacht werden kann.
function disableAutocompletion()
{
    var autocomplete=document.getElementById('user');
    if(autocomplete==null) return;
    autocomplete.setAttribute('autocomplete','off');
}

Diese Funktion wird nun via onLoad() beim Laden der Seite aufgerufen.
<body onLoad="disableAutocompletion()">

Und schon werden vom Browser keine Vorschläge mehr gemacht.

Update, 22.03.07 09:49:
Warum einfach wenns auch kompliziert geht. Mit autocomplete="off" direkt im Input-Feld lässt sich das auch abstellen.

Update 2, 22.03.07 10:24:
autocomplete scheint allerdings kein Valides XHTML Attribut zu sein.

Ajaxing

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.

Bilder mit Schatten

Integra Square
Auf der Suche nach einer guten Lösung um Bilder mit Schatten zu versehen, bin ich über diese beiden Lösungen gestolpert. Bei der ersten werden mehrere divs verwendet, um einen schönen Schatteneffekt zu erzeugen. Ähnlich wie bei den gerundeten Ecken. Dami kann man Schatten rund um das Bild herum erzeugen.

Die andere Lösung benutzt ein einziges, allerdings recht grosses Hintergrundbild, das den Schatten darstellt. Dies hat den Nachteil, dass die Bildgrösse beschränkt ist, allerdings wird nur ein div verwendet. Zudem ist ein Hintergrundbild, dass die grösse von 1000x1000 Pixel hat nur rund 4Kb gross.

Ich suche allerdings noch eine Lösung, die gar keine divs benötigt. Allerdings muss man dafür noch auf CSS 3 warten. Und vorallem auf die Umsetzung in den Webbrowsern.

Bilder-/Trafficklau verhindern

Über Konnichi wa bin ich auf ein Thema gestossen, dass mich früher auch mal beschäftigte. Der Bilderklau.
Eigentlich gib es zwei Varianten von Bilderklau. Das Bild wird abgespeichert und auf dem eigenen Server gehostet oder das Bild wir einfach verlinkt. Die zweite Varianten nennt man auch Traffic-Klau und darauf möchte ich nun genauer eingehen.

Zum einen gibts da die Möglichkeit, die Bilder einfach umzubenennen und/oder einfach ein anderes Bild an der Stelle platzieren. Diese Variante ist einfach, bringt langfristig aber wenig, da man einfach auf das neue Bilder verlinken kann.

Eine andere Methode habe ich bei Webmaster Resource gefunden. Dort wird das Bild mit PHP in mehrere Stücke zerlegt und dann mit einer Tabelle angezeigt. Für einen Anfänger wird es so schwieriger, da er nicht einfach auf das Bild linken kann, sondern den ganzen Code kopieren muss. Für einen erfahrenen Webdesign allerdings kein Problem.

Eine auch schon sehr bekannte Variante ist die folgende. Man macht eine Tabelle, definiert das zu schützende Bild als Hintergrund und legt ein transparentes Bild davor. Wie schon die Variante davor, nützt das nichts gegen erfahrene Webdesigner. Ein Beispielcode sieht so aus:
<table background="img/bild.jpg">
  <tr>
    <td>
      <img src="img/transparentes_bild.gif" width="200" height="150" alt="" />
    </td>
  </tr>
</table>


Eine effektivere Methode ist htaccess. Damit wird der Referer, also die Seite von der der Besucher kommt, abgefragt. Wenn der Referer nicht die eigene Seite ist, wird ein anderes Bild angezeigt. Einfach und effektiv, funktioniert aber leider nur mit Apache und mod_rewrite.
RewriteEngine OnRewriteCond %{HTTP_REFERER} !^http://.*webseite\.ch/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://.*webseite\.ch*$ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule ^(.*)jpg$ http://www.webseite.ch/images/bilderklau.jpg [L,R]


Fazit:
Wirklich verhindern, kann man den Bilderklau nicht. Allerdings kann man mit wenig Aufwand zumindest den Trafficklau vermindern.

Gerundete Ecken mit CSS

Ich bin auf der Suche nach einer guten Lösung um die ecken von einem Block abzurunden. Dazu gibts ja bekanntlich mehrere Möglichkeiten. Zum Beispiel mit Tabellen, JavaScript und zum Glück auch mit CSS.


Eine Lösung, die gut aussieht, findet man unter Sova v siti. Allerdings gruselt es mich, wenn ich diesen HTML-Code sehe:
<div class="uedge">
  <div class="redge">
    <div class="bedge">
      <div class="ledge">
        <div class="ulcorner">
          <div class="urcorner">
            <div class="blcorner">
              <div class="brcorner">
                <div class="innercontent">
                  <p>Content of the box goes here.</p>
                  <p>The box can be of any width and height. The width of this one is 40% of its containing block.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Varianten, die mir besser gefallen sind hier und hier zu finden.
Eine Lösung, die ohne Bilder auskommt, aber leider nur mit dem Mozilla funktioniert gibts auch

Und zum Schluss noch eine Liste mit mehreren zusätzlichen Lösungen.

YouTube Videos Transparent

Nochmals ein kleiner Beitrag zum einbinden von YouTube Viideos. Bei meinem ersten Beitrag habe ich beschrieben, wie man YouTube/Google Videos valide in eine Hoempage einbinden kann. Allerdings ist mir später etwas aufgefallen. Wenn über die ganze Seite ein Layer geöffnet wird, scheint der Video durch. Das Layer geht also "hinten durch". Zu sehen unter Diverses beim Thema "Für Siebenschläfer" ein Clocky anklicken und dann nach unten scrollen. Sieht nicht so schön aus. Oder?
Die Lösung des Problems habe ich auf der LightBox Seite gefunden.
Man muss einen zusätzlichen Param Tag einsetzen.

Neu sieht das dann so aus:
<object type="application/x-shockwave-flash" style="width: 425px; height: 350px" data="http://www.youtube.com/v/IvnU64S2Pho">
<param name="movie" value="http://www.youtube.com/v/IvnU64S2Pho" />
<param name="wmode" value="transparent" />
</object>


Ein Beispiel. Einfach ein Bild anklicken.

Youtube/Google Videos XHTML valid einbinden

Ein Video von YouTube oder Google Video in die eigene Homepage zu integrieren ist eigentlich gar nicht schwer. Video suchen und dann den HTML kopieren und in der eigenen Seite einfügen.
So erhält man den folgenden Code:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/ujlMyP17XnM"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/ujlMyP17XnM" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

Das Problem darin ist, dass dieser Code nicht XHTML Valid ist. Das Element <embed> gibt es in XHTML gar nicht.

Wenn man aber auf validen Code achtet, kann man den Video auch so einbinden:
<object type="application/x-shockwave-flash" style="width: 425px; height: 350px" data="http://www.youtube.com/v/ujlMyP17XnM">
<param name="movie" value="http://www.youtube.com/v/ujlMyP17XnM" />
</object>

Kommt auf das selbe heraus, ausser, dass der Code valid ist.

Bei Google Video funktioniert es genau gleich, nur die URL muss man halt anpassen. Bei beiden Stellen.

Lightbox

Heute bin ich über ein nettes JS Tool gestolpert. Nicht wirklich nötig, aber eine nette Spielerei.
Das ganze nennt sich Lightbox und damit kann man Bilder schönner anzeigen lassen. Ein kleines Beispiel auf meiner Seite. einfach auf ein Bild klicken. Damit kann man mehrere Bilder einfach ansehen, ohne immer wieder zurück auf die Ausgangsseite zu müssen.

Eingebunden ist es relativ einfach.
Man muss die folgenden JavaScript Files einbinden:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


Das CSS File:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


Ein Bild wird nun so dargestellt:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>


Zudem kann man noch Gruppen machen:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>


Das ganze kann man auch auf der offiziellen Homepage nachlesen: Lightbox - How to use