Fireworks HTML Export

[Windwalker]

Hallo zusammen,

dies ist mein erster Post in diesem Forum, deshalb erstmal ein Gruß in die Runde!

Nun zu meiner Frage. Ist wahrscheinlich etwas umfangreich, aber ich hoffe, dass ich auf Zuhörer treffe...
Ich bin Entwickler in einer Softwarefirma, die Intranetlösungen anbietet.

Wir haben uns vor einiger Zeit von einer anderen Firma (psd2html.com), die auf HTML, CSS, Javascript, jQuery etc. spezialisiert ist, aus einem PSD-Design schickes, modernes HTML-Markup als Grundlage für das "Framework" unserer Software entwickeln lassen. Wir bekommen eine "Dummy-HTML-Struktur" geliefert, die genau der PSD-Vorlage entspricht.
Mit unserer Software rendern wir nun das HTML (und füllen es mit Leben), damit aus dem CSS die Styles gezogen werden und die Seite so aussieht, wie vom Design entworfen.

Nun zum Kern:
Nach und nach haben wir unser Framework weiterentwickelt. Dabei wurde das CSS modifiziert, neues HTML wird erzeugt usw...
Die PSDs unserer Designabteilung und das darauf (von der beauftragten Firma erzeugte) Dummy-HTML mit CSS entsprechen nicht mehr dem Stand unserer Software.
Als bloßer Software-Entwickler fehlt mir hier das Fachwissen, deshalb die Frage an Euch:

Wie arbeiten diese Firmen? Die bekommen von uns ein/mehrere PSDs und nach einigen Tagen erhalten wir (wie aus einer Blackbox ) dieses HTML/CSS/JS-Gerüst, was Look und Feel der Seite erzeugt.
Machen die das evtl. über Fireworks?

Wir fragen uns bei uns in der Firma, ob wir diesen Prozess nicht selbst durchlaufen können.
D.h. mittels Fireworks (oder anderer Tools?) die PSD-Vorlage in HTML exportieren?
Auf diese Art und Weise könnte unsere Design-Abteilung dafür sorgen, dass PSD-Vorlagen mit der Entwicklung der Software Schritt halten und wir aus dem PSD per HTML Export das CSS exportieren können, welches dann zu unserer Software passt.

Ist das möglich?

Viele Grüße,
Sascha.

[Thomas]

Moin Sascha,

wenn das soooo einfach wäre, gäbe es gar keine Webdesigner mehr

Prinzipiell kannst du mit FW aus vorhandenen Grafikdateien nahezu komplette html-codes exportieren, wenn du dir dann aber den Quellcode anschaust, rollen sich deine Zehennägel auf

in der Praxis ist der html-Export von FW in Teilbereichen manchmal ganz nützlich (z.B. für Image-maps o.ä.), nicht aber für die komplette html-Struktur einer Site (meine Meinung)

[Torsten]

Moin Sascha,

wenn das soooo einfach wäre, gäbe es gar keine Webdesigner mehr

Prinzipiell kannst du mit FW aus vorhandenen Grafikdateien nahezu komplette html-codes exportieren, wenn du dir dann aber den Quellcode anschaust, rollen sich deine Zehennägel auf

in der Praxis ist der html-Export von FW in Teilbereichen manchmal ganz nützlich (z.B. für Image-maps o.ä.), nicht aber für die komplette html-Struktur einer Site (meine Meinung)

Auf was bezieht sich Deine Meinung Thomas?

[Torsten]

Um auf die Frage von Sascha zu antworten, ja das sollte möglich sein, ideal wäre in dem Fall wenn der Designer gleich mit Fireworks beginnt

Hier ein Beispiel von der Adobe Site: Clean CSS Code Extraction From Designs and Web Pages in Fireworks CS6

Es gibt auf der Adobe-TV Seite noch mehrere beeindruckende Beispiele

Ich selbst kann hier aber nicht weiter helfen, da ich keine Adobe Produkte mehr einsetze...

[Thomas]

Auf was bezieht sich Deine Meinung Thomas?

auf meine Erfahrung mit von FW produziertem Quellcode
Arbeite ganz gerne mit FW, vor allem wenn ich geslicte Grafiken benötige, bearbeite aber fast immer den Code dann noch in DW

[Torsten]

auf meine Erfahrung mit von FW produziertem Quellcode
Arbeite ganz gerne mit FW, vor allem wenn ich geslicte Grafiken benötige, bearbeite aber fast immer den Code dann noch in DW

Hast Du schon mal mit einer der neueren Versionen, ab CS5.5 ein Layout erstellen lassen - so wie es in den Tutorials von Adobe gezeigt wird?

[Thomas]

nee, mit den aktuellen Versionen habe ich das wirklich noch nicht versucht, muss ich gestehen

[Torsten]

Das erklärt einiges Thomas, da hat sich wirklich viel getan - auch wenn ich keine Adobe Produkte mehr einsetzte, begeistert mich was da geht.

Ich war letztes Jahr auf der Adobe Summer School und da hat Greg Rewis mit seinen Kollegen eindrucksvoll präsentiert was da so möglich ist. FW beherrscht ini der Zwischenzeit den Export in XHTML und CSS3 und das so perfekt, das man nur ab und an vielleicht im CSS um einen Pixel etwas verschieben muss. Sogar Formulare werden generiert, den Namen Rapid Prototyping Tool hat FW zurecht verdient.

[Windwalker]

Danke für Eure Antworten zu dem Thema!

Ich hatte die selbe Frage noch in einem anderen Webforum gepostet.
Hier ging das Feedback in die andere Richtung, nämlich das von Tools produziertes HTML und CSS sich höchstens für Mockups und PoC eignen, aber keinesfalls für produktive Seiten, gerade wenn die sehr umfangreich sind (In meinem Fall ist es z.B. so, dass unser Framework auf einem CSS von 4000 Zeilen basiert).
Deren Konsens war, dass letztendlich das HTML Gerüst immer händisch vom Designer in einem Editor entworfen wird. Ob der Editor nun Notepad oder Dreamweaver heißt, sei egal, denn letztendlich überlegt sich der Designer das Platzieren eines jeden Tags einzeln.

Ich werde mir dennoch mal die Adobe-Demos anschauen.
Vielleicht kann ich auch einen unserer Designer dazu bewegen, sich mal den HTML Export von Fireworks anzuschauen.
Es gibt wohl auch eine Fireworks Trial, wenn ich den Designer nicht überzeugen und selbst ausprobieren muss... ;-)

Wichtig wäre, dass der Export so konfigurierbar ist, dass genau das HTML-Gerüst mit genau dem CSS rauskommt, wie es in unserer Software verwendet wird. Also alle Tags übereinstimmen, alle Klassen und IDs.
Das halte ich (fast) unmöglich, nach dem, was ich bisher so an Feedback bekam.

Wobei es auch schon ein Gewinn wäre, wir das PSD im CI des Kunden haben und daraus die von verwendeten PNGs und JPEGs in der passenden Farbgebung extrahieren können (ob passende Sprite Images generiert werden können, wäre zu prüfen)....

Viele Grüße,
Sascha.

[Torsten]

Hallo Sascha,

es kann sein, das bei sehr umfangreichen Projekten, das von Fireworks Produzierte HTML & CSS sich nicht mit dem gewünschten Ergebnis deckt, das weiß ich einfach nicht man müßte es ausprobieren. Eines weiß ich aber ganz gewiss, die jenigen die behaupten Fireworks könne kein valides HTML & CSS generieren, haben i.d.R. noch nie Fireworks geöffnet.

Wie gesagt, ich habe mir die Videos zu Fireworks angesehen und war schon auf zwei Adobe-Summer-School Veranstaltungen, bei denen die Leute die die Tools entwickeln zeigen was möglich ist, zeigen was sich die Entwickler dabei gedacht haben und auch Fragen nicht ausweichen.

So wurde z.B. bei der letzten Veranstaltung 2011 berichtet, das Adobe mehrere Ingeneugre für das jQuery Projekt abgestellt hat um im Gegenzug jQuery in
Adobe Produkten integrieren zu können. Aber das ist ja schon wieder weg vom Thema

Wenn ich Zeit finde stelle ich Dir mal ein paar Videolinks zusammen.

[Torsten]

EDIT

Hier ist schon mal ein Video, was schon mit Fireworks CS4 möglich war: CSS- und XHTML-basierte Layouts erstellen

[Torsten]

Hier mal noch ein paar sehr interessante Videos zum Thema

• Introduction to Fireworks CS6 (CSS Sprites!)
• New jQuery Mobile Theme Skinning Support in Fireworks CS6
• Clean CSS Code Extraction From Designs and Web Pages in Fireworks CS6
• Designing a web portfolio

[wildmieze]

... jetzt fühl ich mich irgendwie altmodisch mit meinem Texteditor ...

[Torsten]

...jetzt fühl ich mich irgendwie altmodisch mit meinem Texteditor...

Haha, aber sag: „Was hat ein Texteditor mit Grafik & Print zu tun“?

[wildmieze]

Öhmm .. so wie ich das verstanden habe macht Fireworks aus nem Bild ne brauchbare Webseite .. und ich mach das zu Fuß .. ich glaub, als ich in den 90ern angefangen hab gab es einfach noch kein Programm das vernünftigen Code zustande gebracht hat