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. Klinikum rechts der Isar der TU München, München
  2. Deutsche Welle, Bonn

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
Spiele-Angebote
  1. (-75%) 7,49€
  2. 49,95€
  3. 49,95€

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
       


Forza Horizon 4 - Golem.de Live (Teil 1)

Michael zeigt alle Jahreszeiten und Spielmodi in Forza Horizon 4.

Forza Horizon 4 - Golem.de Live (Teil 1) Video aufrufen
Aufbruch zum Mond: Die schönste Fake-Mondlandung aller Zeiten
Aufbruch zum Mond
Die schönste Fake-Mondlandung aller Zeiten

Hollywood-Romantiker Damien Chazelle (La La Land) möchte sich mit Aufbruch zum Mond der Person Neil Armstrong annähern, fördert dabei aber kaum Spannendes zutage. Atemberaubend sind wie im wahren Leben dagegen Armstrongs erste Schritte auf dem Mond, für die alleine sich ein Kinobesuch sehr lohnt - der Film startet am Donnerstag.
Eine Rezension von Daniel Pook

  1. Solo - A Star Wars Story Gar nicht so solo, dieser Han
  2. The Cleaners Wie soziale Netzwerke ihre Verantwortung outsourcen
  3. Filmkritik Ready Player One Der Videospielfilm mit Nostalgiemacke

Coachingbuch: Metapher mit Mängeln
Coachingbuch
Metapher mit Mängeln

Der Persönlichkeitscoach Thomas Hohensee plädiert in seinem neuen Buch dafür, problematische Kindheitsmuster zu behandeln wie schadhafte Programme auf einem Rechner: mit Reset, Updates und Neustart. Ein origineller Ansatz - aber hält er dem Thema stand?
Von Cornelia Birr

  1. Elektronisch Arzneimittelrezept kommt auf Smartphone
  2. Relayr Rückstandsglaube als Startup-Vorteil
  3. Liberty Global Ericsson übernimmt Netzwerkbetrieb bei Unitymedia

Wet Dreams Don't Dry im Test: Leisure Suit Larry im Land der Hipster
Wet Dreams Don't Dry im Test
Leisure Suit Larry im Land der Hipster

Der Möchtegernfrauenheld Larry Laffer kommt zurück aus der Gruft: In einem neuen Adventure namens Wet Dreams Don't Dry reist er direkt aus den 80ern ins Jahr 2018 - und landet in der Welt von Smartphone und Tinder.
Ein Test von Peter Steinlechner

  1. Life is Strange 2 im Test Interaktiver Road-Movie-Mystery-Thriller
  2. Adventure Leisure Suit Larry landet im 21. Jahrhundert

    •  /