Many of our users who build UI prototypes often ask us how different is Indigo Studio from Axure. Perhaps our users have prior experience with Axure or similar products, and simply wish to understand how much of their learned experience can be transferred to Indigo Studio.

Unlike many of the tools that approach prototyping as linking screens, Indigo Studio and Axure adopt the state model in addition to screens. And while the two offer similar capabilities in creating interactions and widget/page states, both go about it in a different way. This article may appeal more to folks who are reasonably familiar with Axure and have started with Indigo Studio. What this article is not is a feature by feature comparison of the two; it focuses on core-prototyping workflows instead.

We created the exact same prototype using both tools to make it easier to compare the prototyping workflow. The prototype simulates a bidding website, where people can bid on products. Users can hover on a product shown and peek at the product details, which is shown as a pop-up. In this pop-up, users can view other product images and place a bid. Placing a bid shows a confirmation message and then users can close out the pop-up.

Launch e-Commerce prototype

Part 1 of this article discusses the following:

• Interactions Later vs. Interactions First
• Case Editor for UI changes vs. Direct Manipulation in Context

Part 2 will discuss other key differences:

• Adding time-based changes via actions vs. coordinating changes using a timeline
• Manage Prototype using alternate views vs. Interaction Explorer for visualizing user flow
• Widgets States vs. Screen States

1. Interactions Later (Axure) vs. Interactions First (Indigo)

Take for example the quickView interaction shown in the prototype. Clicking on the quickView button will launch/show the productPopup. The assumption is that you have already created the home page/screen, which has the quickView button available.

In AXURE, you use Dynamic Panel to support this interaction, and create the necessary state(s) first. Without creating these, you cannot add interactions.The prototyping workflow is as follows:

1. Add a Rectangle UI element to serve as the popup on the Home screen.
2. Convert this rectangle to Dynamic Panel and name it productPopup
3. Set to productPopup to Hidden by default using Widget Properties
4. Select and edit State 1 of productPopupDynamic Panel (available in the widgets panel)
5. Add necessary UI elements inside State 1 to finish the productPopup
6. Go back to the Home and add a onClick interaction on the quickView button.
7. In the Case Editor, select Show behavior and select productPopup from the list

Watch Video Clip- Adding Click interaction for quickView in Axure

In INDIGO STUDIO, you add the interaction first, and then in the resulting state make UI changes the users would see. The prototype workflow is as follows:

1. Select the preview button and add interaction
2. Pick when user Clickspreview, change this screen to a new state
3. Add necessary UI elements to create the productPopup

Watch Video Clip - Adding Click interaction for preview in Indigo Studio

Also, Indigo Studio, by default you are creating screen-states and not widget-states. Learn how to create interactive widgets. The screen state is auto-named "Taps/Clicks-Preview" (interaction-UI Element name), which you can change if required.

2. Case Editor for UI changes (Axure) vs. Direct Manipulation in Context (Indigo Studio)

In WYSIWYG tools, if you wish to resize an element, it's preferred that you can select it and resize it using the resize adorners. This is more DIRECT manipulation as opposed to using a separate interface to edit the UI.

We can call it INDIRECT manipulation when you are relying on an alternate representation or abstraction to do something. When working with abstractions, one tends to rely more on proper naming to locate an element to edit; we have to translate what it represents. And when making changes use some imagination to understand what the changes imply in usage context of the UI element.

Thinking about this in physical world terms, it's like asking a friend to shop clothes for you, and all you have given her is a list of clothing items to buy. You have control over the items in that list, and some descriptions. The final outcome is mediated by your friend. All this does not mean manipulating abstractions is all bad because depending on the situation, it may be the easier or only option. Based on the task, we will have to decide which works better - direct or indirect manipulation. 

Continuing with the same example for showing productPopup when the user clicks on quickView button, in AXURE the case Editor is the glue that binds the interactive prototype. The Case Editor does not work on it own; using it you are manipulating the state of dynamic panels and UI elements (using proper naming). Making any change to the UI based on an interaction is meditated by the case editor. While this facilitates a one-stop shop for all behaviors, the trade-off is less direct manipulation.

In our example, adding an onClick interaction on the quickView button would launch the case editor. The case editor is organized into three panels - generic behaviors, list of behaviors you select, affected elements or the result. As a prototyper, you will first select a behavior, and then dictate the results. Here is also when proper naming is important as it will help you locate the right UI element or dynamic panel in the RESULTS pane. In essence, the changes the user would see is mediated (indirect) exclusively via the case editor.

In Axure, once you create a dynamic panel and set to hidden, as is the case with productPopup, what remains visible in the designer is a yellow highlight where the panel should appear. You have control over the position and size of the panel. When you edit this panel, it will launch another tab in your designer where you are within the scope of the dynamic panel independent of the screen/usage context. To see how it works in the prototype, you will have to run it.

Watch Video Clip - Showing the productPopup in Axure

INDIGO STUDIO's approach leans more towards direct manipulation. To show a productPopup when the user clickspreview, you first add an interaction (default is clicks), which will let you create a new screen state. Since the productPopup is shown on top of existing screen content, creating a new screen state is appropriate. In this new state, you design exactly what you want to see. As in, make whatever changes that are required to simulate the productPopup. It's different from Axure as these changes don't have to be restricted just to the productPopup you are creating; you can add/remove/edit any UI element on this screen state.

Drawing a new container UI element on this new state is the same as setting show/hide in Axure minus the need for a case editor. The prototyping flow is such that adding an interaction and design what should happen (be shown) next is a mini-squence. This means that you don't need to have this productPopup created beforehand; you create it as and when needed.

In Axure, you pre-create the required design elements and dynamic panel states. With Indigo Studio, you add the interaction first, and choose to create a new state. After that it's like designing any screen using WYSIWYG design tool. UI changes you make are always on top of the original screen context (previous state) so you know where you are in the user flow.

Watch Video Clip - Showing the **productPopup in Indigo Studio

Summary

This is part one of two-part series comparing prototyping in Axure with Indigo Studio.

Hopefully this will give you a better idea about the prototyping workflow and conceptual model underlying both the tools.

Complete video tutorial for each tool is available below.

• Watch Prototyping with Axure | Download Axure Project
• Watch Prototyping with Indigo Studio | Download Indigo Studio Project

Please Note If you notice inaccuracies, please let me know so that I can correct them. Some of the steps may have been omitted in the interest of time.

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned

In a series of articles will look at how to use Node.js with some of the most popular products and platforms like SQL Server, MongoDB, Microsoft Azure, how to create applications using jQuery, jQuery UI and Ignite UI with Node.js

The first post is dedicated to Node and Microsoft SQL Server.

Initially let’s explain why many companies and professionals prefer to use Node.js in their solutions.

Why Node.js?

Node.js, for those that haven’t heard of it, is essentially server-side JavaScript.

You can take a look at the some of the advantages below:

• Practically no installation required
• Very lightweight (one 7MB static exe for MS Windows platform)
• Node.js encourages good software practices out of the box like async programming and inversion of control
• Node.js uses JavaScript syntax.
• There are more than 100 000 000 WEB developers over the world, who use JavaScript!
• The realistic reason:
  Cross platform applications with JS will be faster and easier
• The good parts of JavaScript are really awesome
• One language for the browser and the server
• Async by default
• Over 1 million concurrent requests

But it’s not just another trendy programming language – companies like LinkedIn and Walmart are already using it, and many other bug IT companies  have already announced that they use Node.js or they will add Node support for their platforms. In July 2011 Microsoft ported Node.js for MS Windows and later – in November 2011 they announced Microsoft Azure ( former Windows Azure) support for Node.js

Node.js is used also for Microsoft Azure Mobile Services

Node is used as a default platform for the back-end. It works with Azure SQL Database and it is offered out of the box for developers.
They just need to know JSON to SQL Type Mappings

JSON to SQL Type Mappings – Azure Mobile Services with Node.js

There are many modules that implement support for Microsoft SQL Server. It is not easy to choose the most appropriate module for a specific case.

Which Node.js driver to choose ? 

The objective of this article is to summarize the more popular node.js modules for MS SQL Server. We will compare the modules and describe their advantages and disadvantages

Node.js Modules for Microsoft SQL Server

• node-sqlserver & msnodesql

Both drivers use the same code from GitHub repository - https://github.com/Azure/node-sqlserver , but using different npm packages.

This is a Microsoft’s Node.js driver for SQL Server and Azure SQL Database: It is a Node.js module, based on SQL Server Native Client 11.0 - available as Microsoft SQL Server 2012 Native Client and it can be  found in the
SQL Server 2012 Feature Pack .

There are issues with node-sqlserver / msnodesql and WIndows 7.x / Windows 8.x.
This modules require prerequisites prior to install the driver:

1. Node.js - use the latest version if possible, but it has been tested on node 0.6.10 and later
2. node-gyp - latest version installed globally (npm install -g node-gyp)
3. python 2.7.x - for node-gyp (make sure it is in the path)
4. Visual C++ 2010 - the Express edition is freely available from Microsoft
5. SQL Server Native Client 11.0 - available as Microsoft SQL Server 2012 Native Client found in the SQL Server 2012 Feature Pack

It is an additional overhead to install these modules on the actual Windows platforms – you need to have some old versions of different libraries and frameworks. That is the reason to not recommend to use “ the official “ driver.

• node-sqlserver-unofficial

This is an unofficial binary distribution of that driver (node-sqlserver /msnodesql ) using the same GitHub repository - https://github.com/Azure/node-sqlserver .
if you are planning to use this driver – there is no need to compile from source (which requires Visual Studio and totally confuses some people). It runs on both x86 and x64 and with node versions 0.8 and 0.10. You have no need to use workarounds to run node-sqlserver-unofficial with Azure Web Sites.

• tedious

It is a  TDS driver, for connecting to Microsoft SQL Server databases. Tedious is an implementation of the TDS protocol, which is used to interact with instances of Microsoft's SQL Server. It is intended to be a fairly slim implementation of the protocol, with not too much additional functionality. Tedious is pure JavaScript, as are its dependencies. (the source is CoffeeScript.) So it should run without change on any platform where Node is supported. The tedious driver is compatible with all SQL Server versions from 2000 to 2014. Later versions of TDS protocol may be supported in the future, but it is unlikely that earlier versions will be supported. You can get tedious as a npm package or from GitHub - ttps://github.com/pekim/tedious 

• node-tds

This is a module that allows you to access Microsoft SQL Server 2005 and later. It is a pure JS implementation of the TDS protocol hosted on GitHub. Node-tds is similar to tedious . It could be installed as tds npm package or is source code from GitHub https://github.com/cretz/node-tds  .

•  mssqlhelper

  It is a Microsoft SQL Server Helper. Mssqlhelper is mostly written in JavaScript module only from one contributor.  21% of all source code lines are comments – in comparison,  mssqlhelper has only 6% of code commented. You can install mssqlhelper npm package here or find the source code in GitHub: https://github.com/play175/mssqlhelper    

• mssqlx

It is a  microsoft sql server nodejs command-line interface.  Mssqlx should work great on all platforms, especially mac and unix, without any other drivers, just nodejs. Currently, this only works on the command-line, the next version will work via stream api . This projects goal is to create an awesome cli experience for querying mssql, it hopes the follow the footsteps of the futon-cli .  You can use this mssqlx npm package or find the source code in GitHub: http://jackhq.tumblr.com/post/27992293043/mssqlx 

• Edge.js and edge-sql

Edge.js is a Node.js module that allows .NET code and assemblies to run in the same process with Node.js. This potentially enables a Node.js developer to leverage technologies that have traditionally been very hard or impossible to use in the past. You can create .NET libraries with the whole logic how to connect to MS SQL Server, run query, handle the results and you can use these libraries in Node.js applications using Edge-js.

Creating a .NET class library

   1:publicclass Sample1

   2:     {

   3:public async Task<object> Invoke(object input)

   4:         {

   5:             ....

   6:         }

   7:  

   8:public async Task<List<SampleUser>> QueryUsers(int pageNumber, int pageSize)

   9:         {

  10:             ....

  11:         }

  12:     }

Using a .NET library in Node.js + Edje.js application

   1:// Set up the assembly to call from Node.js

   2:var querySample = edge.func({

   3:     assemblyFile: 'EdgeSampleLibrary.dll',

   4:     typeName: 'EdgeSampleLibrary.Sample1',

   5:     methodName: 'Invoke'

   6: });

Edge-sql is a SQL compiler for edge.js. It allows accessing SQL databases from Node.js using Edge.js and ADO.NET. Via edge-sql you can query SQL Server direectly using Edge.js

   1: var params = {

   2:     connectionString: "Data Source=IGBGSOFEV06\\SQLEXPRESS;Initial Catalog=NodeJS;Integrated Security=True“ ,

   3:     source: "SELECTTOP 5 * FROM SampleUsers ORDERBY CreateDate DESC"

   4: };

   5:  

   6: var getTopUsers = edge.func( 'sql‘ , params);

Pros and Cons

In the next part of this article you can learn how to use different Node.js modules for MS SQL Server. We will take a look at the best practices and cover different use cases.

If you want more information about how to use Microsoft SQL Server & Node.js feel free to contact me at mmateev@infragistics.com

You can learn more about Azure Bootcamp Bulgaria if you follow us on Twitter @mihailmateev  and @Infragistics and stay in touch on Facebook, Google+, LinkedIn and Infragistics Friends User Group !

Those of us who spend our working lives developing Windows applications will have seen it a million times. End users will also be familiar with this error. Anyone who spent time in the 1990s downloading files over dial-up connections (which could easily be disconnected) will also get a shudder of recognition at this message. That bleep of a Windows error, that reassuredly vague dialogue box, the knowledge that you are  now pretty much stumped. But what exactly does ‘Not a valid Win32 application’ error mean? And why does it occur?

What does it mean?
In short this error is describing a corrupted Windows .exe file. Why exactly this occurs, we shall look at shortly. This error typically occurs when an executable file is either incomplete, or has been only partially downloaded from the web. Developers will see this error when creating and running apps in their chosen IDE, often when there has been a DLL or compile error.

Why does it occur?
There are a large number of reasons for this error, and herein lies the crux of the problem. ‘Not a valid Win32 application’ is basically a bit of a catch all, a grouping together of problems that all suffer from the same thing - file corruption. We are able to break down the causes a little:

1. File corruption: This is typically the root cause. File corruption can occur when a file hasn’t downloaded correctly, or as a result of a  corrupted hard disk.
2. File extension: Executable files have the 3 letter extension ‘.exe’. Occasionally this extension can be changed (due to user error or misconfiguration) and can result in the Win32 error.
3. Malware or Virus: Various forms of virus and malware software can cause this error, by either corrupting the executable file in question, or some other part of the filesystem.
4. Wrong operating system: This error can also occur if a 32bit Windows application tries to run on a 64bit Windows environment. Similarly it can happen if a modern application is ran on a much older version of Windows, like XP.

Developers will often see this error when compiling their applications and running the executable on a different platform, or running the file without the correct DLL (Dynamic Linked library, containing shared libraries) files present

Possible fixes
For many, simply re-downloading the file in question will fix the problem. More serious causes (corrupted disk drives or a virus) will require a bit more work. Running a trusted malware or virus scanner, and checking the integrity of the hard disk, are the best bets.

Addressing this error in a development environment is a bit more complex, as it very much depends how the application is being compiled. As every developer will know, debugging errors can be tricky for even the simplest thing. So where do you start? Here are a few things to try:

1. Be clear in Visual Studio if you are compiling for 64-bit or 32-bit environments. Often it is best to target ‘Any CPU’.
2. If you are creating a Windows XP app, be sure to set the ‘Platform Toolset’ to ‘Windows XP (V110_xp)’. Anyone using Visual Studio 2012 will need Update 1 to target older Windows platforms.
3. Check what version of .NET your application is using. Later versions (4.5) don’t support Windows XP or Windows Server 2003

Good luck

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Note: This is the last service release for Ignite UI 2013 Volume 1.

Download the Release Notes

Ignite UI 2013 Volume 1

• PDF (Ignite UI 2013 Volume 1, Build 13.1.20131.2523)
• Excel (Ignite UI 2013 Volume 1, Build 13.1.20131.2523)

Ignite UI 2013 Volume 2

• PDF (Ignite UI 2013 Volume 2, Build 13.2.20132.2300)
• Excel (Ignite UI 2013 Volume 2, Build 13.2.20132.2300)

Ignite UI 2014 Volume 1

• PDF (Ignite UI 2014 Volume 1, Build 14.1.20141.2249)
• Excel (Ignite UI 2014 Volume 1, Build 14.1.20141.2249)

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Note: This is the last service release for ASP.NET 2013 Volume 1.

Download the Release Notes

ASP.NET 2013 Volume 1

• PDF (ASP.NET 2013 Volume 1, Build 13.1.20131.2331)
• Excel (ASP.NET 2013 Volume 1, Build 13.1.20131.2331)

ASP.NET 2013 Volume 2

• PDF (ASP.NET 2013 Volume 2, Build 13.2.20132.2187)
• Excel (ASP.NET 2013 Volume 2, Build 13.2.20132.2187)

ASP.NET 2014 Volume 1

• PDF (ASP.NET 2014 Volume 1, Build 14.1.20141.2150)
• Excel (ASP.NET 2014 Volume 1, Build 14.1.20141.2150)

This article is part 2 of two-part series. The purpose of this series is to compare and contrast Axure vs. Indigo Studio. In the process, help new users understand the prototyping approach in Indigo Studio, especially if they have used Axure in the past. This article is not a feature-by-feature comparison; it compares the prototyping approaches of the two tools by actually trying to build a prototype. After all, how else should one compare prototyping tools?

As discussed in Part 1,

We created the exact same prototype using both tools to make it easier to compare the prototyping workflow. The prototype simulates a bidding website, where people can bid on products. Users can hover on a product shown and peek at the product details, which is shown as a pop-up. In this pop-up, users can view other product images and place a bid. Placing a bid shows a confirmation message and then users can close out the pop-up.Try the prototype here

In Part 1, we discussed:

• 1 Interactions Later (Axure) vs. Interactions First approach in Indigo Studio
• 2 Case Editor for UI changes (Axure) vs. Direct Manipulation in Context

In this article we discuss some additional differences:

• 3 Adding time-based changes via actions vs. Using a timeline for coordinating changes
• 4 Managing prototype using alternate views vs. Interaction Explorer for visualizing user flow
• 5 Widgets States vs. Screen States plus Widget states

3. Adding time-based changes via actions (Axure)vs. Coordinating Changes using a timeline (Indigo Studio)

Timing (transitions) can be an important dimension of interactive prototypes. Sometimes we need to show transient UI elements to serve as feedback to confirm user action. Animating the transitions can help fill the gap between two UI visual states (origin and destination state). For a deeper dive into the value of transitions, you can read this commentary on transitional interfaces.

In our example prototype for the bidding website, when the user bids on an item, we want to show a processing message, and after a 1s pause show a message stating the bid has been placed; this message goes away after a second.

AXURE relies on the case editor and dynamic panel to simulate this piece of the user flow. The workflow is as follows:

1. On productPopup panel, use a rectangle UI element and style it to serve as the processing message. 
2. Convert it to a dynamic panel and name this messagePopup and set as hidden 
3. Select and duplicate the state inside the newly created dynamic panel using the widget manager, and name this new state bid placed. The first state can be named processing 
4. Select the bid placed widget state and restyle UI elements inside it to say "bid placed" 
5. Go back to productPopup panel, and add click interaction on the BID $5 button. 
6. In the case editor, add a set of five behaviors: ShowmessagePopup> wait for 1s > set PanelmessagePopup to bid placed state > wait for 1s > hidemessagePopup.

Watch video for displaying dynamic messages in Axure.

INDIGO STUDIO uses animation timeline and animation segments to achieve the same flow. When you create a new state based on the interaction, the timeline area records any visual change made to the new screen state. You then drag out these changes in the timeline to add duration to the transition, and arrange these changes to adjust timing. Animation segments help daisy chain UI changes. That is, each segment will auto-play without waiting for the users to interact.

The workflow is as follows:

1. From the clicked Preview state, add a click interaction on the bid $5 button to create a new state
2. In this new state, named clicked Bid $5, design the processing... message.
3. Use the animation timeline area to create an animation segment and drag it out to 1s.
4. In this segment, change the processing message to say bid placed.
5. Create a new animation segment, and drag it out to 2s
6. In this segment, remove the bid placed message altogether.

Watch video for displaying dynamic messages in Indigo Studio.

4. Manage Prototype using alternate views (Axure) vs. Interaction Explorer for visualizing user flow (Indigo Studio)

Given that both Axure and Indigo Studio make use of states (widget vs. screen states), there is a need for managing states that are created.

As a designer, it's helpful to verify whether everything linked up the way it's supposed to work. Furthermore, when a designer other than you has to continue your work, they will need some way to make sense of how the prototype was created in order to make tweaks or extend the prototype. Tracing the interactions defined is a good starting point to explore the prototype. That is, based on the interaction what happens next, then what does the user do, then what happens on UI, and so on.

AXURE makes use of alternate views to represent the interaction. I am calling it alternate views because each view offers a piece of the user flow. Reviewing all the views together helps sum up the user flow being defined.

In Axure, once you add an interaction, say on the Bid $5, it places an adorner on the UI element indicating that an interaction is present. During design time (i.e., as you are designing the prototype), selecting the UI element with interaction populates the Widget interactions and notes panel. Here you can view what's supposed to happen when the user clicks on the button. Axure refers to a set of selected behaviors triggered by an interaction as a case. One can review these actions/behaviors by matching it up with the states in the Widget manager (if a dynamic panel is used).

In our example prototype, you would sanity check the Axure prototype in the following way:

1. Select the Bid $5 on the designer
2. Review the case or set of behaviors defined.
3. Since the dynamic panel called messagePopup is hidden by default, review the result of the interaction by inspecting the state in the widget manager.
4. Run/preview the prototype to view the widget states in the context of the screen (showing widget state together with the screen).

In INDIGO STUDIO, the interaction flow is automatically graphed in the interactions (IX) explorer. Every time you add a new interaction, this graph is generated in the background to serve as a reference and as way to switch between states. Any UI state created as a result of adding an interaction is shown in the IX explorer.

To view the states and interactions defined in the screen, users click on the state-name drop down. The drop-down initially reveals a mini view of the user flow. You can hover to get a state preview or click to go to that state.

With the IX explorer maximized, you can view the user flow defined on the screen. The thumbs represent the screen states, and the arrow represents the interaction. The flow is read left to right. As we discussed earlier, each state name is a combination of the interaction defined and the element on which it was defined. The idea behind this naming convention is to communicate what lead up to this states.

5. Only widget-States (Axure) vs. Screen-States (plus widget states in Indigo Studio)

In a prototyping tool that allows UI-states, you could think of it a single-page app where the user is never leaving the screen/page. Instead, based on the interactions new content or a change is shown on demand, or based on interactions.

Consider a situation where something is shown as a pop-up or a modal overlay. Here the user has not navigated away from the screen; the screen is still in the background, but the pop-up is being shown on top of the content you were viewing. This approach is more inline with the dynamic nature of applications, which is different from say websites, where the interaction serve as pointers to different static screens/pages (e.g., home page, about us page). Don't get me wrong...one can still simulate these with separate screens. However, if you have to make any UI change or tweak to the original screen context, you will have to refactor multiple screens. (And yes, I have heard of masters to solve this issue of refactoring, but's that a topic for another day).

In AXURE, widget is a generic name for a UI element or a collection of elements, which you have converted to a dynamic panel. Widgets can contain a set of UI changes, which can be chunked into widget states or states of the dynamic panel.

Dynamic content is usually triggered with an interaction, which would set the widget into any one of contained states. Dynamic panels can also be nested. In the example we are using, there is a Dynamic panel nested inside of productPopup and named imageCarousel. This nested widget has three states, each state showing a different image. Interactions are then defined on each of the thumbnail images (1,2, and 3) to set the bigger image to required state of the imageCarousel to match the image thumb clicked on. The UI change is restricted within the widget boundary.

Watch video clip for defining image carousel interaction in Axure.

INDIGO STUDIO, by default, makes use of screen/page states. The difference is that you are editing the state of the screen as opposed to the widget (e.g., imageCarousel). Editing nested elements are no different than designing the screen itself. This allows you edit any UI elements on each screen simultaneously, and the changes are applied on top of the original screen context. Which also means that you can refer the screen context as you are making changes to the nested elements.

Of course, widget-state like behavior is also possible using screenparts.

To change the bigger product image based on the thumb selected, we'd use the interactions-first approach described earlier. Select the thumb1 and add an interaction to create a new screen state. In this screen state, switch out the bigger image. So the same for the remaining thumbs. When you do this, the resulting state is auto-named Clicked Thumb 1. In this state you can not only switch out the bigger image, but also edit/add any UI element on the screen state.

Watch video clip for defining image carousel like interaction in Indigo Studio.

Summary

In this article, we reviewed how Indigo approaches adding transitions, managing screen states, and introduced the subtle difference between widget states and screen states. We compared it to how Axure approaches these facets of prototyping. Read part 1 of this two-part series to view "interactions-first" and "Direct manipulation in Context" approach in Indigo Studio.

The complete video tutorial for each tool, and project files are available in the links shown below.

• Watch Prototyping with Axure | Download Axure Project
• Watch Prototyping with Indigo Studio | Download Indigo Studio Project

Note If you notice inaccuracies, please let me know so that I can correct them. Some of the steps may have been omitted in the interest of time.

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

Silverlight 2014 Volume 1 Service Release (Build 14.1.20141.2083)

• Notes in PDF Format
• Notes in Excel Format

Silverlight 2013 Volume 2 Service Release (Build 13.2.20132.2199)

• Notes in PDF Format
• Notes in Excel Format

Silverlight 2013 Volume 1 Service Release (Build 13.1.20131.2380)

• Notes in PDF Format
• Notes in Excel Format

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

WPF 2014 Volume 1 Service Release (Build 14.1.20131.2406)

• Notes in PDF Format
• Notes in Excel Format

WPF 2013 Volume 2 Service Release (Build 13.2.20132.2219)

• Notes in PDF Format
• Notes in Excel Format

WPF 2013 Volume 1 Service Release (Build 13.1.20141.2108)

• Notes in PDF Format
• Notes in Excel Format

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

WinRT 2014 Volume 1 Service Release (Build 14.1.20141.2082)

• Notes in PDF Format
• Notes in Excel Format

WinRT 2013 Volume 2 Service Release (Build 13.2.20132.2094)

• Notes in PDF Format
• Notes in Excel Format

WinRT 2013 Volume 1 Service Release (Build 13.1.20131.2278)

• Notes in PDF Format
• Notes in Excel Format

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

WinPhone 2014 Volume 1 Service Release (Build 14.1.20141.2071)

• Notes in PDF Format
• Notes in Excel Format

C# is an object oriented programming language developed by Microsoft. The C# language is designed to be platform independent, and borrows its syntax heavily from both Java and C++ (so any experience of those languages will help those starting out). The name comes from the musical notation, and indicates a progression or incremental verison of C++.

C# is part of the wider Microsoft .NET Framework. The .NET framework is a set of libraries and standards that can be used across a variety of languages (including C#). The framework offers support for a number of user interface, data access and web application libraries and is the primary means of creating modern Windows applications.

Why use C#?

C# has become the goto language for Windows application developers for a number of reasons. Firstly it is heavily promoted in this way by Microsoft, and they offer a strong suite of tools to support it - Visual Studio being the most obvious example.

C# is also a popular language for projects involving the .NET Framework. Included with the Windows operating system (Windows Server 2008 and Windows Vista shipped with .NET 3.0. Version 3.5 was included with Windows 7 and Windows Server 2008 R2. Windows 8 includes version 4.5 by default) .NET has been adopted as somewhat of a standard for applications on the platform.

The .NET framework has been implemented on other platforms (such as Linux), by the Mono Project, so those wanting to develop away from Windows have options. Xamarin also offer a number of products that allow developers to create mobile applications in C#. Microsoft recently unveiled news of a new open source compiler for .NET called Roslyn with which they are plotting the future of both Visual Basic and C#.

Performance wise C# was never designed to challenge languages like C or C++, running as it does on top of a ‘Just In Time’ (JIT) compiler (Languages like C++ are compiled for specific platforms). Its design goals are centered more around sound object oriented principles, and providing resilience and relatively easy debugging. That said for hardware independent projects it is a more than capable modern language. Rosyln is part of a wider project by Microsoft to open source a lot of its development technologies, which many expect will help improve both compatibility and performance in the future.

Useful tools to look out for

Visual Studio (more information on Update 2 for Visual Studio 2013 here) is the obvious tool for anyone wanting to get serious about C# development. As well as offering the features you would expect (syntax highlight, intelligence, integration with other Microsoft tools and technologies) it is also extremely well supported by the wider development community. 

However Visual Studio is far from the only tool the budding C# developer should be aware of. Here are a couple more:

1. User interface developer tools from Infragistics - Our own set of tools are perfect for anyone getting serious about C# Development. Our Windows Forms tools are particularly popular with C# developers.
2. Reshaper - Code refactoring and inspection all integrated into Visual Studio. A very useful tool.
3. GhostDoc - A Visual Studio extension to aid code documentation.

More information

Hopefully this article has given you a good feel for C#, what it is, and how you can make it work for your projects. Those wanting to continue their education should have a look at the following links and resources:

1. Our blog - The Infragistics blog contains a wealth of useful information for the budding C# developer.
2. The Scott Hanseman Blog - Scott works on the web platform team at Microsoft and runs a well known blog covering a host of technical subjects. Well loved by developers, there are always interesting posts covering C# and the .NET framework.
3. Visual C# resources from Microsoft - A great set of guides for those just starting out.
4. Bill Wagner blog - Bill is a C# MVP (Microsoft ‘Most Valued Professional’) and the author of many C# books. His blog is very in-depth, and often technical, but is a valuable resource from a real subject matter expert.

Introduction

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release Notes: NucliOS 2013 Volume 2 Build 179 and NucliOS 2014 Volume 1 Build 79

By Torrey Betts

In the previous post we did an overview of the different Node.js drivers for Microsoft SQL Server. There was a comparison between different modules for SQL Server and were considered and their advantages and disadvantages

Developers who work mainly with Node.js and open source technologies have experience how to build and debug Node applications.  People, dealing with Microsoft SQL Server usually have more experience with Visual Studio and Microsoft platforms. It is also possible to use SQL Server Data Tools with VS

Node.js Tools for Visual Studio:

Node.js Tools for Visual Studio is a good solution if you want to get advantages from both – Node.js and SQL Server ( it is not a requirement – it just make development suing both technologies easier ).

The first public Alpha is released in November, 2013. Beta 1.0 is available from April, 2014 and in July is relapsed Beta 2.0

Node.js Tools for Visual Studio, aka NTVS, is a free/OSS plug-in that turns Visual Studio into a Node.js IDE. It only takes a few steps to get setup so let's jump right into it.

You need to have installed:

• Node.js
• Visual Studio 2012 or 2013 ( Express for WEB, Professional, Premium or Ultimate)
• Node.js Tools for Visual Studio

NTVS supports Editing, Intellisense, Profiling, npm, TypeScript, Debugging locally and remotely (Windows/ Mac OS /Linux), as well Azure Web Sites and Cloud Service.

It id designed, developed, and supported by Microsoft and the community.

The interactive window is part of NTVS

IntelliSense exposes results of analyzing your programs in three different forms: completions, signature help, and quick info.

Node.js Tools allows you to create projects using the Visual Studio project system. Project files (.njsproj) reference all the source and content files associated with your project, showing them all in the Solution Explorer window and enabling NTVS to most efficiently work with your files.

You can use templates to create Node.js projects – console applications, web applications, Node.js + Express apps and Microsoft Azure Node.js apps/

You can also use the integrated debugger in Visual Studio

Below you can find examples how to start with the most popular Node.js drivers for Microsoft SQL Server

• node-sqlserver-unofficial

The connection string – the example is given with Azure SQL database, but you can adapt it for SQL Server on premises.

   1:var sql = require('node-sqlserver-unofficial');

   2:  

   3:var conn_str = "Driver={SQL Server Native Client 11.0};

   4: Server=tcp:[database-server].database.windows.net,1433;

   5: Database=[your-database];

   6: Uid=[user]@[database-server].database.windows.net;Pwd=[your-password]; 

   7: Encrypt=yes; Connection Timeout=30;";

Create query using Node.js and node-sqlserver-unofficial

   1: sql.query(conn_str, "SELECT TOP 10 FirstName, LastName FROM Person.Person", function (err, results) {

   2:if (err) {

   3:         res.writeHead(500, { 'Content-Type': 'text/plain' });

   4:         res.write("Got error :-( " + err);

   5:         res.end("");

   6:return;

   7:     }

   8:     res.writeHead(200, { 'Content-Type': 'text/plain' });

   9:for (var i = 0; i < results.length; i++) {

  10:         res.write("FirstName: " + results[i].FirstName + " LastName: " + results[i].LastName );

  11:     }

  12:     res.end("; Done.");

  13: });

• tedious

Configuration – how to configure credentials for SQL Server Database with Node.JS + tedious

   1:var Connection = require('tedious').Connection;

   2:var Request = require('tedious').Request; 

   3:var config = {

   4:  server: '[db-server].database.windows.net',

   5:         userName: '[user]@[db-server].database.windows.net',

   6:         password: [password],

   7:         database: ' [database] ' ,

   8:         encrypt: true// for Azure users

   9: }

NTLM support just landed in Tedious driver :

nerdventure.io/sql-server-and-node-js

Execute query using tedious.

   1:function executeStatement() {

   2:   request = new Request( "select 42, 'hello world'", function(err, rowCount) {

   3:if (err) {

   4:       console.log(err);

   5:     } else {

   6:       console.log(rowCount + ' rows');

   7:     }

   8:     connection.close();

   9:   });

  10:

  11:   request.on('done',function(rowCount, more) {

  12:     console.log(rowCount +' rows returned' );

  13:   });

  14: connection.execSql(request);

  15: }

Creating a connection to SQL Server using tedious.

   1:var connection = new Connection(config);

   2:  

   3: connection.on('connect' , function(err) {

   4:// If no error, then good to go...

   5:     executeStatement();

   6:   }

   7: );

Insert Query, using tedious Node.js driver.

   1: connection.on('connect', function(err){

   2:var request = new Request("INSERT INTO MyTable (uniqueIdCol, intCol, nVarCharCol) VALUES (@uniqueIdVal, @intVal, @nVarCharVal)",

   3:function(err){

   4:if(err){

   5:             console.log(err);

   6:         };

   7:     });

   8:  

   9:     request.addParameter('uniqueIdVal', TYPES.UniqueIdentifierN,'ba46b824-487b-4e7d-8fb9-703acdf954e5');

  10:     request.addParameter('intVal', TYPES.Int, 435);

  11:     request.addParameter('nVarCharVal', TYPES.NVarChar, 'hello world');

  12:  

  13:     connection.execSql(request);

  14: });

• tedious-ntml

Tedious-ntlm is a  forked version of Tedious is a work in progress towards NTLM authentication.

Sample connection string is demonstrated below:

   1:var tds = require("tedious-ntlm");

   2:  

   3:var config = {

   4:     userName: 'dba',

   5:     domainName: "mydomain",

   6:     password: 'mypassword',

   7:     server: 'mssql-server',

   8:     options: {

   9:         instanceName: "SQL_Instance_Name",

  10:         database: "DemoDB",

  11:         debug: {

  12:             packet: false,

  13:             payload: false,

  14:             token: false,

  15:             data: false

  16:         },

  17:         encrypt: true

  18:     }

  19: };

• Edge.js and edge-sql

Connection string / using environment variables

This is the default approach when you are using edge-sql

   1: SETX EDGE_SQL_CONNECTION_STRING "Data Source=localhost;Initial Catalog=node-test;Integrated Security=True"

   2:  

Query MS SQL Server directly using Edge.js

   1:var getTopUsers = edge.func('sql', function () { /*

   2:    SELECT TOP 5 * FROM SampleUsers ORDER BY CreateDate DESC

   3:*/ });

Query SQL Server directly using Edge.js / code to set the connections in Node.js

   1:varparams = {

   2:     connectionString: "Data Source=IGBGSOFEV06\\SQLEXPRESS;Initial Catalog=NodeJS;Integrated Security=True“ ,

   3:     source: "SELECT TOP 5 * FROM SampleUsers ORDER BY CreateDate DESC"

   4: };

   5:  

   6:var getTopUsers = edge.func( 'sql‘ , params);

Handle query results ( edge-sql )

   1: getTopUsers(null, function (error, result) {

   2:if (error) { logError(error, res); return; }

   3:if (result) {

   4:         res.write("<ul>");

   5:         result.forEach(function (user) {

   6:             res.write("<li>" + user.FirstName + " " + user.LastName + ": " + user.Email + "</li>");

   7:         });

   8:         res.end("</ul>");

   9:     }

  10:else {

  11:         res.end("No results");

  12:     }

  13: });

• Execute .NET code to query SQL Server

Edje.js ia a Node.js module, providing native binding to .Net world:

   1:var edge = require('edge') 

   2:var hello = edge.func(function() {/* async (input) => {

   3:    return ".NET welcomes " + input.ToString();     

   4:}*/})

   5: hello('Node.js', function(error, result) { 

   6:     error && throw error 

   7:     console.log(result)

   8: })

It is possible to create .NET library, implementing any queries, that you can create in .NET with ADO.Net and after that to import this library in your Node.js project and invoke methods using Edge.js module.

Create a .NET class library

   1:publicclass CSSample

   2:     {

   3:public async Task<object> Invoke(object input)

   4:         {

   5:             ....

   6:         }

   7:  

   8:public async Task<List<SampleUser>> QueryUsers(int pageNumber, int pageSize)

   9:         {

  10:             ....

  11:         }

  12:     }

   1:publicclass SampleUser

   2:     {

   3:publicint Id { get; set; }

   4:publicstring FirstName { get; set; }

   5:publicstring LastName { get; set; }

   6:publicstring Email { get; set; }

   7:public DateTime CreateDate { get; set; }

   8:     }

Import the .Net assembly and use it’s API in Node.js + Edge application  ( you should specify the method, that will be invoked )

   1:// Set up the assembly to call from Node.js

   2:var querySample = edge.func({

   3:     assemblyFile: 'EdgeSampleLibrary.dll',

   4:     typeName: 'EdgeSampleLibrary.CSSample',

   5:     methodName: 'Invoke'

   6: });

Invoke a specified method from Node.js

   1:// This is the data we will pass to .NET

   2:var data = { pageNumber: 2, pageSize: 3 }

   3:  

   4:// Invoke the .NET function

   5: querySample(data, function (error, result) {

   6:     ....

   7: });

The use of Node.js, Visual Studio and SQL Server makes it easy and flexible the creation of multiplatform data centric applications (on premises and in the cloud).

In the next part of this article you can learn how to use Node.js module for Microsoft  SQL Server / Azure SQL Database in Microsoft Azure applications (Azure Web Sites and Azure Cloud Services ). We will take a look at the best practices and cover different use cases.

If you want more information about how to use Microsoft SQL Server & Node.js feel free to contact me at mmateev@infragistics.com

You can learn more about Azure Bootcamp Bulgaria if you follow us on Twitter @mihailmateev  and @Infragistics and stay in touch on Facebook, Google+, LinkedIn and Infragistics Friends User Group !

Here's your weekly roundup! Enjoy!!!

4. Life as a Software Engineer: Learning to Work with Ease (Conductor Nightlight)

3. The Simpsons in CSS (Chris Pattle)

2. Best Practices for Building Angular.js Apps (Medium)

1. 50 Fantastic Flat Web Designs from 2014 (SpeckyBoy)

Over the last few weeks we have looked in depth at C#, including a guide for those just starting out with the language. In this post we are going to look a little more at what type of projects C# can be used for, and the type of code the languages particular features make it most suitable for.

Firstly it is important to note that C# is just one of several languages that can be used with the Microsoft .NET Framework. Many of the advantages and features of C# are actually tied very closely to .NET, and hence are also applicable to languages like Visual Basic .NET and Visual C++ .NET.

So what can C# be used for? Well in short, almost anything. It is flexible enough to power TCP/IP Servers, the humble Raspberry Pi and everything inbetween.

C# does of course have particular strengths. The first mention should go to Windows application development. Such is the support for .NET on the Windows platform that C# is now pretty much every developers first choice for building Windows desktop applications.

Windows 8 has done much to accelerate this adoption. The vast majority of third party apps in the Windows store are written in C#. Whilst the store has yet to see the same popularity or success as Apple's iOS mobile equivalent, it is undoubtedly the future of Windows application distribution. C# certainly has a bright future on Windows.

C# also supports the creation of web applications, typically via WebForms and MVC. ASP.NET MVC is a powerful modern way to create applications based on the model-view-controller architecural pattern. MVC describes a way to structure an application. The Model handles data and logic, View is concerned with the presentation of that data to the user, and the Controller looks after user inputs. ASP.NET MVC was opened sourced in 2009, and version 5.1.2 was released in April 2014.

The Microsoft ‘All-In-One Code Framework’ is another invaluable resource for web developers interested in exploring the use of C# for web applications.

When it comes to mobile, C# is becoming increasingly popular. Xamarin are leading the way in this area, offering cross platform tools for all of the major mobile platforms. MonoCross is an alternative implementation, though the project has gone a little quiet of late.

O’Reilly, long time publishers of developer and technical focused textbooks, also make available a useful resource in the form of ‘Mobile Development in C#’.

Microsoft is also very much behind C# on mobile devices. It has recently released an update to Visual Studio 2013 which supports ‘universal apps’ - that is apps developed side by side for both Windows desktop and Windows mobile devices.
No post of this type would be complete without looking at some of the technical features that make C# useful for modern development projects. There are a huge number of features and functions provided by C#, but three that we think stand out are:

• Delegates - A delegate is a type safe function pointer, representing references to methods with a particular parameter list and return type. Delegates can represent instance methods as well as static methods (standard function points are limited to the latter). Unlike pointers in languages like C++, delegates are object-oriented and secure. Delegates are used to pass methods as arguments to other methods, and as such are ideal for defining callback methods.
• The Yield keyword - With C# 2.0 Microsoft introduced the Yield keyword, which allows any dataset to be exposed as an enumerable list (and iterated with a foreach loop). One of the great uses for the Yield keyword is it removes the need for an explicit enumeration class.
• Lambdas - Version 3.0 of the .NET Framework introduced Lambdas, an anonymous function that can be used to create delegates or expression tree types. Lambda functions are very useful when writing LINQ query expressions.

What's included in this update, you wonder? Here's the gleaming list:

• Replace existing shared prototype
• Delete shared prototype
• View screen states inside project home
• Easily add navigate-to interaction to screen state
• Nest screenpart inside another screenpart
• Faster maintenance updates
• Auto-size images for iOS device prototypes
• Nest groups inside another group
• Cut & Paste improvements

Replace Existing Shared Prototypes

Since day 1 of release, Indigo Studio has allowed you to share/host prototypes on the Infragistics server. This free sharing service provides a simple URL where your prototype is hosted. You can then share this link with anyone to run the prototype in the browser, with no plugin or special app required.

The problem was that once you shared the prototype URL, it could no longer be edited. If you wished to update the shared prototype, you needed to share again from inside the app, which in turn generated a new URL. We realize this can be bothersome since you may not want to email a new link to the stakeholders or viewers. At the same time you want viewers to review the freshest prototype. Well, the good news is that now you can republish your prototype (i.e., reuse the Prototype URL)!

With this update, after you share a prototype on our server, next time you try publishing a prototype you will have two options to either SHARE LINK TO PROTOTYPE or to REPLACE EXISTING PROTOTYPE. Using the REPLACE option will list your share history. Pick the one you want to Replace, and that's about it.

Delete or Manage Shared Prototypes

Similar to replacing prototypes, sometimes you just want to delete a prototype shared on Infragistics server for reasons of your own. Either that, or you shared a prototype link in the past, and now you want to send it to someone else but don't remember the link.

Indigo Studio now supports the concept of a share history for each project, which will also let you delete the prototype from our server (delete operation is permanent). This option, called Manage Shared Prototypes, is available as part of the Share Prototype button in the project home.

Selecting a prototype in this list will give you options to copy the prototype URL or delete this prototype permanently!

View Screen States inside Project Home

Now you can view the states contained inside a screen without having to open the screen. Hover on the screen thumbnails in your project home, and use the Show States option

Easily Add Navigate-To Interaction to Screen State

In previous versions of Indigo Studio when you needed to add a NAVIGATE TO interaction that points to a state of a different screen, you needed check the Show Interactions option to view the states. This was rather performance intensive because it behaved like an expand all operation.

With this update, you can view the interactions-Explorer (Flow) view of any screen right from inside the Navigate to dialog. You will be able to view the now familiar flow representation of states inside any screen. Use the Pick a State option which is shown on each screen thumbnail.

Nest Screenpart inside another Screenpart

Since we shipped reusable custom UI elements, a.k.a, Screenpart, quite a few of you have been asking for the ability to add a screenpart inside another one. In other words, nest screenparts. It's here, so nest away. Now when you edit a screenpart instance, the screenpart toolbox is available. This was not available before.

The only limitation is that you cannot nest a screenpart inside itself. As in, you cannot add screenpart A inside an instance of screenpart A ;).

While nesting screenparts is not a requirement for rapid prototyping, we know there are situations when this level of reuse may come in handy.

Faster Maintenance Updates

It's important to us that you have the freshest, and a more stable, version of Indigo Studio to use. As part of this, we periodically ship product updates. Like the case here, this update is Version 3 (Update 3). Each major update comes with new functionality, feature improvements, and yes, bug fixes. With this release, we are introducing "Maintenance Updates" which mostly include bug fixes to improve the stability and performance of Indigo Studio.The basic idea is that we don't want to wait till a major update is ready before we can ship bug fixes. We want to get performance improvements out to you as soon as we have them ready.

You will notice an update indicator on the top right corner of the app window. When there is a maintenance update available, we will download it in the background and automatically apply the patches next time you restart (unless you tell Indigo Studio not to).

You can also use this update notifier to check for new updates at anytime. For the most part, if you leave the default settings, maintenance updates will happen silently. When there is a major update, we will download and keep it ready until you take action. Major updates are not applied automatically.

Auto-Size images for iOS device prototypes

If you are creating your iOS app mockups in applications like Photoshop or fireworks, you may be creating these at a resolution of 640 x 1136 px to make it look right on retina displays.

After this update, when you add these images to the design surface for use in iPad and iPhone device prototypes, we automatically size these to visually fit the devices (no loss in resolution); simply trying to save you a step of having to resize the images physically. Add your hotspots and start making these interactive!

Nest Groups inside another Group

Indigo Studio will preserve any group already present when you create a new group. Say you have a group A and group B. Grouping these two will create a third group, with group A and B as sub-groups.

Cut & Paste Improvements

Cutting and pasting UI elements with interactions will preserve any relevant interactions. For instance, if you cut & paste a button that already has a tap interaction pointing to a screen state, this interaction will be preserved when you paste it in a different screen state.

How to Get This update?

Here's how to update the version of Indigo Studio installed on your machine:

• If you have the option to automatically check for updates on startup checked, you should see a dialog box pop up when you launch Indigo. Simply click update, and Indigo Studio will do the rest. This is the easier approach.
• If for some reason you chose not to automatically check for updates, go to MENU > HELP & ABOUT and use the "CHECK FOR UPDATES" option.

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned

For the first time in Sofia an event dedicated only  to AngularJS will be held on August 27, 2014 at Infragistics Bulgaria office: 110 B, Simeonovsko Shosse Bul., Office Floor III , 1700 Sofia, Bulgaria.   The topic of the event is “AngularJs Tips and Tricks”.

Infragistics do much to be done the first AngularJS event in this region. The event will be of interest to all specialists, using JS / JavaScript frameworks – developers, visual designers, UX, managers. The meeting is supported by Infragistics, Infragistics Friends and jQuery Sofia user groups .

Most of JS developers have seen at least several times the AngularJs into presentations. So most of the people are pretty familiar with AngularJs at this post. This will be two parts presentation. First part will be deep dive into Angular’s injector object, explaining how dependency injection is working. In the second part, the lecturer will share tips and tricks that he learn by working with AngularJs for more than an year.

Speaker is Radoslav Stankov ( rstankov.com, github.com/rstankov) .

Radoslav is a web developer for more than a decade. He believes that frontend and backend are equally important. After several years working with Backbone.js, he is sure that AngularJs is the next big step in the evolution of web development.

Infragistics Bulgaria Office 

Location:

Photos from previous events

Due to the great interest in “AngularJS Tips and Tricks” event (the first 100 seats were booked for 2 hours) the event organizers did everything to offer few more seats.

If you are interested to participate – hurry up and grab one of the last tickets here: https://angularjs-tips.eventbrite.com.

If you have any questions feel free to contact the Event Admins at mmateev@infragistics.com

Follow this event on Twitter with hashtag #jssaturday.

You can learn more about AngularJS event in Sofia if you follow us on Twitter @mihailmateev  and @Infragistics and stay in touch on Facebook, Google+, LinkedIn and Infragistics Friends User Group !

Warm Regards,
Team  AngularJS Sofia

I recently redesigned a community site for developers. The site has the typical blog and discussion boards, meeting information and general background information about the community.  The client said the site was old and unattractive, she also noted that people had trouble searching for meeting locations and submitting requests. I also saw issues with poor navigation, the organization of content areas and the writing of its copious amount of information that were difficult to read.

One of the first things we did was to perform an expert review by two UX Architects and a Visual Designer, we quickly recognized several major issues but we wanted to check the site with the target audience to see if we could discover any new issues and perhaps gain some insights to help us when we begin redesigning the site. We created eight tasks to investigate. The tasks addressed how well people can find their way around the site, how well they can search for a geographic location and how error free they can complete a form.

This is the first time I conducted a usability study for a website specifically targeted to just developers. Here at Infragistics we have many developers so it was easy to find several to participate in this study. All the developers said participating in the study was an eye-opening experience for them, many had not been part of a usability study before so this was a great opportunity to experience firsthand what it feels like to be in one.  It was an interesting experience for me because of the unusual results I saw. We listened to and observed the developers as they performed each task. At the end of each session we asked each participant to complete the System Usability Scale (SUS).

The developers were quite outspoken, most said they disliked the visual design, the layout of the navigation and pages and the way the web components were used within the site. A minority of the developers, two of the seven, were positive in their remarks. We observed that the developers were able to complete every task, some with little difficulty but for the most part they were able to complete each task easily. Each task the developers attempted was rated by an observer for ease of completion on a 7 point scale, most tasks were scored as a 6 or 7 – which was great. If we looked at just the ability of the participant to complete the task, it would appear that there were no usability problems. When the developers were discussing the site using the “think aloud” technique they clearly expressed frustration with the design yet they very quickly discovered how to accomplish each task.

The results of the SUS was in agreement with the UX expert review, the average score was a very poor 34.5. The SUS measures ease of use, system satisfaction and learnability. The chart below should help to put the score into perspective, thanks to Bangor, Kortum and Miller“Determining What Individual SUS Scores Mean: Adding an Adjective Rating Scale” for this scale.

The developer’s score of 34.5 clearly reflected their frustration with the site, but not their ability to get the tasks done.  Although the developers were able to complete all the tasks rather easily, they rated the web site as very poor. In the last 10 years of using the SUS I have never seen a score this low! I typically see users having problems completing tasks with scores in the 50’s. With scores in the 40’s users are generally dead in the water! I think that the developer’s success with the tasks, no matter how poorly the application was designed, reflects the ability of these developers to quickly recognize software patterns and process and then overcome any design issues.

So, are developers good judges of User Experience? Anybody can give you their opinion of the software they just engaged with, but remember it is just their own opinion. This study clearly showed that developers are very knowledgeable about the patterns and controls used in software products (they easily accomplished all the tasks) but because they know so much they are also biased. This bias is known as the Curse of Knowledge , when you have knowledgeable people (software professionals) who find it difficult to think about problems from the perspective of less informed people (users). Not all the developers showed this bias, but about a quarter of them did. Developers are not the best judges of User Experience, but they are no worse than any other software professional who comes to the table with their extensive knowledge of software. In the end, it is the job of a UX professional to review the software, consolidate findings and present actionable solutions. Early on we came to the conclusion that the site was in desperate need of a redesign, each step in the research process helped us verify our initial thoughts and then identify the goals we’ll need to accomplish to insure a positive User Experience.

Friends – I’ve submitted a talk to the 2015 SxSW Interactive conference. If you like my concept and my video, please take a moment to follow the link (http://panelpicker.sxsw.com/vote/31967) and vote for me. Thanks very much!

Kevin

Businesses tend to believe that innovation means “one big idea” that erupts from the minds of a chosen few “creative” individuals. 

Sticking to this model, innovation occurs unreliably, infrequently and at great expense. Don’t believe me? Make a list of all the truly innovative products, services, processes and software you can think of. It’s a pretty small list. Now take a look at how often these innovations occur. Most creations are derivative works that attempt to eke out small improvements on existing designs. We should not be OK with this.

What if there was a way to ensure innovation on every project timeline? A process that, if followed, would inevitably lead to the creation of artifacts that improved people’s lives in ways they could not have requested? What if we could have consistent, repeatable, affordable innovation?

We can. And design holds the key.

[youtube] width="640" height="360" src="http://www.youtube.com/embed/nKR-Xb--EDs" [/youtube]

Please Vote*

Ensuring Business Innovation in a (Mediocre) Business World

http://panelpicker.sxsw.com/vote/31967

* SxSW 2015 will require that you create an account with them in order to vote. Please don’t let that slow you down! It’s easy.

Dara here, checking in with another week of top Infragistics Developer News!

5. 3 New JavaScript APIs You Might Want to Follow (SitePoint)

4. 8 Twitter Bootstrap Alternatives (Modern Web)

3. Single Page Applications - Angular vs. Knockout (Scott Logic)

2. AngularJS: Organizing Your Code With Modules (CodeProject)

1. Top 10 Tips for C# Programmers (Developer.com)

Enjoy!!!!