Is this your app? Claim this page to add your own description, links and contact info. It's free. →

WebCode

WebCode at Mac App Store analyse

PixelCut s.r.o.
Developer Tools Graphics & Design
5,435 ratings · Power index: 180
Free Mac App Store Follow Website
Version 1.2
Size 3.53 Mb
Updated 1 month ago
Released 04 Apr 2013

How do you feel about this app?

Screenshots

Description

WebCode is a vector drawing app that instantly generates JavaScript+Canvas, CSS+HTML or SVG code. While you are designing HTML5 games, infographics or web user interfaces, WebCode tirelessly writes the code for you! Developed from the ground up with resolution independence in mind, the code generated by WebCode works great on both Retina and non-Retina displays. WebCode also imports SVG and PSD files, so if you already have some of these, you can easily reuse them. JavaScript+Canvas If you are doing a lot of HTML5 Canvas drawing, WebCode will become your best friend. You will no longer have to write the drawing code by hand. Your drawings will be converted to JavaScript code instantly, saving you countless hours of tedious work. Most importantly, the generated code is nice, clean and readable. WebCode even lets you conveniently copy small JavaScript snippets just when you need them. CSS+HTML Stop writing CSS3 gradients, shadows and media queries by hand - from now on, WebCode will do that for you. In fact, it will convert as much of your drawings as possible to CSS+HTML code! Rectangles, rounded rectangles, ovals, texts, images, gradients, inner and outer shadows, strokes and fills are all well supported. And for things like béziers that simply cannot be converted to CSS+HTML, WebCode will let you know by generating helpful warnings. SVG SVG shines when making infographics, and WebCode is a great tool that instantly transforms your drawings to readable, succinct and beautiful SVG code. The code is shown in real time - you can see it change and grow! This is not only really cool to look at, but it is also a great way to learn SVG, JavaScript+Canvas and CSS. All of these features are designed to save your time, so you can focus on what is really important - the content itself. Features • Real time preview of every adjustment you make • Prepared for the world of high resolution displays • Drawing canvas can be switched to "Retina display" mode with a single click Basic Shapes and Vector Drawing Tools • Rectangles, rounded rectangles, ovals, béziers, polygons, stars and texts • Boolean operations • Text-to-bézier conversion Code Generation & Export • Real time generation of nice and readable drawing code • Support for JavaScript+Canvas, CSS+HTML and SVG code generation • Simple export of all generated source codes and resources • PNG, TIFF, PDF export options Import • SVG import • PSD import allows you to import layer graphics, paths, text, groups and important layer effects from Adobe Photoshop documents Dynamic Colors • New colors can be derived from the existing ones by changing their opacity, hue, brightness, etc. • All derived colors are updated automatically when their base color changes Library of Colors, Gradients, Shadows and Images • Colors, shadows, gradients and images can be reused across your document • Inner and outer shadows • Linear and circular, multi-step gradients • Images (with support for both Retina and non-Retina resolutions) Dynamic Shapes • You can define how complex drawings should behave when they are resized • Shape coordinates and dimensions can be dynamically linked to user-defined frames • Behavior of individual bézier control points can be customized • Fully supported by the JavaScript+Canvas target, partial support in CSS+HTML Smart Groups • Custom resizing behavior of group content • Blend modes and clips • Group shadow and opacity

Estimates

Monthly Downloads > 3.96k
Est. Revenue ~ $1.62k
Share on X

Availability

Devices

MacDesktop

Pricing by country

Country Price
USA 39.99 USD

Reviews

All reviews →

Gutes Konzept, aber noch ausbaufähig

updatestage · 13 years ago · v1.0

Habe mir das Programm gekauft, da ich schon PaintCode habe und sehr zufrieden damit bin. Der erste EIndruck ist positiv. Ein gut strukturiertes Interface, was zum großen Teil intuitiv zu bedienen ist. Leider ist die Hilfe nicht besonders umfangreich, sodass man, wenn einem eine Funktion oder Vorgehensweise nicht ganz klar ist, nicht besonders viele Inforamtionen dazu bekommt. Was richtig klasse ist, ist der Photoshop-Import. Klar, man nicht erwarten, dass man nichts mehr anpassen muss, aber es funkioniert schon ganz gut. Was im Hinblick auf HTML/CSS m.E. noch fehlt: ------------------------------------------------------------------------ - Angabe des HTML-Tags für ein Element (jetzt werden immer Divs erzeugt, manchmal will man aber auch einen Link oder eine Section haben) - Möglichkeit, mehrfache Zustände für ein Element anzulegen (z.B. hover und active für Links) Was im Hinblick auf den Photoshop-Import m.E. noch fehlt: ------------------------------------------------------------------------ Rechteckige Formebenen (auch mit Ebenen-Effekten) sollten als Rechtecke importiert werden, nicht als Bezier. Ansonsten funktionieren sie nicht in HTML. Für das Layouten von Websites wäre das eine essentielle Funktion. Bei Verwendung von Pixel-Ebenen funktioniert das einwandfrei, auch die Übernahme der Ebenen-Effekte in CSS3, aber man möchte natürlich einen einfarbigen HTML-Container nicht als PNG umsetzen. Was im Interface m.E. noch fehlt: ------------------------------------------------------------------------ - Schriftauswahlfeld "Web Fonts" mit den Web-Standard-Schriftarten

Good looking, flawed, pricey, but with potential

yalexr · 12 years ago · v1.1.1

Good looking app that gets work partially done though I have the feeling that the creators are not using their product in real-life projects. Cons Generated code defines elements in terms of their absolute positions. This is a nuisance in many situations. Code must be edited, later, in a separate editor. Also, grouped SVGs are not transformed. Instead, each element of that group is given absolute positions, which means that rotation and scaling transforms applied to said groups — read, later in code — will again not work properly. Pros Nice handling of color management. Saves work. Overall Mixed feeling about this app. More time spent on the UI than on the actual functionality. Not great value for the price but hoping this will improve with time. At this stage makes, but barely, the “it’s okay” grade.

excellent software

losewmac · 12 years ago · v1.1.1

thank you very much!

Love this app!

AndrewCVega · 13 years ago

This app is awesome. I love it.

this app is a game changer

Geo212 · 13 years ago

Finally, Ive been waiting for a tool like this for a while. The instant feeback of generated javascript is owesome! Goodbye to the editor-save->browser reload to see what a generated css/javascript looks like. I was able to come up with a basic button canvas and layout for a few mobile screens in less than 30 minutes. To make this app even more usefull for day-to-day use, I would suggest: - flexible assignable shortcuts - working escape button (as of this version the escape button does not close gradient,shadow or any popups) - search colors, gradiens, shadows… by name and then apply them to multiple objects - customizable font in the javascript/html preview - more integration with some popular javascript framewoks Keep up the good work ! George

Phenomenal

Metoothreefour · 13 years ago

This app is blowing my mind... goodbye Fireworks, hello WebCode. If front-end is your game, pull-the-trigger, now!

Enjoying This App

isral Duke · 13 years ago

Well done, guys. Can i ask for some v.1 features? 1. Pixel and grid snapping. 2. Assignable hotkeys. 3. Multiple Objects/Artboards (for exporting multiple assets and sharing defined colors, gradients, etc.). Love it!