Ich finde es nach wie vor ziemlich beeindruckend und würde es gerne mal selbst unter echten Bedingungen testen. Ich glaube allerdings nicht, dass in einem oder zwei Jahren jeder nur noch fertigen Code aus einer PSD Datei holt.
Aber das schöne an diesem Tool ist ja, dass es nicht versucht aus einer PSD eine komplette HTML Seite samt CSS zu erstellen (wie es z.B. Macaw versucht), sondern dass es dem Entwickler nur hilft gewisse Styling-Informationen leichter aus einer PSD zu holen.
Es wird zwar nicht immer so gut funktionieren wie in dem Video gezeigt und manchmal ist zum Beispiel eine font-size aus Photoshop nicht die Richtige für den Browser, weil er sie anders darstellt, aber dennoch kann es ein nützliches Tool sein. Schon jetzt gibt es Photoshop Plugins wie CSS Hat, die im Prinzip das gleiche machen, nur eben nicht so schön in den Editor integriert sind.

Am Ende muss man dann schauen ob es zeitlich etwas bringt den Code automatisch generieren zu lassen wenn man nachher doch wieder alles durchgehen und Korrekturen machen muss. So ein Tool sollte jedenfalls nicht blind benutzt werden. Es ist schön um an der einen oder anderen Stelle schneller arbeiten zu können, wird aber niemals einen Entwickler ersetzen können. Dafür sind echte Projekte einfach zu komplex und haben im Regelfall viel zu viele spezielle Anforderungen.

Besonders wenn man mit der Webentwicklung beginnt sollte man darauf achten, dass man immer versteht was solche Automatisierungstools machen und sich nicht blind auf sie verlassen. Im Idealfall ist man zu jeder Zeit auch in der Lage alles per Hand zu schreiben.

Du hast auch eine Frage, die du gerne loswerden möchtest?
Hier kannst du sie stellen.

Brad Frost:

It all starts with markup. Even the most heinous browsers can digest semantic markup. Authoring semantic HTML5 code opens doors to enhanced experiences (displaying the right virtual keyboard based on HTML5 input type is just a small example of what’s possible). Dealing with the inconsistencies of myriad devices reminds us that fundamental, clean, meaningful markup is one of the best ways to reach many platforms.

Es ist wichtiger denn je, die Basics richtig zu machen. Auf einem soliden Fundament kann man dann beruhigt alle möglichen großartigen und neuen Dinge bauen ohne in ständiger Angst leben zu müssen, dass irgendwas aufgrund von neuen Geräten oder Techniken kaputt geht.

caniuse.com:

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Niemand kann sich merken welcher Browser in welcher Version welches Feature unterstützt. Zum Glück muss man das auch gar nicht und kann einfach bei caniuse.com nachschauen. Eine hervorragende Seite, dessen Macher ich unendlich dankbar bin. Ein Segen für jeden Frontend-Webentwickler.

MediaQueri.es:

A collection of inspirational websites using media queries and responsive web design. Curated by Eivind Uggedal

Wo wir gerade bei der Umsetzung von responsive Designs waren, hier eine Seite voller guter Beispiele. Danke Luise.

Uns wird immer wieder eingebläut, dass eine Webseite nicht in allen Browsern gleich aussehen kann, bzw. muss und dass 100% pixelgenaues Arbeiten daher Utopie ist.
Dennoch arbeite ich sehr genau und versuche die Designs von Marcel so gut es irgendwie geht in HTML und CSS zu transportieren.

Ich habe bis vor einiger Zeit sehr häufig Screenshots von einzelnen Elementen im Browser gemacht an denen ich gerade arbeite und diesen Screenshot dann in Photoshop geöffnet und über das Design gelegt um Abstände, Schriftgrößen oder ähnliches genau abmessen und vergleiche zu können. Das war eine nicht unbedingt sehr effiziente Arbeit und gehört zum Glück mittlerweile auch der Vergangenheit an.

Ich wusste auch damals schon, dass es Bildschirmlineale oder ähnliche Tools gibt und habe auch einige getestet. Mir konnte allerdings keine so wirklich zu sagen und meistens boten die Apps mehr als ich wollte. Ich wollte einfach nur möglichst schnell etwas abmessen und das Tool musste per Shortcut geöffnet werden können.

Meine Rettung heißt SnapRuler. Per Shortcut (in meinem Fall cmd + shift + e) aktiviere ich ein Fadenkreuz und eine dazugehörige Lupe. Ich kann in der Lupe pixelgenau sehen was ich tue und ganz einfach alles auf dem Bildschirm abmessen. Ich kann so mein Design im Browser und das Design in Photoshop perfekt vergleichen. SnapRuler bietet auch noch die Möglichkeit die Maße wahlweise als CSS-, HTML- oder Objective-C-Code in die Zwischenablage zu kopieren und das Auswahlwerkzeug beim Abmessen an Kanten „snappen“ zu lassen. Beides nutze ich allerdings nie.

Die App kostet 7,99 € im App Store, macht eine Sache perfekt und ist nach meinem Dafürhalten jeden Cent wert.

Wen das noch nicht überzeugt hat, der kann sich auf der Website noch ein Video angucken.

Panic:

Coda 2 has now been in development for about a year and a half. All of us have been working incredibly hard on this forthcoming release. We’re finishing up new features, boosting up the editor, dramatically cleaning up the UI, and improving what Coda already does well today, all while, hopefully, keeping things extremely light and lean. By the time you see it, Coda might look a little different than you’re used to, but we think it’s for good reason. We’ll see how it shakes out, but we’re very excited.

Lange schon fragen wir uns wie es um die Entwicklung von Coda 2 steht. Endlich äußert sich Panic dazu. Sieht gut aus. Offenbar arbeiten sie hart dran und haben einen weiteren Meilenstein geschafft und stehen kurz vor der private beta. Bis zum Endprodukt soll es allerdings noch einige Monate dauern. Jeder kann sich zur private beta anmelden, allerdings ist die Chance für den Otto-Normal-Verbraucher doch eher gering rein zu kommen.

Ich arbeite derzeit mit Espresso 2 und bin sehr zufrieden, freue mich dennoch sehr auf Coda 2 und bin gespannt auf erste Screenshots oder gar Screencasts.

Nette Seite um mal schnell ein Weblayout auf seine flexiblen Eigenschaften zu testen. Nett zum Anschauen, aber nichts womit ich ernsthaft entwickeln würde.

Jeder Webentwickler hat ja so seine Lieblingsapps, die er meist bis aufs Messer verteidigt, wenn er erstmal den richtigen Arbeitsbegleiter gefunden hat. Und es ist ja auch wirklich so, dass ein Editor ein Werkzeug ist mit dem wir Tag ein, Tag aus 8 Stunden oder sogar länger arbeiten. Man baut – so blöd es klingt – schon so eine Art Beziehung zu so einer App und deren Entwicklern auf. Man kennt nahezu alle Funktionen, Shortcuts, hat alles nach den eigenen Wünsche angepasst, vielleicht Addons installiert, Snippets angelegt, Sites eingerichtet und was weiß ich nicht noch alles.

Einfach gesagt: Man kann blind mit dem Programm umgehen, es fühlt sich richtig an und die Arbeit damit macht einfach Spaß. Da kann man sich schon mal persönlich angegriffen fühlen, wenn jemand schlecht über eben diese App spricht. Auch wenn das natürlich völliger Quatsch ist.

In meinem Fall habe ich eine solche Beziehung zu Coda aufgebaut. Ich mag die Einfachheit gespickt mit tollen Funktionen wie Sites oder SVN Source Control. Immer wieder entdecke ich kleine Funktionen, die ich noch nicht kannte und die Arbeit vereinfachen. Es ist nicht so aufgeblasen wie Dreamweaver, aber auch auch nicht so eingeschränkt wie Fraise oder Smultron. Es geht sogar soweit, dass ich das Icon gerne im Dock oder im App-Switcher sehe, einfach weil es hübsch ist. Und ganz abgesehen davon fühle ich mich mit den Machern, Panic, irgendwie verbunden. Schon mehrfach habe ich ihnen auf Twitter geschrieben und jedes mal kam sehr zeitnah eine Antwort, die mir geholfen hat. Auch auf Wünsche und Ideen für Coda 2 wurde immer reagiert. Das nenne ich Kundenbindung!

Eine App, die mit Coda in eine Kategorie fällt, ist Espresso. Gerade in Version zwei veröffentlicht, bietet Espresso ähnliche Features. An der einen Ecke mehr, an der anderen etwas weniger. Ich wurde mit Espresso nie so richtig warm, obwohl es eigentlich so ziemlich alles richtig macht. Version 2 sieht jetzt sogar noch besser aus und ist vorallem schneller als Coda 2. Die Geschwindigkeit ist nämich derzeit das größte Problem mit Coda. Es hat mit riesigen CSS-Dateien beim Öffnen manchmal ganz schön zu knapsen.

An Coda 2 wird gearbeitet. Soviel ist sicher. Leider ist noch keinerlei Releasedatum in Sicht. Aber ich hoffe sehr darauf, dass die Jungs von Panic Anfang nächsten Jahres mit der neuen Version um die Ecke kommen und Espresso 2 dann, zumindest für mich, in die Tasche stecken.

Ich habe einige Ideen für Coda 2 und werde die wahrscheinlich in naher Zukunft mal hier niederschreiben. Bis dahin, happy coding!

Vielleicht gebe ich trotz allem Espresso 2 mal für eine Woche die Chance zu zeigen, was es kann… aber pssst.

CSS3-Liebe! Wer genug von Bildern für einfache und leicht komplexere Formen hat und nur für moderne Browser optimiert, kann sich schon jetzt an diesen CSS-Formen bedienen. Allesamt bestehend aus nur einem HTML-Element.