Browsen mit der neuen Windows-Benutzeroberfläche für Webentwickler

In diesem Artikel wird beschrieben, wie sich die Funktion von Seiten unter Windows 8 zwischen dem bekannten Internet Explorer für den Desktop und dem Internet Explorer in der neuen Windows-Benutzeroberfläche unterscheidet. Außerdem werden bewährte Methoden zum Erstellen von Websites mit Fingereingabe beschrieben. Diese Empfehlungen gelten für beide Browsingoberflächen von Internet Explorer 10 und höher.

Windows 8 stellt zwei Browsingoberflächen für Internet Explorer 10 bereit: das bekannte Desktop-Browsing und das neue Browsing unter Windows 8.

Beiden Browsingoberflächen liegen die gleichen Komponenten zugrunde, vom Netzwerkstapel und Cache bis zum Renderingmodul. Und beide senden die gleiche Zeichenfolge des Benutzer-Agenten und verfügen über das gleiche Dokumentobjektmodell (Document Object Model, DOM). Als Entwickler behandeln Sie beide Benutzeroberflächen als einen Browser behandeln, als Internet Explorer 10.

ActiveX und andere binäre Erweiterungen

Die Browsingoberfläche unter Windows 8 unterstützt weder Microsoft ActiveX noch andere binäre Erweiterungen. Damit sichergestellt ist, dass Ihre Website für alle Kunden funktioniert, sollten keine obligatorischen Plug-Ins verwendet werden. Dies kommt allen Kunden entgegen, die ohne Plug-Ins surfen. Dabei spielt es keine Rolle, ob sie die Browsingoberfläche unter Windows 8 nutzen, Plug-Ins mit ActiveX-Filterung oder einem  Browser-Add-On deaktiviert haben oder mit einem Gerät wie einem Telefon oder Tablet arbeiten, das keine Plug-Ins unterstützt.

Muster für richtiges Fallback

Ihre Website bietet eine höhere Benutzerfreundlichkeit, wenn Sie sich an den bewährten Methoden orientieren und zuerst die standardbasierten Features testen und nur auf Plug-Ins ausweichen, wenn dies erforderlich ist. Im folgenden Beispiel wird veranschaulicht, wie sie zuerst HTML5-Video suchen und verwenden und erst Plug-Ins nutzen, wenn das video-Element nicht verfügbar ist:


<video id="video1" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">

    <object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">

        <p>Please update your browser or install Flash</p>

    </object>
</video>


Weitere Informationen zur browserübergreifenden Unterstützung für HTML5-Audio und -Video, darunter Codecs und Untertitel, finden Sie unter Browserübergreifendes HTML5-Audio und -Video in der Praxis. Auf vielen Seiten wird diese Art von Fallback bereits praktiziert: Es werden Anzeigen angezeigt, wenn keine Plug-Ins vorhanden sind. Dies zeigt, dass dieser Ansatz eine praktische und skalierbare Lösung darstellt.

Wenn auf Ihrer Website verbesserte Inhalte mit einem Plug-In bereitgestellt werden, greifen Sie auf das folgende Fallback zurück:


<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">

    <video id="video1" width="640" height="360" controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">

        <p>Please update your browser or install Flash</p>

    </video>
</object>


Mit diesem Muster wird sichergestellt, dass alle Benutzer mit dem Plug-In dieses verwenden und für Benutzer ohne Plug-In die systemeigene Darstellung der Plattform verwendet wird. Wenn der Benutzer einen Browser ohne das Plug-In oder systemeigene Unterstützung verwendet, kann er versuchen, das Plug-In zu installieren.

Kurzfristige Übergangslösung

Das Vornehmen von Updates an einer Website kann einige Zeit in Anspruch nehmen. Wenn Sie den Benutzern vorübergehend vorschlagen müssen, die Website in Internet Explorer 10 auf dem Desktop anzuzeigen, können Sie die Website mit einem "META"-Tag oder "HTTP"-Header aktualisieren. Windows Internet Explorer benachrichtigt dann den Benutzer und stellt eine Option bereit, mit der er zum Desktop wechseln kann.


HTTP Header
X-UA-Compatible: requiresActiveX=true
META TAG
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>


Hinweis  Beachten Sie, dass der Benutzer möglicherweise ein Gerät verwendet, z. B. ein Telefon, auf dem vorhandene ActiveX-Steuerelemente auch in Internet Explorer für den Desktop nicht ausgeführt werden. Einige dieser Geräte verfügen außerdem nur über einen kleinen Bildschirm, und es sind ausschließlich Fingereingaben möglich. Dies funktioniert nicht immer gut mit ActiveX-Steuerelementen oder dem Desktop-Browsing. Es sollte nur ein letzter Ausweg sein, das Desktop-Browsing für die Benutzer zu erzwingen, wenn kein vergleichbarer Fallbackinhalt vorhanden ist.

Debuggen von Problemen beim Browsing in der neuen Windows-Benutzeroberfläche

Der einzige Unterschied zwischen dem Verhalten von Websites in den beiden Browsingoberflächen ist die Unterstützung von Plug-Ins. Wenn Sie die Verwendung ohne Plug-Ins auf dem Desktop emulieren möchten, um Websiteprobleme mit den F12-Entwicklertools zu debuggen, aktivieren Sie die ActiveX-Filterung:  "Extras->Sicherheit->ActiveX-Filterung".

Wenn Ihnen weitere Unterschiede bei der Funktionsweise der Websites auffallen, melden Sie diese über Connect.

Erstellen einer Website mit Fingereingabe

Internet Explorer 10 unter Windows 8 ist der erste Browser, bei dem die Benutzer unter einer Vielzahl von Eingabegeräten auswählen können: Fingereingaben, Stift und Maus. Kunden, die Ihre Website mit Internet Explorer 10 anzeigen, verfügen möglicherweise über eines oder mehrere dieser Eingabegeräte. Obwohl die Windows 8-Benutzeroberfläche speziell für die Fingereingabe konzipiert wurde, ziehen einige Kunden vielleicht Maus und Tastatur vor, während andere die Fingereingabe bei der bekannten Desktop-Version bevorzugen.

Sie dürfen daher auf keinen Fall voreilige Schlüsse über die Eingabemethode des Benutzers ziehen. Stattdessen sollte mit der Featureerkennung ermittelt werden, welche Funktionen das Gerät unterstützt.

Erkennen der Fingereingabe

Im folgenden Beispiel wird veranschaulicht, wie in der App entschieden werden kann, ob die Fingereingabe bereitgestellt werden kann oder nicht:


if (window.navigator.maxTouchPoints) {
        // user has touch hardware
    }
    else {
        // user does not have touch hardware
    }


Wenn Sie wissen möchten, wie viele Berührungspunkte verfügbar sind, weil z. B. für ein Spiel mindestens drei Berührungspunkte benötigt werden, ändern Sie den Code für die Erkennung wie folgt:


    if (window.navigator.maxTouchPoints >= 3) {
        // user has at least three touch points 
    }
    else if (window.navigator.maxTouchPoints) {
        // user has only one or two touch points
    }
    else {
        // user does not have touch hardware
    }


Verwandte Themen

Browsen ohne Plug-Ins

 

 

Anzeigen:
© 2014 Microsoft