Tutorial part 4 – Displaying Images

In this part we will learn the following:

• Creating a simple Flex application
• Displaying images

Creating a simple Flex application

Application is the default container tag. Skeleton of an MXML application file contains

• XML document type definition
• Opening and closing component tag set

Specifying namespace

• use xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags
• http://www.adobe.com/2006/mxml is the uniform resource identifier which associates a prefix (in this case mx) with a manifest file as follows

<namespace>
<url>http://www.adobe.com/2006/mxml</url>
<manifest>mxml-manifest.xml</manifest>
</namespace><namespace> <url>http://www.adobe.com/2006/mxml</url> <manifest>mxml-manifest.xml</manifest>
</namespace>

• Flex-config.mxml is located in installdirectory\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flex-config.xml

<strong>Setting the layout property</strong>

The layout property defaults to your last selection when building an application or component from the appropriate dialog box

The following are 3 layout property.

• absolute: Visual elements must have specific x, y values or constraints for positioning
• horizontal: Visual elements presented horizontally
• vertical: Visual elements presented vertically

If the layout property is not used in the Application tag, the default layout is vertical

Adding UI Controls

UI Controls are used to display user interface type components like Text, text input, buttons, images, combo boxes etc in an application

All UI tags are add between the application tag set or another container component

Example of the Label control to display a single line of text

<mx:Label text=“Hello Flexers!” />

Specifying components properties

Component properties can be specified in two ways

• As an attribute of the XML tag

<mx:Label text=“Hello” />

• As nested tags or nodes

<mx:Label>
<mx:text> Hello</mx:text>
</mx:Label>

Commenting you MXML code

Flex uses XML style comments which is similar to HTML comments

<! – - this is my comment – - >

<strong>Displaying images</strong>

The following type of images can be used in flex.

• JPEG (non progressive)
• GIF (can be transparent)
• PNG (can be transparent)
• SWF
• SVG (can only be embedded at compile time)

Methods for displaying images

There are two ways to display images in flex.

• Load them dynamically at runtime
• Embed them in SWF file

We can Specify image source in three ways

• Via source property of an Image control ; will load image dynamically at runtime
• Use Image load() method to add the images dynamically at runtime
• Embed them in the SWF at compile time using the @Embed directive; useful when you need instantaneous loading and offline application

Displaying images Examples

1) Loading dynamically at runtime

• Specify the image using the source attribute of the control
• Image is loaded at runtime

<mx:Image source=“myimage.jpg” />

• Assign an id to the image to reference in ActionScript

<mx:Image source=“myimage.jpg” id=“imageID” />

2) Using the load() method

Dynamically switch out the image using the load() method of the Image class as mentioned below

<mx:Image source=“addis.jpg” id=“imageID” width=“250” height=“250” />

<mx:Button label=“Change pic” click=“imageID.load(‘flower.jpg’)” />

3) Embedding images at compile time

You can embed images at compile time for instantaneous loading
To embed, use the @Embed directive when specifying the image source

<mx:Image source=@Embed(‘../images/myImage.jpg’)” />

Pros of embedding image

• Image is available immediately, it is part of the SWF
• Very useful for creating application that are able to work offline

Cons of embedding images

• Adds to applications SWF size
• Slows down application initialization process
• Must recompile application every time image changes
• Cannot use in data binding calls

Part 5: Laying out Flex application with containers

User Interface Development in SDLC

“User Interface” or UI Development is not a new term in software development life cycle. Starting from a small web site development to application or software development, User Interface plays a very important role. Many people believe, UI development is just about coding HTML, CSS and Java-Script but UI is way beyond these technical terms.

UI Development is not limited to Website development but extended to any kind of application development including client server. Even in wireframes and Prototyping we make use of UI technologies.

A user is not going to experience a software or website based on the backend technology used, but based on the User Interface and its experience.

This topic is intended to understand

- The role and importance of User Interface development in the SDLC
- How UI Development can be catered in each phase of SDLC starting from the Requirement gathering phase.

Introduction

Product development is the process of designing, creating, and marketing an idea or product. The product can either be one that is new to the marketplace or one that is new to a particular company, or an existing product that has been improved. In many instances a product will be labeled new and improved when substantial changes have been made.

Today Product development is becoming a need for every business, from a simple website to ecommerce websites, banking domain to mobile technology every business needs software or a product to communicate with the users.

We can categorize the product into this broad bucket

• Consumer Products
• Public Safety,
• Rugged Handheld Computers Utilities,
• Mobile & Fleet Management
• Mapping & GIS,

• Embedded Systems
• Portable Devices In-Vehicle Navigation & Telematics Tracking,
• Instrumentation,
• Security

• Engineering & Construction
• Construction
• Construction Asset Management
• Marine Construction
• Mining
• Surveying
• Infrastructure

• Agriculture Solutions
• Precision Agriculture
• Guidance
• Flow and Application Control
• Water Management
• Information Management

• Advance devices
• Defense
• Precise Timing

Each of these products needs a User Interface through which a user can accomplish their tasks. Having the best user interface provides the best customer experience and today’s competitive market-place demands that companies maximize the ease of use for their customers.

All product development goes through a similar development lifecycle, starting from requirement gathering to testing phase. Unfortunately, in the development cycle of most of the applications, the user interface design does not begin until most of the development has been completed, and is usually starved for time and resource

The results are hardly positive. Either the UI design is severely affected by assumptions made during the application development or additional resources are added to rework or completely re-program all or part of the application to accommodate new design. This leads to problems like design compromises, delay, budget overruns etc.

Given this the most effective strategy is to integrate and design the UI parallel to each phase of development lifecycle

In short, integrating UI design in the development process have several businesses benefits as follows:

- Create a better product
- Increase customer satisfaction and retention
- Allow greater flexibility in responding to customer feedback
- Lower development costs
- Shorten the development lifecycle

Lets look at the UI design process and how we can integrate it in all the phases.

User Interface design process

User interface development process can be categorized into 4 phases as below:

- Research and Analysis
- Design and Branding
- Prototype Development
- Production

This structured process can maximize communication between the company and its clients, lower development costs, and most importantly deliver the best user interface design.
This process is flexible and modular, thus allowing client to determine which phase are appropriate for their needs, and can be applied to both the creation of user interface for new applications as well as enhancements of existing applications.

2.1 Research and Analysis

Process:
In traditional Research & Analysis phase, two categories of information are gathered and analyzed by the user experience team.

1) Information about the users of the application
2) Information about the application itself

This establishes the context for User Interface design and this context informs the entire design process.

Additionally, during this phase as a part of UI development, UI developers can start researching about current market trends, UI technologies, and competitive analysis. This research can help the UX team during the consecutive phase of SDLC and both UI and UX team will have clarity of things possible and impossible and LOE (level of effort) required during development.

For existing applications the Research & Analysis phase also determines the strengths and weakness of current UI.

How:
The user data is gathered answering the following questions

- Who the users are?
- What are their skill levels?
- What are their qualitative expectations for the application?
- What task do they need to perform with this application?
- Under what environmental conditions will they use this application?
- Under what time conditions and constraints will they use this application?

The application information is gathered answering the following questions

- What problem is the application intended to solve?
- What are the functional purposes of the application?
- What are the operational purposes of the application?
- What are the marketing purposes of the application?
- What are the user interface specifications of the application?
- What are the software, hardware and graphical requirements to create and deliver the appli-cation?

The User Interface trends can be gathered answering the following questions

- What are the current UI trends?
- What are the current UI design patterns?
- Which are the latest tools and technologies being used?
- What tools and technologies are our competitors using?
- Pros and Cons of using any latest technology for the current product?

Deliverables:

- Personas
- Competitive landscape
- Usability goals
- Functional and non functional specifications

2.2 Design and Branding

Process:

During the design and branding phase, User Interface design is created that addresses the specific needs identified in the research & analysis phase and creates, revise or leverage the applications brand.

Involving UI design into Design phase

During design phase UI developers can work closely with the UX team to define the User interface (Wireframes, Visual design). A User Experience team may think out of the box while creating wireframes and visual design, but may not be aware of challenges, possibilities and limitations. Involving UI developers in this phase may ease the process, as UI developers understand the technologies and possibilities. This will reduce the last minute efforts from the UI developer’s side and additionally both the UI and UX team, as well as client will have a clear expectations set.

Deliverable:

- A discussion of the design philosophy and strategy used to create the UI design, including an explanation of how research brief informed the UI design
- A comprehensive set of screen layouts illustrating every part of the UI design
- Key screen that present the visual design and branding for the application.

Wireframe:

Wireframes is presented as a comprehensive set of screen layout consisting of Black and white sketches of every screen in the application. At this point the visual and graphic design processes have not yet begun.

Wireframe is an important step; because it helps the clients focus on how used will interact with the application rather than become entrenched in relatively subjective issues such as color or visual style. It enables us to postpone those and other subjective issues

By necessity this is a cyclic process, and once the screen layouts have been approved, a visual design is created that is informed by the UI design.

Visual design

Visual design process begins with the branding of application.

2.3 Prototype development

Process:

Using the approved design document as blueprint, prototypes of the User Interface designs are created. Based on clients needs the prototypes are created using HTML or flash. Prototypes can be low fidelity or high fidelity based on user needs.

The scope of the prototype created during this phase is tailored to the specific application and the user testing requirements. Some applications require a comprehensive click through or working model of the entire interface, while others only require a prototype of core functionality.

The prototype serves as

- A communication and review tool for the client
- An implementation guide for the software developer
- A user testing tool
- A working prototype enables clients to see how the user interface will perform without having a commit programming resource

Another benefit to a working prototype is that it dramatically improves the communication among UI design, marketing and application development teams, as well as any other key stake holders since marketers, designers and developers often think and use language differently, having a functional prototype leaves fewer issues open to interpretation or misunderstandings

Prototypes are infact an opportunity to identify any remaining user interface issues. Should there be design document and prototype are modified to incorporate changes prior to final approval.

Once the prototype is approved, development team can work to implement new user interface design quickly and efficiently without interrupting the development process to correct design is-sues.

The utilization of prototype also has significant marketing benefits. Since the prototype closely stimulates the actual application, extensive user testing can be one before the programming starts, which also produces significant cost savings. Additionally positive user feedback is a validation of design, confirming that the application delivers a user experience that meets or exceeds customer expectations. This positive feedback can be used for both internal and external marketing purpose, by building confidence in the rollout and promoting user adoption.

Deliverable: Interactive prototype of the new user interface

2.4 Production

A proper UI and UX team collaboration and Integration of UI design from the starting of SDLC can reduce lot of efforts and confusion. Also it can help in successful and timely delivery of the products in any company without any slippages and can increase customer satisfaction. Additionally it can help building ongoing relations with our clients.

Stay tuned for an interesting blog soon on “Ethnographic and demographic influence on design “

My latests passion

I have been in the field of user experience since 8.5 years by now and worked a lot on web technologies. My expertise lies in development and am a total novice in design.

Whenever I use to see professional icons and designs, I always use to appreciate them. Being a novice in design, I always loved design. I was always curious to know everything about designing, iconography, branding, color theory.

Normally people have the impression that developers cannot design and whenever I showed my interest in designing, many people told me the same. I took this as a challenge and thought, one day I will also design.

This interest of mine, generated a passion inside me to learn designing and I started gathering as much information as possible about designing.

2 days back I downloaded trial version of photoshop and started designing. I tried with designing small icons.

The first set of icons I developed is as follows. Though its not very professional and I know it needs some grooming, but I am happy that I was able to do some designing.

I showed this to my manager and colleagues and they were quite happy to see my design and encouraged my design. This generated more interest in me about designing and I tried some more design. This time I took help from one of the online tutorials and developed a book and this is what I came up with today.

Next I tried the following USB flash drive

After seeing the above design my colleagues liked it a lot. This is giving me more encouragement and I am falling in love with design.which

Adobe Flex: Creating a project – Part 3

Creating a Flex project and your first application
Now that we have seen how Flex builder looks lets start with creating our first flex project

Creating a project
A project is a grouping of resources that make up a flex application

When a Flex project is created a number of files and folders are automatically created as follows:

bin-debug folder: where your compiled applications resides

html-template folder: where the html wrapper page resides

.settings folder: where some configuration file resides

.actionScriptProperties, .flexProperties and .project files: project configuration files

src folder: All the MXML files, actionscript classes, assets reside inside this folder

libs folder: where custom class files reside

A main application file

Step 1: Select File > new > Flex project

Specify output folder. The default is bin-debug folder

Choose project build paths

The main MXML application file looks like this

page looks like this

Using the main application file

• The main application file contains the container set tag
• Each application can have only one associated application file
• The layout property is given the absolute value the first time you create an application
• Flex builder will retain your last layout selection for future applications if not specified.
• also If you do not specify the layout property, the layout will be vertical by default

Running the application file

Run the application by clicking the Run button. Run button is the green button on the top panel

What exactly happens when you click the run button?

back to tutorial part 1 | tutorial part 4 – Learning Flex fundamental

Adobe Flex: Flex Builder – Part 2

Understanding Adobe Flex Builder

Adobe Flex Builder is eclipse based development tool enabling:

• Intelligent coding that included editors like MXML, ActionScript, CSS, XML.
• Interactive step-through debugging and code hinting
• Rich Visual layout
• Visual UI and behaviors
• Interactive data visualization
• Skinning and styling

Flex builder consists of workbenches which refers to the flex builder development environment. The Flex builder workbench contains three primary elements

• Perspectives
• Editors
• Views

Perspectives

Perspectives are one of the element of Flex builder workspace.
Perspectives includes combination of views and editors that are suited to perform certain set of task.

Flex builder has two default perspectives

Development

This area is the development workspace and is used for code level development.

Debugging

This area is used for debugging the code.

Flex builder can have other perspectives if we are using plug-in configuration, like java.

Editors

An editor is the visual component in the workbench that is typically used to edit or browse the resource.

Flex builder Editor is where files of various types are edited in either

• Design mode

Design mode consists of visual components, which can be dragged , dropped and used.

• Source mode

Source modes is used for hand coding.

Views

A view supplies support tool when modifying a file in editor. Flex builder workbench consists of the following views

• Navigator view

Navigator view allows you to manage files, folders and projects

• Problems view

Problems view show errors in your code

• Outline view

Outline view hierarchically present and allows you to navigate to, all of the code elements and user interface in a file

Flex builder high level description with design mode enabled.

Flex builder high level description with source mode enabled.

Back to part 1 of this tutorial | part 3 – Creating a Flex project and your first application

Adobe Flex: Introduction to Flex 3 – Part 1

In this part, we will learn the following:

• Understanding Adobe Flex
• Adobe Flex product line
• Flex Architecture
• Flex resources

Understanding Adobe Flex

Adobe Flex is a RIA User Interface Framework that enables us to develop Rich Internet Application quickly, resulting in high productivity and customer satisfaction.

Adobe Flex is a highly productive, free open source framework which is used for building expressive web applications. Adobe Flex deploy consistently on:

• All major browser leveraging the Flash Player
• And on desktop with Adobe AIR

Where is Flex Used?

How Flex works?

The backbone of flex is ActionScript 3 and MXML (Macromedia XML). MXML again is set of ActionScript classes which comprises of some built-in UI components like Datagrid, Treegrid, Menubar, chart and so on.

MXML is used for creating the User Interface and ActionScript is used for event handling, data management etc.

Once the MXML and ActionScript is created and compiled, it gets converted into swf file and hence to view the Flex application we need flash player supported browsers.

Flex enables…

Flex Architecture

Lets look at high level of flex architecture

Flex Resources

Flex tutorials

http://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2-programming-tutorials.htm

Documentations

http://flex.org/

http://www.adobe.com/support/documentation/en/flex/

Flex component explorer

http://examples.adobe.com/flex3/componentexplorer/explorer.html

Flex tutorial – Part 2 Topics

Flex Builder

• Understand the Flex builder and its workbenches
• Use Flex builder effectively for design, development and debugging
• Create a Flex Project
• Create, compile and run a Flex application

Go to part 2 of this tutorial

Rich Internet Applications (RIAs)

Rich Internet Application (RIA) – this is the buzz word we hear quite often these days. Rich Internet Application which was coined by macromedia in 2002, was not very common till few years back, but with Web 2.0 boom RIA got a solid place in the web world.

So what is RIA

Earlier web was known as a one way communication system, where company use to showcase their details to end users. With the web 2.0 emergence, things totally changed. Web 2.0 gave the world wide web altogether a different persona. Where web was known to be a one way communication system, web 2.0 made it two way communication, where user was the king. Users can comment, rate, network, tag and so on and so forth.

Along with these flexibilities web 2.0 brought lot of new tools and technologies and concepts like Ajax, Adobe AIR, Adobe Flex, SilverLight, Isomorphic SmartClient and so on. With all these concepts came a buzz of creating web applications with richness and that is where RIA comes into picture.

So what does ‘Rich’ means in Rich Internet Application?

Rich Internet Application are applications which combine the flexibility and responsiveness of a desktop application with broad reach of the web. RIA gives user the flexibility to use a web application with the features that of a desktop application.

What is the concept of ‘rich’ in Rich Internet Application ?

The concept of richness can divided into 2 parts

• Richness in User Interface
• Richness in Data model

Richness in User Interface

Rich Internet Application (RIA) offers a very rich set of user interface controls which can intelligently interact with data model. some of them are:

Drag and Drop control and Accordion control

Auto Complete control

Tree Grid control

Data Grid control and Data sorting control

Charting control

Calender control

Rich Text editor control
Inline editing control
Auto save control

Richness in Data model

Any website or application is incomplete without data, so having a rich data model to fetch or control these data is important. Richness in data model means

• Ability to send and receive data asynchronously
• Ability to obtain data from server without redrawing the entire page
• Efficiently utilizing network bandwidth transmitting only the portion of data that has been changed
• Support of sophisticated data models

Anatomy of RIA
Adobe in one of their presentation showcased RIA as follows

Benefit of Rich Internet Application
Rich Internet Application (RIA) brings in lot of benefits for the end users and well as developers and companies. Some of them are as follows:

For End Users

• Responsive and Interactive
• Real time communication
• Fast and easy to use
• Allow users to remotely monitor and manage data
• Allows quicker task completion
• Cross platform support

For Business

• Increased customer loyalty
• Increase in new customers
• Increased productivity
• longer site visits
• Reduced bandwidth and operational costs

For Developers

• Easy to learn
• Ease of development

RIA tools and technologies
The term Rich Internet Application(RIA) may be new, but the technologies which RIA uses is the combination of already existing technologies. Most commonly used RIA tools and technologies are:

RIA Technologies

• Ajax (Asynchronous JavaScript and XML)
• XML
• JavaScript Object Notation (JSON)
• Advanced JavaScript

UI Frameworks

• Adobe Flex
• Microsoft Silverlight
• Google Web toolkit (GWT)
• Isomorphic SmartClient
• Java server faces (JSF)

JavaScript Frameworks

• Yahoo UI (YUI)
• JQuery
• Prototype
• Scriptaculous
• Dojo Toolkit
• Mootools

Universal Design

Have you ever wondered?
How a blind user will use the TV remote control?
How a disabled person will board the bus?
How old aged people will the climb staircase?
How a blind person will use the website?
How a color blind person will use an interface?

These are some questions we need ask ourselves while designing.This list is not over; we need to think about many such questions while designing. Design is not limited to a particular field, but design is very vast and is implemented in each and every field starting from automobile, communication, interior designing to user interface designing and a lot more.

While designing, we need to keep in mind all set of users and this is where the concept of “Universal Design” comes into picture. The word “universal design” may seem simple, but it holds lots of concepts, principles, techniques and process from a designer’s and end-user’s perspective. Let’s understand universal design in detail.

Universal design is the concept or approach to be more precise, of making any design accessible and usable by as many people as possible, irrespective of the age, situation and ability. It is a totally a new “paradigm shift” from the normal design process.

According to the “Americans with Disabilities Act (ADA) 1990” even people with disability have equal rights to work, study and use or access any product or services as a normal person and that is where the concept of “universal design” comes into picture. While designing any product, designers need to keep in mind the following “universal design principles” to make it more usable and accessible.

Equitable Use
Flexibility in Use
Simple and Intuitive Use
Perceptible Information
Tolerance for Error
Low Physical Effort
Size and Space for Approach and Use

Equitable Use: irrespective of age, ability or situation, a person should be able to effectively use a car, bus, elevator, mobile, computer, website, Interface and anything or everything what a normal person can use.

Flexibility in Use: design should be flexible enough to accommodate personal preferences. Example can be adjustable and customizable designs. Ease or flexibility of use makes design more usable by everyone

Simple and Intuitive Use: designers should understand one thing before designing an interface, that its not mandatory that all users will have equal level of technology knowledge, so we should accommodate this option, thus making interface simple and easy to use for a novice to expert. Systematic display system, visual display system helps in making any design intuitive. Proper use of colors and color combination also plays important role while making an intuitive design.

Perceptible Information: design should be able to communicate necessary information to the user effectively irrespective of the user’s ability and disability. For example a blind user, who is using an elevator, may not be able to see which floor he is in, so alternative solution of voice based support should be made available. Similarly a blind user may not be able to see directions in subways or stations, so alternative information system should be made available for such users.

Tolerance for Error: users tend to make mistake while using any interface or design or technology till they get acquainted to the system. “Universal design” means design should accommodate tolerance towards these common errors by helping users giving them “alerts”, “voice alerts” or “error messages” along with the solutions or support based system to help them overcoming from such problems in future.

Low Physical Effort: designers should understand one more thing that not necessarily all users will be “power users”; hence design should be simple enough to reduce physical effort. For example if adjustable interface or design needs users to manually adjust settings, it makes tedious for the users to use them and hence reducing the effectiveness , this can be avoided by using automated systems.

Size and Space for Approach and Use: this principle is important when designing car, bus, elevators, lifts, security system kind of interface or an interior design. These designs should provide ample space and flexibility for disabled users with wheelchairs to use them effectively and easily.

Let’s dive more into the “universal design” concept, by creating some user personas and relating them with the above mentioned principles.

Persona 1:

Name: Zara
Age: 18 years
Profession: Student

Zara is an 18 years old girl. She stays with her parents. Zara is very fond of using electronic gadgets. She lost both her legs in a car accident 2 years ago. She is totally dependable on wheelchair for all her daily work. Zara is doing her bachelors in arts from a regular college and needs to commute 10 miles daily. Due to her disability she cannot board bus or car easily, but at the same time, she wants to be self dependant rather than depending on others to help her out. She needs a transportation method which makes it easy for her to commute easily with less effort. An automobile engineer/designer needs to keep in mind people like Zara before designing a transportation interface. “Equitable use” makes sense when people like Zara are able to use it effectively and easily, without any hassle and confusion.

How can a car or bus be universally designed?

• Having automatic adjustable and twistable car seat, thus making it flexible to use
• Removable car seats so that 100% wheelchair dependant disabled users can replace it wheelchairs
• Having a “slider based bus system” for wheelchairs to climb easily without the need of lifting them, thus reducing the physical effort needed
• Having “no step bus system”, so that aged people need not worry about slipping from the bus, while trying to board.
• Blind users may not be able to see which location they reached, hence having a voice based information system in buses can help blind users to know where they reached

Toyota F1 Series

Chief Designer:
Toyota

Consulting Designer:
Satoshi Nakagawa

Date:
May 28 2009

Courtesy: http://www.pbs.org/pov/pov2004/freedommachines/special_universal_02.html

Persona 2:

Name: Nancy King
Age: 24 years
Profession: Housewife

Nancy is 24 year old women and a house wife by profession. She is disabled by birth and totally dependant on wheelchair. She stays with her husband, who is software professional and busy most of the time. Being a housewife, Nancy has vey little technology knowledge and finds it difficult to use technology spontaneously. Nancy doesn’t want her disability to become her weakness and wants to work like a normal housewife, like cooking for her husband, washing utensils etc. She wants a kitchen which is “universally designed” and where she should be able to work effectively like a normal person with “ease of use and learning” being her first priority.

How should an interior designer design a “universally designed kitchen” keeping in mind people like Nancy?

• Making the height of the kitchen cabinet, Cook top, Microwave stand accessible by wheelchair.
• Having an adjustable-height cabinets, can help all users to use them effectively. Also customizable design which can be changed based on user preferences also makes design effective and more usable.
• Having a removable sink and drying rack will give sufficient space for food preparation. This can again be re-fitted as and when required. Thus giving flexibility to people like Nancy or old aged people, who can’t stand and cook.
• Foldable cabinet doors under cooktop, providing sufficient knee space.
• Providing visual support can also help users to use kitchen more easily and effectively.
• Voice based support in kitchen can also be a good idea, thus making design accessible for people with low vision.
• Automated dishwasher or microwave system can help them easily placing dish without much effort.

Courtesy: http://www.thekitchendesigner.org/journal/2007/3/27/uber-universal-kitchen-design.html

Chief Designer:
GE appliances, the kitchen designer

Date:
May 28 2009

Courtesy

http://www.geappliances.com/design_center/universal_design/

Persona 3:

Name: Rodney Connors
Age: 75 years
Profession: Retired army many

Rodney is 75 years old man. He is a retired professional and stays alone in his 2 bedroom apartment which is on the 10th floor. He finds it difficult to walk and climb stairs and also have sight problem. Rodney has very little technology knowledge and finds it difficult to remember things, due to his growing age. He depends on electronic wheelchair most of the time. He needs an elevator system in his apartment which can accommodate his wheelchair also, making his life easy at this age.

How can we make a “universally designed” elevator?

• Increasing the width of the elevator hence giving ample space to use wheelchairs and thus making it approachable
• Big display screen, which displays the floor details big and clear, thus accommodating people like Rodney to use it with ease
• Voice based support system, which informs the user which floor the user is in, can also help the disabled user to use them effectively.

Courtesy: http://www.centrair.jp/en/service/sv-ud-facilities/index.html

Conclusion:

Irrespective of age, ability or disability and situations, every has the right to effectively use any products or services, hence designers should always be conscious about this fact and implement their design ideas to serve one and everyone. This is what universal design means.

Ajax Simplified

I use to think Ajax is very difficult, but as and when I dived into it, I realized its way too simple.

This is a small summary of Ajax from one of my presentation

So what is Ajax?

Ajax stands for Asynchronous JavaScript and XML

Ajax is not a new technology but a New technique for creating better, faster and interactive applications

The backbone of Ajax is JavaScript, XML, HTML, CSS

The next question, how Ajax works?

JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.

The XMLHttpRequest object have 3 properties onreadystatechange property , readyState property , responseText property.

onreadystatechange property – stores the function that will process the response from a server

readyState property – readyState property holds the status of the server’s response.

responseText property – The data sent back from a server can be retrieved with the responseText property.

Next question is how do we send response to the server?

This is done through 2 methods of XMLHttpRequest object, open and send.

open() method
takes three arguments
The first argument defines which method to use when sending the request (GET or POST).
The second argument specifies the URL of the server-side script.
The third argument specifies that the request should be handled asynchronously.

Send() method
sends the request off to the server.

My Country is burning…. can any one save it?

Never in their life should any one see such a terror. 26/11 shaked each and every Indian.

It has been a very shocking moment for me, when I got the news of mumbai attack. 27th morning 6.30 got a call from my friend that Mumbai has been attacked by terrorist and many people have been killed, never thought I would start my day in such a tragic way. I immediately switched on the TV and everywhere the same news was flashing. Dead bodies everywhere, blood stained CST railway station, terrorist footage taken on CCTV.

This tragedy killed so many people, a 2 year old Jewish baby became orphan, he will never see his parents again. Many soldiers lost their life fighting for us…

It Hurts…

What is happening to India? One after another tragedy… bomb blasts… Why?

Is this why we fought for independence years back? Are we supposed to call our self a citizen of independent nation? Are we safe?

When we step out of our home, we are not sure what will happen next. Not sure if we will reach our home safely.

Can anyone save us?

I don’t have answers to any of these questions but just know one thing, no politician will come and Save India… it is we all who can make a difference.

“United we stand, Divided we fall”. And yes We all can together make a difference.

We are the future of India and we can save it.

I love India and I am in to make the difference…. Proud to be an Indian