HTML5 - Seite 3

Auf Touch und Click-Events reagieren mit jQuery

Im modernen Web tummeln sich nicht nur Desktops und Laptops sondern auch Smartphones, Tablets und viele andere Geräte. Entsprechend vielfältig sind die Eingabemethoden. Einen Desktop-PC bedient man am Liebsten mit der Maus und bei einem Smartphone wischt man gerne mit dem Finger drüber. Diese beiden Bedienkonzepte (Click und Touch) müssen berücksichtigt werden. In jQuery kann man dazu verschiedene Event-Typen benutzen, an die man sich im Code bindet.
Auf Touch und Click-Events reagieren mit jQuery weiterlesen

Abweichende Browser-Implementierungen der Eigenschaft pointer-events

Ein neues Feature in der HTML5-Spezifikation ist die Eigenschaft pointer-events. Das W3C definiert die pointer-events Eigenschaft im Rahmen des SVG-Standards und beschreibt, dass das Setzen der Eigenschaft Auswirkungen darauf hat, ob eine skalierbare Vektorgrafik das Ziel eines Click-Events (z.B. Mausklick) werden kann oder nicht.

Leider ist HTML5 noch kein verabschiedeter Standard sondern ein in der Entwicklung befindlicher Standard (work-in-progress proposal). Browserhersteller müssen daher diese Vorschläge nicht strikt implementieren, sondern haben einen gewissen Handlungsspielraum. Schaut man in die pointer-events Beschreibung von WebKit, so findet man dort die Angabe, dass es Bugs in der Implementierung bei Mozilla (Bug 380573) und WebKit (Bug 11395) selbst gibt.

Die Gecko Rendering Engine (verwendet im Mozilla Firefox) als auch die WebKit HTML-Rendering-Engine implementieren die pointer-events, entgegen dem W3C-Vorschlag, nicht nur für Vektorgrafiken (SVG), sondern für alle HTML-Elemente. Praktisch führt dieses unterschiedliche Verhalten zu einem Problem, das ich kurz vorstellen möchte.
Abweichende Browser-Implementierungen der Eigenschaft pointer-events weiterlesen

Check for HTML5 features with JavaScript

There is no magic behind checking a web-browsers support for a specific HTML5 feature. If you want to check if a browser supports the latest HTML5 WebSocket API then you just have to take care if there is an object called „WebSocket“ available via the DOM:

<script>
  if('WebSocket' in window){
    alert('Hurray! Your browser supports HTML5 WebSockets.')
  }else{
    alert('Sorry, but you are out of date!');
  }
</script>

Nevertheless, there are still people who want to include a fancy library for such an inspection. You can do the same with Modernizr:

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<script>
  if(Modernizr.websockets){
    alert('Hurray! Your browser supports HTML5 WebSockets.')
  }else{
    alert('Sorry, but you are out of date!');
  }
</script>

HTML5 WebSocket-Server mit Java und Client mit JavaScript

Zur Demonstration von HTML5-Websockets habe ich mit webbit einen einfachen WebSocket-Server geschrieben, der Nachrichten entgegen nimmt und diese Nachrichten wieder an den jeweiligen angemeldeten Client zurück schickt. Ein solches Beispiel nennt man auch Echo-Server.
HTML5 WebSocket-Server mit Java und Client mit JavaScript weiterlesen

Detect Internet Explorer and Google Chrome Frame with JavaScript

To make the Internet Explorer HTML5-competitive it is advisable to install Google Chrome Frame. JavaScript allows to discover whether Google Chrome Frame is already installed.

if(navigator.appName == 'Microsoft Internet Explorer'){
  var hasChromeFrame = navigator.userAgent.match(/(chromeframe)/);
  if(hasChromeFrame == null){
    window.location = 'http://www.google.com/chromeframe';
  }
}

Another option is to use some Google stuff. But then the dialog to install Chrome Frame (CF) is only shown once per session:

<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script type="text/javascript">
  // Check if Chrome Frame is installed and display an overlay if not
  CFInstall.check({
    mode: "overlay"
  });
</script>
<![endif]-->

Set viewport content with JavaScript and HTML5

In modern mobile devices and HTML5 browsers you can set the viewport content (for example the webpage zoom and webpage dimension) with a single meta tag:

<meta name="viewport" content="width=device-width,initial-scale=2.0,minimum-scale=2.0,maximum-scale=2.0, user-scalable=no">

If you want to do this with JavaScript, then you need a viewport meta-tag with empty content:

<meta name="viewport" content="" />

Then you can change the content by using JavaScript:

function setViewPort(viewPortContent){
  var metas = document.getElementsByTagName('meta');
  var i;
  if (navigator.userAgent.match(/iPhone/i)) {
    for (i=0; i<metas.length; i++) {
      if (metas[i].name == 'viewport') {
        metas[i].content = viewPortContent;
      }
    }
  }
}
 
var viewPortContent = 'width=device-width,initial-scale=2.0,minimum-scale=2.0,maximum-scale=2.0, user-scalable=no';
setViewPort(viewPortContent);