8/8/2019 Mobile Dev 101

1/64

1

8/8/2019 Mobile Dev 101

2/64

[ReadObjec,ves]

2

8/8/2019 Mobile Dev 101

3/64

[Read]

Thekeyconceptsofmobileapplica,ondevelopmentareimportantbecausethisisan

areawebdevelopersareconstantlybeingaskedabout.Adevelopermaynotdevelop

mobileapplica,onsexclusivelybutwillneedtoknowtheconceptsinordertomake

informeddecisionsforcustomersclientsstakeholdersbossesetc.Inreturnthis

couldleadtoprofessionaldevelopmentingeneralandspecificallyahigherpayingsalarydowntheroad.Acommitmenttolearningnewtechnologiesandcon,nuing

educa,onissomethingthatisappreciatedbymostfolksinanyindustry.

3

8/8/2019 Mobile Dev 101

4/64

8/8/2019 Mobile Dev 101

5/64

[Mo,ontowardsupwardtrendofgraph]

Weseeherethatsmartphonepenetra,onisgrowing.

iPhonevs.AndroidJune42010DonKellogghp://blog.nielsen.com/nielsenwire/

online_mobile/iphone-vs-android/

5

8/8/2019 Mobile Dev 101

6/64

[Pointtothethreelargeslicesofthepie]

HereweseethatthetopthreeplayersinthisspaceareBlackberryiPhoneand

WindowsMobile.

iPhonevs.AndroidJune42010DonKellogghp://blog.nielsen.com/nielsenwire/online_mobile/iphone-vs-android/

6

8/8/2019 Mobile Dev 101

7/64

[Pointtowardmobile/Internetdata]

Thesearethedatafeaturesusedwithinthelast30days.Weseeherethatmobile

Internetis#2onthislistwithover70%ofthe11kusersusingitinsomeform.

iPhonevs.AndroidJune42010DonKellogghp://blog.nielsen.com/nielsenwire/online_mobile/iphone-vs-android/

7

8/8/2019 Mobile Dev 101

8/64

8

8/8/2019 Mobile Dev 101

9/64

[Read]

Amobilewebapplica,oniswrienandconformstothecodethathasbeen

standardizedbytheW3C.ThiscodeisaccessibleusingaURLorUniformResource

Locatorandisop,mizedforuseonamobiledevicei.e.thedimensionsfilesizesand

codestandardsmatchthatofthepreferablesengsforwhichthemobile

environmentismostknown.

9

8/8/2019 Mobile Dev 101

10/64

[Pointoutthatthispicturerepresentswell-formedstandards-basedHTMLcode.]

[Read]

Thisisanimportantpointwhendealingwithmobilewebapplica,onsinthatweneed

toplacetheemphasisonstandards-basedcode.Thatiscodethatconformstothe

generallyacceptedsyntaxwhichwillruninmostwebbrowsers.WearetalkingaboutthebasicbuildingblocksofHTMLJavascriptandCSS.Inmanycasesmobileweb

browserssupportmoreadvancedtechnologythantheirdesktopcounterpartsthus

allowingustouseadvancedtechnologiesnotyetavailableintradi,onalweb

developmenti.e.CSS3andHTML5.Wewilltalkabouttheselaterinthecourse.

10

8/8/2019 Mobile Dev 101

11/64

[Pointoutbluearrow]

[Read]

ThissliderepresentsboththegoverningbodyforHTMLandCSSstandardsandalso

providesanexampleofawebapplica,onthatisbuiltonstandardsthusaccessible

throughcurrentwebbrowsers.

11

8/8/2019 Mobile Dev 101

12/64

[Read]

Accessibilitymeansthatanywherethereisawebbrowserandaconnec,onyour

applica,onmaybeabletorun.

12

8/8/2019 Mobile Dev 101

13/64

[Read]

Mobilesitesmustfirstbedetectedbyeitherauserdirec,vereques,ngamobilesite

orauto-detec,ngtheuseragentofthewebbrowser.Thiscanbedoneusingany

technologythatcanreadthebrowsersuseragentandmanipulatetheheaderprior

tothepageloading.

Customstylesheetsareusedtodisplayawebsitebasedontheuseragente.g.if

mobilemakesitesmaller.Mul,-columnlayoutsaregenerallyreducedtotwo

columns.Tabsaccordians(tabswithcollapsedcontent)orotherJavaScripteffects

areusedtopromotethemosteffec,veuseofspace. Display:noneisseton

anyunnecessaryelementsandpadding/spacingarereducedtofreeupspace.

Amobilesitecanbeassmallas128x160oraslargeas320x480.

Somephoneshavetouchscreensothersdonot.Forourpurposesherewewill

mostlybetalkingabouttheformertocoverthemostpopularphoneswhichare

availabletoday.

13

8/8/2019 Mobile Dev 101

14/64

[Read]

Wikipediaisawebapplica,onthatisop,mizedforbothdesktopandwebbrowsers.

Itdynamicallychangesthebrowserssizeandlayoutbasedontheuseragentsentin

therequeststring.

14

8/8/2019 Mobile Dev 101

15/64

[Read]

Thisistheresul,ngwebpageasseenfromamobilebrowser.No,cethem.inthe

URL.

15

8/8/2019 Mobile Dev 101

16/64

[Read]

Asmallerbrowsingexperiencemeanslessrealestatetoworkwithandhas

implica,onsfortheUI.Hereno,cethelargeac,onbuons.

16

8/8/2019 Mobile Dev 101

17/64

[Read]

Againweseelargebuonsinsideatablewiththreecolumns.Insideamobileweb

applica,onconsidera,onmustbegiventothelackofrealestateandthe

implica,onsithasonUI.

17

8/8/2019 Mobile Dev 101

18/64

[Read]

ThisisWalmartsiPhonewebsite.Thissiteisamobilewebapplica,onwhichis

op,mizedfortheiPhone.

18

8/8/2019 Mobile Dev 101

19/64

[Read]

Walmartproductlis,ngsarehere.

19

8/8/2019 Mobile Dev 101

20/64

[Read]

Aquickwaytogetalookatavarietyofmobilewebapplica,ondesignscanbefound

here.

20

8/8/2019 Mobile Dev 101

21/64

[Read]

ForthepurposesofthiscoursewewillfocusontheiPhoneapplica,onplaormas

anexampleoflaunchingana,veapplica,on.Thiscoursewillnotexplorena,ve

applica,onsindepthbutinsteadwillfocusonthekeydifferenceswithmobileweb

applica,ons.

21

8/8/2019 Mobile Dev 101

22/64

22

8/8/2019 Mobile Dev 101

23/64

[Read]

Sinceyoumostlikelyownamobiledeviceandarefamiliarwiththeappstorewewill

focusonsomethingmostwebdevelopersdonthavemuchknowledgeaboutwhichis

objec,veC.Naturallythesestepswilldifferdependingonthemobileplaormfor

whichyouarecodingbutthisiswhattheprocesswouldlooklikecurrentlyifyou

weretobeginwri,ngamobileapplica,onfortheiPhone.YouwouldfirstvisittheAppleDeveloperConnec,onatdeveloper.apple.comwhereyouwouldlearnthe

detailsofdevelopinganapplica,onincludingguidelinesforhowthearchitectureis

laidoutsamplecodefaqsetc.YouwouldthensetupinsidetheXcode

developmentenvironmentwhichisnotmandatorybutrecommendedbyApple.

NextyouwouldfamiliarizeyourselfwiththeCocoaAPIandbegintodevelopyour

applica,onusingtheObjec,veClanguage.Asstatedbeforethesestepsareall

uniquetodevelopingforApplesiOSbuttheyareagoodrepresenta,onofwhatit

takestodevelopforaspecificenvironment.

Allthatsaidtherearedefiniteprostoanyna,veapplica,on.Oncewrienyour

applica,onwouldrunonthedeviceandhaveaccesstomostofthehardware

featurese.g.cameraspeakersetc.Inaddi,ontothisthebuiltinmarketplacehelps

pushyourapplica,onouttonetworksyoumightneverreachotherwise.However

embeddedintheseposi,venotesonna,vedevelopmentarenega,ves.Forexample

con,nuousintegra,onofnewfeaturesisthroledbytheappstore.Addi,onally

23

8/8/2019 Mobile Dev 101

24/64

[Readtable]

24

8/8/2019 Mobile Dev 101

25/64

[Readtable]

25

8/8/2019 Mobile Dev 101

26/64

26

8/8/2019 Mobile Dev 101

27/64

8/8/2019 Mobile Dev 101

28/64

[Read]

Therearetoomanyphonestolistthemall.Thelaertwophonesonthisslidegiveus

agoodsenseofwhatamobilewebapplica,onwillneedtosupporttoday.Wehave

keyboardswithsmallviewportstouchscreenswithslightlylargerviewportsand

everythinginbetween.Ifourapplica,onwillrunonbothofthesedeviceswemay

safelysaythatitisportablebytodaysstandards.

[PointtowardBlackberryandiPhone]

28

8/8/2019 Mobile Dev 101

29/64

[Pointtographic]

[Read]

Un,lrecentlywehadaround320pixelsofwidthandinbetween240and480pixels

ofheighttoworkwithforsupportofthemostpopularmobiledevices.iPhone4

increasedthisto640x960staggeringdimensionsrela,vetomobile.Chancesarethiswillmo,vateotherstodothesamethusincreasingtheamountofphoneswithultra

highresolu,onssuchasthis.

29

8/8/2019 Mobile Dev 101

30/64

[Read]

WewilltalkmoreaboutFlashvideosincetherearesomecaveatsitsimplementa,on.

Theotherthreetagshoweverarejustexamplesofnewmethodsavailablein

HTML5.Thetakehomepointforthewebdeveloperisthatitisfinally,metogoback

tothebookstoreandbuyanewHTMLbooksinceforthefirst,mesince2000the

HTMLspechasasignificantrelease.

30

8/8/2019 Mobile Dev 101

31/64

[PointtoHTML5row.]

[Read]

HTML5supportiscurrentlyspoybutpickingupacrossthebrowserworld.

[Pointtocodecrow.]

[Read]RegardingHTML5videosupportthinkofOggandH.264ascontainersforthevideo

(likezipfiles).Bothhavepatent/licensingissuesthatwewillnotgetintoheresofor

nowwearestuckwithforkedsupportforhtml5video.

31

8/8/2019 Mobile Dev 101

32/64

[PointtoHTML5withFlashFallback]

[Read]

Forimplemen,ngHTML5videoweembedmp4firstthenogvwhichisimportant

foriPadsupportthenfinallywehaveaFlashplayerfallback.hp://

www.webmonkey.com/2010/05/embed-videos-in-your-web-pages-using-html5/

[FlipbacktoBrowserCapabili,esIIandpointtoCodecsupport]

[FlipbacktoBrowserCapabili,esIII]

[Read]

Thiscodewillallowuscross-browsersupportforalmosteverybrowsercurrently

availableprovidedthatthebrowseriswasreleasedinthelasttwotothreeyears

and/orhasFlashsupport.AlsonotethatFlashis*not*na,vetothebrowserandone

wouldneedtouseacompiledFlashplayertoservethevideoonline#6above.

32

8/8/2019 Mobile Dev 101

33/64

[Read]

Thisiswherewegetbacktothebasicsofoldschoolwebdevelopment.HTTP

requestsshouldbelimited.Thatisonlymaketherequestsnecessarytoloadthe

pageandifyoucandotheminalimitedamountofsockets.Usepackingtoolsto

compressyourjavascript.Lookintowebservermodulesthatwillcompressfiles

beforetheyaresenttothewebbrowser.Imagesorotherbinaryfilescanbeproblema,cbecausegenerallyspeakingyoucannotcompressthemonthefly.The

bestscenarioiswhenthetoolusedtoinputsuchfilesautoma,callyre-sizesthem

e.g.340pximagefilesareinyourdocumentrepositoriesalreadyresized.Thisisnot

alwaysthecaseandifitisntforyouyoumightlookintousingathirdpartylike

,nysrc.nettohelpyouresizethem.Aswithallwebservicestherearenoguarantees

withthisservicesomakesuretohaveaback-upplaniftheservicegoesdown.

Finallyuseaprofilingtool.JoeHewisFirebughassetthestandardforsuchtools

andraisedthewebdeveloperstroubleshoo,ngtoolkitsignificantly.

33

8/8/2019 Mobile Dev 101

34/64

8/8/2019 Mobile Dev 101

35/64

[Pointtoindex.html]

Hereweseeindex.htmlas#1insize.Totalsizeform.espn.comisaround28k.Thebig

differencehereisthatwearentpullinginalargeanaly,cspackagewhichis

surprisinggiventhesizeofESPNnetwork.

35

8/8/2019 Mobile Dev 101

36/64

[Pointtonews.html]

Digg.comcomesinat172kmostofwhichareintheformoftext/html.Wedont

knowallthatgoesintothisnewstext/htmlbutonewouldassumethatusinga

deflaterontheserversidecouldsubstan,allycompressthiscontentbeforeitgets

intothemobilewebbrowser.Theremaybeareasonwhythedevelopersatdiggdidnotdothisbutthepointforthiscourseisthatprofilingyoursiteagainstothersand

lookingforop,miza,onsisanimportantpartofmobilewebdevelopment.

36

8/8/2019 Mobile Dev 101

37/64

[Readques,ontoclassandaskforverbalanswers]

[Readanswerandopenfordiscussion]

TheanswertothisisC.Theimplica,onsofbuildingitinasana,veapplica,onare

thatonewouldneedtobuildthreeseparateapplica,ons.Iftheappisaweb

applica,ononlyonebuildisnecessary.

37

8/8/2019 Mobile Dev 101

38/64

[Readques,ontoclassandaskforverbalanswers]

[Readanswerandopenfordiscussion]

Ana,veapplica,on.Currentlythereisnowaytoaccessthena,veGPShardwareof

thedevicethroughthewebbrowser.

38

8/8/2019 Mobile Dev 101

39/64

[Readques,ontoclassandaskforverbalanswers]

[Readanswerandopenfordiscussion]

BHTML5.Seeslide,tledBrowserCapabili,esIII

39

8/8/2019 Mobile Dev 101

40/64

[Readques,ontoclassandaskforverbalanswers]

[Readanswerandopenfordiscussion]

Trueitcansupportanylayoutatypicalwebbrowsercansupport.

40

8/8/2019 Mobile Dev 101

41/64

41

8/8/2019 Mobile Dev 101

42/64

[Readtypes]

42

8/8/2019 Mobile Dev 101

43/64

[Read]

CSSdetec,onisusefulwhenallyouwanttodoisstylethesitedifferentlye.g.hide

thesidecolumn.

Itisnotusefulifyouneedtocontrolthecontentwhichisbeingdelivered.Thereisa

tempta,ontosimplyre-styleawebsiteformobileandthenleaveitalone.Thisis

notadvisableformostwebsitesduetotypicalsizeofanormalwebapplica,on.Ifperformanceisvaluedthenonemustconsideronlyservingappropriatecontentthat

isdevicespecifici.e.dontmaketheuserwaitoncontenttheycannotuse.

43

8/8/2019 Mobile Dev 101

44/64

8/8/2019 Mobile Dev 101

45/64

[Read]

Serverdetec,onisdetec,onbasedonuseragentstringsentbywebbrowsersusing

alanguagesuchasPHP.Oncedetectedtheapplica,onservesstylesoralternate

content.Thistypeofdetec,onhasthemostcompa,bilityforautoma,cdetec,on

methods.

45

8/8/2019 Mobile Dev 101

46/64

[Pointouttheuseragentstringoftherewritecondi,on]

[Read]

Thiscodeismissingalotofuseragentsandwouldneedtobeupdatedwiththese

andanyotherswhichyouwillnodoubtwanttosupportwithyourapplica,on.Itis

verybasictodetectuseragentsandrewriteanurlorredirecttoanalterna,vesitetheproblemcomeswiththefragmenta,onofthevariousdeviceswhichwewill

discusslater.

46

8/8/2019 Mobile Dev 101

47/64

[PointouttheisDevice()method]

[Read]

Thismethodbasicallydoesastringmatchagainstthevarioususeragents.Asyoucan

imaginethereisnotanythingspecialaboutthiscodeonlythatitisuniquetomobile

webapplica,onsbutcouldbewrieninvariouslanguages.

47

8/8/2019 Mobile Dev 101

48/64

[Read]

WithCSSwecandetectthesizeofthebrowserandadjustthestyles.Withtheserver

wecanusethebrowsersuseragentstringtodothedetec,onandaltertheen,re

webapplica,on.

WhenbuildingyouruseragentstringsyoumightlookintousingtheWirelessUniversalResourceFilewhichisafrequentlyupdatedXMLfilecontaininginforma,on

aboutdevicecapabili,esandfeatures.AnotherpromisingresourceistheUserAgent

Profilespecifica,onwhichasksdevicemanufacturerstosupplyalinktoastructured

datafilealongwitheachuserrequestfromthedevice.Todatetheconsistencyoffile

availabilityisnotveryusefulbutthehopeisthatitwilleventuallybeareliable

resourcefordevelopersofapplica,onstotakeadvantageof.

48

8/8/2019 Mobile Dev 101

49/64

[Readques,ontoclassandaskforverbalanswers]

[Readanswerandopenfordiscussion]

Dofcourse.Themobilesiteisdetectedandtheapplica,onisthenredirectedtoan

alterna,veplace.

49

8/8/2019 Mobile Dev 101

50/64

[Readques,ontoclassandgive20minutestocompletetask]

50

8/8/2019 Mobile Dev 101

51/64

51

8/8/2019 Mobile Dev 101

52/64

[Read]

Wewillbestylingourdocumentusingadiv-basedlayoutforthepurposesofthis

course.Theinstructorfeelsasifthisispreferableovertable-basedlayoutsbutit

shouldbenotedthateitherwillworkproperlyinthemobilewebbrowser.In

addi,onwewillcreateaseparatestylesheettopreventsendingun-usedrulestothe

mobiledeviceforexampleifweweretocompilethemobileandthedesktopstylesheetintoonewewouldbesendingalotofunnecessaryrulestotheclientfor

downloading.

52

8/8/2019 Mobile Dev 101

53/64

[Pointtomarkup]

[Read]

Asawebdeveloperyoubegineveryapplica,onwithmark-upsimilartothis.Over

thenextfewslideswewillminimaltweakstothismarkuptoop,mizeitforamobile

webapplica,on.

53

8/8/2019 Mobile Dev 101

54/64

[Pointtoslideelementse.g.headerlistitemspicturefooter]

[Flipbetweenbasicmarkupslideandthisslidetoillustratethatthecodebuiltthe

page]

[Read]

Hereisourmark-upfilledwithtext.

54

8/8/2019 Mobile Dev 101

55/64

[Pointtometatag]

[Read]

Mostmobiledevicesassumeapageis980pxwide.Changingtheviewportwill

preventthebrowserfromzoomingallthewayout.Thisiswasfirstsupportedbythe

iPhoneandrecentlyhasbeenadoptedbyotherplaorms.Alsonotethatthedoctypeorcharacterencodinghavebeenleoutforbrevity.Withoutthemcodewilldisplay

properlyinthebrowserbutitispreferabletohavetheseelementsinaproduc,on

product.

55

8/8/2019 Mobile Dev 101

56/64

[PointtogeneralandheaderCSSrules]

[Read]

HerewechangetoHelve,cathesystemdefaultfortheiPhone.Wealsohadastyle

totheh1anchortagwhichwillallowtheen,reelementtobeclick-able.

56

8/8/2019 Mobile Dev 101

57/64

[Read]

Ourgoalformenuitemsisbigandblockytoallowfortouchscreenuse.Wealsopay

specialaen,ontothepaddingofeachelement.

[Pointtodisplay:blockandrepeatbigandblocky]

57

8/8/2019 Mobile Dev 101

58/64

[Read]

Ourwebpageasstyledsofar.

[Flipbacktopreviousslideandpointtobigandblockyarrow]

[Flipbacktocurrentslideandpointtobigblocks]

58

8/8/2019 Mobile Dev 101

59/64

[Pointtowebkitgradientarrowthentoheaderarrow]

[Read]

Inthetext-shadowdeclara,ontheparametersfromletorightarehorizontal

offsetver,caloffsetblurandcolor.

Theparametersofwebkit-gradientfromletorightareasfollows:thegradient

type(canbelinearorradial)thestar,ngpointofthegradient(canbeletople

boomrighttoporrightboom)theendpointofthegradientthestar,ngcolor

andtheendingcolor.

59

8/8/2019 Mobile Dev 101

60/64

[Pointtowebkit-borderrulethentotheassociatedroundedcorner.]

[Read]

Onthefirstlistitemaddatopleborderandatoprightborderof8px.Onthelast

listitemdothesamethingontheboomleandboomright.

60

8/8/2019 Mobile Dev 101

61/64

[Read]

Basedonthedemonstra,onabovebuildthefirstpageofyourmobileweb

applica,onusingyourownspecifiedcontentandrunitthroughthew3cvalidatoras

HTML5experimental.Ifthemarkupdoesnotvalidatefixtheerrorsthatarelisted

andtryagain.

[Givetheclass20minutestocompletethistask]

61

8/8/2019 Mobile Dev 101

62/64

62

8/8/2019 Mobile Dev 101

63/64

8/8/2019 Mobile Dev 101

64/64

[Read]

[Whilereadingpointtovariouselementsofassignmentondiagram]

Combineallpagesofyourwebapplica,onalongwithnaviga,onbetweeneachpage.

Integratethiswiththebrowser-agentdetec,onasdiscussedearlierintheslidedeck

andpublishyourcontenttoawebpage.Thecontentshouldbevalidatedthroughthe

w3candanyissuesshouldbeaddressedpriortoaes,ngtothefinishedproduct.

[Giveclass40minutestocompletetheassignment]