Share
Eine der größten Summenquellen der vergangenen Woche war die Ankündigung der Edge-Vorschau durch Adobe. Die Leute haben viel darüber geredet, aber wenige scheinen wirklich einige der Ideen oder Technologien zu verstehen, die dahinter stehen.
Heute möchte ich mit Ihnen ein wenig über die Edge-Vorschau sprechen und sagen, warum Sie zu diesem Zeitpunkt vorsichtig optimistisch sein sollten.
Das Erstellen von Inhalten mithilfe eines auf Standards basierenden Ansatzes ist schwierig. Hier kommt Edge ins Spiel.
Die Geburt und die Geschichte von Flash können zu einer sehr verwirrenden Lektüre führen: je nachdem, mit wem Sie sprechen, wird sie unglaublich geliebt oder gehasst. Die unbestreitbare Tatsache ist, dass Flash einer der Hauptgründe für die Verbreitung von Video- und interaktiven Medien im Web ist. Auf der anderen Seite wird es wegen seines geschlossenen Charakters und seiner Leistungsprobleme kritisiert.
Die Plattform selbst wird in naher Zukunft nirgendwohin gehen, aber Sie müssen unbedingt bemerken, dass Flashs Halt im Web in letzter Zeit gelockert hat.
Um den Aufstieg von HTML5 zu steigern und eine wachsende Zahl von Entwicklern, die offene Standards oder ein bestimmtes Unternehmen mit Fruchtgeschmack gegen Flash anführen, ist das Endergebnis, dass das Internet seit einiger Zeit nach einer offenen, auf Standards basierenden Alternative zu Flash sucht. Einer der Hauptgründe für die zunehmende Verbreitung von HTML5 und Bibliotheken wie jQuery ist auf Antagonismus und Apathie gegenüber der Flash-Plattform zurückzuführen.
Das Erstellen von Inhalten mit den neuen Technologien war jedoch alles andere als reibungslos. Hier kommt Edge ins Spiel.
Edge ist der Versuch von Adobe, in der Post-Flash-Welt relevant zu sein.
Edge ist ein Animationswerkzeug, das ideal für Designer ist, die Webinhalte erstellen möchten, die animiert sind, jedoch auf den offenen Standards basieren, die das Web unterstützen. Laut ihrer Website:
Adobe Edge ist ein neues Web-Motion- und Interaktions-Design-Tool, mit dem Designer animierte Inhalte mit Webstandards wie HTML5, JavaScript und CSS3 auf Websites bringen können.
Grundsätzlich ist Edge die Eintrittskarte für das Hinzufügen von animierten Inhalten, ohne auf externe Plugins wie Flash oder Silverlight zurückgreifen zu müssen.
In diesem Fall, oh ja, tun wir!
Ich fühle mich bestimmt so. Bevor Sie nach Ihren Mistgabeln suchen, lassen Sie mich das erklären!
Flash-Entwickler haben Zugriff auf sehr ausgereifte und sehr ausgereifte Entwurfswerkzeuge. Möchten Sie eine einfache Animation erstellen? Ein paar Klicks hier, einige Eingaben dort und fertig! Sie genießen es wirklich, eine komplette Umgebung zu verwenden, wenn es darum geht, ihren Inhalt zu erstellen.
Was passiert, wenn Sie standardbasiert vorgehen möchten??
Es ist nicht so einfach, ich kann dir so viel sagen. Sie müssen sich mit Code herumschlagen, ein wenig JavaScript lernen, sich langweilen, lernen, eine Bibliothek wie jQuery zu verwenden, sich wieder aufregen und dann herausfinden, dass Sie immer noch jede einzelne Animation per Hand programmieren müssen.
Während es für uns Dev-Typen in Ordnung ist, ist es für die künstlerischen Designer eher eine lästige Pflicht. Auf Standards basierende Entwicklung muss wirklich nicht schwer sein! Ich stelle fest, dass unternehmungslustige Entwickler Lösungen für diese entwickelt haben, aber keine von den großen Unternehmen von groß Inhalt.
Edge versucht, diesen Prozess zu rationalisieren, indem gängige Konzepte der Medienerstellung wie Zeitpläne und Stufen wiederverwendet werden, um die Lernkurve sanfter, einfacher und damit zugänglicher zu gestalten.
Die Vorschau ist ein schlanker 65MB Download und wird recht schnell installiert. Um Zugang zum Download zu erhalten, ist ein Adobe-Konto erforderlich. Es ist zwar kostenlos, aber es fügt dem Prozess einen unnötigen Schritt hinzu. 1999 angerufen, wollen sie ihre frivolen Anmeldungen zurück.
Und wenn Sie sich noch nicht sicher sind, wo Sie Ihre Kopie herunterladen möchten, können Sie sie hier herunterladen.
Der erste Eindruck der Vorschau ist ziemlich positiv. Es sieht sauber, gelassen und ordentlich aus. Wenn Sie in der Vergangenheit GoLive oder sogar Flash verwendet haben, sollte die Benutzeroberfläche weitgehend vertraut sein.
Das Bühne oder Segeltuch fungiert als erstes DIV, und wenn Sie der Zeichenfläche Elemente hinzufügen, werden diese hierarchisch mit dem Elementtyp hinzugefügt, der auf der Seite angezeigt wird.
Der Zeitleistenbereich ist einer der Schlüsselbereiche einer Animationssuite, und Edge enttäuscht nicht. Der gesamte untere Teil der Benutzeroberfläche wird vom Zeitleistenfenster dominiert.
Sie können alle Eigenschaften der Elemente anzeigen, die Sie bisher der Leinwand in der Timeline hinzugefügt haben. Das Erstellen einer Animation ist so einfach wie das Hinzufügen eines Keyframes. Geben Sie dazu die Informationen für den Frame an, und Edge füllt den Rest wie erwartet hervorragend aus.
Diese Vorschau befindet sich offensichtlich im Alpha-Modus. Der erste Fokus der Vorschau liegt auf dem Hinzufügen einfacher Formen und Animationen. Das ist so ziemlich alles, was auch in der Benutzeroberfläche vorhanden ist.
Benutzer können Text, Bilder und einfache Formen relativ einfach hinzufügen - einfach mit dem Mauszeiger darauf klicken und ziehen. Sie können auch verschiedene Merkmale des Inhalts anpassen, z. B. Farbe, Neigung, Deckkraft, Drehung und vieles mehr. Werfen Sie einen Blick auf das Bild unten, um eine Vorstellung davon zu bekommen, worüber ich spreche. Wenn Sie bereits mit Animationssoftware vertraut sind, sollten Sie sich wie zu Hause fühlen.
Sie können auch vorgefertigte Elemente, einschließlich Bilder, in Ihre aktuelle Leinwand importieren.
Da dies nicht wirklich ein Tutorial für die Verwendung von Edge ist, werde ich vorausgehen und eine vorgefertigte Demo herunterladen, die Sie hier herunterladen können.
Schauen wir uns die Verzeichnisstruktur eines Edge-Beispielprojekts an:
Keine Überraschungen hier. Ihre Animationen werden jetzt aus Ihren bekannten Trifekten von Webtechnologien - HTML, CSS und JavaScript - erstellt.
Im Gegensatz zur allgemeinen Meinung verwendet Edge eine Mischung aus jQuery und CSS3, um den Inhalt der Leinwand zu animieren. Ja, das haben Sie richtig gehört - jQuery erledigt die meiste Arbeit hinter Edge.
Wenn Sie sich den Code mit Firebug genauer ansehen, werden Sie feststellen, dass viele DIV-Elemente mit jQuery verschoben werden. Hier ist zum Beispiel der tatsächliche Code, der in dem oben verlinkten Beispiel eingefügt wird. Nicht ganz hübsch.
Grundsätzlich bleibt jede Animation, die CSS3 ausführen kann, überlassen, da alle CSS3-Effekte hardwarebeschleunigt sind und somit eine gute Leistung erbringen. Der Rest bleibt für jQuery übrig.
Wenn Sie weiter im Code graben, werden Sie feststellen, dass alle Elemente, ihre Eigenschaften, Tweening-Informationen und der Rest als JSON-Datei gespeichert werden. Ich gehe davon aus, dass die Engine diese Informationen im Grunde analysiert, das DOM erstellt und die Handler anfügt.
Als schnelles Experiment wollen wir uns ansehen, was der Browser sieht:
Oh, oh. Es gibt buchstäblich nichts, was dort Sinn macht. Deaktivieren Sie JavaScript und Sie haben einen großen Haufen Nichts übrig. Fans von graziösem Degradation, erhalten Sie Ihre Mistgabeln.
Es wird als HTML5-Tool vermarktet und gut? Dies ist nicht HTML5-basiert. Noch.
Ich ging davon aus, von der Pracht der Leinwand oder des SVG geblendet zu werden. Nach einem Blick auf das DOM ist es offensichtlich, dass dort nicht einmal ein winziges Stück davon vorhanden ist. Um sicherzugehen, habe ich eine kurze Suche in den JavaScript-Dateien durchgeführt und nach dem Schlüsselwort für die Zeichenfläche gesucht, getContext . Unnötig zu sagen, dass nichts aufgetaucht ist. Der größte Fleck von HTML5 ist der Doctype. Sicher, Sie können SVG-Inhalte importieren, aber Sie können das Markup nicht anfassen.
Es ist ein wenig rätselhaft, warum Edge stattdessen keine der modernen Technologien verwendet. Wenn überhaupt, wird es als HTML5-Tool vermarktet und gut? Dies ist nicht HTML5-basiert. Unaufrichtiges Marketing oder Anzeichen für zukünftige Merkmale? Ich neige zu letzterem, während ich wirklich hoffe, dass Ersteres nicht stimmt.
Nee.
Aus Sicht der Entwicklung entspricht die Animation von DIVs der Verwendung von Tabellen für das Layout. Dies funktioniert jedoch auf Kosten der Eleganz und der Semantik. Canvas und SVG sind präzise entwickelt, um genau das zu tun, was Edge hier tut, und sind auf lange Sicht sinnvoller.
Selbst wenn die Canvas-Leistung auf den aktuellen Mobilgeräten nur eine untergeordnete Rolle spielt, gibt es keine Möglichkeit, die Leistung zu erhöhen, und es sollte die Einführung neuer Technologien nicht behindern.
Im Idealfall möchte man, dass innovative Apps ähnliche Spitzentechnologien verwenden. Denken Sie jedoch daran, dass dies immer noch eine Vorschau ist, eine frühe Alpha-Version.
In den Worten eines der Ingenieure hinter Edge bezüglich DIV-basierter Animation:
Wir haben mit DIVs angefangen, weil wir schnell etwas herausbringen wollten, mit dem die Leute spielen könnten. Ich sage, wir haben dort angefangen, weil sich Edge schnell weiterentwickelt - das Produkt ist keinesfalls vollständig.
Das ist ein bisschen ermutigend! Ich bin zwar enttäuscht über ihre Anfänge und sehe, wie die Stöcke vorgehen, aber es ist gut zu wissen, dass dies genau so ist, wie sie Dinge anstoßen, und nicht, wie sie letztendlich vorhaben.
Die obigen Gedanken mögen etwas negativ sein, aber das ist nicht meine Absicht. Ich und der Rest der Gemeinschaft haben große Hoffnungen in dieses Werkzeug und damit sehr hohe Erwartungen.
Und Adobe faulenzt nicht. Sie arbeiten bereits an den Rückmeldungen der Community und haben eine Roadmap für zukünftige Versionen.
Angesichts der Tatsache, dass sich Adobe auf offene Standards stützt und sich auf die Herstellung kreativer Tools anstelle von Boxed-In-Anwendungsplattformen konzentriert, kann ich nicht anders als das Gefühl haben, dass sie auf dem Weg sind, für den Fortschritt des Webs so relevant zu werden, wie sie es in der Vergangenheit waren Höhe von Flash.
Lassen Sie uns wissen, wie Sie sich in den Kommentaren über die Edge-Vorschau fühlen und vielen Dank für das Lesen!
Accentsconagua