HTML5Tutorial

Die Diskussion, wie sich HTML5 im Vergleich mit Adobes Flash schlägt, ist ja schon seit geraumer Zeit in Gange. Auch hier auf dem Blog wurde schon darüber berichtet. Doch wie viele von uns haben bereits wirklich den direkten Vergleich bestimmter Features gemacht? Wie schneiden dei beiden Technologien bei Audio- und Video-Playback ab? Oder beim Rendern von Animationen, Grafiken oder Text?

Diesen Fragen nimmt sich die Website Adobe FLASH vs. HTML5 von Alex Benz auf beeindruckende und zugleich einfache Art und Weise an. Die als Bachelor Thesis an der HS Offenburg entstandene Arbeit zeigt zwei Überlagerte Websites mit gleichen Funktionen, eine davon mit Adobe FLASH und eine mit HTML5 / CSS3 / JS umgesetzt. Per Slider kann zu jedem Zeitpunkt zwischen den einzelnen Ansichten hin- und her gewechselt werden. So kann man direkt vergleichen. Die Seite knöpft sich dabei die Themen Animation, Typografie,Video und Audio vor, die wohl auch zu den interessantesten bei diesem Vergleich gehören.

Absolut sehenswert und super umgesetzt. Am besten mit Chrome oder Firefox ansurfen. Hier geht’s zur Website!

Was haltet ihr von der Seite? Wer macht eurer Meinung nach das Rennen?

Nach Wallaby bringt Adobe ein weiteres Tool, das die HTML5 Entwicklung weiter voran treiben könnte. Adobe Edge soll, ähnlich wie das bereits vorgestellte Hype, das Erstellen von HTML5-Animationen per Timelineanimation ermöglichen. Hierfür verwendet Edge ein auf jQuery basierendes Framework.  Das Endprodukt soll in allen modernen Browsern sowohl auf Desktops als auch auf Smartphones laufen. Eine Vorschauversion der Software kann in den Adobe Labs heruntergeladen werden.

Adobe engagiert sich mehr und mehr im HTML5-Bereich. Ist das eine Erklärung, dass die Entwicklung an Flash irgendwann eingestellt wird? Was denkt ihr?

Bereits gestern hat der prominenteste und größte HTML5-Verfechter Google ein neues Projekt mit dem Namen Swiffy vorgestellt. Das Online-Tool soll es ermöglichen, Flash-Anwendungen und Animationen in Form von SWF-Dateien per Upload in HTML5 zu konvertieren. Die erstellte HTML5-Anwendung oder Animation soll dann in den neueren Webkit-basierten Browsern wie Safari und Chrome lauffähig sein. Ein eigener Test mit Firefox 5 zeigte aber auch hier ordentliche Ergebnisse.

Googles Swiffy ist bisher noch experimentell und es werden nicht alle Funktionen von Flash unterstützt. Google selbst nennt als aktuellen Stand Flash 5, dessen Funktionen größtenteils mit Swiffy umsetzbar sein sollen. Selbst grundlegende ActionScript 2-Anweisungen kann Swiffy in JavaScript übersetzten. Trotzdem warnt Google vor zu großen Erwartungen.
Technisch gesehen generiert Swiffy eine JSON-Datei, die per HTML, SVG und CSS gerendert wird. Die so erzeugte Anwendung oder Animation ist in den meisten Fällen ein wenig größer als das original SWF.  Read more »

Wenn es um HTML5 geht, geht es oft im selben Atemzug auch um Adobes Flash. Immer die selben Fragen tauchen auf:

• Wo liegen die Vorteile?
• Kann Flash / kann HTML5 bestehen?
• Was ist einfacher zu erlernen?
• Was kann das eine, was das andere nicht kann?
• Auf welche Technologie sollte man seinen Fokus legen?
• …

Viele Blogautoren und Fachleute haben sich dieser Fragen bereits angenommen und versucht, sie zu beantworten. Oft mit ähnlichen Ergebnissen, die sich jedoch immer in der persönlichen Meinung und Einschätzung des Autors unterscheiden. Gerade eben kam ein Artikel von Rean John Uehara von 1stwebdesigner.com in meinen Newsreader, der dieses Thema wieder aufgreift und eine meiner Meinung nach gute Zusammenfassung mit Berücksichtigung vieler Aspekte liefert. Ich teile seine Meinung größtenteils. Jedoch wird ein Aspekt außen vor gelassen: die Frage nach der Entwicklungsumgebung. Flash wird meistens direkt mit HTML5 verglichen. Aber Flash ist meiner Meinung mehr als HTML5. Read more »

So, zurück zur neuen HTML5-Entwicklungsumgebung Hype. Ich hab mir das eben mal gekauft (wie gesagt: jetzt ist es noch billig) und versucht, ein erstes kleines Testprojekt umzusetzen – eine mehrseitige Website mit animierten Elementen. Hier möchte ich nun kurz beschreiben, wie sich Hype geschlagen hat und ob sich ein Vergleich mit Flash lohnt.

Die Installation geht Mac-einfach per App Store. Der Download ist nur 2,7 MB groß.Das Programm besteht nur aus einem einzigen Paket, d.h. es muss kein Installer durchlaufen werden. Die Paketdatei wird automatisch ins Programmverzeichnis von OS X kopiert. Nach dem Öffnen zeigt sich Hype sehr aufgeräumt und Mac-typisch. Ähnlich wie bei Keynote oder Pages gibt es zusätzlich zur obligatorischen Mac-Menüleiste eine Icon-Toolbar, ein Inspektor-Fenster und ein extra Fenster für die Farbauswahl. Die Textauswahl ist bei Hype in den Inspektor integriert. Die Bühne und die Timeline unten sind Flash-typisch. Auf der Bühne platziert man die Objekte und in der Timeline kann man die Keyframes festlegen und somit Animationen erstellen.

Das Hype-Fenster sollte Apple- & Flash-Benutzern vertraut vorkommen

Read more »