Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Programming for Mobile Devices Workshop: Mobile App Development for Web Developers (Level: Beginner) Dr. Barbara Hecker, International Technological.

Similar presentations

Presentation on theme: "Web Programming for Mobile Devices Workshop: Mobile App Development for Web Developers (Level: Beginner) Dr. Barbara Hecker, International Technological."— Presentation transcript:

1 Web Programming for Mobile Devices Workshop: Mobile App Development for Web Developers (Level: Beginner) Dr. Barbara Hecker, International Technological University

2 2 The Web as a platform for Mobile Apps FeatureWeb appMobile app GraphicsStrongUnlimited User interactionStrongUnlimited Network usageHighVaries Accessible fromAny computerWhere installed Upgrade costUpdate serversSystem Update Data backup costBackup serversDevice Service PopularityIncreasingDominant

3 3 Most programs are event-oriented oStructure of program oRead input oPerform computation oProduce output oThe program may use libraries written by others oStructure of program oWait for events oFind appropriate method for handling the event oHandle the event oRepeat oOften you just add new events and handlers to an existing program A naive view A realistic view

4 4 Whats the difference with Web Apps? oOptimize for Fingers (Touch), not keyboards, mouse… oCustomized to look like native controls on different devices. oUse features on the phone! oIsnt this just a website with mobile app event- driven behavior? oDownload cool app icons, find a build tool you like and you are now an app developer!

5 5 Outline of Common Components used in Mobile Device Web Applications oWeb documents oServer-side programming oClient-side programming oWeb services oJQuery

6 6 HyperText Markup Language oDisagreement about HTMLs role oOnly give the content and structure of the document, leave visualization to the browser oBrowsers vary (graphical, text based, mobile devices) oUser preferences vary (some people like larger fonts) oEnvironment varies (screen sizes, fonts available, etc.) oBut authors want to control what the document looks like oTrend towards separating content from presentation oCascading Style Sheets – presentation information only oHTML documents contain little formatting

7 7 Many Choices… oBuild a Native app (for specific platform) that runs like a website (WebView). oBuild a Native bare bone app that connects to a website. The app is actually located on the website (Sancha, jQTouch, etc.) oBuild your app in the Cloud and dont mess with Xcode or Eclipse (PhoneGap). oBuild your app using a third party dev tool. oHave someone else build and host your app.

8 8 Tools of the Trade oXcode for iPhone/iOS oDashcode – Website Creation oYou can download Dashcode using the More Application Tools by choosing the Xcode Menu -> Open Developer Tools -> More Developer Tools. oEclipse and Android SDK – For Android Development. oPhoneGap Cloud Service – No Build Tools

9 9 PhoneGap ( oEasily create apps with the only free open source framework that supports 7 mobile platforms (according to PhoneGap) oBuild apps in the cloud and dont bother learning development tools like Xcode and Eclipse. oOr, compile your code in Native apps oEntire app is in a www directory. oNo Java, Objective-C or other programming language skills needed.

10 10 Build in the Adobe Cloud o oZIP your www directory oUpload it to the server oAfter a few minutes, download your.apk or other app files for installation on your devices oSupply your paid ($99 /year) Apple Developer Account info for iOS use. oNO compiling or using of ANY app development build tools on your local system.

11 11 Use WebKit Based Browser oEvery browser is backed by a rendering engine to draw the HTML/CSS web page. IE Trident Firefox/Sea Monkey Gecko Opera Presto Safari/Chrome WebKit oMost App interfaces will only function on WebKit based browsers.

12 12 iPhone Native App – Lets see it work! oWe will first create an iPhone app that goes out to a URL and loads a webpage from an external location. See WebPage tutorial we will do during this workshop. oNext, we will examine This app loads all files from within the app itself. NO internet connection is needed. Its all built within the app. This example uses a local background image as well

13 13 oExample - oThis app uses a Tab Bar Controller and loads 4 different website. ALL example websites look and act the same as if you were to use a regular web browser although spacing is different. oThe idea is to create an app that is basically a web browser and set the webview component to load HTML, PHP, etc. page either stored locally or somewhere on the internet. iPhone Native App – More advanced

14 14 Sencha - oBuild mobile apps for iPhone, Android and Blackberry with HTML5 oCommercial and open source Sencha Touch Library versions (Free). oSencha Touch is available free of charge for commercial and open source application development. oFull service IDE app building tools – Not Free oPlug-ins for Eclipse, iPhone libraries - Free

15 15 Lets build a Sencha Touch App oDownload from: ad/ (GPL version is smaller) ad/ oUnzip the archive to your local web server and navigate to http://localhost/your-touch-install/ to view the documentation and complete working examples. oYou can also unzip to your local system. Sencha Touch only functions on WebKit based browsers. Use Google Chrome or Safari on your computer to view the examples.

16 16 iPhone Native App – Sencha oExample – oThis example is the same as the other WebView examples except that it loads the sample Sencha Demo project website and runs like an app. oThese are the same examples you get in the download (see slide 13). oYou can also see these on your computer at /production/index.html /production/index.html

17 17 jQTouch ( oZepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other devices. oNative WebKit Animations - Image Preloading oCallback Events - Flexible Themes - MIT Licensed oSwipe Detection - Extensions

18 18 jQTouch Examples oExamples – Clock Demo, Todo Demo, More Demos oThe demos were uploaded to my website from the sample projects that come with the jQTouch download. oAccess from a computer: o o

19 19 Android – Can do it too! oExample – Android – SenchaTouch oExample – Android – Native WebView Example oExample – Android – PhoneGap Project

20 20 Dashcode, easier then Xcode oOnly works on the Mac. Not part of Xcode 4.x but can be downloaded from: oCan be used for Safari and Mobile Safari Web Application and Website Development oDashcode is only HTML, CSS and JavaScript, no Objective-C.

21 21 Launch Dashcode – Select Browser

22 22 Click Safari & Mobile Safari.

23 23 Click Run or (Command + R) The mobile version has two views

24 24 Click on the Library icon Drag something over

25 25 Right-Mouse click to create event-driven function template to add code 25

26 26 Run the program see the results. 26

27 27 Example: 27

28 28 Place your Dashcode files into the WWW folder (Android) 28

29 29 Place your Dashcode files into the WWW folder (Xcode)

30 30 iWebKit o oDemo: oSimple HTML programming oSee User Guide that comes in the download.

31 31 Others - SproutCore - oSproutCore is an HTML5 framework that aims to help developers build desktop-caliber web applications that run in any modern web browser, without plug-ins. The lead developer recently quit his job at Apple to focus on the project full-time. oCheck out on an iPhone or Android device.

32 32 YUI ( oYUI is a free, open source JavaScript and CSS library. oGood level of source code examples and help documentation. oExample: Todo todo.html todo.html

33 33 jQuery Mobile ( ojQuery Mobile isnt a full application framework like SproutCore or Sencha Touch, but the new initiative does aim to bring more native controls to mobile web apps. oNot supported on all browsers. You can see what browsers and versions jQuery Mobile will support at oThe jQuery Core team is working to support all A and B browsers (see chart at link provided).

34 34 XUI ( oWhile developing Phonegap, the XUI team became frustrated with the existing JavaScript libraries and their performances on mobile devices. oXUI was created to work across mobile browsers, including WebKit, Fennec, and Opera. The goal is to provide lots of cross- compatibility without much of the overhead that can make traditional JavaScript libraries unsuitable for mobile devices.

35 35 iUI ( oiUI is an iPhone user interface framework designed to bring an iPhone-like experience to mobile web apps. It works with WebKit based devices and includes a JavaScript library, CSS, and images. oIt was originally started back in 2007 but has been steadily updated over the years to add support to more types of devices and even the iPad. oGood Demos and Sample themes:

36 36 omobiSiteGalore - Claims itself to be the easiest mobile web builder, for as average as 54 minutes their customers can already build a fully functional mobile version of their website. oDuda Mobile - Free option puts advertisements on your apps Services to Convert Websites For Mobile Devices

37 37 oMofuse - There are two ways to convert your site to mobile: building it yourself through mofuse or hiring them to build it for you. By building it yourself using their application, you have more control over the design and development process, only youll have to pay a monthly subscription to keep the service going. (Self Service: $7.95/month – $199/month) Services to Convert Websites For Mobile Devices

38 38 obMobilized - bMobilized claims they support more than 13000 mobile devices, including all major brands. Also the more website you host using their service the higher the discount you get. So if you have a network of websites that needs conversion, bMobilized is a good option. ($19.99/month) Services to Convert Websites For Mobile Devices

39 39 oConvertWebsite - Requires customers to send the PSD file of the website they wish to convert. Why? To determine what approach is best in the redesigning process from desktop to mobile. Its method is quite similar to Code My Concept, which means handcrafting your provided PSD into mobile website. oTakes days for the conversion! Services to Convert Websites For Mobile Devices

40 40 oMobify – http://www.mobify.com Mobify is good for eCommerce sites. They offer HTML5. They will design for you from concept to launch within 3 weeks. You can also do the self-serve solution. oPublisher Pricing: $0 – $1000 Services to Convert Websites For Mobile Devices

41 41 oOnbile - oMobile App America - oMobStac - oAnd plenty more…. Services to Convert Websites For Mobile Devices

42 42 The Redirect o Its not a bad idea to also redirect your main company website to a mobile interpretation of it. o Use your App version hosted on the internet!

43 43 Next oWeb documents oServer-side programming oClient-side programming oWeb services oJQuery

44 44 Server side programming oShort history oCGI – separate programs launched by web server oThey produce an HTML document as output oThey receive arguments as input oStrong isolation, bad performance oPrograms embedded inside web page (php, ASP, JSP) oProgram executed inside web server process oSeparate code-behind file for the code (ASP.NET) oWhat are dynamic pages used for? oPersonalizing based on user identity oInteracting with databases (e.g. online banking) oWeb applications (e.g. web based email) oSeparate database keeps persistent data

45 45 Lifecycle of static web page Web server machine Server codeServer data File system Web client HTTP request URL RequestHTTP responseHTML file

46 46 Lifecycle of ASP.NET webpage Web server machine Server codeServer data File system Web client HTTP request URL RequestHTTP response Objects representing this web page.aspx file codebehind HTML snippets

47 47 Page with database interaction Web server machine Server codeServer data File system Web client HTTP request URL RequestHTTP response Objects representing this web page.aspx file codebehind HTML snippets Database SQL interaction

48 48 A Mobile Chat App Design oView: in a WebKit based browser. oRun example: oThe App is running the same testme.php file. The php file connects to a database to retrieve the chat/forum information. oWeb users and mobile device users share the same mySQL database. All is controlled by the.php script on the server.

49 49 Next oWeb documents oServer-side programming oClient-side programming oWeb services oJQuery

50 50 Why is JavaScript important? oWeb pages can contain JavaScript programs executed inside the browser oSupported by all major browsers oMicrosofts version called Jscript (the language is the same) oUser may disable JavaScript due to security fears oThis is default for some newer versions of Internet Explorer oClient-side programming important for web because oCan promptly validate user input oCan update the web page without postback to server oAllows page to react to user actions other than pushing a submit button – more interactivity oCan be used to create interaction and navigation for mobile applications

51 51 What is JavaScript? oInterpreted, object-oriented programming language with dynamic typing oIntroduced by Netscape with Netscape 2.0 in 1995 oStandardized as ECMAScript by ECMA (European Computer Manufacturers Association) oNot related to Java other than the name oTightly integrated with browser oCan handle many types of events generated by the normal interaction between user and browser oCan modify the internal objects based on which the browser renders the web page

52 52 Adding JavaScript to a page oUsing the tag oText between tags is JavaScript program oCan specify external file using src attribute oExecuted as the document is loading oValue of an attribute such as onclick oThis type of code is called event handler oExecuted when event happens oCan define event handlers for almost any HTML element in page

53 53 Document Object Model oDescribes how the document object from JavaScript can be traversed and modified oRepresented as tree structure oCan add new elements to the page oCan change attributes of existing elements oDOM has levels 0-3 and many sub-standards oThe DOM interface used in other contexts with other languages (C++, Java, python, etc.)

54 54 The document as a tree A Document A web page A simple paragraph document A document A web page A simple paragraph

55 55 Changing the structure function addItalic(){ var i=document.createElement("i"); i.appendChild(document.createTextNode("italic")); addParagraph(i); } function addBold(){ var b=document.createElement("b"); b.appendChild(document.createTextNode("bold")); addParagraph(b); } function clearAll(){ var d=document.getElementById("playground"); while(d.childNodes.length>0) d.removeChild(d.childNodes[0]); }

56 56 Dynamic Colors function changeBGColor(color){ var p=document.getElementById("para1");; } function checkColor(){ var s=document.getElementById("textfield1").value; if (s.length!=6){ alert('Must enter six hex digits'); return; } for (var i=0;i<6;i++){ if(!((s[i]>='A' && s[i]<='F')|| (s[i]>='a' && s[i]<='f')|| (s[i]>='0' && s[i]<='9'))){ alert(" Character '"+s[i]+"' is not valid"); return; } changeBGColor("#"+s); }

57 57 Next oWeb documents oServer-side programming oClient-side programming oWeb services oJQuery

58 58 What are web services? oA form of remote procedure call (RPC): your app (the client) asks another computer (the server) to run a procedure for you oParameters sent over the network from client to server oResults sent over network from server to client oWhy would you ever want to do a remote procedure call? oData needed for answer not (easily) accessible in app oYou want to re-use existing procedures that run in a different environment than your app oYour device lacks the resources (i.e. processor capacity, memory, network connection speed) to compute the result oThere are many other forms of RPC older than web services oCORBA, DCOM, SunRPC, RMI

59 59 Internals of an RPC framework oCode for marshalling/un-marshalling – encoding and decoding parameters/results oA.k.a. serializing objects oDescription of the available procedures (methods) oUsing an interface description language (IDL) oFramework that turns these descriptions into stubs oOn the client the stub makes it look to your program like the stub is executing the procedure locally oOn the server the stub invokes the procedure oThe client and server stub interact over the network

60 60 Specific to web services oThey run over http oProcedure call is in an http request oResult is in an http response oThey use XML to oEncode responses oEncode requests (sometimes) oDescribe the procedures (incl. arguments and results) oClient and server often use different languages oClient may be JavaScript code in browser – AJAX oClient and server are often in different organizations

61 61 Last but probably the most used… oWeb documents oServer-side programming oClient-side programming oWeb services oJQuery

62 62 JQuery oPowerful JavaScript library oAccess parts of a page using CSS or XPath- like expressions oModify the appearance of a page oAlter the content of a page oChange the users interaction with a page oRich library of methods for AJAX development (AJAX = Asynchronous JavaScript and XML) oWith jQuery and AJAX, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post.

63 63 Basic JQuery oSelecting part of a document is a fundamental operation oA JQuery object is a wrapper for a selected group of DOM nodes o$() function is a factory method that creates JQuery objects o$(dt) is a JQuery object containing all the dt elements in the document

64 64 Basic JQuery. addClass() method changes the DOM nodes by adding a class attribute oThe class attribute is a special CSS construct that provides a visual architecture independent of the element structures $(dt).addClass(emphasize) will change all occurrences of to

65 65 Basic JQuery oTo make this change, put it in a function and call it when the document has been loaded and the DOM is created. Example Function: ofunction doEmph() { o $(dt).addClass(emphasize) o} o oStructure and appearance should be separated!

66 66 Basic JQuery oJQuery provides an independent scheduling point after DOM is created and before images are loaded: $(document).ready(doEmph); oNo HTML changes required. All done in the script. oBetter solution: $(document).ready(function(){ $(dt).addClass(emphasize) }); …

67 67 JQuery Changes DOM.attr({name, value}) sets a new attribute (or many) $( hello ) Creates a new element $( hello ).insertAfter(div.chapter p); Creates element and inserts it into the document.html() or.text() or.empty() will replace matched elements with newly created elements

68 68 Have you met JSON? oJSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. oBased on a subset of JavaScript oJSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. oThese properties make JSON an ideal data-interchange language.

69 69 The End oThank you all for attending! oI hope you were able to learn something new. oGo out and try this stuff oBuild a killer app get rich and retire.

Download ppt "Web Programming for Mobile Devices Workshop: Mobile App Development for Web Developers (Level: Beginner) Dr. Barbara Hecker, International Technological."

Similar presentations

Ads by Google