1 / 65

Social Media Apps Programming

Tamkang University. jQuery Mobile. Social Media Apps Programming. 1031SMAP06 TLMXM1A ( 8687) ( M2143 ) (Fall 2014) ( MIS MBA) (2 Credits, Elective) [ Full English Course] Thu 8,9 (15:10-17:00) V201. Min- Yuh Day, Ph.D. Assistant Professor Department of Information Management

mariko-curry
Download Presentation

Social Media Apps Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TamkangUniversity jQuery Mobile Social Media Apps Programming • 1031SMAP06 • TLMXM1A (8687) (M2143)(Fall 2014) • (MIS MBA) (2 Credits, Elective) [Full English Course] • Thu 8,9 (15:10-17:00) V201 Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University http://mail.tku.edu.tw/myday 2014-10-22

  2. Course Schedule (1/3) Week Date Subject/Topics • 1 2014/09/17 Course Orientation and Introduction to Social Media and Mobile Apps Programming • 2 2014/09/24 Introduction to Android / iOS Apps Programming • 3 2014/10/01 Developing Android Native Apps with Java (Eclipse) (MIT App Inventor) • 4 2014/10/08 Developing iPhone / iPad Native Apps with Swift / Objective-C (XCode) • 5 2014/10/15 Mobile Apps Using HTML5/CSS3/JavaScript • 6 2014/10/22 jQuery Mobile

  3. Course Schedule (2/3) Week Date Subject/Topics • 7 2014/10/29 Create Hybrid Apps with Phonegap • 8 2014/11/05 jQuery Mobile/Phonegap • 9 2014/11/12 jQuery Mobile/Phonegap • 10 2014/11/19 Midterm Exam Week (Midterm Project Report) • 11 2014/11/26 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store • 12 2014/12/03 Google Cloud Platform

  4. Course Schedule (3/3) Week Date Subject/Topics • 13 2014/12/10 Google App Engine • 14 2014/12/17 Google Map API • 15 2014/12/24 Facebook API (Facebook JavaScript SDK) (Integrate Facebook with iOS/Android Apps) • 16 2014/01/31 Twitter API • 17 2015/01/07 Final Project Presentation • 18 2015/01/14 Final Exam Week (Final Project Report)

  5. Outline • jQuery Mobile • JavaScript Library • jQuery • jQuery UI • Demo • Building Mobile Apps with JQuery Mobile

  6. Android /iOS Apps Programming Hybrid Apps Native Apps Mobile Web Apps

  7. Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Scott Preston, Apress, 2012 Source: http://www.amazon.com/Learn-HTML5-JavaScript-iOS-Standards-based/dp/1430240385

  8. Mobile Web App HTML Phone Data Templates JavaScript CSS External Data Mobile frameworks and Libraries Source: Scott Preston, Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Apress, 2012

  9. jQuery Mobile http://jquerymobile.com/

  10. jQuery Mobile • Touch-Optimized Web Framework for Smartphones & Tablets • A unified, HTML5-based user interface system for all popular mobile device platforms • built on the rock-solid jQueryand jQuery UI foundation. • Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. Source: http://jquerymobile.com/

  11. http://jquery.com/

  12. jQuery • jQuery is a fast, small, and feature-rich JavaScript library. • jQuery is the most popular JavaScript library • versatility and extensibility • It makes things like HTML document traversal and manipulation, event handling, animation, and Ajaxmuch simpler with an easy-to-use API that works across a multitude of browsers. Source: http://jquery.com/

  13. jQuery UI http://jqueryui.com/

  14. jQuery Mobile • Seriously cross-platform with HTML5 • write less, do more Source: http://jquerymobile.com/

  15. Source: http://jquerymobile.com/demos/

  16. Source: http://demos.jquerymobile.com/1.4.4/

  17. Source: http://demos.jquerymobile.com/1.4.4/

  18. Source: http://jquerymobile.com/download/

  19. viewport <!DOCTYPE html> <html> <head> <title>Mobile App Title</title> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> </body> </html>

  20. jquery-1.11.1.min.jsjquery.mobile-1.4.4.min.cssjquery.mobile-1.4.4.min.jsjquery-1.11.1.min.jsjquery.mobile-1.4.4.min.cssjquery.mobile-1.4.4.min.js <!DOCTYPE html> <html> <head> <title>Mobile App Title</title> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> </body> </html>

  21. jQuery Mobile Page http://jsbin.com/fegesilaje

  22. jQuery Mobile Page <!DOCTYPE html> <html> <head> <title>Mobile App Title</title> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header" id = "header1"> <h1>Hello jQuery Mobile</h1> </div> <div data-role="content" id = "content1"> <p>Simple jQuery Mobile App<p> </div> <div data-role="footer" id = "footer1" data-position="fixed"> <h4>Footer 2014</h4> </div> </div> </body> </html> http://jsbin.com/fegesilaje

  23. jQuery Mobile: Mobile Graded Browser Support Source: http://jquerymobile.com/gbs/1.4/

  24. jQuery Mobile: Mobile Graded Browser Support • jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. • A-grade – Full enhanced experience with Ajax-based animated page transitions. • Apple iOS 4-7.0 • Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3 / 5.1 / 6.1), iPad 3 (5.1 / 6.0), iPad Mini (6.1), iPad Retina (7.0), iPhone 3GS (4.3), iPhone 4 (4.3 / 5.1), iPhone 4S (5.1 / 6.0), iPhone 5 (6.0), and iPhone 5S (7.0) • Android 4.4 (KitKat) • Tested on a Nexus 5 • Android 4.1-4.3 (Jelly Bean) • Tested on a Galaxy Nexus and Galaxy 7 Source: http://jquerymobile.com/gbs/

  25. W3schools.com jQuery Mobile Source: http://www.w3schools.com/jquerymobile/default.asp

  26. codiqa: drag-and-drop builder for mobile apps Source: http://jquerymobile.com/

  27. codiqa: drag-and-drop builder for mobile apps https://codiqa.com/

  28. codiqa demo https://codiqa.com/demo

  29. Codiqa Components https://codiqa.com/demo

  30. Source: http://jquerymobile.com/

  31. Source: http://jquerymobile.com/

  32. Source: http://jquerymobile.com/

  33. http://jsbin.com/ImorikO/1/edit

  34. <!DOCTYPE html> <html> <head> <link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div data-role="page" id="page1"> <div data-theme="b" data-role="header"> <h3> Tamkang U. </h3> </div> <div data-role="content"> <imgsrc="https://maps.googleapis.com/maps/api/staticmap?center=No.151, Yingzhang Rd.,Tamsui, New Taipei, Taiwan&amp;zoom=14&amp;size=288x200&amp;markers=Taipei&amp;sensor=false" width="288" height="200"> <a data-role="button" href="#page1"> Button </a> </div> <div data-theme="b" data-role="footer" data-position="fixed"> <h3> Footer </h3> </div> </div> </body> </html>

  35. Get inspired: Built with jQueryMobile Source: http://jquerymobile.com/

  36. http://m.stanford.edu/

  37. http://www.stanford.edu/

  38. Mobile website for Stanford Universityhttp://m.stanford.edu http://www.jqmgallery.com/2011/06/10/stanford/

  39. data-role="page” <div data-role="page" id="first" data-theme="b"> <div data-role="header"> <div data-role="content"> <div data-role="page" id="first" data-theme="b"> <div data-role="header"> <h1>Page Header</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> <a href="#second">Go to second page</a> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="footer" data-position="fixed">

  40. data-role=“button” <a href="#" data-role="button" data-icon="star">Star button</a> Source: http://view.jquerymobile.com/1.3.2/dist/demos/intro/

  41. data-role=“listview” <uldata-role="listview" data-inset="true” data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul>

  42. ListView Example http://www.learnhtml5book.com/chapter5/jquerymobile/lists.html

  43. ListView Example <div data-role="page" > <header data-role="header" data-theme="b"> <h1>List Example</h1> </header> <section data-role="content"> <h1>Basic List</h1> <ul data-role="listview"> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> </ul> <h1>List with Counts</h1> <ul data-role="listview"> <li><a href="">Link 1</a><span class="ui-li-count ui-btn-up-c ui-btn-corner-all">11</span></li> <li><a href="">Link 2</a><span class="ui-li-count ui-btn-up-c ui-btn-corner-all">22</span></li> </ul> <h1>List with Thumbnails</h1> <ul data-role="listview"> <li><a href="index.html" class="ui-link-inherit"> <imgsrc="staufs_thumb.jpg" class="ui-li-thumb"> <h3 class="ui-li-heading">Staufs</h3> <p class="ui-li-desc">Staufs Coffee</p> </a> </li> <li><a href="index.html" class="ui-link-inherit"> <imgsrc="vino-vino_thumb.jpg" class="ui-li-thumb"> <h3 class="ui-li-heading">Vino Vino</h3> <p class="ui-li-desc">Vino Vino Restaurant</p> </a> </li> </ul> </section> http://www.learnhtml5book.com/chapter5/jquerymobile/lists.html

  44. Form Element <form> <label for="textinput-s">Text Input:</label> <input type="text" name="textinput-s" id="textinput-s" placeholder="Text input" value="" data-clear-btn="true"> <label for="select-native-s">Select:</label> <select name="select-native-s" id="select-native-s"> <option value="small">One</option> <option value="medium">Two</option> <option value="large">Three</option> </select> <label for="slider-s">Input slider:</label> <input type="range" name="slider-s" id="slider-s" value="25" min="0" max="100" data-highlight="true"> </form>

  45. data-theme=“a” <a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a> <a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a> <a href="#" data-role="button" data-icon="star” data-theme=”c">data-theme="c"</a> <a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a> <a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a> Source: http://view.jquerymobile.com/1.3.2/dist/demos/intro/

  46. data-icon=“star” <a href="#" data-role="button" data-icon="star" data-theme="c">data-icon="star"</a> Custom Icons white icon 18x18 pixels PNG-8 with alpha transparency .ui-icon-myapp-email { background-image: url("app-icon-email.png"); } Source: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/icons/

  47. jQuery Mobile Icon Pack Source: http://jqmiconpack.andymatthews.net/

  48. ThemeRoller for jQuery Mobile http://jquerymobile.com/themeroller/

  49. ThemeRoller for jQuery Mobile http://jquerymobile.com/themeroller/

  50. http://grandviewave.com

More Related