Abo
  • Services:

Markupwand: Photoshop-Dateien in HTML und CSS umwandeln

Das Startup Goyaka Labs hat mit dem Markupwand einen Dienst veröffentlicht, der Photoshop-Dateien im .psd-Format in HTML und CSS umwandelt, ohne dazu absolute Positionierungen zu verwenden.

Artikel veröffentlicht am ,
.psd-Dateien in HTML und CSS umwandeln
.psd-Dateien in HTML und CSS umwandeln (Bild: Markupwand)

Markupwand macht aus einer .psd-Datei HTML und CSS. Die Entwickler Alagu, Raj Natarajan und Suren aus Bangalore versprechen sauberen Code ohne absolute Positionierungen. Damit das Ergebnis sinnvoll weiterverwendet werden kann, setzten sie auf Compass und SASS. Ein Webeditor erlaubt es, die verwendeten Klassen zu benennen.

Stellenmarkt
  1. Mediengruppe RTL Deutschland GmbH, Köln
  2. über duerenhoff GmbH, Wasserburg am Inn

Damit Markupwand ein gutes Ergebnis erzielt, sollte die Photoshop-Vorlage in möglichst viele kleine Teile aufgesplittet werden. Jeder logische Textabschnitt sollte eine eigene Ebene erhalten. Jedes Icon oder Bild sollte ebenfalls auf einer eigenen Ebene angeordnet werden, aber auch nicht mehr. Andernfalls würde es nicht als ein Bild ausgegeben werden. Zudem sollte auf Hacks verzichtet werden.

Wer Elemente mit Formen erzeugt statt mit Bildern, erhält im Ergebnis mit CSS gestaltete Buttons statt fertige Grafiken.

Markupwand kann nach der Anmeldung mit einem Google-Account kostenlos genutzt werden. Noch handelt es sich um einen frühen Prototyp, die drei Entwickler planen diverse Verbesserungen. So soll es künftig nicht mehr notwendig sein, eine Seite in viele Teile zu splitten, und es soll möglich werden, auch Tags zu editieren, um semantisches HTML zu erzeugen. Auch die Zahl der erzeugten CSS-Regeln soll in Zukunft deutlich reduziert werden.



Anzeige
Blu-ray-Angebote
  1. (u. a. The Equalizer Blu-ray, Hotel Transsilvanien 2 Blu-ray, Arrival Blu-ray, Die glorreichen 7...
  2. 9,99€

Insomnia88 25. Jul 2012

Erläuter mal, weshalb genau out?

Insomnia88 25. Jul 2012

Also kurz, für die Designer gedacht, die entwerfen aber ned coden können und...

hei_zen 24. Jul 2012

Ich bezweifle dass so ein Tool semantisch sinnvollen Code schreiben kann. Wie sollen z.B...


Folgen Sie uns
       


We Happy Few - Golem.de Live

Anspruchsvolle Abenteuer wie Bioshock und Dishonored waren offenbar Vorbild für We Happy Few. Wer mag, kann die Kampagne des Action-Adventures fast sofort nach dem Start abschließen - oder sich in eine dystopische 60er-Jahre-Parallelwelt stürzen.

We Happy Few - Golem.de Live Video aufrufen
Razer Huntsman im Test: Rattern mit Infrarot
Razer Huntsman im Test
Rattern mit Infrarot

Razers neue Gaming-Tastatur heißt Huntsman, eine klare Andeutung, für welchen Einsatzzweck sie sich eignen soll. Die neuen optomechanischen Switches reagieren schnell und leichtgängig - der Geräuschpegel dürfte für viele Nutzer aber gewöhnungsbedürftig sein.
Ein Test von Tobias Költzsch

  1. Huntsman Razer präsentiert Tastatur mit opto-mechanischen Switches
  2. Razer Abyssus Essential Symmetrische Gaming-Maus für Einsteiger
  3. Razer Nommo Chroma im Test Blinkt viel, klingt weniger

Hasskommentare: Wie würde es im Netz aussehen, wenn es uns nicht gäbe?
Hasskommentare
"Wie würde es im Netz aussehen, wenn es uns nicht gäbe?"

Hannes Ley hat vor rund anderthalb Jahren die Online-Initiative #ichbinhier gegründet. Die Facebook-Gruppe schreibt Erwiderungen auf Hasskommentare und hat mittlerweile knapp 40.000 Mitglieder. Im Interview mit Golem.de erklärt Ley, wie er die Idee aus dem Netz in die echte Welt bringen will.
Ein Interview von Jennifer Fraczek

  1. Nur noch Wochenende Taz stellt ihre Printausgabe wohl bis 2022 ein
  2. Cybercrime Bayern rüstet auf im Kampf gegen Anonymität im Netz
  3. Satelliteninternet Fraunhofer erreicht hohe Datenrate mit Beam Hopping

Segelschiff: Das Vindskip steckt in der Flaute
Segelschiff
Das Vindskip steckt in der Flaute

Hochseeschiffe gelten als große Umweltverschmutzer. Neue saubere Antriebe sind gefragt. Der Norweger Terje Lade hat ein futuristisches Segelschiff entwickelt. Doch solch ein neuartiges Konzept umzusetzen, ist nicht so einfach.
Ein Bericht von Werner Pluta

  1. Energy Observer Toyota unterstützt Weltumrundung von Brennstoffzellenschiff
  2. Hyseas III Schottische Werft baut Hochseefähre mit Brennstoffzelle
  3. Kreuzschifffahrt Wie Brennstoffzellen Schiffe sauberer machen

    •  /