Category Archives: Developing Interactive Systems

Cockroach Nuclear and Foot – Developing a simple iOS game

Final Project Presentation for Developing Interactive Systems

About

This game works on the simple principle as the ancient chinese hand game called rock paper scissors or RoShamBo. This is single player game that can be played against the computer.

The game works with 3 cases on the following logic:

Developing a simple iOS game
The foot can beat (stamp on) the cockroach. The cockroach can beat (survive) the nuclear explosion. Nuclear Explosion beats (kills) Foot.

Flow of the game

Developing a simple iOS game
Screenshot 1: User Clicks on App
Developing a simple iOS game
Screenshot 2: The app home screen is loaded. User clicks on the “Play Now” button and is directed to the play screen.
Developing a simple iOS game
Screenshot 3: The user starts playing. He sees 3 icons on the first screen and he needs to click on any one of the 3 – cockroach, nuclear or foot. In this instance, he clicks on Nuclear
Developing a simple iOS game
Screenshot 4: The computer randomly chooses cockroach and hence the user loses. Now, the user clicks on the “Play Again” button
Developing a simple iOS game
Screenshot 5: After clicking on Play Again, the user is directed to the play screen again. This time, the user clicks on Foot.
Developing a simple iOS game
Screenshot 6: The computer randomly picks cockroach and therefore the user wins. The user clicks on play again.
Developing a simple iOS game
Screenshot 7: The user is back on the play screen. This time, he picks Nuclear
Developing a simple iOS game
Screenshot 8: The computer randomly chooses Foot. Nuclear beats Foot therefore user wins.

Game Preview

The following video is the app being simulated on an iPhone Retina 3.5 inch. The functions well on other devices as well however for the purposes on this presentation I have chosen this randomly.


Thank you! / Aitäh!


Resources:
 Apple Documentations
 UI Kit
CPlusPlus
DreamUnicode 
StackOverFlow
ManiacDev
 Raywenderlich
 CodeCanyon
 TutPlus

An Interactive Resume (with iOS and WordPress)

Final Presentation – Developing Interactive Systems

I have been thinking of applying for jobs within the UX field in Estonia. Being a professional from the ICT background, it’s hard to show my skills with a simple paper resume. It’s boring, obsolete and lacks engagement and imagination. This format of paper representation may work for several professionals like academicians, lawyers and doctors but it’s hard to impress a potential employer in the ICT space without being able to show off your skills in the digital format. I was looking at ways in which I could make my resume more interactive with iOS for my next job interview.

So, how do I create a resume that my potential employer could interact with during an interview while I pitch my ideas or walk through the works I have done?

The solution = Interactive Resume = iPad + iOS (WebView Resume)* App 
 *Resume = WordPress CMS + Theme

Paper Prototype

First I created a paper prototype of what I wanted:

Paper Prototype - Developing Interactive Systems - Interactive Resume with iOS- 1

Paper Prototype - Developing Interactive Systems - Interactive Resume - 2

Paper Prototype - Developing Interactive Systems - Interactive Resume - 2.1 - Horizontal View

How does it work?

In one of my previous classes in HCI, Mobile Device Workshop, I had created an application that works as a web-viewer for android devices. This gave me the idea of using a similar concept for this assignment.I want to create a similar web view application for iOS using UI kit. The basic idea is to load a website or a html file.

The application not only needs to be interactive but also needs to have a CMS that could easily allow me to update my resume without coding or the changing source code of the app. Instead of recreating the wheel, I chose to use one of the most user friendly and widely used CMS – wordpress.
Paper Prototype - Developing Interactive Systems - Interactive Resume - 3 - How it works

Final Work – The Interactive Resume

Developing Interactive Systems - Interactive Resume - Screenshots (1)
Step 1: Click on the “Resume” app. The app works like an interactive resume with CV details, project/portfolio showcase, blog posts, social links and so on.
Developing Interactive Systems - Interactive Resume
The app acts like a HTML viewer. Upon start-up, it loads a predefined link. In this case, I have added the following link: www.jinesh.me. This is a responsive site that runs on wordpress. It’s easy to update/edit out the resume using the CMS
Developing Interactive Systems - Interactive Resume
The viewer has three tabs. Additional tabs can be added. As of now, I have added 3 tabs titled “Profile”, “Blog” and “Research”. Predefined links can be assigned to each tab. This way, when you click on any tab with the pre-set link, the corresponding HTML page is loaded. The tabs are collapsible to ensure that the viewing space is not disturbed
Developing Interactive Systems - Interactive Resume
Tabs can be collapsed easily to ensure maximum viewing area
Developing Interactive Systems - Interactive Resume - Screenshots 3.1
Easy browsing depends on a variety of factors. Starting with device and the responsiveness of the site.
No horizontal scrolls should be allowed. The HTML page should be responsive.
No horizontal scrolls are to be allowed. The HTML page is fully responsive.

The full sources codes of this particular app can be downloaded here.

Conclusion

With my limited knowledge of coding iOS apps and with the time restrictions of the course, this was the best creative hack I could think of. This is not the best piece of code however this course sparked curiosity for me experiment further with iOS and in time I plan to work more on this interactive resume.


Thank you! / Aitäh!

Resources:
 Apple Documentations
 UI Kit
 ManiacDev
 Raywenderlich
 CodeCanyon
 TutPlus

Developing Interactive Systems – An Interactive Resume

Interactive Resume (HTML Web Viewing)

I have been thinking of applying for jobs within the UX field in Estonia. Being a professional from the ICT background, it’s hard to show my skills with a simple paper resume. It’s boring, obsolete and lacks engagement and imagination. This format of paper representation may work for several professionals like academicians, lawyers and doctors but it’s hard to impress a potential employer in the ICT space without being able to show off your skills in the digital format. I was looking at ways in which I could make my resume more interactive for my next job interview.

So, how do I create a resume that my potential employer could interact with during an interview while I pitch my ideas or walk through the works I have done?

The solution = Interactive Resume = iPad + iOS (WebView Resume)* App 
 *Resume = WordPress CMS + Theme

Paper Prototype

Paper Prototype - Developing Interactive Systems - Interactive Resume - 1

Paper Prototype - Developing Interactive Systems - Interactive Resume - 2

Paper Prototype - Developing Interactive Systems - Interactive Resume - 2.1 - Horizontal View

How it works?

Paper Prototype - Developing Interactive Systems - Interactive Resume - 3 - How it works

In one of my previous classes in HCI, Mobile Device Workshop, I had created an application that works as a web-viewer for android devices. This gave me the idea of using a similar concept for this assignment.I want to create a similar web view application for iOS using UI kit. The basic idea is to load a website or a html file.

The application not only needs to be interactive but also needs to have a CMS that could easily allow me to update my resume without coding or the changing source code of the app. Instead of recreating the wheel, I chose to use one of the most user friendly and widely used CMS – wordpress.