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. über experteer GmbH, Stuttgart
  2. Sanacorp Pharmahandel GmbH, Planegg

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
Top-Angebote
  1. 39€
  2. 64€
  3. 88€
  4. 169€

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
       


Bionic Wheel Bot von Festo angesehen und Interview

Gehen oder rollen? Der Bionic Wheel Bot von Festo ist nach dem Vorbild einer Spinne konstruiert, die normalerweise läuft. Hat sie es eilig, etwa um sich vor Feinden in Sicherheit zu bringen, formt sie aus ihren Beinen Räder und rollt davon.

Bionic Wheel Bot von Festo angesehen und Interview Video aufrufen
Highend-PC-Streaming: Man kann sogar die Grafikkarte deaktivieren
Highend-PC-Streaming
Man kann sogar die Grafikkarte deaktivieren

Geforce GTX 1080, 12 GByte RAM und ein Xeon-Prozessor: Ab 30 Euro im Monat bietet ein Startup einen vollwertigen Windows-10-Rechner im Stream. Der Zugriff auf Daten, Anwendungen und Games soll auch unterwegs mit dem Smartphone funktionieren.
Von Peter Steinlechner

  1. Golem.de-Livestream Halbgott oder Despot?
  2. Rundfunk Medienanstalten wollen Bild Livestreaming-Formate untersagen
  3. Illegale Kopien Deutsche Nutzer pfeifen weiter auf das Urheberrecht

SpaceX: Rundum verbesserte Falcon 9 fliegt zum ersten Mal
SpaceX
Rundum verbesserte Falcon 9 fliegt zum ersten Mal

Landen, Auftanken und 24 Stunden später wieder starten. Das will SpaceX mit der neusten und endgültigen Version der Falcon-9-Rakete erreichen. In der letzten Nacht hat sie erfolgreich einen Satelliten für Bangladesch in den Orbit gebracht.
Von Frank Wunderlich-Pfeiffer


    Datenschutz-Grundverordnung: Was Unternehmen und Admins jetzt tun müssen
    Datenschutz-Grundverordnung
    Was Unternehmen und Admins jetzt tun müssen

    Ab dem 25. Mai gilt europaweit ein neues Datenschutz-Gesetz, das für Unternehmen neue rechtliche Verpflichtungen schafft. Trotz der nahenden Frist sind viele IT-Firmen schlecht vorbereitet. Wir erklären, was auf Geschäftsführung und Admins zukommt.
    Von Jan Weisensee

    1. IT-Konzerne Merkel kritisiert Pläne für europäische Digitalsteuer
    2. EU-Kommission Mehr Transparenz für Suchmaschinen und Online-Plattformen
    3. 2019 Schweiz beginnt UKW-Abschaltung

      •  /