Website-Editor mit Javascript-basierten Animationen

[Gerrit]

Hallo Leute,

ich bin schon einiger Zeit Webdesigner und nutze vor allem Editoren wie notepad++ zum Schreiben von HTML, CSS, Javascript, usw.

Vor allem tue ich dies, weil ich von den gängigen WYSIWIG-Editoren von MS, Adobe, und co und auch den vielen Freeware-Programmen nichts halte und denen auch nicht traue - ich sehe halt gern, welche Menge Code der Editor in mein Dokument schreibt und was noch viel wichtiger ist: Ich will das auch verstehen, damit ich im Notfall per Hand nachbessern kann. Und es muß, verdammt noch mal, so standard konformer Code wie möglich sein.

Was mich aber doch überzeugen könnte, wäre ein Editor (also ich meine jetzt solche, mit Visualisierung des erzeugten Codes - eben WYSIWIG), der es dem Designer auch auf einfache Art und Weise erlaubt, per Javascript HTML-Elemente animieren kann.

Ich denke da an so was wie:
Im WYSIWIG-Fenster sehe ich die bereits per HTML und CSS erstellt Seite, so wie sie sein soll.
Der Editor soll mir nun aber die Möglichkeit geben, z.B. auf irgendein beliebiges Element zu klicken und dieses auf verschiedenste Arten zu animieren - z.B. Ausblenden oder nach rechts bewegen (wobei ich den Pfad noch per Drag and Drop spezifizieren könnte), oder, oder, oder...
Selbstverständlich erzeugt der Editor automatisch den richtigen JS-Code...

Nun meine große Frage, zu der ich im WWW noch keine Antwort gefunden habe:
Gibt es solch einen Editor?

Vielen Dank für Eure Antworten.
Gruß, Gerrit

[molily]

Gibt es solch einen Editor?

Nein, höchstwahrscheinlich nicht.
Deiner Beschreibung nach stellst du dir das auch sehr verquert vor. JavaScript-Animationen sind üblicherweise mit Benutzereingaben, sprich Ereignissen verknüpft. Ein Editor müsste also Elemente mit Ereignis-Handlern versehen, und für diese müsste man dann Animationen »aufzeichnen« können. So einen Editor zu entwickeln und zu benutzen hätte nicht viel Vorteile gegenüber dem direkten Programmieren von JavaScript - man müsste ohnehin immer wieder in den Code.
Was du suchst ist vermutlich eher eine JavaScript-Bibliothek, mit der du solche Logik abstrakt notieren kannst sowie Animationen mit gewissen definierten Parametern ausführen kannst, ohne dir über die Umsetzung Gedanken machen zu müssen. Dazu gibt es verschiedene. Die »großen« Frameworks bieten bereits einige kleinere Effekte und Animationen an (Prototype, jQuery, Mootools, Yahoo UI) und haben jeweils Zusätze, die weitere bieten (z.B. Scriptaculous und jQuery UI, bei den anderen viele Plugins).

Mathias

[LX]

Ein solcher Editor müßte das JavaScript einerseits selbst beherrschen, andererseits abstrahieren. Einen vergleichbaren Ansatz findest Du mit zahlreichen Einschränkungen (siehe Frontpage-Vergleich) bei DashCode von Apple (für iPhone-Seiten).

JavaScript ist eben eine Programmiersprache und keine Klicki-Bunti-Flash-Geschichte. Allerdings solltest Du Dir vielleicht alternativ Toolkits wie jQuery oder YUI ansehen, die es dem Entwickler sehr einfach machen, JavaScript-Effekte einzusetzen.

Gruß, LX

[Gerrit]

Vielen Dank Euch beiden!

Ich möchte mit solch einem Editor keine Klicki-Bunti-Sachen machen, sondern ganz seriöse Dinge. Schaut Euch mal die Apple-Seite an - da wimmelt es von JS-basierten Animationen...

Und verquer? Mhm, stellt Euch doch mal vor: Die Website ist fertig durchdacht und mittels HTML und CSS sieht auch alles schön sauber aus.

Nun die Seite im Browser öffnen und im Browser könnte jetzt der Editor als Plugin installiert sein. Per Mausklick, Drag&Drop und notwendigen Texteingaben (genau: Events, Bedingungen, usw. - aber alles schön übersichtlich...) wird das Menü animiert und der Editor schmeißt am besten eine fertige JS-Seite - natürlich mit der kompletten Event- und Animations-Engine - raus und klar: er gibt auch die fehlenden Bezeichner für HTML und CSS aus.

Nicht gut? Ich gestehe: Für das bischen Animation einen kompletten, ziemlich intelligenten Editor zu basteln, ist natürlich übertrieben, aber schön wär's schon...und nur deshalb wollte ich wissen, ob sich irgend jemand die Mühe gemacht hat.

Beste Grüße
Gerrit

[molily]

Nun die Seite im Browser öffnen und im Browser könnte jetzt der Editor als Plugin installiert sein. Per Mausklick, Drag&Drop und notwendigen Texteingaben (genau: Events, Bedingungen, usw. - aber alles schön übersichtlich...) wird das Menü animiert

So eine Logik kann ich auch direkt in jQuery schreiben:

$("element über selektor ansprechen").click(function () {
  $(this).animiereDasElement(...);
});

Deine Anforderungen »Du willst irgendwas animieren« sind halt sehr unspezifisch. 95% der tatsächlichen üblichen Anforderungen kann man mit den verbreiteten Bibliotheken sehr schnell, relativ übersichtlich und gut lesbar umsetzen. Wenn man das Schema einmal begriffen hat, hat man es schneller implementiert als so ein hypothetischer Editor starten könnte.

Mathias