Beiträge tagged mit html5

Alle Beiträge

Sencha Animator veröffentlicht

Sencha hat  die 1.0 Version von Sencha Animator veröffentlicht. Dabei handelt es sich ähnlich wie bei Tumults Hype oder Adobes Edge um ein HTML5 Animationstool mit dessen Hilfe auf schnelle und einfache Art CSS3 Animationen erstellt werden können. Hierzu dient, wie schon bei Adobe Flash, eine Timeline als Werkzeug. Das Tool wirkt aufgeräumt und ist einfach zu Bedienen. Schon nach wenigen Versuchen lassen sich ansehnliche Ergebnisse erzielen.

Eine Testversion für 30 Tage ist kostenlos erhältlich, wer sich das Tool danach zulegen möchte, muss für eine Einzelplatz-Lizenz $199 bezahlen. 

Im Gegensatz zu Hype bietet Sencha Aniamtor mehr Funktionen und richtet sich damit schon eher an Profis. Adobes Edge bietet in etwa den gleichen Funktionsumfang, ist aber derzeit noch Beta.

Inwieweit solche Tools Adobes Flash endgültig den Rang als das Anmitionstool für das Web ablösen wird sich zeigen. 

Vor allem für mobile Webseiten sind HTML5 Animationen aber heute schon das Mittel der Wahl. 

Google Swiffy - SWF Dateien nach HTML5 konvertieren

Google hat mit swiffy die Tage ein neues Werkzeug veröffentlicht, mit dem es Möglich ist, Adobe SWF-Dateien nach HTML5 zu konvertieren.

Swiffy by Google

Das Tool konvertiert natürlich keine Flash-Videos, aber Actionscript2 (Flash8) basierte Animationen und Programme lassen sich damit für HTML5 aufbereiten.

Hier  findet man ein paar Beispiele, was Swiffy bisher leistet.

Aus der SWF-Datei wird dabei ein komplexes JSON-Array erzeugt, welches anschließend von der Swiffy-Bibliothek weiterverarbeitet wird. Letztlich wird daraus dann Javascript-Code erzeugt, der mittels CSS3-Transformationen und Javascript-Logik die umgewandelte Flash-Datei zu neuem Leben erweckt.

Das Ganze funktioniert recht ordentlich mit WebKit-basierten Browsern.

Viel Spaß beim konvertieren.

HTML5 Animations-Tool

Hype ist ein relativ neues Tool für OS-X, mit dem sich schnell HTML5 Animationen fürs Web und mobile Browser erstellen lassen. 

Wer keine Lust mehr auf Flash hat, oder aus bekannten Gründen (Steve Jobs mag Flash nicht) darauf verzichten muss, kann jetzt mit Hype Bewegung auf seine Seiten bringen.

Das Tool bietet einen WYSIWYG Editor und einen Timeline Editor mit Key-Frames, ähnlich der Flash IDE. Das kleine Helferlein gibt es im Mac App-Store  und kostet zum Einführungspreis gerade mal 23,99 Euro. 

Timeline

Der erste Eindruck von dem Tool ist sehr gut. Es bedarf kaum Einarbeitungszeit und nach wenigen Minuten kann man erste Ergebnisse bereits im Browser betrachten.  Hype hat vielleicht bald schon das Zeug zum Flash-Nachfolger. Vergleichbar ist das Tool mit Sencha Animator, Hype ist jedoch einfacher zu Bedienen und wohl auch schon aus der Beta-Phase hinausgewachsen. 

Fazit: Zugreifen lohnt sich. 

Modernisierung einfach gemacht

Modernizr ist ein weiteres kleines Javascript, dass einem dabei hilft auch ältere Browser etwas zu entstauben und neuen Glanz in die Bude zu bringen.

Dabei rüstet es aber im Gegensatz zu html5.js oder ie-9.js keine fehlende HTML5- bzw. CSS3-Unterstützung nach, sondern spielt seine Stärke durch sehr gute Erkennung der Browserfähigkeiten aus.

Auf der Homepage  von modernizr wird dies sehr schön dargestellt. Ein Besuch dieser Seite ist es schon deshalb einmal Wert, um zu sehen was der eigene Lieblingsbrowser so alles drauf hat. 

Einmal erkannt welcher Browser gerade vorbeischaut, fügt modernizr Klassen an die jeweiligen HTML-Elemente und bietet dadurch weitere Hooks und Kontrollmöglichkeiten.

Ein Beispiel von der modernizr-Website zeigt wie man sich das vorstellen darf:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

 Modernizr arbeitet dabei geschickt mit yepnope zusammen  und unterstützt auch eine Menge bereits vorgefertigter polyfills. Passende Fallback-Skripte dazu gibt es bei github zum download.

yepnope.js der schlauere Resource Loader

&ldquoA conditional loader for your polyfills&rdquo bezeichnet yepnope ihren cleveren Resource-Loader.  Dabei handelt es sich um einen asynchronen Loader, der flink arbeitet und dabei hilft, nur die Skripte zu laden, die auch tatsächlich auf dem jeweiligen Browser benötigt werden und gegebenenfalls Fallbacks (polyfills) für den Browser nachzuladen.

Als sehr praktisch erweist sich das, wenn man z.B HTML5 und CSS3 Seiten für die neusten Browser entwickelt, dabei aber die &ldquoaltgedienten&rdquo Browser wie Internet Explorer oder Firefox 3 nicht ins offene Messer laufen lassen will.

Yepnope fungiert dabei als Javascript Loader, der die Polyfills erst bei Bedarf nachlädt und dabei selbst als intelligente Weiche arbeitet.  Yepnope.js ist mit nur 1,6 KB (GZip,minified) erstaunlich schlank.

Ein Test Objekt hat bei yepnpope.js immer folgenden Aufbau:

yepnope([{
  test : /* boolean(ish) - Something truthy that you want to test             */,
  yep  : /* array (of strings) | string - The things to load if test is true  */,
  nope : /* array (of strings) | string - The things to load if test is false */,
  both : /* array (of strings) | string - Load everytime (sugar)              */,
  load : /* array (of strings) | string - Load everytime (sugar)              */,
  callback : /* function ( testResult, key ) | object { key : fn }            */,
  complete : /* function                                                      */
}, ... ])

So kann yepnope.js z.B. Resource Fallbacks laden und nebenher abhängige Skripte laden. Hier ein Beispiel aus der yepnope.js Dokumentation:

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js')
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin()
    })
  }
}])


Alles in allem ein wirklich schlauer Loader, der einem das Entwicklerherz höher schlagen lässt.


Feed abonieren


Blog Tags


Tag Cloud


Blog Hosting

tumblr logo