SIT 120 Portfolio

TRI 1 2017 PORTFOLIO
SIT 120 -INTRODUCTION TO APPS

DESIGN
DDE
GAGANPREET SINGH
216007817
Gaganpreet Singh SIT120-Intoduction To Apps Design Portfolio
Contents
week 1 ..................................................................................................................................................... 2
Week 1 Lab.......................................................................................................................................... 2
Week 1 Summary ................................................................................................................................ 3
Week 2 .................................................................................................................................................... 4
week 2 Lab .......................................................................................................................................... 4
Week 2 Summary ................................................................................................................................ 8
Week 3 .................................................................................................................................................... 8
week 3 Lab .......................................................................................................................................... 8
week 3 Summary............................................................................................................................... 12
Week 4 .................................................................................................................................................. 13
week 4 Lab ........................................................................................................................................ 13
Week 4 Summary .............................................................................................................................. 16
Week 5 .................................................................................................................................................. 17
5.1 Screenshot .................................................................................................................................. 17
5.2 HTML SOURCE CODE ................................................................................................................... 17
5.3 Week 5 Summary ........................................................................................................................ 22
Week 6 .................................................................................................................................................. 23
6.1 Screenshot .................................................................................................................................. 23
6.2 HTML SOURCE CODE ................................................................................................................... 23
6.3 Week 6 Summary ........................................................................................................................ 27
Week 7 .................................................................................................................................................. 28
7.1 Screenshot .................................................................................................................................. 28
7.2 Html Source Code ....................................................................................................................... 28
7.3 Week 7 Summary ........................................................................................................................ 32
Week 8 .................................................................................................................................................. 33
8.1 Screenshot .................................................................................................................................. 33
8.2 Html Source Code ....................................................................................................................... 33
8.3 Week 8 Summary ........................................................................................................................ 36
Week 9 .................................................................................................................................................. 37
Week 9.1 Screenshot ........................................................................................................................ 37
Week 9.2 Html Source Code ............................................................................................................. 37
Week 9.3 Summary ........................................................................................................................... 41
week 1
Week 1 Lab
1.1.1 What Are the three Assessment Required in this unit?
Three Assessment Required in this Unit are the following: -
i. Project Plan 30% Due Week 4, 31th March, Friday 5pm.
ii. Project 40% Due Week 10, 19th May, Friday 5 pm
iii. Portfolio/ Unit Summary Report Due Week 9, 12th May, Friday 5pm.
1.1.2 What is the purpose of this unit?

The Purpose of the Unit is to learn how to get App idea, Monetization, publishing app
and how to transform the app idea to real world working app.
1.1.3 What do you hope to get out of this unit by week 10?
By the end of week 10, I hope I would able to develop a simple, working app which I can
upload in google play store and target audience will use it.
1.1.4 What must you do if you need an extension for an assignment? What happens if you
submit an assignment late?
If I need an extension for an assignment, the extension must be applied to the unit chair
using the faculty assessment extension request form with the supporting document. It
can be either approved or disapproved by the unit chair. If a student doesnt have an
approved extension, and fails to submit before the due date, 5% will be deducted from
the available marks every day up to five days.
1.1.5 What are some things you follow when you write an email to the unit chair?
Email should be send using the Deakin address and the subject should be as follows
SIT120: Subject line what is your email about
1.1.6 What standard of work you will be aiming for(average , pretty good , excellent)?
I will be aiming to do excellent work in this unit since its base for my majors. This would
help me to excel in this field and help me to get a better job.
1.1.7 What do you plan to do after you graduate?
After I graduate, I would like to pursue my masters in the IT to increase my qualifications
for getting a better job.
1.1.8 What are one or two of your lifelong ambitions?
My top most lifelong ambition is to succeed in my field. I want to achieve certain heights
in the IT. My second lifelong ambition would be to develop a one Certain app or
software which would be used by the people all over world.
1.1.9 How does this degree align with your overall ambition?
Pursuing Bachelor in Information Technology will help in developing all the skills needed
to work as an IT specialist especially learning various Programming languages to help me
to become a professional programmer
1.1.10 Why is a career in IT valuable, in your mind?
Career in IT is always a dream for me. I was always fantasized by the world of computers
and always wanted to do interesting things on the Computer.
1.1.11 Compared to your family or friends not in IT, why do you have an advantage in IT ?
I think IT is an Evergreen field and IT is not limited to only ICT Industries but many other
industries as well.
1.1.12 Are mobile devices a long-term industry?
Yes Mobile Devices are a long term Industry. The usage of mobile phones has only one
way to go and that is uphill.
1.1.13 If you didn't have a mobile device, how would your life be affected?
In Todays Time, Life without a mobile device cannot be imagined. Without mobile
device, life would seem to come to a still. From minor to major task, we are dependent
on the mobile phones.
Week 1 Summary
Week 1 of Introduction to Apps Design is introduction about the unit and teaching staff. It
also lists what we would be learning week by week. I always had dream of creating apps and
I am very excited to start this unit. Following are some points which summarizes week 1.
The Quality of work expected in this unit should be like professional. It
prepares the students for the IT market.
Physical Writing of notes help to Remember Things and save lot of time.
If students are stuck while making their assignments, they can post in
student discussion or email their tutor for help.
Other Websites like StackOverFlow.com are very helping for solving doubts
while creating apps.
Websites like KickStart.Com where we can put our idea of the app and if
there are some willing buyers and are ready to invest good money in the
app then we can shape our ideas.
Graphics used in making apps should be legally used. It should have persons
name whose has crated it and URL of the graphic from where it was taken in
our licensing files.
Assessment overview
It contains information about all the assessments in this entire unit which
we need to do to complete the unit successfully.
There are total in three assignments in this entire unit and each of them
have due dates, first is the professional plan for an app which is due on 4th
week Friday 5pm, second is the project which is due on 11th week Friday
5pm, the last one is the unit summary report which is due on 10th week
Friday 5pm.
Professional plan for an app has 30% weightage, game project has 40%
weightage and portfolio-unit summary report has a weightage of 30%.
Week 2
week 2 Lab
2.1.1 What are all the steps in your mind required to take an app from an idea to publication?
In the First step, we need an app idea, and then we have a plan development in which diagrams are
created. Next, we create a User Interface and write the code. When the coding is done, it is then
tested on multiple platforms. Bugs found in testing are then fixed. After the issues have been
resolved, we then publish it on the play store or app store. The App needs to be updated timely for
further bugs and releasing new features.
2.1.2 What is required during the "publication" stage of the app when you're configuring
your app on the App Store?
For the publication of the app on the app store, we need description, screenshots, icons, category,
version number, contact info for bugs reporting, pricing and exact requirements can vary slightly
depending on the store.
2.1.3 What are some of differences between Apple and Google play stores?
Apple does not provide the number of downloads of the app as in case of google play store.
Moreover, there are more rigorous guidelines to publish apps on apple app store than Goggle play
store.
2.1.4 Why does every project need graphics or a graphical designer?
Every project needs graphics because graphics are the things by which the users are most attracted.
And for getting the best of the graphics for our project we need graphic designer.
2.1.5 What is the difference between graphics and user interface?
Graphics is an art that choses colours, fonts, images, logos and handle other elements to make the
project more appealing. User interface is the developing ways humans can interact with machines. It
is used to make apps more user friendly
2.1.6 Why does every project needs a programmer?
Every project needs a programmer because to make a project more interactive and attractive, we
need to program certain things, which can be successfully done by the programmer only.
2.1.7 What is cross platform and why it is common?
Cross platform are those apps which are available on all the various operating systems currently in
use like google play store, apple apps store and windows store. It is common because people want
their app to be published everywhere and to be used by all the people. More the number of
downloads, more is the app making money.
2.1.8 What is the difference between web pages and web apps?
Websites are static when compared with web apps. Theres lot more information to read. Web apps
are interactive, you can do lot more things on web apps example Gmail you can create emails.
2.1.9. What are some of the advantages of creating an app using web technologies?
Creating apps using web technologies can be easy for the beginners as we just use html, JavaScript
and CSS for coding. Moreover, they have same set of codes for all different platforms. Web apps can
be easily tested by just opening them in the browser.
2.1.10 What are some of the disadvantages of creating an app using web technologies?
One of major disadvantage of creating an app using web technologies is that we are limited to use
only html, JavaScript and CSS. Moreover, it is also limited access to hardware features.
2.1.11 What do you see your speciality being? Team Lead, Programmer, Graphical Designer,
Marketer? Several of these roles?
I would love to become a specialised Programmer because it is always my dream to program things
and I love learning different languages.
2.1.12. Why are licenses important? What are the consequences of failing to appropriately license
something?
Licenses are very important as they provide critical information about any stuff and tells us about if
any image or music file or anything else is free to use commercially or not. Consequences of failing
to appropriately license something are very bad as it is also a crime to use someone elses stuff
without giving him/her credit or referring them in the license.
2.1.13 Why does software have versions? Why isn't software just written once and left at 1.0 for
its entire lifecycle?
Every Successful software will have versions because it is important to timely include new features in
that so that people dont get bored using the same old features and in the get using the software
less often. Moreover, It is important to update the new version to fix any new bugs created in the
app.
2.1.14 What do users expect in mobile apps, in terms of updates, in your opinion?
Whenever there is an update for an app, user expect the developers to fix the bugs in the previous
of the app. Secondly, they expect the app to have some new exciting features in some or the other
way maybe making the app more interactive, user friendly.
2.1.15 Why is it important to plan the initial big release in smaller versions?
It is important to release the smaller versions of the big app so that your app idea doesnt get leaked
and its reaches to people before anyone copies it. Moreover, it is important to get the peoples first
hand review of the app and then further make improvements in the next versions. Lastly, no one
wants to invest big money and time in the first release only.
2.1.16 What are these terms you often see, "alpha" release and "beta" release?
These are the initial versions of the app and they do not include much of the features
2.1.17 Take a look at a snapshot of Henrys profit over the past 12 weeks. Where do you notice a
spike, and why do you think that is?
In Week 51, Week2, and Week 6. These would be the weeks in which henry provide the
customers with updates in his app and people are always attracted towards something
new and hence there was a huge profit to henry in these weeks.
2.1.18 If you were planning a major update, would it be a good time to do it at the spike
indicated above, or not? Explain.
No, because we are already earning too much so I would I waste my update on these times
rather I would like to do it when the profit is very low so to attract more customers.
2.1.19 Why do apps need screenshots? Do you think they help your app?
Apps need screenshots because after seeing the screenshots it becomes easy for the
people to decide if they want to buy the app or not. Yes, they help in the advertisement
of the app and hence more people will buy the app.
2.1.20 What is the size of the icon needed for iOS App Store listing?
512 X 512
2.1.21 How is price determined for your apps in each country?

The pricing of the app is based on the currency of each specific country. On Google play
store, App Developers can change the pricing for different countries but this cant be
done on apple app store.
2.1.22 What is the difference between running a web app in a browser vs. emulating it?
Running a web app in a browser means that we do not require any particular platform to
run our app, whereas emulating is entirely different, it means creating a platform in any
other platform where our app is not compatible. This is done for testing the app on all
platform and devices which we might not have.
2.1.23 How big should you have your artwork for your apps?
Art work depends on the type of app one is making like music, gaming and so on but it
should be as big as possible so to attract more people.
2.1.24 What is responsive web design? How does that relate to apps?
Responsive web design refers to a design which on changing the resolution of the screen
adjusts automatically to the shape of new appearance of the screen.
2.1.25 How often should you test your app?
We should test our app once a week.
2.1.26 Can you test only using emulation? Why/why not?
No, we can test our app on any browser on any device on which it works by inspecting its
elements
2.1.27 If Henry has issues with his app on a device, what website does Henry search to find
answers?
Stackoverflow.com
2.1.28 Can you develop an app without knowing who will use it? Why/why not?
No, because target audience is the essential element which we need to keep in mind
while we are creating an app because it attracts more customers.
2.1.29 What does Henry put on the wall to help him focus on app development? Why?
Target audience.
2.1.30 How long does it take an app, from finished stage, to be available in an App Store?
It usually takes 1 to 2 weeks.
2.1.31 How would you plan on finding people who can help you build an app with skills you
dont know? How could you find people, who werent your immediate friends, but might be
friends of friends or people you could trust somehow?
We can find people on social networking sites or on the sites dealing with problems
related to programming like stackoverflow.com. We can also post ads and ask our friends
and relatives to find some people who are known to them and are able to deal with the
issues regarding making of apps.
Week 2 Summary
In Week 2, We learned about how an idea of a app is processed to finally publishing
our app in Google/Apple app Store.
The Process of Creating apps is same no matter which language you use.
Apps need to have common features like icons, graphics, splash screen.
Webpages and WebApps are created using Html, CSS and JavaScript.
Webpages are more of a static but webapps are dynamic. WebApps are
Interactive e.g. Gmail.
WebApps are cross-platform so its a good way of developing apps and
publishing them.
Apps in apple apps store which run on iPhone an iPad are required to be
programmed in X-code.
There are number of steps how an app idea becomes an actual app.
First it starts with an app idea and plan Development where we try to design
how our app would look like by creating diagrams and wireframes.
Then we create a user interface for it, which would give access to contents
in the app to the users.
Then app is programmed by writing and debugging the code.
Later, its testing time for the app and fixing up the bugs.
At last, the app is published in google/ apple app store.
App in google play store gets published in less than half hour, but for the
apple app store, it takes 1-2 weeks.
To maintain the interest of the users, apps need to have constant updates
and bug fixing.
Week 3
week 3 Lab
3.1.1 What is an app in an App Store that you wish you developed?
Headspace is an app which I wish could have developed. Its a meditation app. I like this app a lot
and use it every day.
1. How has this application solved people's problem?
Headspace is a Meditation application. Often, we see people or experience our self that we
are not having peace of mind and we dont realize about our life in the fast world. As we all
know how meditation can make miracles in our lives, headspace makes meditation
interesting.
2. Who is its targeted demographic?
Headspace is an application which is targeted mostly to all adults who feel the need for
meditation. Meditation is an art of silencing the mind. When the mind is silenced,
concentration is increased.
3. How did you find out about this application?
I found headspace in one of advertisements of the You tube. Later on , when I further
researched and started using it, it became my favorited application in no time.
4. What is the design like for this application, what would you change about it?
This application has an amazing design. It has a progress bar design.
5. Super important question... Are there any applications that do something very similar? If
so, what makes this one unique?
There are number of apps for meditation for example keep calm. But the outstanding
feature of this application is the graphics. I find graphics of this app as best of all the apps I
am currently using.
6. Have you ever looked at the design or functionality of something and thought 'I could have
done that better' or 'this would make a really cool app', if so, what was it?
7. What stopped you from acting on creating something from the above?
3.1.2 Name one application that had incredible success (try not to pick obvious ones).
Tinder has been an app which has been incredible success. It is a dating app.It has been making
healthy $800k per month and the number has been always increasing.
1. How do you think this application came about? What problem does the app solve?
Tinder is a Social Search Mobile app. It facilitates the communication between mutually
interested users, allowing them to chat. The app allows likeminded people to build up an
relation when they cant meet in their busy schedule.
2. Who is the ideal user, and why? What is their gender, their background, their age, their
education, their occupation, their family status?
The ideal user for this app would be all genders who are looking for a companion in their life.
The background, age, occupation and family status doesnt matter as long as they want to
have companion and have mutual understanding with their companion.
3. How important is the problem to the user? How often do they encounter the problem, or
how often would they use the app to solve their problem, would you guess?
In this busy life, we often dont get the time to meet people. So we sometimes feel lonely
and wish to have partner in our life to feel happy and contented in our life. So tinder can
help our finding likeminded person for our life.
4. What makes this application so good/bad?
Tinder has been helping people to find the love of their life and living a happy life. It help you
to talk to the person whom you want to.
But Some person use tinder for wrong purposes. They use it to make fake relationships and
cheat people. In some cases, betraying them and stealing money from them.
5. How do you feel when you use this application?
I always feel happy using this app. It fills my need of social interaction plus giving me chance of
finding the love of my life.
6. What would you change about this application?
One thing I would like to change about this application is more security logging up. It is very
easy to setup an account on tinder and sometimes people make fake accounts and betray
the genuine users having a fake relationship.
7. How would the world and your life function without this application?
Life would tinder would be very boring. It has generated 9 million matches to date. So people
will have difficulty in finding their loved ones without this app.
8. What does the app promise or seem to promise?
Tinder enables to build a user profile and promises to meet your age group persons for hook
up or dating or just letting you know who else is there.
9. What other apps are similar? If so, what makes this one unique?
Happn , Zoosk are some other dating apps. But tinder was first of its kind and has been
always most loved app by the people.
3.1.3 Name one application that you think is terrible.

Instagram is an app which I think is terrible. Instagram is application just like Facebook. But in
Instagram you can just post pictures and videos. I think it is an time wasting app because already
having Facebook profile is enough.
1. Does the app target a specific type of user? If so, who?
Instagram targets all the youngsters who like photography and want to post their candid
pictures but doesnt want much social interaction.
2. Do you think the app solves the user's problem?
Instagram is also one of the social networking apps and was developed mainly for sharing
pictures. But according to me, this app is just one too many. we have same features on
Facebook. So people can upload their candid pictures on their Facebook and get other
peoples reviews.
3. Does the app function as it implies/promises it does?
Instagram promises to help you sharing photos and videos. It has in build features which helps
you edit the pictures to some extent.
4. Is the app well designed?
Unlike Facebook, Instagram has a complex design which can be understood by young people
and is difficult for elderly people who want to use it.
5. What other apps are similar? If there are others, how do they do it better?
Facebook, Tumblr and Flickr are some similar apps. I think Instagram is different to other
apps with an additional feature of letting you edit your pictures.
3.1.4 Now I want you to start brainstorming ideas which might be useful for Assignment 1. The
purpose of this exercise is to get you brainstorming ideas for your assignment (not the project),
which you should be starting from this week.
1. When you've previously had an app, application or website idea, what did you do with
these ideas? (Do you share them with friends, add to your notes list?)
I had an app idea when I was in my year 10 and shared it with my friends.
2. Detail a major challenge, roadblock or annoyance in your own life.
Lack of Discipline is the major roadblock of my life
3. How does this issue affect your life? What problems does it cause?
Lack of Discipline created number of problems like unable to study, when I need you and
leaving everything to do at the end and then quality of work is also affected due to huge
work pressure.
4. How different would your life be, if the problem was solved?
Living the life with discipline could have made my life smooth and consistent. I could find
time for everything in my life.
5. Who else has this problem in a big way, do you think?
I think many people around me especially my school friends suffer from this problem.
6. What kind of person are they?

They are very nice person but they also are underachiever like me. Most of them have the
potential but lack of discipline is what hinders their progress.
7. Why is the problem such a big issue to them?
This Problem is a big issue because it hinders the progress and makes you frustrated.
8. How different would their life be, if the problem was solved?
I think if the problem was solved they would achieve what they wish to and achieve their
goals in their life.
9. What are some ways that an app could resolve or help solve this problem?
I think doing meditation is one of the way to solve this problem.
10. How would the app operate?
I think Meditation App would giving people meditation lessons which would help them to
lead a disciplined and happy life.
11. How much do you think the app would be worth, in monetary value, to the person
described previously, or yourself? What would you pay to solve the problem?
I would be paying any good amount for the app if it would help me to solve this problem.
week 3 Summary
Week 3 is about finding app ideas. Finding app idea involves a lot of research. We
need to keep in mind the target audience to find better ideas.
Maslows hierarchy needs diagram demonstrates needs of human being by
prioritising the basic needs to lesser important needs. The bottom layer less
most basic needs like breathing, food and water.
This diagram states that the app which we are developing should satisfy
certain need of the target audience or should solve any problem with which
they are struggling with.
The most common way of getting app idea is copy someones else idea and
make further improvements in that.
Secondly, we can bring that app idea to some new geographical location.
For e.g. a certain app in which is available only in us, we can copy that
market and bring in Australia.
Thirdly, if you are creative and have understanding of this worlds need,
Develop a new market.
Last but not the least, Solve a certain problem for someone. Think of a single
user, and the problem is having, try to develop an app which will solve his
problem
Developing an app idea involves a lot of research work.
Always do a deep research on target audience before making an app.
Check your other competitor apps and do proper analysis on it.
Read the good and bad comments about your competitor apps if you
observe that people are talking about something which is missing in the app,
then its the perfect opportunity for you to make an app which would solve
the problem of the people.
Once you have a clear mind about what kind of app you are going to
develop, start writing the code.
Week 4
week 4 Lab
Task 1
Task 2
Task 3
1. What is the most expensive app you can find?
CyberTuner
2. Select an app store (Google Play / Apple App Store), and select your favourite category.
What is the most expensive app in this category?
CyberTuner, VIP Black
3. In your favourite category, what is the average price of the top 10 paid apps?
$700
4. Within the top 10 free apps in your category, how many use ads? How many use in app
purchases? If you don't have a device, check the Android web browser Play store.
9/10 has ads and 7/10 has in app purchases
5. Within the top 10 grossing apps in your category, how many are paid apps?
5/10 are paid Apps
6. Take a look at a Kickstarter campaign for one game. How much money did it
make? Zombies Run
Approximately $80000
7. What are the advantages of a paid app?
For Developers, Its a source of Income. For Users, there are no annoying Ads.
8. What kind of apps suit the "paid app" approach?
Paid Apps have the genuine and latest contents. Its Contents are from trusted sources. Paid
apps need to have which should be worth their money.
9. Why would customers pay? What kind of customer would pay easily, without hesitation?
A Customer would pay for an app if it solves his/her particular problem from which he has
been struggling and couldnt find a solution for long time.
10. What are the advantages of in-app unlocking of content?
The major Advantage of in-app unlocking of content is getting access to unique features of
the app which are ads free. These unique paid contents are from trusted sources and privacy
of the users is also kept safe.
11. What kind of apps suit the "in-app unlocking" approach?
Gaming apps suit in in-app unlocking.
12. Why would customers pay? What kind of person would pay for an in-app unlock without a
second thought?
Customers would pay if the in-app unlock solves his certain problem from which he has been
struggling from certain time and which has been hindrance in his progress.
Customers who are wealthy and crazy about trying out new apps will pay for in-app unlocks
without any hesitation.
13. What are the advantages of an in-game / in-app currency?
The Advantages of in-game currency is that we can unlock certain levels in the game or buy coins
with the money.
14. What kind of apps suit the "in-game currency" approach?
Gaming apps suit in in-app unlocking.
15. Why would customers pay to buy in-game currency?
With in-game Currency, people can use it for buying coins. By which they can progress in the
game. Moreover, it can unlock contents in the game or skip levels.
16. What non-game apps use in-app style currency?
Skype
17. What are the advantages of subscription apps?
Subscription apps allow us to watch latest movies and episodes of our favorited TV Shows or
may be live stream any games or sports.
18. What kind of apps suit the "subscription" approach?
Online Streaming apps use subscription approach.
19. What kind of customers would pay?
Customers who love certain TV shows which may not telecasted on TV. So, to watch their
favorited show they have to subscribe on certain apps.
20. What are the advantages of ads in apps?
Ads in apps help people to know about particular product or app while using some apps
which they might not even come to know. Ads might prove helpful to users.
21. What kind of apps suit the "ads" approach?
Lifestyle, Education, Heath, Games have ads.
22. What kind of apps don't suit the "ads" approach?
Adult apps dont suit ads approach.
23. What kind of customers would click on the ads? (You usually only get paid if they follow
the ad). Keep in mind that tracking of users through ads is usually blocked these days, so
most ads within apps are not targeted ads.
Customers who see an ad which is relevant to them will click on the ads to find out more
about the product or a game.
24. How do you feel most comfortable making money from apps? Why?
Making money from developing apps is satisfying as you get rewarded for your Hard Work
you have put in before launching the app.
Week 4 Summary
Week 4 Demonstrates how to make money from our apps. The process of making money
from developing the apps is called Monetisation.
There are different ways of making money by developing apps.

The first way is making the app and publishing on app store for free, and then later
on keeping a price tag on it. That is totally wrong because people are not going to
pay money for a app which they were getting for free.
Having Ads in the app is most common way of making money, but most people get
annoyed seeing the ads.
Secondly, you can develop an app and sell it upright.
Having in- app purchases in one of the way of making money. In- app purchase
means that you develop an app and publish it for free and have certain content in
the app. But you unlock the major content of the app they have to buy the
subscription.
Purchases in apps are of two types consumable and non-consumable.
Consumable purchases means that you buy a subscription but that gets finished
after certain amount of time. Like buying coins in the game or having a monthly
subscription of any TV show.
Non-consumable purchases stay with you for whole of the life.
Building trust among the customers is very important.
Week 5
5.1 Screenshot
5.2 HTML SOURCE CODE

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Eye Test</title>
<meta name="author" content="Intro To Apps - Henry and Luke">
<style type="text/css">
/*TASK 1-4: H1 Header Size Overwrite*/
h1 {
font-family: faunaOne;
font-size: 100px;
}
h4 {
font-size: 80px;
#lineOne {
position: absolute;
color: #ECF0F1;
/*DO NOT EDIT THE NEXT 5 LINES: They center the text on the page*/
top: 15%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
#lineTwo {
position: absolute;
color: #34495E;
font-size: 80px;
background-color: #EDECD5;
/*DO NOT EDIT THE NEXT 5 LINES: They center the text on the page*/
top: 35%;
left: 50%;
margin-right: -50%;
text-align: center;
/*TASK 10: Your code below!*/
#lineThree {
position: absolute;
color: #ECF0F1;
top: 55%;
left: 50%;
margin-right: -50%;
text-align: center;
border-bottom: thick dotted #EDECD5
/*TASK 10: Your code above! */
#footer {
position: absolute;
bottom: 22px;
color: #EDECD5;
font-size: 12px;
left: 20px;
p.space {
margin-bottom: 1cm;
}
#levelTitle {
position: absolute;
bottom: 22px;
right: 20px;
color: #EDECD5;
text-transform: uppercase;
padding: 10px;
border-bottom: thick solid #EDECD5;
#cecil {
position: absolute;
bottom: 20px;
right: 160px;
width: 50px;
height: 50px;
z-index: -10;
background-image: url("images/cecil.png");
body {
background-color: #34495e;
@font-face {
src: url("fonts/FaunaOne-Regular.ttf");
}
/*If the screen size is maximum 480px wide, change the background color */
@media screen and (max-width: 480px) {
body {
/*TASK 14: Insert Code Here*/
background-color: #e74c3c
</style>
</head>
<body>

<div id="lineOne">
<h4>A E I O U</h4></div>

<div id="lineTwo">G A G A N</div>

<div id="lineThree">1 2 3 4 5 6</div>

<div id="footer">
<p class="space"> Cecils Eye Test</p>
</div>
<div id="footer">
<p> © Cecil Inc 3000</p>
</div>

<div id="levelTitle">Cecils Eye Test</div>
<div id="cecil"></div>
</body>
</html>
5.3 Week 5 Summary

Week 5 is where we start learning the coding for making webapps. WebApps are created using html,
CSS, and JavaScript.
Atom is the best text editor which can be used to create webapps because it has inbuilt all
the commands of html and CSS which are really helpful as we cant remember all the
commands. Atom also has the feature of text-highlighting which makes code-reading easier.
Html coding is always done with tags. A tag contains greater than symbols and some
keywords.
Tags are always in pairs. We have the starting tag and the ending tags. All the information is
contained in between those tags. Anything outside tags remains unread in html.
The most important tag is the html tag.
Then we have head section and a body section. The head section contains the title of the
webapps and all the CSS coding. The body section contains all the contents which is
displayed in the webapps.
Div tags are the common and most useful tags used in html.
CSS are used for styling the webapps for e.g. to add colours to webapps and make things
moving on the screen.
Having Comments in our coding is very important as it helps stranger to understand our
code.
Week 6
6.1 Screenshot
6.2 HTML SOURCE CODE

<html>
<head>
body {
background-color: #E44B4B;
.buildings {
background-image: url('skyline2.png');
width: 1350px;
height: 425px;
.light {
background-color: yellow;
width: 10px;
height: 10px;
position: absolute;
top: 150px;
left: 560px;
animation: lightFlashing;
animation-duration: 2s;
animation-iteration-count: infinite;
border-radius: 4px;
@keyframes lightFlashing {
0% {
50% {
background-color: black;
100% {
.truck {
background-image: url('truck_white.png');
width: 128px;
height: 128px;
background-size: 128px 128px;
background-repeat: no-repeat;
animation-name: truckMoving;
left: -128px;
position: absolute;
animation-timing-function: linear;
@keyframes truckMoving {
0% {
left: -128px;
100% {
left: 100vw;
.car {
background-image: url('car_black.png');
width: 96px;
height: 96px;
animation-name: carMoving;
top: 435px;
left: 100vw;
position: absolute;
@keyframes carMoving {
0% {
left: 100vw;
100% {
left: -128px;
.rain {
background-image: url('rain.png');
width: 100%;
height: 100%;
top: -200px;
left: -200px;
position: absolute;
animation-name: rainFalling;
@keyframes rainFalling {
0% {
top: -200px;
left: -200px;
100% {
top: 200px;
left: 200px;
</style>
</head>
<body>
<div class="buildings">
<div class="light"> </div>
</div>
<div class="truck"> </div>
<div class="car"> </div>
<div class="rain"> </div>
</body>
</html>
6.3 Week 6 Summary

Week 6 is all about the CSS animations. CSS stands Cascading Style Sheet. To make app look
interactive, CSS should be used.
With CSS animation, we can make the background colour of the screen.
We can make things move in any direction, or bounce off from the sides of the
screen.
While adding images to our webapps, we should declare its position.
While adding image, no other tag can be added in that tag. Width and height of the
image should be set carefully to properly display the image on the screen.
A URL is needed while adding images to our webapps. URL determines the exact
location where images is stores. Every external file is a URL.
Week 7
7.1 Screenshot
7.2 Html Source Code

<html>
<head>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="introtoapps-april28.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var duckNumber = 1;
var myfrog = $("#frog");
myfrog.moveTo(180);
myfrog.speed(0.3);
myfrog.autoBounceOff(true);
$("#buttonAddDuck").onTap(function() {
$("body").append("<div id='duck" + duckNumber + "'class = 'duck'></div>");
console.log("Created: duck" + duckNumber);
$("#duck" + duckNumber).moveTo(270);
$("#duck" + duckNumber).speed(0.5);
var thisDuck = duckNumber;
$("#duck" + duckNumber).onCollision(function(otherObject) {
$("#duck" + thisDuck).remove();
console.log("collision! yay! Duck: duck" + thisDuck);
});
duckNumber = duckNumber + 1;
});
});
</script>
body {
background-color: #4242FF;
#title {
position: fixed;
bottom: 50px;
right: 50px;
width: 260px;
padding: 10px 20px;

color: #4242FF;
background-color: #44BEBF;
border-radius: 20px;
font-size: 24px;
font-family: sans-serif;
text-shadow: 4px 4px 5px rgba(255, 255, 255, 1);
font-variant: small-caps;
.log {
background-image: url('log.png');
position: fixed;
width: 150px;
height: 52px;
top: 50px;
left: 50px;
z-index: 10;
#toplog {
top: 50px;
#bottomlog {
top: 450px;
#frog {
background-image: url("frog.png");
width: 50px;
height: 71px;
position: fixed;
top: 100px;
left: 100px;
z-index: 10;
#buttonAddDuck {
position: fixed;
bottom: 50px;
left: 50px;
width: 160px;
padding: 10px 20px;
color: #4242FF;
background-color: #44BFEF;
border-radius: 20px;
font-size: 14px;
font-family: sans-serif;
text-align: center;
cursor: pointer;
.duck {
background-image: url("duck.png");
background-image: 140px 135px;
width: 140px;
height: 135px;
position: fixed;
top: 160px;
right: 10px;
z-index: 10;
</style>
</head>
<body>
<div id="title"> Henry's Duck Game</div>
<div id='toplog' class='log'></div>
<div id='bottomlog' class='log'></div>
<div id='frog'></div>
<div id='buttonAddDuck'>Add a Duck</div>
</body>
</html>
7.3 Week 7 Summary

Week 7 demonstrates us about the JavaScript which is the third element used to design WebApps.
It also explains us about the libraries like JQuery which is the official libraries of commands of
JavaScript and introtoapps libraries which Is written by Henry.
Programming is step by step instruction given to computer to do a certain task.

Programming languages are converted to machine code by CPU which then is processed to
do a certain task.
JavaScript is a programming language but it doesnt have anything to do with Java.
JavaScript Commands all begin and end with bracket.
Repetition of Code is not a good practice. Try using Classes where repetition occurs.
While creating Mobile apps, always start with the interface first.
Event handler are commands like . ready and .onTap
If in our mobile app, we want objects to collide, they must have must z-index to do so and
we should set the auto bounce off to true.
If we want any object to get produce by clicking anywhere on the screen, It uses onTap
command.
If we want any object to get destroyed on collision with any other object, we have to
introduce remove function and on collision function which are in libraries
JQuery Commands begin with $ sign.
Week 8
8.1 Screenshot
8.2 Html Source Code
<html>
<head>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="introtoapps-april28.min.js"></script>
<script type="text/javascript">
var duckNumber = 1;
$(document).ready(function() {
for (var i = 1; i <= 6; i++) {
var x = i * 75;
$("body").append("<div class='frog' style='top: " + x + "px'></div>");
$(".frog").moveTo(90);
$(".frog").speed(0.5);
$(".frog").autoBounceOff(true);
$(".frog").onCollision(function(otherObject) {
if (otherObject.hasClass("duck")) {
this.remove();
});
$("body").onTap(function(event) {
$("body").append("<div id='duck" + duckNumber + "'class='duck'></div>");
$("#duck" + duckNumber).css("bottom", "0px");
$("#duck" + duckNumber).css("left", event.clientX + "px");
duckNumber++;
});
});
</script>
.frog {
width: 50px;
height: 71px;
position: absolute;
z-index: 10;
#rightwall {
position: absolute;
width: 10px;
height: 100vh;
z-index: 10;
top: 0px;
right: 0px;
#leftwall {
position: absolute;
width: 10px;
height: 100vh;
z-index: 10;
top: 0px left: 0px;
.duck {
background-image: url(duck.png);
width: 140px;
height: 135px;
position: absolute;
z-index: 10;
</style>
</head>
<body>
<div id="rightwall"></div>
<div id="leftwall"></div>
</body>
</html>
8.3 Week 8 Summary

Week 8 is continuing of learning of JavaScript and creation of webapps. We learn about various
advance commands which are vital while creating your Webapps.
The computer is good at remembering and repeating thinks. Once a Command is given to
using programming languages, it will repeat until said to stop.
JavaScript commands end with semi-colon.
Data is not static.it is always changing and its change is mainly based on events.
While declaring variables and div tags in html avoid using numbers as the names as this
leads to confusion and the program will not be executed.
Comments in programming are vital for understanding of the code. Coding is difficult to
read for other persons so comments become important.
While Writing the large chunks of code, its always good to check in between, with console
messages to make sure that we are moving in right direction.
To get the position where it is taped we need to use x and y positioning. There are 4 types
of x and y positioning. They are,
1. Client x and client y
It is the value that does not change even if the user scrolls down the page.
2. Page x and page y
It is the value which changers if someone scrolls down the page.
3. Offset x and offset y
The values of the mouse positions are relative to the parent container.
4. Screen x and screen y
The values of the mouse positions are relative to the physical screen.

Week 9
Week 9.1 Screenshot
Week 9.2 Html Source Code
<html>
<head>
<meta name='viewport' content = 'width = device-width, initial-scale = 1.0, user-scalable = no'/>

<script type = "text/javascript" src="jquery-2.1.3.min.js"></script>
<script type = "text/javascript" src="introtoapps-april28.min.js"></script>
<script type = "text/javascript">
var duckNumber=1;
function adjustGame(){
var availableHeight = ($(window).height() -200);
var availableWidth = $(window).width();
var devicefrogHeight = Math.floor (availableHeight / 5) ;
var scale = devicefrogHeight/71;
$(".frog").css("transform","scale("+scale+")");
$(".frog").each(function(){
// $(this).position().top;
var x = $(this).position().left;
if (x >= (availableWidth-50)) {
$(this).css("left", (availableWidth-50) + "px");
});
$(document).ready(function(){
$(window).resize (function() {
console.log ("resized");
adjustGame();
});
var availableHeight = ($(window).height() -200);
var maxFrogs = Math.floor (availableHeight / 100 );
console.log("max frogs:" + maxFrogs);
for( var i=1;i<=5;i++){
var x = i * devicefrogHeight;
var scale = devicefrogHeight/71;

$("body").append("<div class='frog' style='top: "+ x + "px; transform: scale(+scale+);'></div>");
$(".frog").moveTo(90);
$(".frog").speed(0.5);
$(".frog").autoBounceOff(true);
$(".frog").onCollision(function(otherObject){
if(otherObject.hasClass("duck")){
this.remove();
});
$("body").onTap(function(event){
$("body").append("<div id='duck" +duckNumber+ "'class='duck'></div>");
$("#duck" + duckNumber).css("bottom", "0px");
$("#duck" + duckNumber).css("left", event.clientX + "px");
duckNumber++;
});
});
</script>
<style type = "text/css">
.frog {
width: 50px;
height: 71px;
position: absolute;
z-index: 10;
#rightwall
{
position: absolute;
width: 10px;
height: 100vh;
z-index: 10;
top: 0px;
right: 0px;
#leftwall
position: absolute;
width: 10px;
height: 100vh;
z-index: 10;
top:0px
left: 0px;
.duck
background-image: url("duck.png");
width: 140px;
height: 135px;
position: absolute;
z-index: 10;
</style>
</head>
<body>
<div id= "rightwall"></div>

<div id= "leftwall"></div>
</body>
</html>
Week 9.3 Summary

Week 9 is wrap up week. All the elements required to create mobile apps are covered by the end of
week 9.
The webapp created by us should be Consistent like the body and buttons should perform in
a same manner which can be done by using CSS.
Every Device have different size and resolution. The webapp created should be responsive
i.e. it should fit in the screen size of every device.
In mobile devices and other devices, there is no mouse pointer or clicking , there is just one
tap. So , our app should be in such a much a manner that user cannot zoom in or out.
The mobile devices have two modes of playing the game, one the portrait mode, in which
the length is greater than width. The other one is landscape mode, in which width is great
than length.
The user can shift from portrait to landscape or vice-versa in middle of playing the game, so
game should work same and should not get restart while shifting.
There are commands in JavaScript like Math which can be used to round up any fractional
numbers or select the minimum or maximum number between certain numbers.
The Resize function can be used in JavaScript to scale the size of objects in game according
to the size of screen. So While creating apps , we should get the image of as big size as
possible.
Scaling up images make them Blurred. So images should always be scaled down.

SIT 120 Portfolio

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SIT 120 Portfolio

Uploaded by

Copyright:

Available Formats

TRI 1 2017 PORTFOLIO

SIT 120 -INTRODUCTION TO APPS

1.1.2 What is the purpose of this unit?

2.1.4 Why does every project need graphics or a graphical designer?

2.1.5 What is the difference between graphics and user interface?

2.1.6 Why does every project needs a programmer?

2.1.7 What is cross platform and why it is common?

2.1.21 How is price determined for your apps in each country?

2.1.25 How often should you test your app?

We should test our app once a week.

2.1.26 Can you test only using emulation? Why/why not?

It usually takes 1 to 2 weeks.

1. How has this application solved people's problem?

2. Who is its targeted demographic?

3. How did you find out about this application?

This application has an amazing design. It has a progress bar design.

4. What makes this application so good/bad?

5. How do you feel when you use this application?

6. What would you change about this application?

8. What does the app promise or seem to promise?

3.1.3 Name one application that you think is terrible.

1. Does the app target a specific type of user? If so, who?

2. Do you think the app solves the user's problem?

3. Does the app function as it implies/promises it does?

4. Is the app well designed?

2. Detail a major challenge, roadblock or annoyance in your own life.

Lack of Discipline is the major roadblock of my life

5. Who else has this problem in a big way, do you think?

6. What kind of person are they?

7. Why is the problem such a big issue to them?

I think doing meditation is one of the way to solve this problem.

10. How would the app operate?

1. What is the most expensive app you can find?

CyberTuner, VIP Black

9/10 has ads and 7/10 has in app purchases

5/10 are paid Apps

7. What are the advantages of a paid app?

8. What kind of apps suit the "paid app" approach?

10. What are the advantages of in-app unlocking of content?

11. What kind of apps suit the "in-app unlocking" approach?

Gaming apps suit in in-app unlocking.

13. What are the advantages of an in-game / in-app currency?

14. What kind of apps suit the "in-game currency" approach?

Gaming apps suit in in-app unlocking.

15. Why would customers pay to buy in-game currency?

16. What non-game apps use in-app style currency?

17. What are the advantages of subscription apps?

18. What kind of apps suit the "subscription" approach?

Online Streaming apps use subscription approach.

19. What kind of customers would pay?

20. What are the advantages of ads in apps?

21. What kind of apps suit the "ads" approach?

Lifestyle, Education, Heath, Games have ads.

22. What kind of apps don't suit the "ads" approach?

Adult apps dont suit ads approach.

There are different ways of making money by developing apps.

5.2 HTML SOURCE CODE

<meta name="author" content="Intro To Apps - Henry and Luke">

/*TASK 1-4: H1 Header Size Overwrite*/

transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

/*TASK 10: Your code below!*/

transform: translate(-50%, -50%);

border-bottom: thick dotted #EDECD5

/TASK 1-4: H1 Header Size Overwrite/

/TASK 10: Your code below!/

/TASK 10: Your code above! /

/TASK 14: Insert Code Here/

<p> © Cecil Inc 3000</p>