WebCode at Mac App Store analyse

App power index: 180 (based on ranks around App Stores today)
Developer Tools Graphics & Design
Developer: PixelCut s.r.o.
Price: 0 free
Current version: 1.2, last update: 7 years ago
First release : 04 Apr 2013
App size: 3.53 Mb
4.5 ( 5435 ratings )
follow app ASO analyse

Estimation application downloads and cost

> 3.96k
Monthly downloads
~ $ 1.62k
Estimation App Cost


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
Read more
Available in countries
Country Price
USA 39.99 USD
Available for devices
MacDesktop,
Gutes Konzept, aber noch ausbaufähig

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

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

thank you very much!

Love this app!

This app is awesome. I love it.

this app is a game changer

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

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

Enjoying This App

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!

Read more App Reviews