Saturday, May 28, 2011

HTML5 offline applications

In HTML5 gibt es die Möglichkeit den Browser zu instruieren, bestimmte Elemente der Webseite in seinen lokalen Cache zu speichern. Diese im Cache abgelegten Elemente sind dann ohne Netzzugriff verfügbar. Dies bringt 3 große Vorteile:
  1. Der Browser kann auch ohne physikalischen Internetzugang auf diese Elemente zugreifen. Wenn die gesamte Page gechacht wird ist diese somit komplett offline verfügbar
  2. Da der Browser diesen Cache auch anspricht, wenn Netzzugriff bestehen würde, fühlt sich die HTML Seite schneller an, da weniger Requests über die Leitung gehen. Für Bilder aus dem Cache reicht ein einfaches Laden - für Bilder übers Netzt muss ein kompletter HTTP-Request abgesetzt werden.
  3. Der ausliefernde WebServer wird entlastet, denn Clients die den Cache nutzen fragen Ressourcen nur einmal an.
Genutzt wird dieser neue Cache vor allem für mobile Anwendungen, denn hier ist die Bandbreite oft recht beschränkt. So lässt es sich erreichen, dass sich diese gechachten Seiten von der Reaktion anfühlen wie 'echte' Apps fürs iPhone oder Android-Phones.


Beispiel für die Nutzung des Caches

Um dem Browser mitzuteilen, dass man Elemente gerne in den Cache schreiben möchte, muss das umschließende Tag der Weibseite mit folgendem Attribut erweitert werden:

<html manifest="cache.manifest">

Wenn der Browser diese Anweisung findet lädt er zuerst die Datei 'cache.manifest' herunter und speichert dann alle dort angegebenen Ressourcen im lokalen Cache - von diesem Zeitpunkt an sind somit für die angegebenen Elemente keine Netzzugriffe mehr nötig.

Hier ein einfaches Beispiel für solche ein Manifest:

CACHE MANIFEST
# Version 0.1
 
CACHE:
index.html
style/main.css
script/script.js
img/header.jpg
 
NETWORK:
*.cgi
*.php

Dieses Manifestverwendet die beiden wichtigsten Bereiche, die für eine manifest-Beschreibung nötig sind:
CACHE MANIFEST
Einleitende 'Überschrift' für den Browser - muss angegeben werden
CACHE:
Alle unter diesem Attribut angegebenen Ressourcen werden vom Webbrowser gecacht und nicht mehr über dieLeitung nachgeladen. Hier sind keine Wildcards möglich - jede Ressource muss direkt angegeben werden.
NETWORK:
Alle hier angegebenen Elemente und Ressourcen werden vom Webbrowser NIE im Cache gehalten - diese werden also immer über das Netz angesprochen. Hier sind auch Wildcards möglich.

Kommentare werden über einen vorgestellten Hash angegeben, wie im Bsp: #Version


Neuladen erzwingen


Es kann natürlich passieren, dass man einem Webbrowser mitgeteilt hat, er solle doch die Header-grafik header.jpg in seinem Cache vorhalten, so dass diese nicht jedes mal neu geladen werden muss. Aber was wenn sich diese Header-Grafik nun ändert... von grün auf rot...
Der Webbrowser wird dies erst mal nicht merken - denn in seinem Cache ist die Grafik immer noch grün.


Hier gibt es jedoch einen relativ einfachen Weg dem Browser mitzuteilen, er solle doch einfach nochmal seinen Cahche aktualisieren - denn jeder Browser führt beim Laden der Seite ein 'update' Event aus. In diesem Update-Event versucht der Browser das cache manifest zu laden (nur das manifest selbst - nicht die angegebenne Ressourcen) und vergleicht es mit dem lokal gespeicherten. Wenn sich Änderungen ergeben haben wird der Cache invalide und alle Ressourcen werden neu geladen.
Wir können also um den Header auszutauschen diesen umbenennen, von header.jpg auf header_neu.jpg (was aber auch dazu führt, dass wir alle Referenzen auf diesen Header im HTML-Code anpassen müssen) oder wir zählen einfach unseren enthaltenen Versions-Kommentar hoch
#Version 0.1
wird dann zu
#Version 0.2
Dies reicht schon aus um dem Browser mitzuteilen, er solle doch einfach mal neu laden :-)


Webserver Konfiguration


Die Webbrowser interpretieren eine manifest-Datei nur dann korrekt, wenn sie über den richtigen MIME-Type ausgeliefert wird. Hierzu muss der Webserver so konfiguriert werden, dass es dieses Manifest als
text/cache-manifest
ausliefert. Wie das im jeweilligen Webserver (Apache, IIS, ...) gemacht wird findet sich in der Doku. Auch Google hilft hier bestimmt gerne weiter.

Browser-Verhalten

Unterstütz wird das HTML5 Feature der offline application durch:
  • Firefox ab 3.6
  • Safari
  • Opera
  • Crome
Der Internet-Exporer unterstützt dieses Feature aktuell NICHT!

Je nach Browser wird der Nutzer darüber informiert, dass eine bestimmte Webseite Daten im Cache ablegen möchte - so fragt FireFox nach:
"Diese Webseite möchte Daten für die Verwendung im Offline-Modus speicher .... Ja / Nein / Jetzt nicht"
Google Chrome speichert einfach ;-)

--- Links ---
http://www.w3.org/TR/html5/offline.html

Sunday, May 22, 2011

CSS3 - border radius

CSS3 bietet die Möglichkeit, Elemente mit abgerundeten Ecken darzustellen. Überall dort, wo eine 'Border' definiert werden kann, können auch die Ecken abgerundet werden.

So führt z.B. folgende CSS Deklaration zu einem einfachen DIV mit abgerundeten Ecken und 5px Radius:

-moz-border-radius: 5px;
border-radius: 5px;



Wie man am Beispiel sieht, implementieren Mozilla-basierte Browser ihr eigenes Süppchen und es wird das Prefix: -moz zusätzlich benötigt...

Um jede Ecke einer Border direkt anzusprechen gibt es jeweils eigene Properties:

border-bottom-left-radius:
border-bottom-right-radius:
border-top-left-radius:
border-top-right-radius:
 
-moz-border-radius-bottomleft:
-moz-border-radius-bottomright:
-moz-border-radius-topleft:
-moz-border-radius-topright:


Natürlich können diese Werte auch kombiniert in einer Deklaration angegeben werden - hier ist die Reihenfolge:
1 Wert: gilt für alle Ecken
2 Werte: (top-left & bottom-right) (top-right & bottom-left)
3 Werte: top-left (top-right & bottom-left) bottom-right
4 Werte: top-left top-right bottom-right bottom-left

So führt folgende CSS-Deklaration:
-moz-border-radius: 5px 15px 40px 60px;
border-radius: 5px 15px 40px 60px;

Zu diesem Bsp:




Ein weiteres, eher unbekanntes Feature des Border-Radius ist die Möglichkeit, 2 Werte für eine Ecke anzugeben - den horizontalen Radius und den vertikalen Radius.
Achtung - Firefox unterstützt dies leider erst ab Version 3.5.

So führt ein
border-top-left-radius: 10px; 30px 
-moz-border-radius-topleft: 10px 30px;

Zu folgendem Ergebnis:




Um die Kurzschreibweise in einer Deklaration zu verwenden, so wie dies oben ja schon beschrieben wurde, werden die Werte für horizontal und vertikal über ein / getrennt:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
-moz-border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;


--- Links: ---
Weitere Infos auch beim W3C selbst: http://www.w3.org/TR/css3-background/

Saturday, May 21, 2011

Apache Wicket 1.5-RC4.2 released

Am 11. Mai hat das Wicket-Team den 4. Release-Kandidat veröffentlicht.
Für eine einfache Integration hier der maven-task:


    org.apache.wicket
    wicket-core
    1.5-RC4.2


Die neuen Features, die in der 1.5 Version im gegensatz zu 1.4.x Einzug gehalten haben sind auf jeden Fall einen Blick Wert und der aktuelle Release-Kandidat fühlt sich schon sehr stabil an. Wer jetzt ein neues Projekt beginnt, sollte auf jeden Fall den Sprung wagen und nicht mehr auf den 1.4er Zweig setzten.
  • abhängige Bibliotheken wurden auf den neuesten Stand gebracht
  • Die API ist klarer gestrickt
  • einiges an Magic und Voodoo aus dem 1.4er Zweig, der immer zu Problemen geführt hat wurde bereinigt... manchmal ist weniger eben mehr ;)
  • deprecated-Methode und Klassen wurden konsequent verworfen - mach die ganze Sache wesentlich aufgeräumter
  • Zusatz-Komponente wie bspw. WiQuery migrieren nach und nach ebenso auf 1.5 -> man wird neue Features aus diesen Addons also wohl nicht mehr für 1.4.x Nutzen können

--- Links ---
Post auf der offiziellen Wicket-Seite: Wicket 1.5-RC4.2