cAssate

UNIT:3 Date
Page
Nandan

enginmingtt focus on Viual capesince ot diyiel product

Usn interau ane the hoint ot intaction beteen the. he
es and deuelsper hey came in 3dit tyjpes o femas:
Dlbiathical lser Tokesaa (Gruz) The uw can intoact uith vilual
Aebhenstatiend Gn the digial conto panes "
i) Gestre - Rased Satetace'? Usea can ineract wth 3D deuign
Apacw by mauing thein bodis

%Haw to moke gend UI/Ky Conuteraion Wile dugning UI:

" keeb the interfae smsle
" Be onistent nd ue Commen UI elemet
Placement of item
"uck Resbonss

DTnbd ontel :Input Contal inslues butns, togles , Chekbeny fodis

lomsernlt:1t Containi Sideu, tag, Search field,,an
Natgaonal
tsltijs, icon, pagreMban, Natfiakon
Cemenentt (onlaissaodion
m) Jntbtmatonelontainex
fv Conkains : include

* VI Design Rroces
1- Functiona Reguiremsnt Gratheing 6- (Joabilty Jating
2 User and 'Task analysiv 7 GhUI duign
3- Infommatin lrchititne 8-Sottwae Maitnance
4. Piotstybnq
* IDeaign Reguinemeanzt:
Zhe fotautng are the keuen dialegu puncjles
) Suitabilt gthe Tsk. v) Eror elenance
i) SelyDescnijtieres V) Suauilh,fo hduidaly
Vir) Suitale fo Leani

Jhe t Pscsemtation charactonistics ne

1 Clanity 2Discriminability 3)Consisenes
4) Detectábilty slegibility 6) Consitomcy

Keep Vser in Contel Great Desgn is rusible.

enseue attentien at allCat Proqresie Dicleue.
Phoiole a natual net Bteb. Shong lisual Hienachies
Help Pesple Srline "kaep Selondary klen Seandary
*Mistakes to Ausid in UI Design:
Jo net mblument e Uae enthed deigr
buesiu iue of dyamic fteet
Phebaring cho much in aduance
Niet leaining meu about the tget audiene:

Sketch )Adebe XD 3Inuisien Studis

4 UXem 5) Fyamex 6) Mauel
Studlo
 Date
Page

1SkeBch : Sketch is a vector aphics edttion wsedl for cauing,

daming
ueframing , þrstetybng and deuign Au lomiatl uith Macos
Key feakuxes:Intuitiue ucton editing trsle for fenible deugn
dnfinite sign
olsign canuais
) Adabe X): dt iu fest, it's poueaful, Yecor based daq-and
dhep , 3D Transtoms, fouestl animatin functinalty
3) UxPin: Jua bebular UXand I osly used ty beth nw
Land Seasened iduigners. Buitin libranies Emhedded
|LAEN oo Aeßabilits , Buit in onbast checken -
 * etue Use f Seren keal Estate
Soen eal eutate in e-luarming trufes ta the phytical
Sbace Auailable an a combutess reens to he ameunt
Let sbace that is auailable on a bcreen
Six buincibles to be considered ae
D se shit sbace, but met too much
) Naew he margns
tH) Use grabhics and fignes carefully
v Place cled cabtening tratgitally
ae a tuspersiue e-Larninj diign
key Canaidertens and Aeategiu for Ophiniging Screzn Ral gak:
DResbomsive Destgn ) Clean Nauipatien
V) Hitabace
vi) Font ord ert omatting viti) Inkeractiue Elemnents

Concusien: o use dchcen haal utat eheckuly, ue must

ink lke a wsL. What do hey uant to dee on
he sran Hes they uil interpret thie info etc:

Push Nottication »> Deuia shecitie Cnsidnatisn.

X) Chuntd Content XI) (onsistnt UI Elemeat
 Page

>Moble opplication a satuan apyiatin deuusd

LAbecially fo se on dmallswiaeles tomputing dau,
dauies
Juch ds Amantthons and tablet haten han dutep a loptp
Mebile aas ane majonly duulyed for 3 os| Plaoms
DAndheid i) indow;

ABtane asplatiens that huns en a mebile duic

in natine duice hati, hun bnly in he Oa hat

Aduantage Diadantage
ecen tot all fealuerosd ps. Doesnt tfot en suAe
2) Hybrid mebile Ahlicatien i
3) Ces- Platom dhsliatien: Jhee ae amewsks Hat allus
deualsping tetal matiue asphiation wich haue acces to
al matiúe featlves ef ToS and Andoil but uith bame Code
Advantage Disadvantage.
"Saw Lede pefomane
*MOintenana est s hówt omtd Use bspuinct
4) Pgeatiug hieb. dipliatin Prg
 elkssMste
Data
Page.

duice- her tchnslogis uaed ane MincuH Blagon, Reacts

Amgulor JS, Natie Serist tnd nomaly wed ter web
delelspment þsoces:
Adantages Jiadantag
Deueletemint lseud ufut "Doesn't haue al he feahues
Notnstalatien sequáied. he cammunihy it nottide
sbead

*Jhe Mebil syplicatien Dudlgfment iyole

Dwclep Test Test
Mobile Cloud
Applcatien Releose Jeploy Backendd
Analiyz Monitor nalyge

Heue front-end Taks' to the Bak-end?

he mebile font end ostan data on he bat-end
us auariety of seuie call suh as API n
eme cau,heie AR, ane Buensd ano eseratid by
he same Lntily deuelebing the mebite ass nds In.
leme thers ceses, hld banty uned nd Bertu
* Pros of Msbile Atieaten Cons.
)lCAline Acces
)enuiue cabailitis i) Cest
bscoaliatin: Cempattill.
iMCnulnilnce'
Aebsites:
lebsits ane collectin y es pags hat ane linked
uh cach her whene he web pags Ahane he tnge
domain mame is publihed oiaw bever no
bubliely acesisle
Pros of hebsite Cens
) ser lxpenlence
t)Broade) Reach i) Sheed releakd iMes
MCbdat and Naintenane

*Adunatagu s7 Nobile Aphliation uen hlebutey’

DMebile abslicatiens ane tutn
i) CHine dcces.
It) Bter Rossnaliyatien
i) Ue e Mebile Deuice Feakres

*Web Deuslspmant ejess to the hees of crcating

ubsitu and wcb asblen that are aecesible
hssugh eb bheues- dt utrtherdiuidkd into
3categoris
1) Front En lleb seelopment i Dengning f uab bags.
)Back -End eb Deltement i Dealing with cataban and
Seud side programminy
full Stack bleb Deuclspment i lombinatien sf fon
Back Enol
rd and
 Basis ot AndxeBd Dewele
(onpaitsisn Web Deuoloper
) Scope t Bimary Acspe in cUntened aourd Primay ACshe tonteud
Deelipmert\android abb develoþment Cusonigolin around ulsbatty !
9) Plakorm Specitie platom iu thain maintenane
3> Rroqramnúng C, Ctt, Java,_ Kotlin,needed"Web byou)en to run the app
Þyhon, ete HTML, CSS , and Javascipt
DB knsolede Needed to sove aph datoNuded to store webia data
5) lMe dfeult to leasn littlu eain to leam.
6) Example Wiakap, facaboot, lijkart Amayon, Yakon, GEGy te
Hgher speed and Raomance- Cosk-fiint in it dluilth
-ment

1 Tanget dudience VFunctinaky and UX.

) De~alehmend and aunch timne
4) Organic suach anod ease at dicsverablay .
5) Puay encerns
tAcastie bleb Deien
Adajtiue uab desigh is pecialy auelasd to adist
reatad t ft hest to ahecihic seren bige sf dif dáulces
Advamtagex.: DZadiantáges
Taaget forlach Usen " labas Snfengeu to cCreate
Sntheas load Sme "Hovder to Maintain -
Reusable Existng lbi.
ddetitng Mertialtns
t Resbonsive Desen:nthis design ucb duigrns design hl
l nttae fawebit in duch a mannen that
wthatewer uie yoL are LAing yeu can Cornfolaby as
Resbonsive Desgn wateh
Adastiue Deign
4|Sml

It adjust Contend amd width. Ac to deuice, it leads the Conted

laccovdin to the deuice.
Designes haue to uok les snon houe to uork more
Aites
Sench Engine fiordlys
Feribilt, ,aslninfemanl
Move Coding
Slack, Gtthub, Shoity
Gt ucb þage tat atreacy desned
dt ueks well fon bmalle
dites
dnaps ntoplace dine he
Bet sen erpenince, Gutpetorms
en abeed tst
ulebsite i conple
Appla, Aroagen:

ueb-aylicatin iu an Dsiatin pognam. heti

A
suallyAtored or a temete Aemuer, and sers can
accos it thrsugh the use ef Sottuae knewn as web
browse
kesanch Arolysi
(Databas
Web sbpllcation
(46 Reualepmnt)
 Apicatien Senvez: Bocesing Dabbose
Ship Use Alaating Pogan Madule
e-cekloefe Daka rekuming
enline Web
Serve Slate
wlab Page Rekuvming
z.Web &ewen fnstruct asle
Web Serve receives Server to þroces koge'
wger reguesthe
1Aeb bowger repuest paje request:
Intemet webSenen) Aioty
Seer

5. The Wob bewer 4- The abblicatien senver

dend the eutput
to the broWser proce the page and
geneate sutpt

A1Dediatd mebilo blebsit heb Asps uth HTAL5.

Adedtotd omebile sit isa bebarate Versitn t yow

ucbite designed enclsluely for mebite deuice ?
for the mmsbile
>he mest commen implementation i main demacn
Aits o add a piefr or Sufa to the
com)and es auomatally
(er exmtle . Com beomes nexmple
Had'rectd to the mebile sit t hey acew he ebsite
a a mebile deuice .

Advantags : Sebarate meble and dsktos Coret .

ol 7ailaed Conternt
i) Shed i Colimige and sheamline the site for mabile Vsen bxpeniena
elsier anexiting
M) Quik deuelop meni you aseady haue Luchit , i
to buldand laune
Diadantage;
I) Multple emainURL D Reguise hedlrectir
* An IN5 mshileabb ts a ucb
acstieoton deueloped
ih esion 5 6f tybertest Maskub Longuoge, a wb
Standand desiFndl fer handhld duit e smanithns
and tablots.
>HTM5:Afowenkul toel for mabilh Aliation Dualspment
44 is he main demain f mest cien blatorm abplicaton
dedebment tosls such as Abache lo ndea, Rhodes, te
dl makes it alortles to create a puly eatud ibah
hat can te ijdatid bemetly wth nw fnctenality
key featues:
DOine subbont: dt incudes apll cadhe, neb thage amd
indened database APIs that sores HIML, IS, CSS heSewies, localy
) Multimedta HTMLS has adianced casabiltieu for Sheaming
wdeo and Qudlo data, hanlling aphics 3 nuiatien '
<lideo Sre
sve="myuideo. m4 "" Conbols/s
<ideo oster ="myideo- Jpg" can hols/>
M4" tybe " ideol mp4'/>
< Sowrce src - "Mywido- my"
"mguido -ogg" type " uideo/ogg"/>
(embed Sre = "/o/my/icdeo/ Player '"/embed>
</hide0>

Hhe uebsite
iv)Canas : tiu sed to dau qraphics en the cb tac
Canuas =dscument gitlementby 1d("myanua)
lndroTnes. lidth ;
Canvas " llllh=
Set Canuas hu'ght = induw. inmwL Huight;
dimensin
 Famuots_fen eyplasten dudlmeak :
Jueny Moble: his iu a wnifid UL Dyslem aBH al popular
msbile cdeice palforms and a buil en Jluwy and jluny UI:
t) JOT(JOTouch) This is aTury blugins whick consist ef
animatien,autemate mautyatinoett
) Sencha Touch &his is usedto create mobile ahs for
Seral palfom lnclding les, Bbekleny and Androd

X Andid Histony featines , Wepsions

Best andheik altenotiuss,Sel sucdy LMS,
+ ios, Graphene Os , katos, (Lecture3.2-5)
Sailfsh OS, Vbuntu euch,cte

*ndeid Fundanentaldi
Andreid dan 0s that i built besicaly fer Mebile þhones
tndreic kcaxamnng languoge, Jaua or C++ or kotlin and XML
2Andeid ompents Fur major Comjonents are:
a) Acliuttie :4 deals uth te UI and UBen lnteracton t
the Bcreon ·
publit clas MainAchuiby extends Aciuity proes Í
BSeruicas t Seuices Are the backysaund aten afelmecl
by the abþ
þublii clas MySenies extends Senlicen nCode fon Seuias
) Bvadcat ReeienstABroadcast i wsd to hesserd t mesages
fem aten apiatins Br fom the ytim
bublie clas Mykeceie enknds Budcast keceiuenS
pubtie oid onleeial Contot, intent) $4
 Me aplicatien to he ohers at thu'Heguest f the
her asslcatien
bulic class Nyontert ouider extends lonknt frouider þuble uoid
on Cveate (03?
18the
3) Shuctral layout o Andhed Sudio :
Menifest i an XML fle that, root
LAPP
Manit
Java
Manifest Folder-t the prsfect swre set
jJaua Folder i faua hty Hat ane nuguird to
ITes vdrawase tak
petorm the backgro undaf app
Layout
Gradle sompts
Gnadle Fle: Gtyadluan advancd Lobt
whik dd lsed to manage the build þrss, hot alleus
dfrlng th ferite custom build contguatin
4) Actiuity liteeycle :» Unit I nctes.
* Hew to bublsh yes
Skp 13 Makea deueleter bccount
Q AHer Stebiclik on the CREATE APPICATION beuten
3- Store listing.
4-Abo heleose
Content hating
6 Pricin9 Lcitibution
8-bb helease
Cate an dndhsd breict Follau) theeSkps
L Tnstall Andreid Studio
On Anduoid sudio uindouw , Click Creat New Paefel
 classnste
Date
Page

you aleady have aþrject , select Fle> Neo ’ New Poject

b I Templale luindouy `elect Emphy Acliuity and click Next
b Ih Cnque youn prgject uindow, cemplete foluinq
FL au deails- Name , Select language ,Selct version ,oc
b Clik Finish
L Ater some tine, Andueid Studio main windew abbeans

>is dsble's mebile ehoating dystem develshed and

douies
he hirst Vensier e dbsle i0s wuas steleasedd on 29 Tuly 2001
Abble iOS, Wnin-ike OS, is based en MacOs
>Xcde à the DE used by ios (and Os x) develspes
XCode bsuide an interte to the combiler gedibr, eke
VensioN Histoxy
Relkase year os Featureg
SN
Jx Sernes a003 Mac Os l0-3+ 4A iz based on project butlder.
2X Seni 2005 Mac 0S 1"4+ encluded the Quarte lombogen
|3-XSesies 007 mac OS 10"S+ include DTrace debugging tool.
4-X Seuis a0 macos l0"6 8+ indeqated the XCde editing tool &ink1tae
S-XSeiy 2013 mac0s 10-8+addd subbort tor ios 7 SDK .

|mac Os 10.14-4+ New hatwes in Suift 51, frameuosk

Xode Poject: When mCheate nwXode Rofect, t Sheun
ory inormatien bfhe prefeet hat incioes -
 alceate
Date
Page.

LAes multi- touch gestnes ike buipe, tap, pinch, ete, to

acllitat the wn ntnating wih the aplicatin he ser
Can tiggn Qny Luend using suutkhe, butns and slides
t IOS chittctne
here ane 4 absbaction layer ih ios
CocoA ToucH (Aicakonl4ye)| 1-CORE OS - tþroutde famework
|MEDIA LAYER interacfon uith exfennal handwane
CORE SERVICES Qnd secwityEg: Core Bluekootth fiamcustk
CORE OS hardware $ secwty tramewwotk

Caore MeHon tameurk, foundahon, Healthkit framework -

audo and uideo

4- Cocoa Touch layn d centains fameks hich ane

heguird or reatinq an asslicatien -e_ I Evenkit, amekt
Mabkit s Pushkit ramwont
0S Abblicatbrs :
Home Soreem Notehicaticn Cender
Apple Pay
Garne (enteL Blucteoth 9 lamera intgraton ,
Location Serices 9 Mabso
X Advantages Disacrartge
More decwne tham Other 0S Move Coutly
brcellent UI and fluid hebense. les Wser hiendly
Suta best fon Busines &Pastesnal Battuy jepmane i peor:
 Data
Page.

|Eery ies
,"Aþþ is ot Yunming, when tbyusysem not
Not Rumning|+ yet tumched er temminted
inachve &tate, when itis in
" Apþ i n an
Inacive hetoregraund but hucaiuing eent.
o Acive, tú a oYmal moce tor abp
|Acive
|"Apb tansition into backgraund hate,
on the heme
Back qrouncahen he user tabs en
doreen while wsinq aplicatons
Sspended

*Featyes of ios
) Multtaking )hi-fi, Bluekooth anol Cellulor Conuctiit,'
I) Gestne ticegnitbn hupsont.
V} Localletifieaton
Vin) Jak Completin

iOS Profect : (onventians Struchese , Pefeet

9

ConMentans
Naonin lenMentibne iFist utaslishing manming conuentiens
tor al things toe fil names, clas names, prsject names, ete .
 adkssste
Date
Page

oShuctuIe
CHeate sbecitec Wonksbace.
|Create a Bucld Automakion to spting Common tosks
Create aAdtcc and Apþ Stoxe Buld Contyunatien
anage thid-party- librarles utth Cocoa Pcs
My foidey Shuckne- ApplicaHton , Contolle , Lbrary Model
Resources 9 Vendors.

"Roject When an iOS þroject i Created uithin Xode, the

DE Ceatu a Bet of iles hat aHe Heady to un : Ihee les
bseides the basies of what is neded to get goinq with a
Main m, Apþ Delegoto " mi Receies msq trom ag objet
MainStory Boava" sloboad : This owheNe. UI (S Created

Debugping T0S Ap:

Moden-day TDEy þauide aqrat deal tosling hat helse
ldouelepes nd isses tn thei code before it heaches þroduatio
>Deuclebenß Wse he fos imulator as Hhea tist ulay Bf
he dbugging tosl uthin xlde ane at he bottom o! bsksþae
ik w'a~sug trea +Shao Debug Area to make debgging tol visiale:
Local indow, dhUs you iut ef al Vaniables hat ae
nenty uuithin seije byeur Curnt breatjoind
Breakpotns , can be set by clicking on guter"
Output, itgus importortt lnfo abut he executin of
 t Objectiu:C
Objechiue -C i the þrimany þrcqramring language ,uad whn
nting seftuane for OaXand i0s -
Aad sujeraet of Cþpoiamainq langunage and pieuts
and a ynamic utine
ject- 0xiented casabilbtiu
imheits syntaxs brmitiu typa and Jow contol
stalement! ofC.
xCharacteiutiis:
The clas à doind in tuo.diHenent seclens namey
implementalto
@interface anél ®
0bjcct Hecaiues mesages and oten teered as tueiuoss
0bjcts Contain instance vanoble -

Su7kort i Fully dubþant objct- Osinted fregramning

language abjeet-biented duclgment -
neliing four Pilans of
Encapsulafon, Dala hiding ,Ihhenitant , lolgmosphim
4Methools
Objechive -C dlawy_Methodscan be declared as eithe
he inlerface f clas mehods.
detned in a header le fornstance mhed or
each intufae Instamce methods are calledby
@inerfacu Dog:
3
Animt
nstance vaiables
declara hòng
bending mg diecly th inskaneoflhs
ondmethod -(MSshig) etlame 9fAnimal
Oboratos Loob8
symbol hat tely|t allousy yau to erecti aaBhnt
An oberaorys is a
loglcal manipuhtin dowhile y ested losps
athematical o Stalementy -
, kalatonal , " Contel
Eg -Afhematic -byeak &fatement
oqcal, B:hie, - Control slatement
Mse operato (ijefs k, t, 2:)
 indws Mobile 7 Develoh nant
Windeus Mobile t develsynent is done ing he NET
rarmucork Jhe -NET fameuok sa suftuan famcuok
reatd by Nicnsetfor use tn creatng lindows
aSpliatin
Pocedurei
Geltng Set upi Douunlmd the develipment toel
9Opening Vaual Studio
reating Youx hrgect
ONauontinq the Uz Edfior:
Gang Yoln Applicaton's Layeut
<Grid x:Name ='lauput Rost Backqraund ="stotiz Reusuna yone. Back
gYound rush >
<Garid Columt Defn tons >
<Coumn Definitien hliclth ="*"/s
</6vid ColumDehnitons >
<Grrid Rew Definition>
<Rew Defniien Heght ="*"s
<ernd.Row Deinitiin

Addeng the Button :

ZButton
Grid -Column='o
GindRow "0"
Content ="Tapme "
Honzonfal Algnment=shech"
Vertical Alignment-"srech'" >

Adding Event Hondlng:

Button b= Sender as Button
int cot = hrid" GetCeumn(b);
int Yow =Grid oGretRsw(6);
i{( Ce= =You) Gyid Ber Column (b, ttcef s2) ;?
elsef oido Setksw(b, tt 2); ?2,
 Page

* Build yo st Aindoos Phone 1 aþb:

1-Downloadin the tool : Vesual Shdio TDE, SDk , Cocle Sample
AQur tirst hlindeus Phone apslicatin
3- Construchon begins
4. Modihy the enistinq asb mame and page title
5: Adiusling layeut and addig cenhols
Creal your ayplicallo layot, add buttons, Teat Boxle
6-ime to lodei Do the gegutred changu ln XML
Righd-clickon yeu brejct and sict od , hen Clat
launehi he tanget typu to lhdouy .
Phone Emulatos
[Draw Dteyram
t Abb Dstibutien:
Abb distibution i he Bsees heleasng an abs to a
bhead set st users in sdn to biemete atp ngagoment

*Netl dhyDtibuten Platom '- A msbile asp ditrioutin.

blatlotm heldy the Bllectien e mebile abbs n ell akgots
dep blattomg i- Amagone Appstore. , Samsug Gralany Sy
Gocgle Play Store , Apple App Store g Rre<ox
Mankatplances Micaesot Wlindews Store, Blackbeny hleidl
* Building Abb Ditibutien Stakeqy :
L3Tangetting multislechanmels platprms
2. Audid nén þentorming patoums.
Se Consitnt chanml stnjatin
a Determne micheaip dúbibution channelte
 °Pay-Per-
Installs *A$þ *
Create Top
Pre-Loadi
sBores/ MAbile
a
mebile
Recommendation
dsAbp
leb Dotributien
Mersisn

ot stu.
youn channele
4
tor
Busnenes
Besiirees Page Date