Interessante Neuigkeit für Webdesigner, die schon HTML 5 einsetzen: Bei Google gibt es jetzt ein Tool mit dem Namen Swiffy, das Flash-Dateien in HTML 5 umwandelt. Diese Dateien kann man nach der Umwandlung auch auf Geräten anzeigen, die Flash nicht unterstützen wie Apple Tablets und Smartphones.

Im Google Code Blog erklärt der Swiffy Product Manager Marcel Gordon, dass es sich um eine frühe Vorabversion handelt, die noch nicht alle Flash-Inhalte übersetzen kann. Bei Anzeigenbannern und Animationen klappt das aber schon recht gut, man findet einige Beispiele auf der Swiffy-Webseite. Die mit Swiffy erzeugten Dateien sind kaum größer als die Flash-Vorlagen, Google nennt da 10 %.

Swiffy verarbeitet SWF-Dateien als Quelle. Wenn Sie auch FLA-Dateien konvertieren möchten, schauen Sie sich das Tool Wallaby von Adobe an.

Der Präsident und CEO von Adobe, Shantanu Narayen äußerte sich bei der Vorstellung der Quartalsergebnisse positiv zur Zukunft seines Produktes Flash.

Flash wurde schon 1997 als interaktive, multimediale Lösung von Macromedia veröffentlicht. Die Firma wurde 2005 für 3,4 Milliarden US-Dollar von Adobe übernommen. Zu Beginn wurden Flash-Animationen überwiegend als Intros vor Webauftritte geschaltet – eine seit einigen Jahren ziemlich überlebte Nutzung. Heute ist die Hauptnutzung beim Streamen von Videodateien und bei animierten Werbebannern zu sehen.

Da Flash eine proprietäre Lösung ist und ohne ein passendes Plugin für den Browser nicht läuft, aber auch wegen des schlechten Umgangs von Flash mit den Ressourcen warten die Entwickler von Internetseiten schon lange auf freie Alternativen, deren Zeit jetzt mit HTML 5 gekommen ist. Und damit ist die Zeit von Flash vorbei, selbst wenn der Adobe-Vorstand das noch nicht sehen will.

Auf Apple’s neuen iPhones und iPads läuft Flash nicht mehr, so dass deren Nutzer nach Angaben von Adobe auf 70-75% der Online-Videos und Webspiele verzichten müssen. Wohlweislich redet Adobe nicht darüber, dass Videostreamer wie YouTube oder Vimeo schon flashfreie Videoplayer anbieten, die die Videos ohne Adobe-Unterstützung abspielen.

Adobe selbst nutzt inzwischen übrigens auch immer mehr HTML 5.

Man konnte es  im Docs Blog, im Enterprise Blog und im Gmail Blog der Fa. Google nachlesen: Google wird die Unterstützung für ältere Browser ohne HTML 5 bei den Google Apps aufgeben. Das sind im einzelnen Firefox 3.5, Internet Explorer 7 und Safari 3. Mit diesen älteren Browsern bekommt man Probleme mit einigen Funktionen zum Beispiel in Gmail, Google Calender, Google Docs oder Google Sites. Es könnte sogar passieren, dass diese Anwendungen mit den älteren Browsern überhaupt nicht mehr arbeiten.

Stattdessen empfiehl Google die aktuellsten Versionen der Browser Chrome, Firefox, Internet Explorer und Safari. Der Branchenriese bezeichnet diese neuen Browser nicht nur als modernen Komfort, sondern als Notwendigkeit für die Zukunft.

Wenn ein Video auf Ihrer HTML 5-Website möglichst in allen Browsern, die HTML 5 unterstützen, ablaufen soll, brauchen Sie die Video-Datei in drei verschiedenen Formaten: MPEG4, OGV und WEBM. Zur Umwandlung Ihres Videos in die entsprechenden Formate können Sie Freeware-Tools wie zum Beispiel  XMedia Recode verwenden.

Die Einbindung des Videos in die Internetseite wird mit dem <video> – Tag realisiert:

<video preload controls width=300 height=177 poster= suleitec.jpg>
<source src=suleitec.mp4 type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src= suleitec.ogv type=’video/ogg; codecs=”theora, vorbis”‘>
<source src= suleitec.webm type=’video/webm; codecs=”vp8, vorbis”‘>
Leider kann Ihr Browser das Video nicht zeigen.
</video>

Mit der preload-Option wird die Videodatei vorgeladen und die controls-Option sorgt für die Darstellung der Steuerelemente (Start, Pause, Stopp usw.). Mit der poster-Option kann man ein Vorschaubild des Videos anzeigen.

Eine der netten Neuerungen in HTML 5 ist die Möglichkeit, mehrere Dateien über ein Dateieingabefeld hoch zu laden. Man braucht zwar dazu einen Browser, der HTML 5 so weit unterstützt, aber das werden ja immer mehr wie Firefox 4, der neueste Chrome von Google oder Safari 5.0.4. Der Internet Explorer 9 kann es leider noch nicht.
Im Grunde ist die Programmierung des HTML 5 – Formulars recht einfach:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML5 Mehrfach-Dateiupload</title>
<link rel="stylesheet" href="scr.css" media="screen">
<style media="screen"></style>
</head>
<body>
<form action="anzeige.php" method="post" enctype="multipart/form-data">
<input type="file" value="" name="upload[]" multiple>
<button type="submit">Hochladen</button>
</form>
</body>
</html>

Wenn dann der Auswahldialog kommt, kann man mehrere Dateien (zum Beispiel Fotos) markieren, die dann über das Dateieingabefeld “upload[]” zum Server übertragen werden, wenn man die Schaltfläche “Hochladen” anklickt. Das dadurch aufgerufene PHP – Programm “anzeige.php” gibt einfach nur die Inhalte des $_FILES-Arrays aus, so dass man die übertragenen Dateien sehen kann:

<?php
print_r( $_FILES );
?>

Der seit vorgestern erhältliche neue Firefox 4-Browser scheint den Surfern besser zu gefallen als Microsofts neuer Internet Explorer 9. Während der Microsoft-Browser in den ersten 24 Stunden nach Freigabe 2,3 Millionen Mal heruntergeladen wurde, holten sich den Firefox 4 in diesem Zeitraum mehr als doppelt so viele Interessenten.

Mozillas Firefox 4 ist besonders in Europa gefragt, und in Europa wurde er aus Deutschland am häufigsten abgerufen.

Bleibt zu hoffen, dass bei der Erstellung von Webseiten durch die Browser der neuen Generationen weitgehend auf Browserweichen und Ähnliches verzichtet werden kann, denn alle bemühen sich, Standards wie CSS 3 oder HTML 5 korrekt zu unterstützen.

Flash ist eins der meist installierten Plugins für Webbrowser. Adobe hat mit Flash nahezu einen Standard für Animationen auf Internetseiten erzeugt. Flash gibt dem Ersteller von Webseiten viele Möglichkeiten, belastet aber auch den PC sehr stark und es läuft vor allem nur mit dem Flash-Plugin von Adobe.

Hier kann das neue Element Canvas in HTML 5 eine Wende einleiten, die meisten Browser unterstützen schon HTML 5. Spätestens, wenn der Internet-Explorer 9 von Microsoft, der HTML 5 dann auch beherrscht, verfügbar ist, wird Canvas bei der Webseiten-Gestaltung eine immer größere Rolle spielen und das proprietäre, ressourcenhungrige Flash auf die Plätze verweisen.

Eine Schlüsselrolle spielt dabei auch die Fa. Apple, auf deren iPhones und iPads wegwn des Ressourcenhungers Flash nicht unterstützt wird. Interessanterweise hat Apple auch das Canvas-Element bei der Entwicklung der Webkit-Engine eingeführt und standardisiert, so dass es Bestandteil von HTML 5 wurde.

HTML 5 hält zusammen mit CSS 3 viele Neuerungen für uns bereit. Allerdings musste auch einiges Altes dafür weichen.

Das Beginnt mit dem Ende von <applet> und einigen Textauszeichnungen, nämlich <big>, <strike>,<tt>, <u> und <s>. Das Tag <acronym> ließ sich kaum von <abbr> (Abkürzung) unterscheiden. Auch <dir> und <isindex> stammen aus einer anderen Zeit und sind jetzt nicht mehr dabei. Die Tags <center>, <font> und <basefont> gibt es nicht mehr.

Auch die Attribute wurden ausgedünnt. Das Attribut name gibt es jetzt nur noch bei Formular-Elementen, und die Attribute width, height, align und border wurden wie auch andere stark eingeschränkt.

Und endlich sind auch die leidigen Frames Geschichte. Bei aktuellen Seiten kommen sie sowieso kaum noch vor. Und wenn man unbedingt Frames braucht, kann man sie mit dem <iframe>-Tag nachbauen, denn das soll es weiterhin geben.

Eine der Grundlagen von HTML 5 hieß Web Forms 2.0. Auf dieser Basis wurden die Formularmöglichkeiten von HTML stark erweitert. Die meisten Neuerungen kommen als diverse neue Attributwerte von <input type=”…”> daher.

Bis dato konnte man damit nur Textfelder, Checkboxen, Radiobuttons und Submit-Schaltflächen erzeugen, jetzt gibt es viele Spezialvarianten wie number, tel, url, color oder email. Opera zum Beispiel erkennt diese Typen heute schon und hält dazu Eingabehilfen wie die Pfeiltasten zum herauf- und herunterzählen beim Typ “number” vor.

Der Vorteil der neuen Datums- und Zeitfelder wie datetime, datetime-local, date, month, week oder time ist offensichtlich: Der Browser stellt dabei eine Datumsauswahl als kleinen Kalender dar, über den man das Datum “picken” kann. Die Uhrzeiten werden über Pfeiltasten eingestellt.

Selbst Schieberegler und Comboboxen kann man jetzt ohne Javascript erzeugen. Eine Auswahl von URLs läßt sich zum Beispiel so realisieren:

<input list=”webseiten”>
<datalist>
<option value=http://www.homepage-anleitung.de>
<option value=http://www.webwork-magazin.net>
</datalist>

Canvas heißt die Technik, mit der man direkt im Browser zeichnen kann. Canvas heißt Leinwand – der Name passt also für die Grafiken, die über die Javascript-Schnittstlle kontrolliert werden. Hier ein Canvas-Beispiel, das einen Kreis malt:

<canvas id=”kreis” width=”200″ height=”200″>Ihr Browser kann noch kein Canvas!</canvas>
<script>
var canvas = document.getElementById(‘kreis’);
if (canvas.getContext) {
var c 0 canvas.getContext(’2d’);
c.beginPath();
c.arc(75,75,50,0,Math.PI*2,true);
c.fill();
}
</script>

Die Steuerung durch Javascript macht Canvas besonders für Animationen bis hin zu kompletten Browserspielen interessant. Die Webkit-Entwickler, denen wir Canvas verdanken, arbeiten sogar daran, die Grafikbibliothek OpenGL ES mit Canvas ansprechen zu können. Mit dieser Variante sind dann nicht direkt zur HTML-Spezifikation zählt, lassen sich dann dreidimensionale Objekte im Browser darstellen und animieren.