Using and clearing the Browser Appcache

I’m currently experimenting with the HTML 5 App Cache. It’s important to know that the HTML5 appcache is different from the normal browser cache. Basically you link a manifest appcache file in your html which has instructions on which files the browser should cache and which it should always load new.

<html manifest="cache.appcache">
    Your site goes here.
</html>

Example contents of a cache manifest:

CACHE MANIFEST

# These files will be explicitly cached
CACHE:
index.html
css/styles.min.css
js/scripts.min.js
img/logo.svg

# All other files require the user to be online
NETWORK:
*

In my recent experience the cache works very well, sometimes even too well. It will delete and cache all files new which are otherwise explicitly cached if you change anything in the cache manifest file. You could for example add a timestamp. But this seems to not always work or be at least a little dogged. So if you want to delete the appcache of Chrome for example manually you can do this by going to

chrome://appcache-internals/

and just delete what you don’t need anymore. It’s also just interesting to have a look at what you already gathered while surfing around the web.

In Safari it’s not that easy, but you can find an explanation on stackoverflow.

To have a look at your caches in Firefox you can go to

about:cache?device=offline

But you don’t have the option to delete them there. For that you have can go to Preferences -> Advanced -> Network. Here you find „Offline Web Content and User Data“.

Go ahead and experiment with the HTML5 app cache. It’s pretty cool especially for mobile web apps.

HTML5 Placeholder stylen

Im letzten Eintrag ging es um den Einsatz von HTML5 Placeholdern und eine jQuery Fallbackmöglichkeit. Heute will ich euch kurz und kann zeigen, wie ihr den Placeholdertext anders aussehen lassen könnt als den normalen Input-Text.

Soweit mir bekannt ist, gibt es die Möglichkeit nur für webkit-basierte Browser wie Chrome und Safari und für Firefox.

Die ersten beiden können ganz einfach über folgenden Selektor angesprochen werden.

input::-webkit-input-placeholder {
    color: #bbb;
}

Firefox hat einen ähnlichen Selektor, der wie folgt aussieht.

input:-moz-placeholder {
    color: #bbb;
}

Es ist noch wichtig zu sagen, dass ihr folgendes nicht machen dürft, da ein Browser aufhört den Code zu interpretieren, wenn er eine der beiden Anweisung nicht versteht, die ihr in eine Reihe schreibt.

input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #bbb;
}

Wusste ich auch nicht und suchte den Fehler irgendwann mal ewig, bis ich dann zu dieser Erkenntnis kam.

HTML5 Placeholder für Formulare

Ihr kennt alle den schönen Effekt, wenn man in ein Eingabefeld klickt und der Text darin verschwindet. Bei einem Anmeldeformular zum Beispiel steht in einem Feld Username, man klickt rein und der Platzhalter verschwindet. Gibt man nichts ein und klickt wieder außerhalb des Feldes, dann steht der ursprüngliche Text wieder drin.

Dieser Effekte musste immer per JavaScript erzeugt werden. Dank HTML5 und dem placeholder-Attribut geht das mittlerweile für aktuelle Browser (Chrome, Safari ab Version 4, Firefox ab Version 7, Opera ab Version 11.5) auch einfacher.

Mal angenommen wir haben ein einfaches Input-Feld mit einem vor definierten Inhalt.

<input type="text" value="Vorname" />

Wenn man jetzt in das Feld klickt passiert nichts. Man muss Vorname selbst rauslöschen um den eigenen Namen eingeben zu können. Das ist natürlich ziemlich blöd. Um das einfach und schnell zu lösen benutzen wir einfach statt value, placeholder.

<input type="text" placeholder="Vorname">

Die komplette restliche Arbeit nimmt uns HTML5 ab. Klick ins Feld und wir können unseren Namen eintragen und Vorname verschwindet. Tragen wir nichts ein und klicken außerhalb des Feldes steht weiterhin Vorname drin. Alles ganz ohne JavaScript.

Wer möchte, dass das ganze auch im Internet Explorer funktioniert, für den gibt es das jQuery Plugin Placeholder. Einfach jQuery, das Plugin sowie eine eigene scripts.js für unseren Code einbinden…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.placeholder.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>

… und dann noch das Plugin in der scripts.js aufrufen. Fertig.

$(document).ready(function(){
    $('input, textarea').placeholder();
});

Das ersetzt dann in alten Browsern bei allen Inputfelder und Textareas den placeholder. Man könnte das natürlich auch nur auf einzelne Felder anwenden, z.B:

$(document).ready(function(){
    $('#search').placeholder();
});

Viel Spaß damit. Ich nutze es andauernd und es macht die ätzende Arbeit mit Formularen ein Stück angenehmer.

Adobe Edge

Das sieht alles ziemlich gut aus. Ich möchte zwar nicht wissen wie der Code der Ausgabe-HTML-Datei aussieht, aber generell ist Adobe mit Edge sicher auf dem richtigen Weg. Es scheint viele Ähnlichkeiten zu Flash in der Bedienung der App zu geben, was den Umstieg sicher vereinfacht. Ich habe nur rudimentäre Sachen in Flash gemacht und habe es gehasst. Die Möglichkeit einfache Animationen in Edge zu erstellen, Javascript zu nutzen und alles sogar auch außerhalb der App bearbeiten zu können, sagt mir aber zu. Ein wirklicher Freund von Animations-Timeline-Apps werde ich aber wohl in naher Zukunft trotzdem nicht werden.

Adobe Edge Preview gibt’s hier zum Download. Ich werde mir das demnächst auch mal genauer anschauen und etwas damit experimentieren.

CSS shaders

John Nack:

Adobe’s contributing technology & expertise to enable CSS shaders. CSS shaders “define a filter effects extensibility mechanism and provide rich, easily animated visual effects to all HTML5 content.” They work particularly well with CSS animations and CSS transitions, but they even work on video & SVG animations.

Die Zukunft der Webentwicklung wird sooo gut! Weiter machen, Adobe. (via)

HTML5/CSS3 Meisterklasse

Klar, ich weiß im Grunde auch wie das geht. Aber die Zeit und Planung die für so was benötigt wird, ist enorm. Ich bin jedes mal wieder beeindruckt. Dieses mal sind es die sich bewegenden Innenteile einer Uhr. (via)

YouTube5 Version 2 Safari Extension

Vertical Forest:

A custom designed HTML5 player to replace the usable, but very limited built-in player. Support for Vimeo and Facebook video. The ability to switch video resolutions within the player, without having to access Safari’s preferences. Support for downloading videos from YouTube and Facebook. A fully functional volume control, rather than just a mute button. Support for displaying the video’s title, author, and source, in a video overlay, along with a link back to the video’s page on YouTube, Vimeo, etc.

Ich bin noch immer mit Safari unterwegs und mittlerweile gefällt mir der Browser richtig gut. Gerade habe ich eine sehr coole Extension entdeckt, die gerade in Version 2 geht und YouTube-, Vimeo- und Facebookvideos durch einen sehr schicken und super funktionalen HTML5 Player ersetzt. Funktioniert bestens und schont meinen MacBook-Lüfter.

Adobe Edge Preview

Adobe Labs:

Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Flash liegt in den letzten Atemzügen und Adobe kümmert sich um ein neues Baby: Edge. Mit Edge soll es möglich sein relativ einfach Animationen mit HTML5, CSS3 und JavaScript zu basteln. Das klingt soweit erstmal gut. Schon in frühem Stadium, nicht mal beta, will Adobe Feedback und Anregungen zu Edge haben. Die Schritte gefallen mir äußerst gut. Das Einzige was mir nicht gefällt: Der Downloadserver ist gerade nicht erreichbar. Hmpf.

tidenhub 2011

Ihr erinnert euch vielleicht noch an die Ignite letztes Jahr. Dieses Jahr gibt es etwas besseres. tidenhub 2011.

Der Unterschied zwischen den Gezeiten Ebbe und Flut. Jeder, der schon mal sein eigenes Projekt hatte, wird diese Differenz kennen. Die emotionale Achterbahnfahrt zwischen dem erniedrigenden Tief und dem absoluten Hoch. Das pushende High, das Flügel verleiht, aber auch den schmerzenden Punkt, an dem man am liebsten Alles hinschmeißen möchte.

Und wir wollen es hören von euch! In 6 Minuten und 40 Sekunden. 20 mal 20 Sekunden. Auf 20 Folien sollst du uns und den anderen Zuhörern dein Ding vorstellen! Insgesamt wird es 10 Vorträge geben, die inspirieren, zum Nachdenken anregen oder uns zum lachen bringen.

Datum: 10. März 2011, 19:30 Uhr · Ort: Lerchenstraße 16a, 22767 Hamburg

Also egal ob ihr etwas vortragen oder einfach nur lustige und interessante Vorträge hören möchtet, meldet euch an und seid dabei!

Das Design hat übrigens Marcel gemacht und ich habe es umgesetzt (mit kurzer Hilfe von Mathias.). HTML5-Anfänge und viel CSS3-Kram. <3
In webkit-Browsern sieht alles übrigens am schönsten aus und es gibt kleine Animationen oder Ähnliches zu entdecken. Aber auch in allen anderen Browsern funktioniert alles bestens.

Das war unser erstes komplettes, kleines Projekt bei den Elbdudlern.