Tamkang University Social Media Apps Programming j Query

  • Slides: 67
Download presentation
Tamkang University Social Media Apps Programming j. Query Mobile 1041 SMAP 06 TLMXM 1

Tamkang University Social Media Apps Programming j. Query Mobile 1041 SMAP 06 TLMXM 1 A (8687) (M 2143) (Fall 2015) (MIS MBA) (2 Credits, Elective) [Full English Course] Wed 9, 10 (16: 10 -18: 00) B 310 Min-Yuh Day, Ph. D. Assistant Professor Department of Information Management Tamkang University http: //mail. tku. edu. tw/myday 2015 -10 -21

Course Schedule (1/3) Week Date Subject/Topics 1 2015/09/16 Course Orientation and Introduction to Social

Course Schedule (1/3) Week Date Subject/Topics 1 2015/09/16 Course Orientation and Introduction to Social Media and Mobile Apps Programming 2 2015/09/23 Introduction to Android / i. OS Apps Programming 3 2015/09/30 Developing Android Native Apps with Java (Android Studio) (MIT App Inventor) 4 2015/10/07 Developing i. Phone / i. Pad Native Apps with Swift (XCode) 5 2015/10/14 Mobile Apps using HTML 5/CSS 3/Java. Script 6 2015/10/21 j. Query Mobile 2

Course Schedule (2/3) Week Date Subject/Topics 7 2015/10/28 Create Hybrid Apps with Phonegap 8

Course Schedule (2/3) Week Date Subject/Topics 7 2015/10/28 Create Hybrid Apps with Phonegap 8 2015/11/04 j. Query Mobile/Phonegap 9 2015/11/11 j. Query Mobile/Phonegap 10 2015/11/18 Midterm Exam Week (Midterm Project Report) 11 2015/11/25 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store 12 2015/12/02 Google Cloud Platform 3

Course Schedule (3/3) Week Date Subject/Topics 13 2015/12/09 Google App Engine 14 2015/12/16 Google

Course Schedule (3/3) Week Date Subject/Topics 13 2015/12/09 Google App Engine 14 2015/12/16 Google Map API 15 2015/12/23 Facebook API (Facebook Java. Script SDK) (Integrate Facebook with i. OS/Android Apps) 16 2015/12/30 Twitter API 17 2016/01/06 Final Project Presentation 18 2016/01/13 Final Exam Week (Final Project Presentation) 4

Outline • j. Query Mobile – Java. Script Library – j. Query UI •

Outline • j. Query Mobile – Java. Script Library – j. Query UI • Demo – Building Mobile Apps with JQuery Mobile 5

Android /i. OS Apps Programming Native Apps Hybrid Apps Mobile Web Apps 6

Android /i. OS Apps Programming Native Apps Hybrid Apps Mobile Web Apps 6

App Development Comparison Device Access Speed Development Cost App Store Approval Process Native Apps

App Development Comparison Device Access Speed Development Cost App Store Approval Process Native Apps Full Very Fast Expensive Available Mandatory Hybrid Apps Full Native Speed as Necessary Reasonable Available Low Overhead Web Apps Partial Fast Not Available None Reasonable Source: http: //www. scribd. com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development 7

Learn HTML 5 and Java. Script for i. OS: Web Standards-based Apps for i.

Learn HTML 5 and Java. Script for i. OS: Web Standards-based Apps for i. Phone, i. Pad, and i. Pod touch, Scott Preston, Apress, 2012 Source: http: //www. amazon. com/Learn-HTML 5 -Java. Script-i. OS-Standards-based/dp/1430240385 8

Mobile Web App HTML Phone Data Templates CSS Java. Script External Data Mobile frameworks

Mobile Web App HTML Phone Data Templates CSS Java. Script External Data Mobile frameworks and Libraries Source: Scott Preston, Learn HTML 5 and Java. Script for i. OS: Web Standards-based Apps for i. Phone, i. Pad, and i. Pod touch, Apress, 2012 9

j. Query Mobile http: //jquerymobile. com/ 10

j. Query Mobile http: //jquerymobile. com/ 10

j. Query Mobile • Touch-Optimized Web Framework for Smartphones & Tablets – A unified,

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

j. Query http: //jquery. com/ 12

j. Query http: //jquery. com/ 12

j. Query • j. Query is a fast, small, and feature-rich Java. Script library.

j. Query • j. Query is a fast, small, and feature-rich Java. Script library. • j. Query is the most popular Java. Script library – versatility and extensibility • It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. Source: http: //jquery. com/ 13

j. Query UI http: //jqueryui. com/ 14

j. Query UI http: //jqueryui. com/ 14

j. Query Mobile • Seriously cross-platform with HTML 5 • write less, do more

j. Query Mobile • Seriously cross-platform with HTML 5 • write less, do more Source: http: //jquerymobile. com/ 15

j. Query Mobile Demos Source: http: //jquerymobile. com/demos/ 16

j. Query Mobile Demos Source: http: //jquerymobile. com/demos/ 16

j. Query Mobile Demos Source: http: //demos. jquerymobile. com/1. 4. 5/ 17

j. Query Mobile Demos Source: http: //demos. jquerymobile. com/1. 4. 5/ 17

j. Query Mobile Demos Source: http: //demos. jquerymobile. com/1. 4. 4/ 18

j. Query Mobile Demos Source: http: //demos. jquerymobile. com/1. 4. 4/ 18

j. Query Mobile Download Source: http: //jquerymobile. com/download/ 19

j. Query Mobile Download Source: http: //jquerymobile. com/download/ 19

j. Query Mobile Source: http: //jquerymobile. com/download/ 20

j. Query Mobile Source: http: //jquerymobile. com/download/ 20

viewport <!DOCTYPE html> <head> <title>Mobile App Title</title> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1">

viewport <!DOCTYPE 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. 5/jquery. mobile-1. 4. 5. min. css"> <script src="http: //code. jquery. com/jquery-1. 1. min. js"></script> <script src="http: //code. jquery. com/mobile/1. 4. 5/jquery. mobile-1. 4. 5. min. js"></script> </head> <body> </html> 21

jquery-1. 1. min. js jquery. mobile-1. 4. 5. min. css jquery. mobile-1. 4. 5.

jquery-1. 1. min. js jquery. mobile-1. 4. 5. min. css jquery. mobile-1. 4. 5. min. js <!DOCTYPE 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. 5/jquery. mobile 1. 4. 5. min. css"> <script src="http: //code. jquery. com/jquery 1. 1. min. js"></script> <script src="http: //code. jquery. com/mobile/1. 4. 5/jquery. mobile 1. 4. 5. min. js"></script> </head> <body> 22

j. Query Mobile Page http: //jsbin. com/qaxukucune/edit? html, output 23

j. Query Mobile Page http: //jsbin. com/qaxukucune/edit? html, output 23

j. Query Mobile Page <!DOCTYPE html> <head> <title>JQuery Mobile App</title> <meta charset="utf-8"> <meta name="viewport"

j. Query Mobile Page <!DOCTYPE html> <head> <title>JQuery Mobile App</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. 5/jquery. mobile 1. 4. 5. min. css" /> <script src="http: //code. jquery. com/jquery-1. 1. min. js"></script> <script src="http: //code. jquery. com/mobile/1. 4. 5/jquery. mobile-1. 4. 5. min. js"></script> </head> <body> <div data-role="page" id="page 1"> <div data-role="header" id = "header 1"> <h 1>Hello j. Query Mobile</h 1> </div> <div data-role="content" id = "content 1"> <p>Simple j. Query Mobile App<p> </div> <div data-role="footer" id = "footer 1" data-position="fixed"> <h 4>Footer 2015</h 4> </div> </body> </html> http: //jsbin. com/qaxukucune/edit? html, output 24

j. Query Mobile: Mobile Graded Browser Support Source: http: //jquerymobile. com/gbs/1. 4/ 25

j. Query Mobile: Mobile Graded Browser Support Source: http: //jquerymobile. com/gbs/1. 4/ 25

j. Query Mobile: Mobile Graded Browser Support • j. Query Mobile has broad support

j. Query Mobile: Mobile Graded Browser Support • j. Query Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and ereader platforms. • A-grade – Full enhanced experience with Ajax-based animated page transitions. – Apple i. OS 4 -8. 1 • Tested on the original i. Pad (4. 3 / 5. 0), i. Pad 2 (7. 2 / 8. 1 / 6. 1), i. Pad 3 (5. 1 / 6. 0), i. Pad Mini (7. 1), i. Pad Retina (7. 0), i. Phone 3 GS (4. 3), i. Phone 4 (4. 3 / 5. 1), i. Phone 4 S (5. 1 / 6. 0), i. Phone 5 (6. 0), i. Phone 5 S (7. 0), i. Phone 6 (8. 1) – Android 5. 0 (Lollipop) • Tested on a Nexus 6 – Android 4. 4 (Kit. Kat) • 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/ 26

W 3 schools. com j. Query Mobile Source: http: //www. w 3 schools. com/jquerymobile/default.

W 3 schools. com j. Query Mobile Source: http: //www. w 3 schools. com/jquerymobile/default. asp 27

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

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

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

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

codiqa demo https: //codiqa. com/demo 30

codiqa demo https: //codiqa. com/demo 30

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

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

Source: http: //jquerymobile. com/ 32

Source: http: //jquerymobile. com/ 32

Source: http: //jquerymobile. com/ 33

Source: http: //jquerymobile. com/ 33

Source: http: //jquerymobile. com/ 34

Source: http: //jquerymobile. com/ 34

http: //jsbin. com/Imorik. O/1/edit 35

http: //jsbin. com/Imorik. O/1/edit 35

<!DOCTYPE html> <head> <link href="http: //code. jquery. com/mobile/latest/jquery. mobile. css" rel="stylesheet" type="text/css" /> <script

<!DOCTYPE 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="page 1"> <div data-theme="b" data-role="header"> <h 3> Tamkang U. </h 3> </div> <div data-role="content"> <img src="https: //maps. googleapis. com/maps/api/staticmap? center=No. 151, Yingzhang Rd. , Tamsui, New Taipei, Taiwan& zoom=14& size=288 x 200& markers=Taipei& sensor=false" width="288" height="200"> <a data-role="button" href="#page 1"> Button </a> </div> <div data-theme="b" data-role="footer" data-position="fixed"> <h 3> Footer </h 3> </div> </body> </html> 36

Get inspired: Built with j. Query Mobile Source: http: //jquerymobile. com/ 37

Get inspired: Built with j. Query Mobile Source: http: //jquerymobile. com/ 37

http: //m. stanford. edu/ 38

http: //m. stanford. edu/ 38

http: //www. stanford. edu/ 39

http: //www. stanford. edu/ 39

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

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

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="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"> <h 1>Page Header</h 1> </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" dataposition="fixed"> <h 4>Page Footer</h 4> </div><!-- /footer --> </div><!-- /page --> <div data-role="footer" data-position="fixed"> 41

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/ 42

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/ 42

data-role=“listview” <ul data-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

data-role=“listview” <ul data-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> 43

List. View Example http: //www. learnhtml 5 book. com/chapter 5/jquerymobile/lists. html 44

List. View Example http: //www. learnhtml 5 book. com/chapter 5/jquerymobile/lists. html 44

List. View Example <div data-role="page" > <header data-role="header" data-theme="b"> <h 1>List Example</h 1> </header>

List. View Example <div data-role="page" > <header data-role="header" data-theme="b"> <h 1>List Example</h 1> </header> <section data-role="content"> <h 1>Basic List</h 1> <ul data-role="listview"> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> </ul> <h 1>List with Counts</h 1> <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> <h 1>List with Thumbnails</h 1> <ul data-role="listview"> <li><a href="index. html" class="ui-link-inherit"> <img src="staufs_thumb. jpg" class="ui-li-thumb"> <h 3 class="ui-li-heading">Staufs</h 3> <p class="ui-li-desc">Staufs Coffee</p> </a> </li> <li><a href="index. html" class="ui-link-inherit"> <img src="vino-vino_thumb. jpg" class="ui-li-thumb"> <h 3 class="ui-li-heading">Vino</h 3> <p class="ui-li-desc">Vino Restaurant</p> </a> </li> </ul> </section> http: //www. learnhtml 5 book. com/chapter 5/jquerymobile/lists. html 45

Form Element <form> <label for="textinput-s">Text Input: </label> <input type="text" name="textinput-s" id="textinput-s" placeholder="Text input" value=""

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> 46

data-theme=“a” <a <a <a href="#" href="#" data-role="button" data-role="button" data-icon="star" data-icon="star” data-icon="star" data-theme="a">data-theme="a"</a> data-theme="b">data-theme="b"</a> data-theme=”c">data-theme="c"</a>

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

data-icon=“star” <a href="#" data-role="button" data-icon="star" data-theme="c">data-icon="star"</a> Custom Icons. ui-icon-myapp-email { background-image: url("app-icon-email. png"); }

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

j. Query Mobile Icon Pack Source: http: //jqmiconpack. andymatthews. net/ 49

j. Query Mobile Icon Pack Source: http: //jqmiconpack. andymatthews. net/ 49

Theme. Roller for j. Query Mobile http: //jquerymobile. com/themeroller/ 50

Theme. Roller for j. Query Mobile http: //jquerymobile. com/themeroller/ 50

Theme. Roller for j. Query Mobile http: //jquerymobile. com/themeroller/ 51

Theme. Roller for j. Query Mobile http: //jquerymobile. com/themeroller/ 51

http: //grandviewave. com 52

http: //grandviewave. com 52

Demo Building Mobile Apps with j. Query Mobile http: //jsbin. com 53

Demo Building Mobile Apps with j. Query Mobile http: //jsbin. com 53

Mobile Myday http: //jsbin. com/Iw. OMezo 54

Mobile Myday http: //jsbin. com/Iw. OMezo 54

Online Editor: http: //jsbin. com/ 55

Online Editor: http: //jsbin. com/ 55

Compile. Online: Try j. Query. Mobile Online http: //www. compileonline. com/try_jquerymobile_online. php 56

Compile. Online: Try j. Query. Mobile Online http: //www. compileonline. com/try_jquerymobile_online. php 56

http: //jsbin. com/Iw. OMezo 57

http: //jsbin. com/Iw. OMezo 57

j. Query. Mobile js css <!DOCTYPE html> <head> <title>Min-Yuh Day Mobile App</title> <meta charset=utf-8

j. Query. Mobile js css <!DOCTYPE html> <head> <title>Min-Yuh Day Mobile App</title> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="http: //code. jquery. com/jquery-1. 9. 1. min. js"></script> <link type="text/css" href="http: //code. jquery. com/mobile/latest/jquery. mobile. min. css" rel="stylesheet" /> <script type="text/javascript" src="http: //code. jquery. com/mobile/latest/jquery. mobile. min. js"></script> </head> http: //jsbin. com/Iw. OMezo 58

Page 1 My. Home <body> <div data-role="page" id="first" data-theme="b"> <div data-role="header" data-theme="b"> <h 1>Min-Yuh

Page 1 My. Home <body> <div data-role="page" id="first" data-theme="b"> <div data-role="header" data-theme="b"> <h 1>Min-Yuh Day</h 1> <a href="index. html" data-icon="home">Home</a> </div><!-- /header --> <div data-role="content"> <div style="text-align: center"> <img style="width: 50%; height: 50%" src="http: //mail. tku. edu. tw/myday/images/Myday_Photo. jpg"> </div> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#Vita">Vita</a></li> <li><a href="#Education">Education</a></li> <li><a href="#Research">Research</a></li> <li><a href="#Publications">Publications</a></li> <li><a href="#Teaching">Teaching</a></li> <li><a href="#Professional. Activities">Professional Activities</a></li> </ul> <a href="http: //mail. tku. edu. tw/myday" data-role="button" data-icon="star">Classic Web</a> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-theme="b"> <h 4>Mobile Myday @ 2013</h 4> </div><!-- /footer --> </div><!-- /page 1 --> http: //jsbin. com/Iw. OMezo 59

Page 2 Vita <div data-role="page" id="Vita" data-add-back-btn="true" data-theme="b"> <div data-role="header" data-theme="b"> <h 1>Vita</h 1>

Page 2 Vita <div data-role="page" id="Vita" data-add-back-btn="true" data-theme="b"> <div data-role="header" data-theme="b"> <h 1>Vita</h 1> </div><!-- /header --> <div data-role="content"> <div style="text-align: center"> <img style="width: 50%; height: 50%" src="http: //mail. tku. edu. tw/myday/images/Myday_Photo. jpg"> </div> <p>Dr. Min-Yuh Day is an Assistant Professor in the Department of Information Management at Tamkang University, Taiwan. …. </p> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-theme="b"> <h 4>Mobile Myday @ 2013</h 4> </div><!-- /footer --> </div><!-- /page 2 Vita--> http: //jsbin. com/Iw. OMezo 60

Page 3 Education <div data-role="page" id="Education" data-theme="b"> <div data-role="header" data-position="inline" data-theme="b"> <a data-icon="back" data-rel="back"

Page 3 Education <div data-role="page" id="Education" data-theme="b"> <div data-role="header" data-position="inline" data-theme="b"> <a data-icon="back" data-rel="back" back-btn="true">Back</a> <h 1>Education</h 1> <a href="#" data-icon="home">Home</a> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true"> <li> <a href="#" class="ui-link-inherit"> <h 3 class="ui-li-heading">Ph. D. </h 3> <p class="ui-li-desc">Department of Information Management, National Taiwan University, 2001 -2010</p> </a> </li> <a href="#" class="ui-link-inherit"> <h 3 class="ui-li-heading">M. B. A. </h 3> <p class="ui-li-desc">Department of Information Management, Tamkang University, 1993 -1995</p> </a> </li> <a href="#" class="ui-link-inherit"> <h 3 class="ui-li-heading">B. B. A. </h 3> <p class="ui-li-desc">Department of Information Management, Tamkang University, 1989 -1993</p> </a> </li> </ul> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-theme="b"> <h 4>Mobile Myday @ 2013</h 4> </div><!-- /footer --> </div><!-- /page 3 Education--> </body> </html> http: //jsbin. com/Iw. OMezo 61

Mobile Myday http: //jsbin. com/Iw. OMezo 62

Mobile Myday http: //jsbin. com/Iw. OMezo 62

Mobile Myday http: //mail. tku. edu. tw/myday/m 63

Mobile Myday http: //mail. tku. edu. tw/myday/m 63

Page 4 Research <div data-role="page" id="Research" data-theme="b"> <div data-role="header" data-position="inline" data-theme="b"> <a data-icon="back" data-rel="back"

Page 4 Research <div data-role="page" id="Research" data-theme="b"> <div data-role="header" data-position="inline" data-theme="b"> <a data-icon="back" data-rel="back" back-btn="true">Back</a> <h 1>Myday Research</h 1> <a href="#My. Home" data-icon="home">Home</a> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter-placeholder="Search topics. . . " data-theme="c"> <li data-role="list-divider" data-theme="c">Research Interests</li> <li data-icon="info"><a href="#"><p>Social Media Service</p></a></li> <li data-icon="info"><a href="#"><p>Mobile Apps Marketing</p></a></li> <li data-icon="info"><a href="#"><p>Data Mining and Text Mining</p></a></li> <li data-icon="info"><a href="#"><p>Business Intelligence</p></a></li> <li data-icon="info"><a href="#"><p>Big Data Analytics</p></a></li> <li data-icon="info"><a href="#"><p>Information Systems Evaluation</p></a></li> <li data-icon="info"><a href="#"><p>Question Answering Systems</p></a></li> <li data-icon="info"><a href="#"><p>Knowledge Management</p></a></li> <li data-icon="info"><a href="#"><p>Electronic Commerce</p></a></li> <li data-icon="info"><a href="#"><p>Learning Technology</p></a></li> <li data-icon="info"><a href="#"><p>Intelligent Information Systems</p></a></li> <li data-icon="info"><a href="#"><p>Biomedical Informatics</p></a></li> </ul> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="navbar"> <ul> <li><a href="#My. Home" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="home">Home</a></li> <li><a href="#Research" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="star">Research</a></li> <li><a href="#Teaching" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="check">Teaching</a></li> <li><a href="#About" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="grid">About</a></li> </ul> </div><!-- /footer --> </div><!-- /page 4 Research--> http: //mail. tku. edu. tw/myday/m 64

Page 5 Teaching <div data-role="page" id="Teaching" data-theme="b"> <div data-role="header" data-position="inline" data-theme="b"> <a data-icon="back" data-rel="back"

Page 5 Teaching <div data-role="page" id="Teaching" data-theme="b"> <div data-role="header" data-position="inline" data-theme="b"> <a data-icon="back" data-rel="back" back-btn="true">Back</a> <h 1>Myday Teaching</h 1> <a href="#My. Home" data-icon="home">Home</a> </div><!-- /header --> <div data-role="content"> <div style="text-align: center"> <img style="width: 25%; height: 25%" src="http: //mail. tku. edu. tw/myday/images/Myday_Photo. jpg"> </div> <ul data-role="listview" data-inset="true" data-filter-placeholder="Search courses. . . " data-theme="c"> <li data-role="list-divider" data-theme="c">Fall 2013 (2013. 09 -2014. 01)<span class="ui-li-count">3</span></li> <li><a href="http: //mail. tku. edu. tw/myday/teaching. htm#1021 SMAP" rel="external"><p>Social Media Apps Programming (Fall 2013)</p></a></li> <li><a href="http: //mail. tku. edu. tw/myday/teaching. htm#1021 CSIM 4 B" rel="external"><p>Case Study for Information Management (Fall 2013)</p></a></li> <li><a href="http: //mail. tku. edu. tw/myday/teaching. htm#1021 IS" rel="external"><p>Digital Information Services (Fall 2013)</p></a></li> <li data-role="list-divider" data-theme="c">Spring 2013 (2013. 02 -2013. 06)<span class="ui-li-count">4</span></li> <li><a href="http: //mail. tku. edu. tw/myday/teaching. htm#1012 BIT" rel="external"><p>Business Intelligence Trends (Spring 2013)</p></a></li> <li><a href="http: //mail. tku. edu. tw/myday/teaching. htm#1012 SMMM" rel="external"><p>Social Media Marketing Management (Spring 2013)</p></a></li> <li><a href="http: //mail. tku. edu. tw/myday/teaching. htm#1012 DM" rel="external"><p>Data Mining (Spring 2013)</p></a></li> <li><a href="http: //mail. tku. edu. tw/myday/teaching. htm#1012 ISM" rel="external"><p>The Issue of Information Security Management (Spring 2013)</p></a></li> </ul> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="navbar"> <ul> <li><a href="#My. Home" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="home">Home</a></li> <li><a href="#Research" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="star">Research</a></li> <li><a href="#Teaching" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="check">Teaching</a></li> <li><a href="#About" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="grid">About</a></li> </ul> </div><!-- /footer --> </div><!-- /page 5 Teaching--> http: //mail. tku. edu. tw/myday/m 65

Summary • j. Query Mobile – Java. Script Library – j. Query UI •

Summary • j. Query Mobile – Java. Script Library – j. Query UI • Demo – Building Mobile Apps with JQuery Mobile 66

References • Learn HTML 5 and Java. Script for i. OS: Web Standards-based Apps

References • Learn HTML 5 and Java. Script for i. OS: Web Standards-based Apps for i. Phone, i. Pad, and i. Pod touch, Scott Preston, Apress, 2012 • j. Query Mobile – http: //jquerymobile. com/ • W 3 schools j. Query Mobile – http: //www. w 3 schools. com/jquerymobile/default. asp 67