This is a rediscovery of "Accessibility" in the world of touch-screens and other natural interfaces. With new technology innovation the lines between accessibility technology and Technology for Mass are getting blurred. What used to be a special need is becoming a general need for mass use.Situational Disabilities Use-cases are defining the new age devices, wearable & smart interfaces. High time we need to rediscover on "accessibility" what we think we have already discovered!

Rediscovering Accessibility for Future Tech!

This is a rediscovery of “Accessibility” in the world of touch-screens and other natural interfaces. With new technology innovation the lines between accessibility technology and Technology for Mass are getting blurred. What used to be a special need is becoming a general need for mass use.Situational Disabilities Use-cases are defining the new age devices, wearable & smart interfaces.

High time we need to rediscover on “accessibility” what we think we have already discovered!

BOOK-COVER1600x2400

UX Simplified: Models & Methodologies: Digital Edition [Kindle Edition] ISBN: 978-1-3115-9110-4

My  recent title is available on Kindle for download. This book covers basic models and methodologies that are revolved around User Experience (UX). The discussed topics include User Experience, Information Architecture, User Interface, Usability models, User Centered Design (UCD), User Centered Software Design (UCSD), different Software Lifecycles (SDLC) and how usability models fit into SDLC models.

The details of the book are as follows:

UX Simplified: Models & Methodologies: Digital Edition
by Samir Dash
ISBN: 978-1-3115-9110-4
ASIN: B00LPQ22O0

Kindle Price (US$):$1.87
Kindle Price (INR):Rs. 119.00 includes free international wireless delivery via Amazon Whispernet

http://www.amazon.com/dp/B00LPQ22O0/ref=r_soa_w_d

 

 

UX Simplified: Models & Methodologies: Digital Edition [Kindle Edition] ISBN: 978-1-3115-9110-4

UX Simplified: Models & Methodologies: Digital Edition [Kindle Edition] ISBN: 978-1-3115-9110-4

Major topics included in this book are :

• Why “UX: Simplified”?
o The Diverse Disciplines: The ABCs of UX
o User Experience(UX)
o Information Architecture(IA)
o Interaction Design (IxD)
o User Interface Design (UI)
• Usability and Mental Models: Foundations of UX
o What is Usability?
o System Models
o What is a “Mental Model” exactly?
o Most-likely Mental Model
o Conceptual Model
o Challenges in Usability Measurement and Metrics
o A List of Factors for Generic and Consolidated Usability Model
o Heuristics:Measuring Usability
• Engineering and Design Processes: Usability and User Centric Approach
o Usability Engineering
o User-Centered Systems Design (UCSD)
o Usability Design
o User-Centered Design (UCD)
o Don’t get Confused: UCD vs UCSD
o UCD Models and Process
• Software Development Life Cycle (SDLC): Where and How User Experience Models fit in?
o Software Development Life Cycle (SDLC)
o Waterfall model
o Spiral model
o Iterative Development Model
o Agile development
o Challenges in UX Integration to Different SDLC Models
o Usability Designing Process
o How Usability Design Process Fits in Different Phases of SDLC?
o How UX Fits in Different Models of SDLC?
o Challenges with Agile model of SDLC to implement UX
o Lean UX and Agile Model
• Agile in Usability Design:Without Reference to SDLC
o Usability Designing Process
• Lean UX: Another Agile UX?
o The Beauty of Lean UX: Everything is familiar
o Foundation Stones of Lean UX:
o Lean Startup method: The concept of “Build-Measure-Learn”
o Minimum Viable Product (MVP) – Prototyping at it’s best in Lean Startup Method
o Principles of Lean UX

  • File Size: 1435 KB
  • Print Length: 86 pages
  • Simultaneous Device Usage: Unlimited
  • Sold by: Amazon Digital Services, Inc.
  • Language: English
  • ASIN: B00LPQ22O0

 

10effdb

The ABCs of UX: The Diverse Disciplines (Part 1/3)

“To understand what the user is looking for in the things he is looking at.”

 

The current post is the first one in the series of 3 posts, where I would like to clarify the definitions and concepts that are core to our context covering User Experience (UX),Information Architecture(IA) and Interaction Design (IxD).

 

User Experience (UX)

User experience (UX) is a convergence of several disciplines. There is no final fool-proof list of disciplines which come together to form it. But yes, there are many popular explanations by social scientists, industrial designers and information architects which describe it as a combination of a verity of disciplines.

 

 Fig: 1

 The most popular and accepted compilation of disciplines is shown in Fig 1 where it is represented as a combination of :

 

  1. Information Architecture (IA)
  2. Visual Design
  3. Industrial Design
  4. Human Factors
  5. Interaction Design (IxD)
  6. Human – Computer Interaction (HCI)
  7. Architecture

 

There are variations available to this where commercial aspects are added to it . Fig 2 represents such a case.

 

Fig: 2

 

 In Fig:2, you can see the UX definition has been seen as all those disciplines which can work together to provide a solution that can deliver “customer with a harmonious and consistent experience”.

If you notice all the aspects such as “branding” and “customer service” are related with emotional aspect of human behavior. So user experience is also about emotions and psychological dimensions of customer’s perceptions about the product. Wikipedia also defines “User Experience” as :

User experience (UX or UE) involves a person’s emotions about using a particular product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership. Additionally, it includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature because it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing circumstances and new innovations.”

Similarly ISO 9241-210 defines user experience as:

a person’s perceptions and responses that result from the use or anticipated use of a product, system or service”. According to the ISO definition user experience includes all the users’ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use. The ISO also list three factors that influence user experience: system, user and the context of use.

 

So basically, “User Experience” deals with the “How” factor of the product or system rather than it’s “What” factor. Most of the customers buy the product not because simply “what it does”, rather the “how” factor takes priority when it comes to choose from a several similar products.

We will dive deep throughout this series, but before that let’s see clear similar jargons.

 

Information Architecture (IA)

 

While exploring UX in previous section, we saw that Information Architecture (IA) is one of the contributing disciplines which form the total User Experience. During 1960’s ,Richard Saul Wurman, an architect by profession having skills of a graphic designer, author and an editor of numerous fine graphics related books, coined the term “Information Architecture”. He mostly developed concepts “ in the ways in which information about urban environments could be gathered, organized, and presented in meaningful ways to architects, to urban planners, to utility and transport engineers, and especially to people living in or visiting cities”. Later these impacted a set of disciplines such as library- and information-science (LIS) , graphic design and in recent years the world wide web (www). During 1990’s , with the evolution of the Web, there rose the need to rethink the presentation of library-catalog information as this information has been moved into online public-access catalogs, and in part to the proliferation of information on the Web itself. So during 90’s IA has taken on something of a connotation of applying especially to the organization of information on the World-Wide Web.

Basically Information Architecture (IA), all about organizing information in a meaningful way so that the user can easily find it when needed through proper organizationnavigation,labelingandsearchingsystems.IA also takes care of the process that ensures that there is no information breakdown or explosion with the scaling of information overtime.

 

Fig: 3

 Fig:3 represents the 3 basic ingredients of IA, namely:

Users: This represents those who will use the product or system, their “information seeking behaviour” and their needs. Any of the following roles/skills/features can be applied to them:

  1. Personas
  2. Ethnography
  3. Usability Testing
  4. Expressing User Needs

 

Content: This is what is presented to the users through the product or system. This includes the data or information that is offered, along with its aspects such as volume, metadata, structure and organization. Sample skills/roles/features/concepts revolving around content are:

  1. Indexing
  2. Cataloguing
  3. Site Architecture
  4. Writing
  5. Content management
  6. Navigation
  7. Labeling
  8. Search mechanism

 

Context: This is what gives meaning to the content that is being served to the user. This can have the attributes like business model, business value, resource, resource constraints, culture etc. The following features/roles/skills are associated with context:

  1. Defining business requirements
  2. Project management
  3. Business model analysis
  4. ROI calculation
  5. Client management
  6. Technical constraints

 

(To be continued…)

 

(c) Samir Dash , 2013 -14

SIMPLE: Digital Content Distribution from Cloud (Proof of Concept)

This is one of my proof of concept application demo on how to prepare an eco-system for delivering protected digital content specially related to e-learning and m-learning context.

SIMPLE is an eco-system that allows tools such as

SimpleAuthor : That allows content authoring from common formats such as MS Office documents , PDFs and CBRs along with the options to author contents using cloud based WYSIWYG editor .

SimplePublisher: This allows you to import contents such as set of HTML files, ePubs, PDFs, text files, set of images, CBR files and the output from SimpleAuthor

SimplePlayer: This is a native course packaged with the required run-time that the end user will be using to view the content . This allows content activation and offline content tracking . In this current demo the Player is an EXE file that is being generated from the SimplePublisher. In the POC of the Publisher, each course is generated as an EXE file containing the content and the required runtime in it.

SimpleStore: In this POC you can see it as an online store that show cases different titles published using SimplePublisher. Basically it manages the catalog, and tracks activation of each offline course.

Note: the SIMPLE eco-system can be seen as an experiment based on the CUPID (Common Unified Programs for Instruction Delivery) guidelines. Check CUPID related info here:

OR at

http://cupid.mobilewish.com/

Socio-cultural User Experience (SX) and Social Interaction Design (SxD): The Socio-cultural Context in UX and Usability Design

Summary

This paper introduces the ‘socio-cultural’ dimension of User Experience (UX) and Interaction Design (IxD) with reference to emerging devices and related eco-systems.

Background

With the emergence of Google Glass, the topics related to devices infringing with personal privacy became hot cakes for tech-debates. Many social scientists, human rights activists have started to see the ‘Glass’ as the evil that reminds them with George Orwell’s ‘1984’. The fear of a ‘Google Big Brother’ controlling the major shares of the information world is seen as the intruder to private aspects of ‘the public’.

Fig1: The backlashes on Google glass has become one of the major discussion in recent tech world.
Example link: http://blogs.computerworld.com/privacy/22144/hey-dont-wink-me-glasshole-itbwcw

It is not the case that Google has not spent money on user research and usability aspects before going ahead with the concept of persons using glass that may change the way we interact with systems in our daily life. Usability wise, it is definitely a super gadget that has the potential to  catapult the device industry into next century. But the new features and interaction methods implemented in the device in a manner that is actually a decade old approach that is only fit for human-computer-interaction (HCI) in case of smart phones and tablets which have less tendency to hurt sentiments of those who do not directly interact with the device when the user might be performing some actions in a certain socio-cultural context. These sentiments could result in the fear of losing privacy , cultural distrust and humiliation among the second-hand users of the  device who are impacted indirectly in some way by the device actions in the context.

There is an interesting article on web titled “7 Innocent Gestures That Can Get You Killed Overseas”  that gives nice examples of various innocent gestures in daily life a  person can actually get him into trouble in a different socio-cultural context http://www.cracked.com/article_16335_7-innocent-gestures-that-can-get-you-killed-overseas.html.

Therefore it is high time to rethink in UX domain to discover the missing pieces which we think we have already discovered.

Socio-Cultural User Experience (SX) – the missing piece in UX

I have coined the term ‘SX’ aka ‘Socio-Cultural User Experience’ to represent the aspect of Usability Design or User Experience (UX) that deals with usability aspect of products/ software in a social context.

 SX

Fig2: The UX model is incomplete without its ‘social’ context.
To make usability design meaningful the model must follow the social context

 

Social and Cultural aspect of UX can be interpreted as a new component of UX – it is the missing piece that makes UX meaningful in social context.

Traditional UX model is centered around human user. But the critical factor that makes human being differentiated from other beings is his ability to ‘evolve and follow social standards’. The history of human growth is actually more clearly represented in the “history of human civilization”. So any product design must adhere to the social factor of design  and this is what SX is all about.

Considering the ‘Others’ in the User’s Social circle

The existing UX model does not analyze the need beyond the current user and his ‘type’ to do a usability test  — it never considers how it is impacting the other members of the society while the target user set is using the app/system.

For example, using car horn is a safety measure, but using it near a hospital or school is considered as unsocial and disturbing. There are many social check points that bar users of any system from using it in special socio logical context.

 

Fig3 : The no horn , camera, mobile phones and similar sign posts can be seen as a few of the social guidelines represented graphically on the use of different systems.

So implementing social context related restrictive design is even though new , is actually a age old tradition.

Criteria of a Good ‘SX’ Compatible System

Criteria of a sound usability design of an app on socio-cultural context:

  1. Universal—has design elements that are universal.
  2. Ethical – follows principles and approach that has positive ethical value
  3. Non-racial – non biased and non-provocative attitude to user’s race and beliefs.
  4. Respectful – towards user’s culture, social beliefs and ethnicity
  5. Safety – has it’s social impact that is safe for the User.
  6. Non-abusive – must not exploit the user and the environment he is in .
  7. Common Sense – has geared towards common sense – behaves and reacts to the user in a sensible way
  8. Protect Privacy – App’s feature and interaction must protect user’s privacy and other humans in the social circle.

Example of a Possible Enhancements to a Real Life Product via ‘SX’ :

Fig4 : Google Glass has an inbuilt camera that can take pictures.  

Let’s take the case of Google Glass.

Google Glass is designed in a way that can act as more personal than a mobile handset, as it is a spectacle and can be indispensable   accessory for the user once he gets addicted to it by replacing his conventional glass with it.

But the support for camera to take picture can pose a problem for the user to enter private areas, industrial areas, secure zones and offices where cameras are not allowed. In some places of earth, the cultural restrictions are in practice to ban cameras in certain places — most of the temples in India do not allow cameras inside. Now imagine, if the user has replaced his traditional spectacle for it , then he may find it difficult to manage without it in these scenarios.

So by following SX approach in usability design, the glass will require to have a “detachable set of camera” used in the glass so that the user can detach the camera and which would power it off and at the same time allow the user to keep on using the glass as a conventional spectacle.

This example may be just one of many features that Google glass might have, but it is enough to illustrate the approach in thought.

Social Interaction Design (SxD) – Helping IxD to Focus on Context and Environment of the User

I am using the term ‘SxD’ aka ‘Social Interaction Design’ that deals with the ‘social aspect’ of Human – Computer – Interaction (HCI) and Interaction Design (IxD) that  focuses on usability design in context of how the user is interactive with the app in specific socio-cultural context.

Points to Focus on while designing a SxD Compatible System

  1. Provide multiple alternatives to the interaction methods to control the same functionalities in different socio-cultural context.
  2. User should have total control over enable/disable of interaction methods for different scenarios.
  3. The default interaction method must follow ‘SX’ approach.
  4. Provide options to the user to switch between interaction methods with the system as and when needed.
  1. Alternative mechanisms should be provided for physically challenged users. Rethink on the use of gestures and other interaction methods in the Article 508 context as everyday the new devices with unpredictable (not necessarily negative!) interaction methods and features.

Gesture and other Interaction Medium of SxD:

The ‘Social Interaction Design’ approach has the following major facets in the  system interaction towards the user in socio-usability context:

  1. Facial Gestures—The selection of Human triggered facial gestures (e.g. wink, smile etc.) to activate the system or trigger any action in the system must be judged based on the canonical meaning of those gestures in social and cultural context of the user where he is going to use it.  For example, in case of Google Glass , the feature of “winking” (the gesture developed by Google Glass developer Mike DiGiovanni http://news.cnet.com/8301-1023_3-57582500-93/google-glass-code-lets-you-snap-a-photo-with-a-wink/  ) at someone to take a photo can pose a problem if the user is in India or Middle East countries. Even in western world winking at a lady or group of ladies (even though it is unintentional for any kind of abasement) can be taken as a negative action (e.g. weakness in character) and evoke anger and misunderstanding. So even if the winking to take a feature is a ‘cool feature’, in social context SxD will suggest the usability/interaction engineer to rethink on it to implement some options to ‘keep it disabled’ by default and allow the user the total freedom to use his judgment to enable and use the feature in any given socio-cultural context.Fig5: The ‘wink’ gesture developed by Google Glass developer Mike DiGiovann allows user to take a snap of the surrounding with just a wink of an eye.

     

  2. Sound Gestures —  The selection of sound gestures – the use of voice or sound pattern to control the system should be examined for different user environments. For example blowing a whistle to activate a play functionality on a portable music player, or to open an SMS on the cell phone can be an interesting feature, but on the other hand if it becomes useless in a busy street or in a meeting room where a discussion is going on.
  3. Touch based Gestures –   Touch, swipe and pinch are popular now a days as most of the tablets and smartphones offer this as a user friendly interaction method for the user. More devices are coming up which do not have any physical button rather a few multi-touch gestures are enough to fully control them. However ‘SxD’ stresses that the devices must be designed and developed with the interaction method that can allow alternative to the available touch triggered interaction mechanism.  For example , while developing a digital medical instrument with touch sensitive display, the interaction methods  should be carefully planned so that the surgeon can use the system without touching to avoid infections through contact with it while conducting any mission critical surgery.
  1. Hand/Finger based 3D gestures – ‘SxD’ approach encourages to conduct a social analysis of the  hand/finger based gestures that are planned to be used in a system – the gestures should selected / innovated by carefully studying the cultural context avoiding common gestures used in daily life that are considered abusive to others. In addition to this practical usage resulting out of user’s environment and work culture must be given consideration. For example the middle finger gesture commonly used by youths to represent the crack humiliating pun on the other should not be used for any app that is expected to be popular among the users from the similar demography. But note that only considering the demography is not enough to decide the gestures.
  1. Mouse /Keyboard Control – Similar to the gesture , voice and the related interaction method with system, mouse, keyboard, joystick and other typical input device based methods should be considered with in the context in which they are going to be used. As this group of interaction method are very old, many standard guidelines are already in there in practice. They However we need to rethink on them and make sure they are upto date with the ever changing human –computer-interaction domain.

Going Forward

Understanding usability is the first step in developing a successful system/software. However we need to understand the social and cultural implications of the UX implementations of the definitions of usability which we think is good for the user in order to   make our software truly complete and meaningful in all aspect. ‘SX’ and ‘SxD’ are the two missing pieces of this whole puzzle, which we need to discover in order to rediscover UX.

 

 

Download the paper from Slideshare :

http://www.slideshare.net/MobileWish/sx-overview

 

 

 

 

CUPID : Common Unified Programs for Instruction Delivery

CUPID :

Common Unified Programs for Instruction Delivery

(Project for Venture-Lab Class: “Designing a New Learning Environment” by Professor Paul Kim, Stanford University)

alt text

Project Team:

CUPID http://venture-lab.org/education/teams/17372

Project Team Members:

Samir Dash (Team Lead)
Maryam Seyedjavadi
Opemipo Adebanjo
Saurabh Kale
Manoj Mahali
Sangeeta Dash

Stanford University

2012


Project team URL:

http://venture-lab.org/education/teams/17372

Public site of the project:

http://cupid.mobilewish.com/

GIT Repository address:

https://github.com/mobilewish/CUPID


Background

CUPID (Common Unified Programs for Instruction Delivery) framework stands for a framework for a new way of instruction delivery for self-paced learning modules/courses.

The importance of “self paced learning ” even in today’s new age of MOOCs and social networking based “learning for life ” concepts, is still applicable. “In remote areas and villages, the self paced learning is the standard when it comes to digital delivery of content. Mostly CBTs (Computer Based Training), downloadable learning materials on CDs/DVDs get most attention. We can’t expect good bandwidth in such a places where the user can take part in online interactive classes. So
after ILTs, the next nig thing is self paced learning through books, magazines, newspapers etc. When it comes to digital part
of such an approach, downloadable standalone digital learning materials win the case.So the fact is “self-paced learning” is a reality even in the age of social networking based MOOCs.” So one of the focus area of CUPID team is explore possibilities in the education sectors in developing countries, through exploration of new ways to improve the “self paced learning” domain.

And this is one of many reasons why CUPID focuses on “self paced learning”. In addition to that the focus areas in finding new ways to provide richer “meaningful experience” is what differentiates CUPID from existing approaches through conventional CBTs/WBTs.

We are not talking about replacing CBTs/WBTs with something new, rather improving the existing “self paced learning” approaches with new ways to improve user engagement and bring some reliability to it so that it can open new possibilities for certification courses to include “self paced learning” as a part of their certifications.

So it’s all about the “new and meaningful experience” that we are planning to bring into “self paced learning” through CUPID.

alt text

alt text

alt text

alt text


Overview

The proposed learning environment/framework has the major goals such as :

New ways to improve the self learning experience.
Explore the possibility to get the user engaged with the course in the self paced learning in a way so that the training

experience is not just a one way learning. And of course we need to think beyond the basic interactivity that typical CBT/WBT

courses provide though multiple choice or drag and drop quizzes.
Find a solution to make a self assessment certificates reliable source to meet some organisational goal (where the

organisation has directed the employee to take the self paced learning to improve some skill sets. ).
The basic aspects of CUPID is given below:

alt text

alt text

alt text

**For a clear view of the mind map please follow this link :

https://dl.dropbox.com/u/23073902/images_files/image006.png**

The Concept

The aim of this project CUPID is to conceptualize a new framework-cum-instructional design approach to define the best

possible solution for self paced e-learning experience.

The major goals of the framework are:

    1. To find new ways to improve the self learning experience.
    1. Add built in navigational components to support for physically challenged / disabled persons.
    1. Explore the possibility to get the user engaged with the course in the self paced learning in a way so that the training experience is not just a one way learning. And of course we need to think beyond the basic interactivity that typical CBT/WBT courses provide though multiple choice or drag and drop quizzes.
    1. Find a solution to make a self assessment certificates reliable source to meet some organisational goal (where the organisation has directed the employee to take the self paced learning to improve some skill sets.)

Based on the above said goals , there are 14 focus points which makes CUPID framework unique and helps in defining the

components of it. These focuses are defined in the section in the following.

Major Focus Points that makes CUPID unique

The proposed learning environment/framework focuses on:

Focus #1.Improving usability of the content and the interaction delivered through it.

Focus #2.Add built in navigational components to support for physically challenged / disabled persons.

Focus #3.Provide the user the ability to go through the course in both online and offline modes so that “any where any time learning” and be made possible to achieve.

Focus #4.Provide DRM to the course content so that it can be used for Intellectual Property (IP) protection and can be useful in commercial e-learning channels and related business models.

Focus #5.Provide features to make the two – way communication happen between the course and the user even in off-line mode.

Focus #6.Add a reliable way to make sure that the user has actually gone through the course.

Focus #7.Add a reliable simple certificate generator that will print the certificate to make the off line certification related course possible.

Focus #8.Make sure the content is compatible with well know e-learning specifications like SCORM / AICC etc.

Focus #9.Optional support for delivery of well known content package formats such as ePub, pdf, SCROM packages.

Focus #10. Support custom Markup language/ XML with custom DTD for building of content.

Focus #11.Provide components that can support the course content compatibility with Bloom’s taxonomy.

Focus #12.Introduce new age assessment engine that will help the user self assess and review the level of skill he has obtained.

Focus #13.Provide easy interaction between the course and the user for other features like bookmarking, highlighting, annotation, free hand annotations, text size and font type customization based on the user preferences.

Focus #14. Component based framework so different components/sub-components can be plug and play mode or can be enabled/disabled.

alt text

alt text


The Design

The basic design of the CUPID framework is based on component architecture. Different functionalities of the frameworks comes

from it’s different components. New feature can be introduced through extending the framework by creating a new plug-in and

adding that to the framework.

So basically the different plugins function in sync and provide the whole user experience and features.

These details are discussed in the next section while detailing the innovative framework components.

alt text


Framework Components

To fulfil this focus the concept learning framework has been designed in a component driven architecture.

alt text

alt text

The different components of the framework (based on the functionalities/feature) are:

Human Approach for Device Specific Navigation Approaches (HADSNA):

alt text

alt text
This is in line with Focus #1 we have discussed. The purpose of HADSNA component is to provide user friendly and simple

approach to course/content level navigation and interaction maps. For different devices, the device specific gesture s for

multi-touch support for touch enabled devices and mouse driven UI level approaches for PCs and desktops.

The unique features which give CUPID navigational system a fresh approach are :

    1. Automatic event binding depending on the environment:
      alt text
      All inbuilt components of the framework uses common event driven APIs for navigation and UI level interaction. e.g. content author can add simple API call such as onClick() and CUPID will ato matically sniff the environment to assign the correct event handler such as Mouse.click() or Touch events such as onTouchstart() and onTouchend()
    1. Multiple ways to trigger the same navigational event: The navigation of the UI is super simple and can be addressed using TAB Indexing g based navigation in an environment supporting only keyboard. Where as in the multi-touch gestured environments basic gestures will be used for navigation of the same content. Mouse driven environments anyway will support UI buttons and links for such needs. Example is shown in the diagram below:

alt text

    1. Contextual help: Contextual help will be available in each state/page and sections of different UI of the content displayed in CUPID which can be accessed through single gesture, mouse click or key hit. The contextual help will provide context specific information along with what is applicable in general including the hint on the navigational options available . This will help even the first-timers to find their position in the whole system.
    1. Built in navigational feature for visually challenged and persons having hard of hearing: Another most important aspect of the CUPID’s navigational system is the built in Offline Text to Speech Engine (OTTSE) along with Media Caption Manager (MCM). These help the disabled persons easily navigate through the content of the learning material. More information on this has been provided in the next focus point related solution in the following section.
    1. Built in Pseudo Inference Engine (PIE): This is another innovative approach through which the course interacts with the user to hep him set his learning path and based on which the navigation happens in the course. In simple words PIE acts as a guide for the user who helps in deciding which chapter of the course or content section to move next and which media to play in order to quickly meet the learning objectives and complete the learning path successfully . More details of this has been detailed in the coming section dedicated to the solution prescribed for Focus#5.

Built in Offline Text to Speech Engine (OTTSE) along with Media Caption Manager (MCM):

alt text

This is in line with Focus #2 we have discussed These components will allow built in audio captions displays for media elements like video, audio, Podcast and Flash items.

The basic flow for enabling features for disabled learners are given below:

alt text

The basic structure of this component is shown below:

alt text

The Offline Text To Speech Engine (OTTSE) will be helpful for the person having visual disabilities. Whenever the learner tries to run the course on a system that does not have the screen readers installed or enabled, he can easily use this OTTSE feature to navigate through the course as well as can listen to the TTS generated voice-overs to the provided text materials.

The OTTSE has 2 subcomponents:

    1. Offline real time text to speech generator for the navigational needs along with predefined audio clips. These will help in providing navigational hints to the end user on mouse clicks or tab key press, and multi touch gestures on tablets or mobile devices.
    1. Offline real time text to speech generator for course content having text . In case of any interactive media components like interactive Flash/HTML5 simulation, game or interactive, it will extract the text content from labels and process them for text audio generation.

The Media Caption Manager (MCM) has two sub components –
1. Authoring side sub-component: This will allow content authors to add textual captions for their media elements. Plus it will have an optional component for auto generation of caption from interactive Flash files, video and audio components.
2. User facing sub-component and rendering engine: this will be part of different media players in the framework such as video , flash items, HTML5 interactive objects, audio & podcast players.

The MCM will be helpful for the person having hearing disabilities. While they can watch the video , they can at the same time read the captions. Similarly, in case of the audio and podcasts , they can read the caption when they run those media components.

Offline Content Sync Manager (OCSM):

alt text

This is in line with Focus #3 we have discussed. This will have sub-components like

    1. Content Downloader & Reader and
    1. Content Sync Manager.

This will help the content to sync the online store and catalogue of the courses and sync the titles available for the user as per their profile level access. Thecontent downloader component will download the offline content or course packages from the store and copy it to the local drive of the user’s machine. The reader sub-component will allow the content to render on the screen and provide the content level navigation. When the user becomes online, thecontent sync manager will check if any update is available and will sync the local storage/drive of the user with the user’s profile assigned online content store/catalogue. The first time content is accessed is used online; it will be automatically cached and will be used for future offline access.

alt text

DRM Manager:

alt text

This is in line with Focus #4 we have discussed. Digital Rights Management (DRM) is one of the important aspect of the

framework. The DRM Manager component will ensure the proper encryption and decryption of the content at the both server and client level. The component will also take care of prevention of unauthorized copying or printing of the content. It will also provide the content level control for limited printing and copying of the course content.

There are various stages where the content is protected through different DRM methodologies:

    1. At the point of downloading content: the user when downloads the CUPID course the course content are downloaded separately into it from the server in an AES encrypted form. That content is decrypted on demand when the user wants to run the course and wishes to go through any lesson.
    1. At the point of user interaction with the content: the user can not copy paste the content from the course , neither he can not print the content except for those lessons or sections that the content author has enabled for copying and printing. Along with this the user will not be able to view every options such as “view source” etc. as the right click will be disabled.
    1. Course life time: Course content can be made to expire based on some time stamp and or number of uses.

Pseudo Inference Engine (PIE):

alt text

This is in line with Focus #5 we have discussed. The purpose of PIE component is to provide interaction based navigation, content searching and learning path decision making. This will be the component that will work on both offline and online mode. In the former mode, it will depend on a XML tree structured interaction map, to determine what kind of response it will give to the end-user to continue the two way interaction between the user and the course.

In the UI PIE is represented as a simple terminal like BOT or a guide or an assistant to help the user. Also it is more like an wizard type component that can show textual information, links, can trigger other CUPID components and events and do the search the content and enable or disable course settings for the user depending on the interaction.

PIE is actually one of the most innovative and unique component that is shipped with CUPID through which the course interacts with the user to help him set his learning path and based on which the navigation happens in the course. In simple words PIE acts as a guide for the user who helps in deciding which chapter of the course or content section to move next and which media to play in order to quickly meet the learning objectives and complete the learning path successfully.

An example interaction detailing the user interaction with PIE in a cooking related course developed in CUPID:

 CUPID PIE (Asks questions and infers)  : Hi How can I help you?

User (Gives Answers and gets help and info):Not sure which lesson to start with.

CUPID PIE (Asks questions and infers) : Ok. Are you looking for a quick solution for any particular problem or are you looking for understanding the whole concept and get a certificate?

User (Gives Answers and gets help and info):Quick solution only

CUPID PIE (Asks questions and infers) : Hmm.. please type your problem

User (Gives Answers and gets help and info):Really?

CUPID PIE (Asks questions and infers) : Yes. Please type your problem

User (Gives Answers and gets help and info): Hmm..ok. I want to know how to create a cake for my cooking class.Searching…please wait.

CUPID PIE (Asks questions and infers) : Found 2 results ..please see if you got the answer..I am waiting ..will try to help you if you are not satisfied…Search results: Link 1: Make plum cake..Link 2: Make chocolate cake

User (Gives Answers and gets help and info):** No I want vanilla cake recipe

CUPID PIE (Asks questions and infers) : Searching for Vanilla related recipe …it seems there is some some video you might be interested. Video1: How to add Vanilla to your cakes? .. Video2: Without vanilla make pies…Video3: Indian Vanilla flavors. Seems like video 2 is more similar .

User (Gives Answers and gets help and info): Hmm..right thank you. Please play this.

CUPID PIE (Asks questions and infers) : Sure. [PLAYS the video]

This is just a very basic simple interaction shown in the example. PIE can gather learner’s history and this personal details

to understand what can be most probable need of the user and based on that can determine the sequence of results/options it shows to him .

Creating PIE for the very basic and focused needs can be developed with the XML tree structured interaction map so that the

offline version can work without the need the user to be connected to the net. A sample XML based interaction map can be as follows:

<cupid-xml-pie>    

<welcome>    

<q=”hi”/>    

< q=”good morning[USERNAME]”/>    

< q=”hi [USERNAME]”/>    

</welcome>    

<post-welcome>    

< q=”how can I help you?” />    

< q=”You need some help?” />    

< q=”Welcome back!” />    

</post-welcome>    

<cupid-xml-pie>    

The interaction maps can be developed uing CUPID authoring modules.

Learning Path Status (LPS) and Progress Indicator (PI):

alt text
This is in line with Focus #6 we have discussed. This component will provide reliable ways to ensure the actual progress of

the user in his learning path

LPS is made as an important feature of CUPID, looking at varying scenario of the user’s learning needs. Typically some users

just want to refer the course. Some just want to study the theory part to attend some exam. Some may want to have in-depth

study and generate a certificate. As all of these needs are different a single predefined sequence of lesson is not useful in

all these different scenarios. In such cases LPS actually helps in finding out what learning path is best fit for the user.

It will track how much the user has actually gone through both static as well as interactive and media contents. Based on the

progress of the user the component will ask in-between-questions to the user to keep the user engaged. This will also provide

optional controls and APIs to the content authors to determine if progress status based navigation locking will be enabled

for the target content in any course.

Learning Paths are one of the most important aspect of CUPID. The “learning path” is actually is the sequence of lessons or

sections the user needs to go through from any CUPID enabled course that is most effective for his needs/learning

requirements.
LPS actually is the component that interacts with the user (on his first run of the course by default and on subsequent run

of the course on demand) to help him determine the best fit “learning path” for his requirement. It helps customising the way

contents are to be presented to him.

Typically the PI will be having some pre defined instruction/criteria to determine the progress of the user in each type of

the course content/sections/media etc. For example one sample instruction can be if the user has at least viewed the 80% of

the video and has spent playing the video more than 5 minutes (dynamically calculated based on the video length), then it

should be marked as “complete” status. This kind of instructions help PI to determine intellectually if the user has really

viewed the video .

Now for the above example if the user has completed 80% of the viedo but has really spent 2 minutes in watching it then CUPID

can know that the user has actually skipped the video and can post some alert through PI and mark that video as “incomplete”

plus this information can be used in the learning path to give the score or points to the user based on some calculation,

where the time spent by user are taken into account. Even some assessment section can be disabled till the user completely

watches the videos , textual or any interactive content.

This way PI will actually help in :

    1. improving the reliability of the self –learning modules in e-learning domain – so that in organisations self learnimng

modules can be trusted for providing trainings.

    1. makes sure that the user actually go through each and every recommended lessons of the course before taking the self

assessment and generate the certificate.

There will be some additional sub components such as a face tracking camera which can be enabled (if available in user’s

system as a web cam ) that will keep an eye on the user to check if he is actually present to view the running course content

media/video. If the user is not present while a media / video is running, it can pause it and stop all activities of the

course in progress till the user returns to his seat and take some action to resume the course.

However this special sub component should be made mandatory only in case the user needs a certification from the current self

learning course. More details of this aspect is discussed in the next section.

Offline Self-certification Manager (OSM):

alt text

This is in line with Focus #7 we have discussed. This component will have 2 subcomponents.

a. Self-certificate Assessment Mode Manager: The course will have a “Self Certificate Assessment Mode” which will

enable the learner to take the self assessment for generating a certificate from the learning framework for a target score.

By using this mode the user has to use a minimum set of pre-defined hardware such as a webcam , etc. This sub-component will

monitor all activities and user interaction of the user with the course and will take random photographs when needed to make

sure that the user has actually gone through the course and has himself attended the assessment.
b. Certificate Key Encryption: This component will take care of generating reliable “self learning completion”

certificates from the offline /online course. This component uses well known encryption alogorithms like SHA, Blowfish etc.

to encrypt the data to generate certificate information string and print in the certificate document, which the learner can

use as a reliable certificate of his learning status.
c. Online central Certificate Tracking : Whenever the user comes online, the certificate data is synced to a central

server of the home server of the framework and a key is assigned so that at any point of time the certificate can be tracked

.

Inbuilt SCORM/AICC Content Package Reader Components (CPRC):

alt text

This is in line with Focus #8 we have discussed. To make sure that Make sure the content is compatible with well know e-

learning specifications like SCORM / AICC etc. the framework will have reader components which will allow to run SCORM 1.2

/2004 and AICC packages in offline mode. These components will provide related adaptors and APIs to track the user scores ,

learning status from the target learning framework.

There are 2 ways of implementation , depending on the need:

Make SCORM / AICC packages compatible with CUPID to run them as a standalone offline course in offline.
alt text

Package CUPID packages as SCORM/ AICC packages so that they can be run in side an LMS compatible with SCORM / AICC

alt text

The CPRC component helps in communicating with the CUPID reader APIs through a wrapper layer that helps integrating the SCORM

component with the framework so that other non-SCORM features of CUPID are also available in the same course.

The CPRC also uses SCORM/AICC APIs to track all the user features and saves them locally so that if needed at a later point

of time those data can be exported to other standard LMS which are compatible with SCORM / AICC.

e-Pub and PDF Reader components:

alt text

This is in line with Focus #9 we have discussed. These will allow rendering of well know content package and file formats

such as ePub (2 and 3) and PDFs. The offline player will extract the epubs etc and by validating it’s spine will render the

pages. Similarly, the course will have independent PDF reader to render the PDF documents and integrate them to the whole

learning framework system. This will allow easy import/ migration of such content to this framework and will be a boon for

the content authors.

alt text

Custom Course Authoring Markup Language Rendering Engine:

alt text

This is in line with Focus #10 we have discussed. Apart from the importing content course from PDFs, EPubs, the framework supports a custom markup language named as “Cupid ML” ( with a file extension“.cml”) . Using this the authors can easily create content poages with built in features such as video players, media renderers, too tips, assessments, tabbed and simple pages etc. The CML language tags are self explanatory and content-author’s friendly to allow them to master it with in a few hours effort . By using the language the authors do not need to learn complex Java Script and/or any other programming skills to enable complex interactivity within the course. At a later point of time the course authoring tools can be developed that
will use this language to develop the courses. The CupidML markup language tags are simple meaning ful for content authors.

alt text

The .cml document starts and ends with the and inside this node the cml specific tags meant for pages, tabs, menus, media components etc. are added to easily create the new pages, chapters, sections in the course and add centralized event listeners without the content authors requiring the knowledge of complex programming languages. The only thing the content author needs to know is which tag is needed for what kind of element of the course. There is a tag for everything the

content author needs.

For example the individual pages can be created with a just adding simple tag like

Now to add a heading in the page
To add complex items like a podcast 1 will add a full fledged podcast component with all the

captioning etc. and “1” represents the URL index number in the podcast array defined in the data file / configuration file.

A typical page in .cml will be much simple than the actual code that is generated in the runtime by CUPID to make things happen and provide qall the interaction and event propagations and API calls.

Instructional Design Compatible Components (IDCC):

alt text

alt text
This is in line with Focus #11 we have discussed. There will be built in components that can support the course content compatibility with Bloom’s taxonomy. For example there will be default learning path creation components which will allow content authors to add “surprise” elements, in-between questions and “case studies” and scenario based task. The content authors can select predefined “Instructional Design” templates and then can fill up the place holders to quickly create the courses which will be compatible with Bloom’s taxonomy.

Different Instructional models fulfilling “creation”,” discovery”, “analysis”, “remembering”, “understanding” and “applying” phases in various degrees.

IDCC provides options for :

Scenario based training: where different scenarios are combined together with the assessment, guided tasks to the user, so that the user can actually.

Case studies : In this model the sample case is presented through real life scenes, and based on that case, related video, audio, interactive, media along with assessments can be grouped together.
Guided Tasks: In a guided task, the major focus is on providing the user a task to complete where the user assisted by some character/bot /or simple alert based instructions. Whenever the user makes any mistakes the system alerts the user and provides hints on how to solve or proceed with the task.

Now combining these sub-types, most of the course can be built to fit the need of any type of self learning modules including soft skills training, software simulation trainings to educational course materials.

So all lessons in side the course is grouped into 2 categories:

Textual Study Mode: In this mode the content types like text, hyperlinks, internal anchors, popup tool tips, quiz, assessments etc. will be available for the target course.

Interactive Media Mode: In this mode the content types like video, audio, podcasts, animations, interactive , game, simulation, guided task etc. will be available for the target course.

These two modes are inter switchable and the user can toggle between any these modes at any point of time of his learning. For any particular section/lesson these two modes will be available to the user so that user can him self decide which one he

needs to use for his learning at any point of the time.

alt text

Innovative Assessment Engines (IAE):

alt text

This is in line with Focus #12 we have discussed. The aim of this new age assessment engine is to help the user self assess

and review the level of skill he has obtained. This will include new kinds of interactive assessment types along with the

typically used “multiple choice”, “true-false”, “drag-n-drop” and “hot-spot” ones. The new kinds will include

(1) Guided tasks
(2) Interactive Scenario based question sets
(3) Basic simulators for software related trainings
(4) The “in-between” hit and click type question with special scoring.

The Guided Task is a kind of assessment, where the user can self assess if needed in a BOT/Wizard assisted simulated environment. This kind gives the hands on kind of experience when combined with simulation. Basically there will be a wizard or guide or assistant who will first assign a task to the learner based on the things he has learned and then help him on the way to complete his task by providing hints and task related tips to the users.

The Interactive Scenario based question sets are provided as a part of any lesson / logical learning chunk where the user is provided with a case scenario through a interactive/video/animation/slides. Then the user is asked to view some screen-cast or interactive simulated environments and then is provided with some interactive questions.

The Basic simulators for software related trainings are the sets where the user faces some software training related UI screens / simulated environment to hit and click different UI elements and provide input to complete the tasks. This will help the user in giving a first hand kind of feel of the target software on which he is getting his training.

The “in-between” hit and click type question with special scoring is a kind where the user is asked with some questions in random in the middle of any lesson. And these questions are related to the lesson the learner is going through. This makes sure that the user is actually going through the lesson with attention. Plus as these questions are having special scoring which will be calculated and be added to the final certification generated, this makes sure that the user can not ignore

these.

User Frequent Course Interaction Manager (UFCIM):

alt text

This is in line with Focus #13 where the user needs to make bookmark any point of the course (a page or a tab), make some content selection and highlighting it in addition to adding a note or annotations. Plus free hand whiteboard type annotation of the course and customization of font size, font type and theme are taken care of by this component.

User is provided with standard UI with controls in the lesson area so that the user can avail any these functionalities with in single clicks.

alt text

Component Based Architecture and Plug n’ Play Rendering Engine (PnPRE):

alt text

This is in line with Focus #14 we have discussed. This is related to the technical aspect of the framework. The whole framework is a combination of multiple “Plug n’ Play” capable components. This component is responsible of allowing integration of new components with the core framework engine. This is also responsible for opening APIs that can be used by the developers to create and add new Plug an Play components for the framework.

alt text

The diagram above, clearly details the process flow and how the core APIs are related to the different plugin or extension components. Any code chunk or package that is compiled as a component or plugin of the CUPID framework is consumed by PnPRE and then it process that code of the component to add that to the core CUPID framework in real time to provide the new plugin related functionalities /feature. This makes easy for any developer to extend the CUPID framework and / or customise it.

The Usability and UI Aspect

The CUPID framework basically targets all the standard digital devices from personal computers, desktops to net-books, small screen mobile devices and stand multi-touch tablets and the related hybrids.

That is the reason, the usability focus is always on device specific and based on the context and environment the user is interacting.

The major flow that the CUPID follows to determine the kind of usability experience to provide are:

    1. Determine the host environment through browser and OS sniffing.Also sniffing made for available real eastet on the screen and resolution, color depth etc. to provide suitable UI layout.
    1. Also sniff for available hardwares like camera, speaker, mic etc. in the device so that the usability aspect can be determined.
    1. Sniff for input devices like multi-touch screen or mouse or keyboards, so that the user interaction types can be determined.
    1. Determine if the user/learner needs special assistance due to any visual or hearing disabilities. This will help in deciding if the built in offline voice-over features enabled or the captioning system to be enabled.

Depending on the above factors suitable user navigation, context menus, navigational links, meida types, layouts and the

customisation thresholds are determined and the best possible experience is delivered to the learner.


The Technology Used

The technology stack used in CUPID are based mostly on open technologies so that the framework can be easily maintained using open source (MIT licensed only) code , plugins.
will be economical /cheap to develop and maintain and extend in future
will be easy and economical to get the support on open technologies related online communities/ forums.
Will be low on budget
get more contributors from the community.

Based on these the key technology stack used in CUPID are:

Client Side:
Flash Action Script (Using Flasm/Ming/and Free Adobe Flash Builder SDK which is free)
HTML5 / CSS3/ JavaScript Frameworks – includes open source frameworks like jQuery, Dojo, YUI, Twitter Boot starp, Adobe’s
Edge Runtime (it’s free unlike the builder), Sencha SDK , Coffee Script, JSON
HTML4/CSS2 – for older browsers and low end systems
XML, XSLT – data and style rendering.
Java Script – Also CoffeeScript

Host browser specific (e.g. Safari specific, or google Play widget specific, Windows 8 app specific)
Platform /native specific: Objective C, Android, C, C++, Phonegap SDK, Sencha SDKs etc.

Server Side:
PHP (Scripting)
MySQL (Database)
XML and JSON (API format)

Specifications :
SCORM API
AICC API
TinCan API

Video Demos

LINKS TO BE ADDED


License and Business Models

The decision on the business model of CUPID has been taken into account the following goals:

The project should sustain in the currently competing commercial and open source worlds.The framework should available FREE of cost to the content authors from the under privileged or having financial challenges.

It should be available as an open source initiative while at the same time it should allow scope of the framework to be used commercially.
Any commercial firm can use the framework for custom development to develop or enhance it for commercial purpose by paying some licensing fees.

To make sure that all of the above applies to CUPID project, the project licensing is decided as follows:

The project will be MIT licensed so that the commercial versions are not bound to open source any modifications made on the framework unlike the GPL one. Any company/organisation can pay a license fee based on the volume of usage their commercial version will have, in order to develop/extend it for a commercial version.The content authors/teachers/developers/organisations/NGOs doing social service on education and would like to extend and use the framework non-commercially are free to do so without paying any fees. And their extensions will not be open sources if they wish.

For getting support on technical or behavioral aspect of CUPID, there will be an annual support fee to be paid, which needs to be renewed each year till the time the support is needed.


How this framework “re-innovates” the Self Learning e-learning domain

alt text

CUPID is the framework that actually attempts to rediscover in the “self-learning” domain of e-learning , which we think we have already discovered! CUPID, implements some fresh concepts and unique ways to improve the learning experience for the user and at the same time makes it easy for the content authors to quickly develop and deliver highly interactive and rich content without the content author to be worried about the technicalities.

CUPID also address the needs of the continuously changing world which is on a fast track pace in moving through the digital revolutions e.g from PC to laptops to mobiles and tablets. It provides unique way to create once and deploy in many platform.

Also CUPID goes beyond the standard limits of the Instructional Designs and provide new blends that can provide fresh way to keep user engaged with the course.

CUPID also mends the gaps between the MOOC based elearning trend and the “self paced ones” by adding ground breaking “course-user interactions” through the assistants, BOTS and the PIE component, so that always the user will feel like the being assisted and guided through his learning curve.

CUPID helps the user in finding the correct learning path to make his learning curve more effective and short.

Last but not te least, CUPID has built in features that supports visually challenged and persons with the challenges in hard of hearing by providing feature that work even in a case of screen reader is not present. Also it provides unique way of voice assisting navigation plus caption based (interactive text labels ) navigation and content media guidance for people with hard of hearing.

In a single line CUPID is all about re-innovating the “self-learning modules” for the next decade.

How CUPID can change the world

The approach of CUPID follows a vision that focuses on every aspect that a learning environment depends on.

It focuses on:

    • User, his taste, his learning requirements and assists him in all though the way of his learning curve for the self learning period on the topic from the target module.
    • Author and his needs on making it easy for integrating content, providing support for quick super-easy way to add content media, making content compatible with standard Instructional Design needs (The Bloom Factors), Also helps in protecting content (e.g. DRM)
      Certification needs: so that the user can go through self –learning and at the same time generate the certificate which is reliable and meaningful for authorities/organisation requiring certificates from the learner (an employee).
    • Commercial aspect/developers: provides options for extending the learning framework for a successful commercial product as well as for content producer companies who can reliably protect their premium content on the self learning modules through DRM feature implemented.
    • Open source communities: CUPID is a great contribution to the open source communities, as it SDK is MIT licensed. Plus it
      uses open technologies to support the “open source movement”
      Financially backward sections in the world: CUPID is FREE for financially backward sections/organisations/authors to develop and extend it for their use non-commercially.
    • Free Institutions: All NGOs, educational institutions, universities, non-profit institutions are free to extend it and allowed for keeping their extensions non-open sourced if they want . So that they can use it in exam needs etc. as long as they are not using it for commercial purpose, they can enjoy this freedom.
    • Physically challenged: Visually challenged and persons with hard of hearing can use CUPID without any extra screen reader or hardware/ software installed in their system.

References

The MIT License (MIT)
http://mit-license.org/

Wikipedia entry on MIT license
http://en.wikipedia.org/wiki/MIT_License

Trends of Innovation in Education :

Technology, Content, Pedagogy, and Value


Appendix

Video URL :http://youtu.be/LfjlUX_lLUA
Slides URLhttp://www.slideshare.net/MobileWish/cupid-common-unified-programs-for-instruction-delivery


Project Presentation

cupQ (v 0.2) – with support for Plugins/Extensions

What’s new in this version 0.2 :

  1. Added support for plugin architecture. Now extending cupQ is also everybody’s cup of tea!Anyone can now create plugins for cupQ to add powerful features.
  2. Disabled auto initialisation of browser detection, which was there in v 0.1. Now the developer has to initialise it manually if required.
  3. Now each cupQ object instance is created, it will have an unique ID, which will appear in trace(), that will allow developers to easily track the target instance from debug information from the console .
  4. cupQ initiation method now by default does not return the result array of nodes list . The init() method now returns the cupQ object. This is a major change.
  5. For nodes List we can now use cupQ property “nodesArray” (e.g. _().init().nodesArray )or a new method called “getNodesArray()” (e.g. _().init().getNodesArray() or _().getNodesArray() )

Using cupQ: User Guide (v0.2)


cupQ” (aka “cupQuery”)is an easy-to-use cross-browser open source JavaScript framework that allows querying and manipulation of HTML DOM document using standard selectors to get output as an array of result values. With cupQ, controlling HTML DOM is now everybody’s cup of tea!

Author: Samir Dash, mobilewish@gmail.com :: https://samirshomepage.wordpress.com ** **Download:https://github.com/mobilewish/cupQ License: MIT License. Version: 0.2 Published: June 2012


What’s new in this version?

  1. Added support for plugin architecture. Now extending cupQ is also everybody’s cup of tea!Anyone can now create plugins for cupQ to add powerful features.
  2. Disabled auto initialisation of browser detection, which was there in v 0.1. Now the developer has to initialise it manually if required.
  3. Now each cupQ object instance is created, it will have an unique ID, which will appear in trace(), that will allow developers to easily track the target instance from debug information from the console .
  4. cupQ initiation method now by default does not return the result array of nodes list . The init() method now returns the cupQ object. This is a major change.
  5. For nodes List we can now use cupQ property “nodesArray” (e.g. _().init().nodesArray )or a new method called “getNodesArray()” (e.g. _().init().getNodesArray() or _().getNodesArray() ) ***

USAGE – OVERVIEW:

Any cupQ method always returns results in a form of an array. So to track any individual values of the result you can always use index to specify the resulting item in the result array.

The cupQ object can be initiated using the “_()”.

Sample usage can be : _().setDebug(true);

Instead of directly using “_()”, you can assign a variable to it so that you can refer to the same cupQ object multiple times — this helps in avoiding multiple instance of the cupQ object. So the previous example can be written as

var myCupQ = _(); myCupQ.setDebug(true); 

Querying HTML DOM can only be done after the document is ready. So after basic setup like allowing debug mode or the similar, the on document ready event can be setup as follows:

var myCupQ = _(); myCupQ.onDocumentReady= function (){ //add your code here that you want to load after dom is loaded or the document is ready...for example the following line is called after the document is ready myCupQ.importFiles(["js/importscripts.js"]); //here you can use multiple cupQ objects ..like the one in the following is a different one that the previous line _().importFiles(["js/importMyNewScripts.js"]); } 

USAGE – QUERYING DOM USING SELECTORS:

For querying dom the expression involves 3 parameters .

 _(selector, targetNode, indexQueryResultingArray).init().getNodesArray(); "selector" is a string which can be a class name, an element id or simply a tag name. For class name the "selector" must be prefixed with a dot "." and for an id there must be a prefix of a hash "#" "targetNode" can be document or any DOM node or an array with nodes. This is optional (but in case the third parameter is "indexQueryResultingArray" is specified , you need to specify this one). If no value is supplied, the querying starts with the document object element of the DOM. "indexQueryResultingArray" is either a zero (0) based index number, or an array of numbers or a string with expression or a function that can be passed that can target which node or nodes to pick if the query results in a list of nodes or a collection of DOM elements. Using 0 is the first item in the resulting nodes list, and using -1 will refer to the last item in the resulting array if applicable. This parameter is optional. To get query output as an array of resulting nodes, the "getNodesArray()" is called for the target cupQ object. examples : option: 1 (as a method call) var myCupQ = _("p").init(); myCupQ.getNodesArray(); //returns array of resulting nodes or simply use _("p").init().getNodesArray(); //returns array of resulting nodes option 2 (as a property) var myCupQ = _("p").init(); myCupQ.nodesArray; //returns array of resulting nodes or simply use _("p").init().nodesArray; //returns array of resulting nodes 

In the following are different types of usage of selectors to get the array of resulting nodes from the DOM:

Get array of nodes having the class name. For example for a class name "className" the expression will be as follows: _(".className").init().getNodesArray(); Get current node as an element of an array with the id name. For example for a id name "idName" the expression will be as follows: _(".idName").init().getNodesArray(); Get the first node as an element of an array with the specified class name. _(".className", document, 0).init().getNodesArray(); Get the last node as an element of an array with the specified class name _(".className", document, -1).init().getNodesArray(); Get array of nodes with the class names appearing with odd positions -- here the expression "odd" is used as 3rd parameter. _(".className", document, "odd").init().getNodesArray(); Get array of nodes with the specified class names appearing with even positions -- here the expression "even" is used as 3rd parameter. _(".className", document, "even").init().getNodesArray(); Get array of nodes with the specified class names appearing with positions mentioned in the array-- here the array of index numbers is used as 3rd parameter.. Note the array contains indexes that are 0 based. _(".className", document, [1, 2, 4, 5]).init().getNodesArray(); Get array of nodes with the class names appearing with positions as per the expression i.e. position numbers > 4 in this example. Note the expression contains index that is 0 based. _(".className", document, ">4").init().getNodesArray(); Get array of nodes with the class names appearing with positions as per the expression i.e. position numbers == 4 in this example. Note the expression contains index that is 0 based. _(".className", document, "==4").init().getNodesArray(); Get array of nodes with the class names appearing with positions as per the expression i.e. position numbers < 4 in this example. Note the expression contains index that is 0 based. _(".className", document, "<4").init().getNodesArray(); Get array of nodes with the class names appearing with positions as per the expression i.e. position numbers >= 4 in this example. Note the expression contains index that is 0 based. _(".className", document, ">=4").init().getNodesArray(); Get array of nodes with the class names appearing with positions as per the expression i.e. position numbers <= 4 in this example. Note the expression contains index that is 0 based. _(".className", document, "<=4").init().getNodesArray(); Get array of nodes with the class names appearing with positions as per the out put based on the function "myFunction" ...like you can use a function that compares certain things to decide which nodes to choose. _(".className", document, myFunction).init().getNodesArray(); where myFunction = function (){ return [3, 5, 9]; } 

USAGE – GETTING THE PARENT NODE OR CHILD NODES OF THE PROVIDED SELECTORS:

Getting array of parent and child nodes from document after querying using the specified selector. This includes [objectText] if there is no nodes present but some text present. For example in side paragraph only text is there.

Get the array containing unique parent node of resulting nodes after querying using the specified selector (for example here the class name is used ) _("-.className", document, -1); Get the array of child nodes of resulting nodes after querying using the specified selector (for example here the class name is used ) _("+.className", document, -1); 

USAGE – QUERYING DOM USING SEQUENCE/TREE OF SELECTORS:

There is a nice feature of cupQ that allows you to provide a string of sequence/tree of selectors (excluding the document object element) to get the resulting node. Each selector has to be separated by a single blank space .

Parent and child nodes expressions can also be used :

Example: (_("p[1] span[0]").init().getNodesArray());//sequence of selectors (_("-p[1] span[0]").init().getNodesArray());//parent of sequence of selectors (_("+p[1]").init().getNodesArray());//array of children of sequence of selectors 

USAGE – QUERYING DOM FROM CUSTOM NODE ON WARDS:

By default, the cupQ starts Querying the HTML DOM from the root or the ‘document’ object element. But this can be customised to start querying from any specific node of the DOM by supplying “targetNode” which can be document or any DOM node or an array with nodes.

Example of getting nodes from custom node

var targetNode = document.getElementById("myId"); Note: instead of using DOM methods above, you can even use cupQ to get the targetNode e.g. _("#myId").init(); _(".idName", targetNode);//get current node with the id name from the target Node onwards _(".className", targetNode);//get array of nodes from the target Node onwards with the class name _(".className", targetNode, 0);//get first node from the target Node onwards with the class name _(".className", targetNode, -1);//get last node from the target Node onwards with the class name 

Example of getting nodes (arrays) from an array containing custom nodes

var targetNode = [document.getElementById("myId"),document.getElementById("myId2") ]; Note: instead of using DOM methods above, you can even use cupQ to get the targetNode e.g. [_("#myId").init(), _("#myId2").init()]; _(".idName", targetNodesList);//get current nodes (array) with the id name from the target NodesLists onwards _(".className", targetNodesList);//get array of nodes from the target NodesLists onwards with the class name _(".className", targetNodesList, 0);//get first node from the target NodesLists onwards with the class name _(".className", targetNodesList, -1);//get last node from the target NodesLists onwards with the class name 

USAGE – QUERYING AND MANIPULATING HTML DOM:

Using cupQ, You can do lot more than just querying HTML DOM to get array of nodes or HTML elements. You can use getter / setters to target and manipulate different nodes and their attributes, styles, html and text contents.

.html(val, index) ------------------ This is a both getter and setter to grab and manipulate the innerHTML of the target node(s). If no parameter is supplied, the method acts as a getter and returns the innerHTML of the target node(s) as an array. If parameter "val" is supplied then the value is set to the innerHTML of the target node(s). If index is supplied, then only the target node with thye specified index in the array of the reulting nodes is modified or the value is granbbed from. e.g: _("#idName").html();//get inner html _("#idName").html("<b>hello</b>");//update inner html _("p").html("hello", 0);//update inner html for the 0 indexed paragraph among the resulting array of paragraphs obtained after the query is executed. .htmlAppend(val, index) ------------------------- This is a setter method (which also returns the final updated inner html )that appends (adds content at the end of existing one) the provided content (via the "val" parameter) and also can work on specific indexed item in the resulting nodes. e.g: _("-p").htmlAppend("<b>hello</b>", 1);//appends to inner html .htmlPrepend(val, index) ------------------------- This is a setter method (which also returns the final updated inner html )that pre-pends (adds content at the begining of existing one) the provided content (via the "val" parameter) and also can work on specific indexed item in the resulting nodes. e.g: _("-p").htmlPrepend("<b>hello</b>", 1);//prepends to inner html .text(val, index) ------------------ This is a both getter and setter to grab and manipulate the inner text (innerText) of the target node(s). If no parameter is supplied, the method acts as a getter and returns the inner text of the target node(s) as an array. If parameter "val" is supplied then the value is set to the inner text of the target node(s). If index is supplied, then only the target node with thye specified index in the array of the reulting nodes is modified or the value is granbbed from. e.g: _("#idName").text();//get inner text _("#idName").text("hello");//update inner text _("p").text("hello", 0);//update inner text for the 0 indexed paragraph among the resulting array of paragraphs obtained after the query is executed. .textAppend(val, index) ------------------------- This is a setter method (which also returns the final updated inner text )that appends (adds content at the end of existing one) the provided content (via the "val" parameter) and also can work on specific indexed item in the resulting nodes. e.g: _("-p").textAppend("<b>hello</b>", 1);//appends to inner text .textPrepend(val, index) ------------------------- This is a setter method (which also returns the final updated inner text )that pre-pends (adds content at the begining of existing one) the provided content (via the "val" parameter) and also can work on specific indexed item in the resulting nodes. e.g: _("-p").textPrepend("hello", 1);//prepends to inner text .remove(index) ------------------------- This is a setter method that removes the resulting nodes and returns blank array if no index is spplied. If index is supplied, it removes the target node selecting it from the resulting array of nodes and returns the updated array of resulting nodes. e.g: _("p").remove();//removes all the nodes _("p").remove(1);//removes node of the mentioned index .style() ------------------------- This returns the array of style objects for the target nodes selected after querying using the selctors. Each individual style object can be then accessed using native DOM methods to manipulate for both getter and setter related activities. e.g: _("p").style();//get array of style objects for the resulting nodes _("p").style()[2];//get the target style object for corresponding index from the array of style objects obtained from the resulting nodes ((_("p").style())[0]).width='2440px';//setting the individual style "width" for any target style object (_("p").style(0)[0].backgroundColor);//getting individual style for any target style object .attribute(attributeName, indexQueryResultingArray, attributeValue) ---------------------------------------------------------------------------- This can be both getter and setter to manipulate attributes of the target nodes. attributeName - this is the name of the attribute you want to grab or set the value for. indexQueryResultingArray - this is optional. supply an index number to target the node in the resulting array of nodes. If 3rd parameter is used and you do not want to supply index use "" which will set it to default. attributeValue - this is optional. If supplied, this value will be set to the target attribute. e.g: (_("p").attribute("name"));//getter - here the target attribute is "name" (_("p").attribute("style", "", "background:yellow"));//setter - without using any index (so that it affects all the nodes in the array )using setter for a attribute called "style" - alternative way to manipulate style of a node (_("p").attribute("style", 1, "background:yellow"));//setter - using index (so that it affects only target indexed node )using setter for a attribute called "style" - alternative way to manipulate style of a node .childIndexInParent(indexQueryResultingArray) ---------------------------------------------------------------------------- This is a getter that returns an array of index numbers for each ttarget nodes in their parent nodeList. If indexQueryResultingArray is supplied it returns only the index of the target node in it's parent nodeList. e.g: (_("p").childIndexInParent());//get index numbers of the nodes selected under their parent node; (_("p").childIndexInParent(2))//for specific selected node ..the child index number of it in it's parent node 

USAGE – PROPERTIES

.version - returns version number of cupQ library used. .currentObjectId - returns the unique instance object Id of the cupQ object. .Q - returns the query. .isClassName- returns true if the query provided is a class name. .isIdName- returns true if the query provided is for an element id in HTML DOM. .isTagName- returns true if the query provided is for a HTML tag name. .isGetParent- returns true if the query provided is for selecting the parent nodes (unique) for the target nodes based on current query. .isGetChildren- returns true if the query provided is for selecting the child nodes for target nodes based on current query. .isGetCurrent - returns true if the query provided is for selecting the target nodes based on current query. .nodesArray - returns the array of the resulting target nodes for the provided queries. .childIndexInParentArray - returns the array of parentNodes of the resulting target nodes for the provided queries. .attributeArray - returns the array of attribute values (of provided attribute name) content of the resulting target nodes for the provided queries. .styleArray - returns the array of style attribute values of the resulting target nodes for the provided queries. .innerTextArray - returns the array of text content of the resulting target nodes for the provided queries. .innerHTMLArray - returns the array of HTML content of the resulting target nodes for the provided queries. .targetArray - returns the array of target nodes which are used as the root nodes for multiple queries. .bodyFilesArray - returns the array of JavaScript / CSS file paths to be added in the body of the HTML DOM . .headFilesArray - returns the array of JavaScript / CSS file paths to be added at the header of the HTML DOM . .pluginsArray - returns the array of plugins resgitered with cupQ. 

USAGE – BROWSER SNIFFING:

The cupQ sniffs for the browser and opertaing system when an instance of cupQ runs. The sniffing details can be found from properties of “.hostObject” .

Before getting browser, navigator and OS details, the initialisation has top be done through calling init();

 e.g: var myCupQ = _(); //now initialising the hostObject. myCupQ.hostObject.init(); //now get the details myCupQ.hostObject.browser; myCupQ.hostObject.version; myCupQ.hostObject.OS; myCupQ.hostObject.navigator; myCupQ.hostObject.navigatorVendor; myCupQ.hostObject.userAgent; 

USAGE – UTILITIES:

There are a few utilities methods available.

.getUniqueArray(myArray) -------------------------- This returns an array with unique items from the supplied array of items. 

USAGE – SETTINGS AND DEVELOPER UTILITIES:

_().setDebug(val); ----------------- This is a global flag that either turns on the debug mode (to allow "trace" messages in the browser console.) -- if you set this in any instance it will affect all the instances of cupQ running in that document. The parameter can be true or false boolean value. The default is false. e.g: _().setDebug(true);//true sets global debug mode on. The debug value can be read through the property "debug" _().debug; // returns the value true or false _().trace(val); ----------------- This iallows you to log your message to console window of the browser. This only writes to console only if the debug value is set to true. This is an easy to maintain feature that you can use to log your JavaScript messages to console, as you can turn on or off it using the debug mode. Now each cupQ object instance is created, it will have an unique ID, which will appear in trace(), that will allow developers to easily track the target instance from debug information from the console . For example an out put will be like the following : "[CUPQID1340363887134000] cupQ: onDocumentReady() called." Using trace is straightforward: e.g: _().trace(message);//passing value of message to console _().trace("some message");// only if the debug mode is on it logs the message to console; 

USAGE – EXTENDING CUPQ OBJECT WITH PLUGINS – WRITING SAMPLE PLUGIN:

From v0.2 onwards the support for plugin has been added. Now extending cupQ is also everybody’s cup of tea!Anyone can now create plugins for cupQ to add powerful features.

To add a plugin, the plugin object is passed to cupQ instance via “register” method of the “pluginManager” object of cupQ.

Any plugin resgitered with any instance of cupQ object is available only for that instance.

Typical syntax to register is as follows:

_().pluginManager.register("pluginShortname", pluginObject ); 

Note: The register plugin can be called even before calling init() method.

A plugin object san be a simple Java Script Object having the methods and properties.

An example of a simple plugin is shown below that return current time (Date object) on initiation. Notice it has an object called “getInfo” which returns the information about the plugin. It is required to include this “getInfo” object while developing plugins.

 var myCupQ = _(); myCupQ.pluginManager.register("someplugin", { init:function(){ var sampleValue = new Date(); return(sampleValue); }, getInfo : { longName : 'sample plugin name', author : 'Some Author Name', authorURL : 'http://theurloftheauthorswebsite.com', infoURL : 'http://theurlofthepligininfowebsite.com/plauginname', version : "1.0" } } ); 

The “getInfo” must have the following properties defined — “name”, “longName”, “author”, “authorURL”, “infoURL” and “version”.

Within plugin the parent object (i.e. the instance of cupQ) can be accessed using “.parent”. For example in the following the plugin returns the version of the parent cupQ object.

 var myCupQ = _(); myCupQ.pluginManager.register("someplugin", myPlugin); var myPlugin = { init:function(){ return(this.parent.version); }, getInfo : { longName : 'sample plugin name', author : 'Some Author Name', authorURL : 'http://theurloftheauthorswebsite.com', infoURL : 'http://theurlofthepligininfowebsite.com/plauginname', version : "1.0" } } 

if the plugin is registered after the init() method of thye cupQ object is called, it can also get the resulting query result through calling to parent methods. The following example makes use of the “nodesArray” property of its parent cupQ object.

 var myCupQ = _(); myCupQ.onDocumentReady=function(){ myCupQ.pluginManager.init().register("someplugin", myPlugin); var myPlugin = { init:function(){ return(this.parent.nodesArray); }, getInfo : { longName : 'sample plugin name', author : 'Some Author Name', authorURL : 'http://theurloftheauthorswebsite.com', infoURL : 'http://theurlofthepligininfowebsite.com/plauginname', version : "1.0" } } } 

Example of plugin info being tracked –

 myCupQ.someplugin.getInfo;//returns the getInfo Object of the plugin myCupQ.someplugin.getInfo.longName;//returns the long name of the plugin myCupQ.someplugin.getInfo.author;//returns the author name of the plugin myCupQ.someplugin.getInfo.authorURL;//returns the author URL of the plugin myCupQ.someplugin.getInfo.infoURL;//returns the info URL of the plugin myCupQ.someplugin.getInfo.version;; //returns the version of the plugin 

USAGE – WRITING CUPQ EXTENSIONS (i.e. PRE-REGISTERED STANDALONE PLUGINS) :

Using the method described in the previous section, any cupQ instance object can be extended. But in such method the plugin has to be registered to any cupQ object in the runtime. In case you want to distribute pre-registered plugin i.e. your plugin enabled extended cupQ object, you can create a cupQ object instance and regsiter your plugin with it. Next wrap it with a method with an extension name. Now you place all these code into a separate javaScript file for distribution.

Following is an example of a preregistered plugin (the following code has to be placed in a separate JavaScript file):

 var myCupQExtension = function(selector, targetNode, indexQueryResultingArray){ var myCupQ = _(selector, targetNode, indexQueryResultingArray); myCupQ.onDocumentReady=function(){ var myPlugin = { init:function(){ return(this.parent.nodesArray); }, getInfo : { longName : 'sample plugin name', author : 'Some Author Name', authorURL : 'http://theurloftheauthorswebsite.com', infoURL : 'http://theurlofthepligininfowebsite.com/plauginname', version : "1.0" } } myCupQ.pluginManager.init().register("someplugin", myPlugin); } }(); The above extension can be used just like any native cupQ object with the plugin objects enabled. myCupQExtension("p").html(); myCupQExtension(".className").someplugin.init(); Check "extension" folder in the cupQ github repository for more samples. 

Holographic Bump 3D (Lenticular ) Sticker Effect on iPhone !

Bump 3D holographic sticker effect on iphone…tilt iphone horizontally or vertically to see different images … this demo shows 3 different images packed into one virtual bump 3d sticker on iphone.

Created with HTML5, CSS3, Jav Script and iOS4 specific APIs. works on ioS 4+

Check out my article “WebKit touch events: background and terms for Edge users” at Adobe Developer Connection

Check out my article “WebKit touch events: background and terms for Edge users” at Adobe Developer Connection at
It’s also featured at
This article explores the concepts of touch events and gestures in reference to normal HTML and JavaScript rendered in the iPhone, iPad, or Android browsers.
Image
Image

Special Kindle Edition at Amazon.com : Quick and Dirty Guide for Designers: Adobe Edge Preview 3 in 4 Hours (Quick and Dirty Guide in 4 Hours) by Samir

Image

Quick and Dirty Guide for Designers: Adobe Edge Preview 3 in 4 Hours (Quick and Dirty Guide in 4 Hours) by Samir Dash (Dec 17, 2011) – Kindle eBook

  • Format: Kindle Edition
  • File Size: 2212 KB
  • Publisher: patternGraphic Digibooks; 2 edition (December 17, 2011)
  • Sold by: Amazon Digital Services
  • Language: English
  • ASIN: B006NFFQ4Q