html-lernen.de

Bei Opera Software ist die Browser Version 11.60 erschienen. Neben Verbesserungen im Adressfeld, wurde der integrierte Email Client überarbeitet. Die weiteren Änderungen sind für Webseiten Entwickler und Browser Nutzer interessant. Die HTML Übersetzung (Parser) wurde überarbeitet.

Änderungen des Opera Browsers

• Überarbeitete Webeiten Generierung mit verbesserter HTML5 Unterstützung
• Die Tags Audio und Video haben weitere Attribute erhalten
• preload
• buffered
• seekable
• muted
• Eine API für HTML Microdaten
• Zwei neue Handler
• registerProtocolHandler()
• registerContentHandler()
• Volle Unterstützung des ECMAScripts V5.1 (Javascript)
• Cascading Style Sheet 3 (CSS3)
• Volle Unterstützung von radial-gradient
• Volle Unterstützung von repeated-radial-gradient
• Unterstützung der relativen Schriftgröße bei CSS und Skalierbare Vektor Grafiken (SVG)
• Erste Unterstützung von Cascading Style Sheet V 4 (CSS4)
• image-rendering Eigenschaft für die Tags integriert
• img
• canvas
• video poster
• background-image
• border image
• Die unterstützten Parameter sind
• auto
• optimizeSpeed
• optimizeQuality
• -o-crisp-edges
• Aufenthaltsort ermitteln
• JSON Api für Google neue Geolocation

 Fazit:

Der Browser arbeitet schnell und sicher. Dazu braucht der Browser im Gegensatz zu Chrome, Firefox und Internet Explorer wenig Speicher, daher eignet sich der Browser auch für ältere Geräte oder Netbooks mit wenig RAM Speicher. Opera ist bei der Integration von neuen Standards im Bereich HTML, CSS und Javascript einer der führenden Browser Hersteller.

Der HTML Befehl iframe wird häufig genutzt, um eine weitere Webseite innerhalb der aufgerufenen Webseite darzustellen. Allerdings kann dieser Bereich unter Umständen gehackt werden. Aus diesem Grund wird bei HTML5 eine neue Sicherheitsfunktion durch das Attribut sandbox zur Verfügung gestellt.

Mit dem Attribut sandbox können im iframe Einschränkungen gemacht werden

<iframe sandbox=”allow-same-origin">...</iframe>

1. Obwohl Scripting auf der Webseite erlaubt ist, gilt dies nicht für den Bereich der Sandbox. Die mit dem iframe eingebundene Webseite mit dem Attribut sandbox wird aber im DOM berücksichtigt.
2. Die eingebundene Webseite von einer anderen URL eingebunden werden, denn es werden sich keine Popup-Fenster öffnen. Eine Kommunikation der fremden Webseite über Datenbank APIs zum Speichern von Daten oder ähnlichen Funktionen ist möglich.

<iframe sandbox=”allow-top-navigation">...</iframe>

Bei dieser Einschränkung kann in den Webseiten innerhalb des iframes Bereichs navigiert werden. Eine Ausweitung der Navigation auf die übergeordnete Webseite ist nicht möglich.

<iframe sandbox=”allow-forms">...</iframe>

Dieses Attribut erlaubt keine Übertragung von Formulardaten innerhalb des Sandbox Bereichs.

<iframe sandbox=”allow-scripts">...</iframe>

Bei diesem Attribut wird im Sandbox Bereich das Scripting nicht erlaubt, wenn eine der nachfolgenden Bedingungen nicht erfüllt ist.

1. Der User-agent unterstützt Scripting.
2. Der Nutzer hat für diese Webseite das Scripting zugelassen
3. Für die Webseite hat kein Flag für Scripting in der Sandbox. Diese Bedingung gilt für den Moment, in dem die Webseite im Browser aufgebaut wird.

Fazit:

Das Attribut sandbox bietet bei eingebundenen Webseiten eine höhere Sicherheit. Bis aber diese Funktionen in den Browsern genutzt werden kann, wird teilweise noch einige Zeit verstreichen. Denn die komplette Implementierung von HTML5 und CSS3 in die Browser dauert nach meiner Erfahrung mehrere Jahre. Bis dahin müssen Entwickler genau prüfen, welche Webseiten mit Hilfe des Tag <iframe> verbunden werden!

HTML5 wird von den Entwicklern der Browser immer mehr implementiert. Dazu habe ich bei heute produktiv nutzbaren Browsern die Unterstützung der in HTML5 neu definierten Formularfelder geprüft.

Liste der Browser zum HTML5 Formulartest

• Opera 11
• Chromium 8
• Firefox 3.6.13
• Internet Explorer 8

Getestete HTML5 Formularfelder

• Zahlenauswahl
• Schieberegler
• Datumseingabe
• Zeitauswahl
• Farbauswahl
• Sucheingabe
• Telefonnummer
• E-mail Adresse
• URL Eingabe

Wenn die Darstellung der neuen Formularfelder nicht möglich ist, dann sagt die Spezifikation aus, dass ein Standard Formularfeld angezeigt wird.

Die zum Test verwendete HTML5 Webseite kann auch von Ihnen genutzt werden.

HTML5 Testseite fuer Formularfelder

Testergebnisse der unterschiedlichen Browser

Opera 11

Die Formular Unterstützung des Opera 11 ist am weitesten fortgeschritten, wie Sie in den nachfolgenden Bildern entnehmen können.

Opera Formularfeld Zahlenauswahl

Opera Formularfeld Schieberegler

Opera Formularfeld Kalendereingabe

Opera Formularfeld Farbauswahl einfach

Opera Formularfeld Farbauswahl2

Opera Formularfeld Zeitauswahl

Google Chromium 8

Beim Google Browser Chromium 8 wurde mit der Implementierung der HTML5 Formularfelder begonnen, wie sie den Grafiken entnehmen können.

Chrome Formular Zahlenauswahl

Chrome Formular Schieberegler

Alle weiteren Formularfelder werden noch nicht unterstützt.

Mozilla Firefox 3.6.13

Der Browser Firefox 3.6.13 von Mozilla unterstützt noch keine Formular Felder von HTML 5. Der Nachfolger Mozilla Firefox 4 ist noch zu testen, wenn er produktiv freigegeben wird.

Firefox 3.6 Formular Zahlenauswahl

Firefox 3.6 Formular Schieberegler

Testergebnis Internet Explorer 8

Der Microsoft Internet Explorer 8  kann keines der neuen Formularfelder darstellen. Auch hier ist ein Nachfolger, der Internet Explorer 9 im Beta Test. Allerdings wird der neue Browser nicht für Windows XP zur Verfügung stehen.

Internet Explorer 8 Formularfeld Zahlenauswahl

Fazit:

Bei der Implementierung der neuen HTML5 Formularfelder ist von den Herstellern der Browser noch einiges zu tun. Gerade Formularfelder werden im Business Bereich und bei Web 2.0 oft benötigt. Als Ausweichmöglichkeit bleibt das Programmieren der fehlenden Funktionen mit Javascript, PHP oder anderen Scriptsprachen. Dies ist auch zur Unterstützung der älteren Browser Versionen notwendig.

Microsoft hat sich sich zum Ziel gesetzt HTML5 zu unterstützen. Dazu wird seit kurzem die neue Webseite HTML5Labs angeboten. Dort werden experimentelle und noch nicht produktiv freigegebene Prototypen angeboten, die sich zum Beispiel an den W3C Working Drafts orientieren.

Verfügbare Prototypen auf Microsoft HTML5 Labs

• IndexedDB
  Hier werden Experimente mit der Speicherung von größeren, strukturierten Daten angeboten
• WebSockets
  Mit Hilfe dieser Spezifikation wird die Kommunikation über den TCP Socket vereinfacht.

Das World Wide Web Consortium W3C hat einen Vergleichtest bezüglich der Umsetzung von HTML5 in den aktuellen Browsern durchgeführt. Das Motto der Tests ist:

“Interoperalität ist die Fähigkeit von zwei oder mehr Systemen oder Komponenten Informationen auszutauschen und die ausgetauschten Informationen zu nutzen.”

Das ist die Definition des Instituts von Elektro- und Elektronik Ingenieuren (IEEE)

HTML5 soll bei den unterschiedlichen Browsern eine einheitliche und konsistente Darstellung der Informationen bieten. Der Funktionsumfang von HTML5 soll in den verschiedenen Browsern zur Verfügung stehen. Dies ist vor allem für Webdesigner wichtig, die Webseiten entwickeln wollen.

Das W3C hat die Browser getestet

• Internet Explorer Platform Preview 6
• Google Chrome 7.0.517.41 beta
• Firefox 4 Beta 6
• Opera 10.60
• Apple Safari 5.0.7533.16

Dabei wurden die Elemente attributes, audio, canvas, getElementsByClassName, foreigncontent, video und xhtml5 verglichen. Dies ist nur ein Teil der von HTML5 gebotenen Möglichkeiten.

Am besten abgeschnitten hat bei diesen Tests die Preview Version des Microsoft Internet Explorer 9, gefolgt von Googles Chrome, dem Mozilla Firefox, dem Opera Browser und am Ende Apples Safari.

Der getestete Browser von Opera ist aus meiner Sicht veraltet. Aktuell ist die Version 10.63 und es gibt zur Zeit eine Beta Version 11. Diese hat einige Neuerungen zu HTML5, die die Version 10.60 noch nicht enthält.

Details zu den Testergebnissen finden Sie auf der Webseite des W3C.

WOFF ist das von W3C vorgeschlagene Format, um Schriften zusammen mit den Webseiten an den Nutzer zu übermitteln. Warum muss eine Schrift an den Browser übermittelt werden? Browser unterstützen als Standard die Schriften Times New Roman, Arial und Courier. Andere Schriftarten werden durch ähnliche ersetzt, wenn das Betriebssystem die Schriftenschnitte (Fonts) nicht zur Verfügung hat. Dann wird manchmal das Design der Webseite unsauber dargestellt.

TrueType, Open Font, SVG (Skalierbare Vektor Grafik) und OpenType Formate können verlustfrei in das Web Open Font Format (WOFF) konvertiert werden. Die Lizenzbedingungen der Schriften sind zu beachten.

Eigenschaften der WOFF Schriftdateien

• WOFF Schriftdateien sind immer komprimiert.
• Der Header hat eine Länge von 44 Byte.
• Der Ordner TableDirectory enthält Informationen über die Schriften.
• Der Ordner FontTables enthält die komprimierten Schriften.
• Im optionalen Ordner ExtendedMetadata werden weitere Informationen über die Schrift im XML Format vorgehalten.
• Der Ordner PrivateData enthält Informationen über den Schriftdesigner, Hersteller und Schriftgießerei.

Nutzung in der Webseite

Die geladene WOFF Schriftdatei kann mit Hilfe der CSS Deklaration @font-face genutzt werden.

WOFF Konverter und ladbare Schriften

Die Webseite http://www.fontsquirrel.com bietet einen Schriftenkonverter und verschiedene fertige WOFF Schriften zum Download an.

Das World Wide Web Consortium hat für HTML5  einige Änderungen seit dem  04.03.2010 vorgestellt.

Änderungen bei HTML5

• Das ping Attribut wird es in HTML5 nicht mehr geben.
• Der <title> Tag ist nicht mehr zwingend notwendig in Dokumenten die im <iframe> dargestellt werden. Das gilt auch für andere Szenarien, wo der Titel bisher genutzt wurde.
• Das Attribut keywords ist nun ein Standard bei dem Tag <meta>.
• Bei den <iframe> Tag wurde das Sandbox Attribut allow-top-navigation hinzugefügt. Damit kann in einer in einem iframe eingebundenen Webseite navigiert werden.
• Der Tag <wbr> wurde hinzugefügt.
• Ein alternatives Schlüsselwort des rel Attributes kann als Zeiger für RSS Feeds verwendet werden, wenn der Feed  keine Alternative für das Dokument darstellt.
• Das Atom Mapping wurde in HTML5 entfernt.

Nach 14 Jahren Erfahrung bei der Prüfung von HTML, Cascading Style Sheets (CSS) gibt es nun den Nachfolger W3C Unicorn. Der neue Dienst kann nicht nur HTML und CSS prüfen, sondern prüft auch Webseiten für mobile Geräte und RSS-Feeds.

Damit richtet sich W3C Unicorn  an

• Server Administratoren, die einen eigenen Unicorn Service aufbauen wollen
• Entwickler, die die neuen Services nutzen oder weiter entwickeln wollen
• Nutzer, die Ihre Webseiten prüfen wollen

Die Unicorn Benutzeroberfläche steht in 20 Sprachen zur Verfügung.