The business of wire-framing

With emergence of web 2.0 everything is going online. Websites are no longer small partly usable entities but have grown in to become full fledged applications. With this the scope and expectation of a web application have risen dramatically over past 2 years. Everybody want’s an intelligent good looking and robust application developed quickly and in budget. But how good does it go when we get real?

If you want a web-application to be developed or are a developing one it is extremely important to look at the process that you are following. Some rough requirement document, some inputs from the technical team and some rough ideas? Why do you think so many software projects fail or lose track and overshoot time and effort estimation?

This incorrect estimation comes due to lack of clarity of the requirement and the process. Isn’t there a clear disconnect between your ideas and the person who is implementing them? How do you bridge the gap? The answers is WIREFRAMES

So, what is a wire-frame:

A wire-frame is a pictorial representation of data (and not design) of your application.  Creating a wire frame is normally an iterative process which involves some Business intelligence, Product technical know how and a usability analyst to come together. It could be a PPT or there are several tools available like Omnigraffle, Axure, MockupScreens or for that matter open office draw. It is like they say, always write an algorithm before you write an implementation. Wireframes bring an application flowchart and work flow algorithms to an easily understandable level.

In the first iteration ideally you would want the person who understands the business to roughly sketch his ideas on a piece of paper. As an iteration a Usability Analyst armed with the technical know how and behavioral aspects of a web application can start mapping them onto a wireframe.

Wire frame is not how your application but what it contains and some part of how it behaves.

 The 3 major advantages which impact everything from time to cost and success of the project are:

1) Wireframes increase the clarity about the application that you are getting developed or developing. If  there are any uncertainties or challenges they can be handled right at the beginning. The picture becomes more clear on every single piece of information that the system will get in or display. You do not want to create something you cannot sell, right?

2) Better estimation of cost and time: No doubt creating a wireframe would bring in its overhead on cost and time. But if you look at the overall picture it simplifies things for a developer/technical architect to such an extent that they can virtually see what they want. Also a  designer can create the views with better understanding and focus.

3) Project management: As the application grows and comes closer to being realized that’s when you can expect some major surprises. A wire-frame coupled with an iterative release process will ensure that you get what you expect

It is again not necessary that you stick to the wire frame as is. While the application gets developed there will be challenges and constraints however the magnitude of problem and the time taken to get over them will reduce drastically

I think in a nutshell. No wireframes there is a very little chance of you getting a quality product in time.

 

A sample wireframe:

BlazeDS + IE+ HTTPS issue

Problem:  While using blazeDS content is not transferred over HTTPS this may be because of a firewall or a reverse proxy like web-seal in deployment.

So if you have blocked the port 80 on server you will notice that application gets loaded but calls are throwing a ChannelFaultEvent.

Reason:

The request coming in from client over https hits the firewall which should be the endpoint URL and because of this the server side(firewall) should fire the request on the non-secure/HTTP port of BlazeDS server.

Solution:

The configuration of the channel should look something like

<channel-definition id=”secure-amf” class=”mx.messaging.channels.SecureAMFChannel“>
   <endpoint url=” {contextRoot}/messagebroker/amf” class=”flex.messaging.endpoints.AMFEndpoint“/>
   <properties>
                 <add-no-cache-headers>false</add-no-cache-headers>
</ properties>
</ channel-definition>

 Notice the client uses a secure channel and the server uses an insecure endpoint

Cheers,

Y

Flash Builder 4 ( Flex 4) : Overview part 2

So as promised , here I am with part 2 of overview on what’s new with Flash Builder 4. The part 1 was about IDE related changes in FB4.

Part 2:  Components and Syntax

In part 1 we have been talking about the IDE features. Staying in the design view, the components explorer now you can notice a few folders.
Adobe has released a new suite of (sprite) flex components with the sdk 4.0 which are called as spark components. So now we have 2 types of components
1.    Halo Components – The existing UIComponents (sdk 3.4)
2.    Spark Components – The new set of components
Let look at each folder
Controls
While most of the controls remain the same in both versions a there a few changes
Added:
•    Spinner (close to Numeric Stepper)
•    DropDown (redefined ComboBox)
•    VideoPlayer (newly added in place of VideoDisplay component)
•    RichEditableText (newly added). This is where you can see the amazing text control features like right-to-left, baseline-control and justification of text

The RichTextEditor has been removed from the list.

Data Controls:
All lists have now been grouped under data controls. Apart from the regular ones, there is one addition to this – the paged List control. The Spark list control offers higher-level functionality like paged-data  (by a ‘layering’ mechanism).

Containers:
No VBox,  HBox or Canvas, they have now been replaced by Group containers. So you have HGroup, VGroup well mostly the styling behavior has changed. You can review the example that follows the article to see how they behave.
Then there are these which have been added:
•    DataGroup
•    Scroller
•    SkinnableContainer
•    SkinnableDataContainer

Custom Components
Two new components
Flash component and Flash container: To allow you to directly access a component created in Flash Authoring tool.

New Flash Custom Components

NameSpaces
Moving onto syntax, the way new elements are created is a little different than Flex 3. Again most of these changes are on the styling side which I plan to explore a little later. We ll stick to the changes on code:
Namespaces have been changed. Now there are 2 basic namespaces that you would find yourself working with:
1.    xmlns:fx=”http://ns.adobe.com/mxml/2009″ – Contains non UI objects like arrays, objects, metadata declarations. That means when you add a script block in flex 4 the tag would be <fx:Script>.
2.    xmlns:s=”library://ns.adobe.com/flex/spark” – Contains the spark component library.
3.    xmlns:mx=”library://ns.adobe.com/flex/halo” – Contains the Halo component library.

Coming up next : Flash Builder 4 : Overview Part 3 on Styling

Flash Builder 4 (Flex 4): overview part 1

Finally Flash Builder 4 (read Flex Builder 4) is out. I was trying to review on what has changed and whats new in the latest release. Flash Builder… I don’t know I think I like Flex Builder better

I will review new features in Flash Builder 4 with respect to IDE ,Syntax,Components,Styling,Performance and finally a Conclusion.

So lets get started with the IDE,

On the whole the IDE looks just about the same. But look a little closer and you will notice a host of other things. The top then things that you might notice (If  you start building a project right away) are…

1 The Package Explorer (Flex Navigator in FB 3)
-The code management has changed a little.
-The packages are now grouped, which is a very good thing (you will know why if you use cairngorm)
-Outline has been included with the class shows SDK (framework) packages
-Uses swfobject.js instead of AC_OETags.js

The new Package Explorer (earlier: navigator)

2 The Component Explorer

The  Components view in the design mode now has a different folder structure. Some new components have been added and you won’t find some old components like the numeric-stepper. I will be adding a detailed review on components in part 2.

3 Data Services Tab

By Far, the most exciting feature of FB4. This tab allows you to link data from a source without a single line of code. See it to believe it.

The Data Services Tab

4 The Network Monitor

Adobe has really worked on Developer productivity and I say this because of this super cool feature that allows you to see the communication your app makes with your data server. No more searching for analyzers and http sniffers online 

The network monitor

5 ASDocs window

Another one for developer productivity. If you are working on Flex 3 I am sure you ll love this. No more opening new windows or googling up what some property means. The ASDocs  window allows you to see it there and then.

6 Auto Function Generator

Another one that generates a function definition without any typing

7 Theme chooser

Components are now divided into Spark and Halo(standard flex 3 components) compoents and with the theme chooser you can how you want to display them…

8 Appearence Window

Along with the Properties components (enhanced quiet a lot) there is another tab for Appearece. The styling for Flex 4 components has changed (especially for spark). The appearance window mainly caters to it.

9  States in Code View

This release will amaze you if you are a flex developer. State management, it seems has been enhanced drastically and this options grey’s out everything that is not included in the selected state. WOW !

10 Export as FXP – The new export format

The flex project archive (.zip) is now FXP.

This has been about the IDE Features and there is a lot more to explore, for the next part lets try our hands on some new flex compoents .

Coming up  : Review of Flash builder 4 Syntax,Components,Styling,Performance and finally a Conclusion.
Download Flash Builder 4 today

Flash (Flex) Builder 4 available for download

Yes Flex Builder 4 renamed to Flash Builder 4 and Flash Catalyst are  available for download on labs.adobe.com -> Get Flexing guys…

Cheers,

Y

Installing flex sdk 3.2 or higher

Download latest Flex SDK (It will be a zip file)
Shut down Flex Builder 
(Take Backup and) Delete the license.properties file at:  C:\Documents and Settings\All Users\Application Data\Adobe\Flex\license.properties
Extract the files at <FB3-install-dir>\sdk (Typically C:\Program files\Adobe\Flex Builder\…)
Start Flex Builder again -> This time it will prompt for a license key, if not prompted to enter the license information at startup, use Help -> Manage Flex Licensesput the  license key.
Datavisualization source files will be extracted

Flex problem: ArgumentError: Error #1063

If you are getting this error while using RSL
ArgumentError: Error #1063: Argument count mismatch on mx.core::CrossDomainRSLItem(). Expected 5, got 6.
Make sure your applications are compiles using a consistent verions of sdkIn this case the application  (which uses the remote library) needs to be compiled with flex sdk  version 3.2 or higher

Why Adobe Flex – A developers perspective

Due to lack of knowledge about RIA’s there is a common concern of most fresh pass-outs and Engg. Student. I am trying to address the most common question I face:”Why Should I start my career with Adobe Flex?”

Apart from it being the hottest technology around I think the following 2 points sum up my argument 

Keeping it short and simple: I think there are 2 distinct reasons why a fresh graduate should pick up a technology like Flex over Java or .Net or any other legacy technologies.
1. The world is moving towards Rich UI and everyone wants to make it simple.  A lot of efforts are being put on the way user interacts with the system than say around 5 years ago for a simple fact that you want a lot more users to be able to use the system without having to be technically trained on the same. With this changing trend the newer generation developer has to be well versed so as to start their career from a higher point.
2. The amount of competition that a technology like Java/.Net brings up is tremendous. It will take too much time and effort to move up the ladder because of no. of available resources and the experience levels.  Whereas, a technology like Flex which is fairly newer gives a fair chance to a B.E. who is about to start his career along with those working on other technologies for some time.
Also with this as the bend towards creating applications at a very rapid pace to gain the first movers and situation advantage is really important e.g. During world-cup people might want to create application that allows user to track progress of each team and can be hot property around that time. However, once the world cup is over the same app is of little or no use at all. Thus the concept of rapid development. Flex has a suite of components which, if used correctly can really quicken the rate at which applications are created.
Overall I think, If I had to start my career I would rather start it with an RIA technology than any other.
Cheers,

Y

Rich Internet Application

What is a Rich Internet Application?
By definition, an RIA is an application with richness of a desktop based application (like drag-drop, rich UI) and reach of an Internet web site.

This article is to answer a few basic queries that one has about RIA.
RIA journey started long back with Flash. But, since flash was always viewed as a designer’s tool(to which I do not agree at all), exploration of the term was to its minimum. But with technologies like (Adobe)Flex, (Microsoft)Silverlight coming in, things have changed.

RIA is basically the ‘magic at the front-end’. Rich and intutive applications are the need of the hour. Usability has become one of the most important features in todays application creation domain.

The process of creating a Rich Internet Application can be roughly broken down into the following steps(though these are not concrete rules):
1) Creating a user-journey – The flow of the application
2) Creating a user experience – The look and feel of the application
3) Creating the interface – Implementation of the features

RIA is a concept and not bound by a technology. One can opt any of the available options from Ajax to Silverlight.

We have pledged 5 100% Scholarships to a NGO

Following is the information related to the scholarship we are providing via Education Times and United way, a NGO. Please get in touch with them to apply for scholarship of our ‘Web and Graphic Designing with Specialization in Flash ‘course.

Background
Education Times, the thinking, youth-centric supplement of the Times Group at the completion of its 13 years of service in the Education sector aspires to build a deeper connect with its young readers. With is motto of “The Future, Now” Education Times this year wishes to launch a project which would touch the lives of its readers and the student community at large in a more meaningful manner.

We plan to initiate a scholarship drive to reach out to the students, who possess the flair, capability and aptitude but lose out on account of lack of financial resources.The process of shortlisting the candidates would be undertaken by United Way.

About United Way
United Way of Mumbai was established in 2002 on the initiative of Mr. David Good Ex-US Consul General India and with the support of American International Group, Citibank India, Ernst & Young, India, Hunt Partners, Jasubhai Group, J M Morgan Stanley Securities, Mahindra & Mahindra, Morgan Stanley New York, Principal Asset Management and Sony Television.

Role of the NGO

• Procuring a pool of applicants for the scholarships
• Identification of the right candidate for the Screening the applicants profile in terms of Family background, income status, and other relevant information.
• Administer aptitude tests (if required) incase a requirement of certain skills prior to awarding the scholarship

Contact Information

• For more information about this initiative please get in touch with Mr.Kiran Joshi : kiran.joshi@timesgroup.com
• For queries related to Tekno Point Multimedia write to : learn@teknopoint.info