Tamkang University Social Media Apps Programming Mobile Apps

Tamkang University Social Media Apps Programming Mobile Apps Using HTML 5/CSS 3/Java. Script 1031 SMAP 05 TLMXM 1 A (8687) (M 2143) (Fall 2014) (MIS MBA) (2 Credits, Elective) [Full English Course] Thu 8, 9 (15: 10 -17: 00) V 201 Min-Yuh Day, Ph. D. Assistant Professor Department of Information Management Tamkang University http: //mail. tku. edu. tw/myday 2014 -10 -15

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 / i. OS Apps Programming • 3 2014/10/01 Developing Android Native Apps with Java (Eclipse) (MIT App Inventor) • 4 2014/10/08 Developing i. Phone / i. Pad Native Apps with Swift / Objective-C (XCode) • 5 2014/10/15 Mobile Apps Using HTML 5/CSS 3/Java. Script • 6 2014/10/22 j. Query Mobile 2

Course Schedule (2/3) Week Date Subject/Topics • 7 2014/10/29 Create Hybrid Apps with Phonegap • 8 2014/11/05 j. Query Mobile/Phonegap • 9 2014/11/12 j. Query 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 3

Course Schedule (3/3) Week • 13 • 14 • 15 Date Subject/Topics 2014/12/10 Google App Engine 2014/12/17 Google Map API 2014/12/24 Facebook API (Facebook Java. Script SDK) (Integrate Facebook with i. OS/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) 4

Outline • Mobile Apps • HTML 5 – Hyper Text Markup Language (version 5)(2012) – Content and Structure • CSS 3 – Cascading Style Sheets (version 3) – Presentation, Layout and User Interface • Java. Script – Behavior and Business Logic 5

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

Building Android Apps with HTML, CSS, and Java. Script: Making Native Apps with Standards-Based Web Tools, Jonathan Stark & Brian Jepson, O’reilly, 2012 Source: http: //www. amazon. com/Building-Android-Apps-HTML-Java. Script/dp/1449316417 8

Building i. Phone Apps with HTML, CSS, and Java. Script: Making App Store Apps Without Objective-C or Cocoa, Jonathan Stark, O’reilly, 2010 Source: http: //www. amazon. com/Building-i. Phone-Apps-HTML-Java. Script/dp/0596805780 9

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 10

Learn HTML 5 and Java. Script for i. OS http: //www. learnhtml 5 book. com/ 11

Mobile Apps • Mobile Website – Classic Website • Mobile Apps – Web Apps • Responsive Web Design (RWD) 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 12

Mobile Website Classic Website http: //grandviewave. com/ 13

Mobile Apps (Web Apps) http: //grandviewave. com/ 14

Responsive Web Design (RWD) http: //grandviewave. com/m/ 15

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 16

Mobile Web App Organizing files in directories • Classic Website – / - for all HTML files – /css - for all CSS – /js - for all Java. Script – /images - for all images • Mobile Web App – /m -for all HTML files – /m/css - for all CSS – /m/js - for all Java. Script – /m/images - for all images. 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 17

HTML 5 18

HTML 5 Game http: //www. cuttherope. ie/ 19

Objective-C to Java. Script http: //www. cuttherope. ie/dev/ 20

Cut the Rope App Source: https: //itunes. apple. com/app/cut-the-rope/id 380293530? mt=8 21

HTML Versions Version HTML+ HTML 2. 0 HTML 3. 2 HTML 4. 01 XHTML 1. 0 HTML 5 Year 1991 1993 1995 1997 1999 2000 2012 Source: http: //www. w 3 schools. com/html_intro. asp 22

The <!DOCTYPE> Declaration HTML 5 <!DOCTYPE html> HTML 4. 01 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> XHTML 1. 0 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> Source: http: //www. w 3 schools. com/html_intro. asp 23

What is HTML? • HTML is a language for describing web pages. – HTML stands for Hyper Text Markup Language – HTML is a markup language – A markup language is a set of markup tags – The tags describe document content – HTML documents contain HTML tags and plain text – HTML documents are also called web pages <!DOCTYPE html> <head> <meta charset=“UTF-8”> <title>My Title</title> </head> <body> Hello World </body> </html> Source: http: //www. w 3 schools. com/html_intro. asp 24

HTML Tag, Element, Attribute HTML Element <title>My Title</title> <p>This is a paragraph. </p> <tagname>content</tagname> 25

HTML Tag, Element, Attribute HTML Element <title>My Title</title> Tag Start Tag Opening Tag End Tag Closing Tag 26

HTML Tag, Element, Attribute Element <meta charset=“UTF-8”> Tag Attibute 27

What is HTML 5 • HTML 5 is The New HTML Standard – What HTML 5 is Not • The new HTML 5 structural elements and attributes • The new HTML 5 form input types and attributes 28

What HTML 5 is Not • It’s Not XHTML – <div id=container>This is a div </div> – <div id="container">This is another div<br/></div> • It’s Not HTML 4+1 • HTML 5 is Not Just Markup – Not just tags – It’s also a set of Java. Script APIs • Provide a richer user experience 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 29

HTML 5 is The New HTML Standard Source: http: //www. w 3. org/html/logo/ 30

HTML 5 is The New HTML Standard Source: http: //www. w 3 schools. com/html 5_intro. asp 31

HTML 5 is The New HTML Standard • • New Elements New Attributes Full CSS 3 Support Video and Audio 2 D/3 D Graphics Local Storage Local SQL Database Web Applications Source: http: //www. w 3 schools. com/html 5_intro. asp 32

HTML 5 Multimedia With HTML 5, playing video and audio is easier than ever. HTML> • HTML 5 <video> <!DOCTYPE <html> • HTML 5 <audio> <body> <video width="320" height="240" controls> <source src="movie. mp 4" type="video/mp 4"> <source src="movie. ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html> Source: http: //www. w 3 schools. com/html 5_intro. asp 33

HTML 5 Graphics With HTML 5, drawing graphics is easier than ever: • Using the <canvas> element • Using inline SVG • Using CSS 3 2 D/3 D Source: http: //www. w 3 schools. com/html 5_intro. asp 34

HTML 5 Applications With HTML 5, web application development is easier than ever. • • • Local data storage Local file access Local SQL database Application cache Javascript workers XHTMLHttp. Request 2 Source: http: //www. w 3 schools. com/html 5_intro. asp 35

Semantic Elements HTML 5 Forms • Semantic Elements – New elements for headers, footers, menus, sections, and articles. • HTML 5 Forms – New form elements, – new attributes, – new input types, – automatic validation. Source: http: //www. w 3 schools. com/html 5_intro. asp 36

HTML 5 uses CSS 3 • • New Selectors New Properties Animations 2 D/3 D Transformations Rounded Corners Shadow Effects Downloadable Fonts Source: http: //www. w 3 schools. com/html 5_intro. asp 37

HTML 5 index. html <!DOCTYPE html> <head> <meta charset=“UTF-8”> <title>My Title</title> </head> <body> Hello World </body> </html> 38

CSS 3 39

Cascading Style Sheets (CSS) • a simple mechanism for adding style (e. g. , fonts, colors, spacing) to Web documents. Source: http: //www. w 3. org/Style/CSS/ 40

CSS 3 • CSS 3 is the latest standard for CSS. • CSS 3 is completely backwards-compatible with earlier versions of CSS. Source: http: //www. w 3 schools. com/css 3_intro. asp 41

CSS http: //www. w 3 schools. com/css_syntax. asp 42

css <link rel=“stylesheet” type=“text/css” href=“mystyle 1. css”> 43

CSS <style> body {background-color: yellow; } h 1 {color: green} p {color: red; } div {color: blue; font-size: 18 px; } </style> 44

Java. Script 45

Java. Script • Java. Script is a Scripting Language – A scripting language is a lightweight programming language. – Java. Script is programming code that can be inserted into HTML pages. – Java. Script code can be executed by all modern web browsers. – Java. Script is easy to learn. Source: http: //www. w 3 schools. com/js/js_intro. asp 46

Java. Script: Writing Into HTML Output document. write("<h 1>This is a heading</h 1>"); document. write("<p>This is a paragraph</p>"); 47

Java. Script: Reacting to Events <button type="button" onclick="alert('Welcome!')"> Click Me!</button> 48

Java. Script: Changing HTML Content x=document. get. Element. By. Id("demo"); x. inner. HTML="Hello Java. Script”; 49

MVC Framework of Mobile Apps (HTML 5, CSS 3, Java. Script) Source: http: //sc 5. io/blog/2012/02/anatomy-of-a-html 5 -app/ 50

HTML 5 Editors 51

Maqetta: Online HTML 5 WYSIWYG Editor http: //maqetta. org/ 52

Aloha Editor: HTML 5 WYSIWYG editor http: //www. aloha-editor. org/ 53

Adobe Dreamweaver http: //www. adobe. com/products/dreamweaver. html 54

Blue. Griffon: WYSIWYG content editor http: //www. bluegriffon. org/ 55

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

Notepad++ http: //notepad-plus. org/ 57

Sublime Text http: //www. sublimetext. com/ 58

HTML 5 Mobile Apps Simulators 59

Ripple Emulator https: //chrome. google. com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc? hl=en 60

Online browser simulator: ipadpeek. com http: //ipadpeek. com/ 61

Opera Mobile Emulator http: //www. opera. com/developer/mobile-emulator 62

i. Phone 5 Simulator http: //iphone 5 simulator. com/ 63

Xcode i. Phone Simulator 64

http: //grandviewave. com 65

http: //grandviewave. com 66

http: //grandviewave. com 67

http: //grandviewave. com 68

Demo Building Mobile Apps with HTML 5, CSS 3, and Java. Script http: //jsbin. com 69

index. html HTML 5 CSS 3 Java. Script Hello World <!DOCTYPE html> <head> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World HTML 5 by Myday</title> <style> body {background-color: yellow; } h 1 {color: green} p {color: red; } div {color: blue; font-size: 18 px; } </style> <script language="javascript"> function say. Hello() { var str. Name. Input = document. get. Element. By. Id('txt. Name. Input'). value; var str. Output = "Hello, my friend, " + str. Name. Input; document. get. Element. By. Id('div. Output'). inner. HTML = str. Output; } </script> </head> <body> <h 1>Hello, World!</h 1> <p>What's your name? </p> <input id="txt. Name. Input" type="text"> <button type="button" id="btn. Click 1" on. Click="say. Hello()">Press Me!</button> <div id="div. Output">Hi</div> </body> </html> http: //jsbin. com/o. WOs. Uc. I/1 70

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

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

http: //jsbin. com/o. WOs. Uc. I/1/edit 73

HTML 5 74

HTML 5 Event 75

HTML 5 viewport 76

HTML 5 77

CSS 3 78

Java. Script 79

Mobile App with HTML 5, CSS 3, and Java. Script 80

http: //jsbin. com/o. WOs. Uc. I/1/edit 81

index. html HTML 5 CSS 3 Java. Script Hello World <!DOCTYPE html> <head> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World HTML 5 by Myday</title> <style> body {background-color: yellow; } h 1 {color: green} p {color: red; } div {color: blue; font-size: 18 px; } </style> <script language="javascript"> function say. Hello() { var str. Name. Input = document. get. Element. By. Id('txt. Name. Input'). value; var str. Output = "Hello, my friend, " + str. Name. Input; document. get. Element. By. Id('div. Output'). inner. HTML = str. Output; } </script> </head> <body> <h 1>Hello, World!</h 1> <p>What's your name? </p> <input id="txt. Name. Input" type="text"> <button type="button" id="btn. Click 1" on. Click="say. Hello()">Press Me!</button> <div id="div. Output">Hi</div> </body> </html> http: //jsbin. com/o. WOs. Uc. I/1 82

index. html HTML 5 CSS 3 Java. Script Hello World <!DOCTYPE html> <head> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World HTML 5 by Myday</title> <style> body {background-color: yellow; } h 1 {color: green} p {color: red; } div {color: blue; font-size: 18 px; } </style> <script language="javascript"> function say. Hello() { var str. Name. Input = document. get. Element. By. Id('txt. Name. Input'). value; var str. Output = "Hello, my friend, " + str. Name. Input; document. get. Element. By. Id('div. Output'). inner. HTML = str. Output; } <body> </script> <h 1>Hello, World!</h 1> </head> <body><p>What's your name? </p> <h 1>Hello, World!</h 1> <input type="text"> <p>What's yourid="txt. Name. Input" name? </p> <input id="txt. Name. Input" type="text"> <button type="button" id="btn. Click 1" on. Click="say. Hello()">Press Me!</button> <div id="div. Output">Hi</div> </body> </html> http: //jsbin. com/o. WOs. Uc. I/1 Me!</button> 83

index. html HTML 5 CSS 3 Java. Script Hello World <!DOCTYPE html> <head> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World HTML 5 by Myday</title> <style> body {background-color: yellow; } h 1 {color: green} p {color: red; } div {color: blue; font-size: 18 px; } </style> <script language="javascript"> function say. Hello() { var str. Name. Input = document. get. Element. By. Id('txt. Name. Input'). value; var str. Output = "Hello, my friend, " + str. Name. Input; document. get. Element. By. Id('div. Output'). inner. HTML = str. Output; } </script> </head> <body> <h 1>Hello, World!</h 1> <p>What's your name? </p> <input id="txt. Name. Input" type="text"> <button type="button" id="btn. Click 1" on. Click="say. Hello()">Press Me!</button> <div id="div. Output">Hi</div> </body> </html> <style> body {background-color: yellow; } h 1 {color: green} p {color: red; } div {color: blue; font-size: 18 px; } </style> http: //jsbin. com/o. WOs. Uc. I/1 84

HTML 5 CSS 3 Java. Script <script language="javascript"> index. html Hello World function say. Hello() <!DOCTYPE html> <head> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hello World HTML 5 by Myday</title> <style> body {background-color: yellow; } h 1 {color: green} p {color: red; } div {color: blue; font-size: 18 px; } </style> <script language="javascript"> function say. Hello() { var str. Name. Input = document. get. Element. By. Id('txt. Name. Input'). value; var str. Output = "Hello, my friend, " + str. Name. Input; document. get. Element. By. Id('div. Output'). inner. HTML = str. Output; } </script> </head> <body> <h 1>Hello, World!</h 1> <p>What's your name? </p> <input id="txt. Name. Input" type="text"> <button type="button" id="btn. Click 1" on. Click="say. Hello()">Press Me!</button> <div id="div. Output">Hi</div> </body> </html> { var str. Name. Input = document. get. Element. By. Id('txt. Name. Input'). value; var str. Output = "Hello, my friend, " + str. Name. Input; document. get. Element. By. Id('div. Output'). inner. HTML = str. Output; } </script> http: //jsbin. com/o. WOs. Uc. I/1 85

Summary • Mobile Apps • HTML 5 – Hyper Text Markup Language (version 5)(2012) – Content and Structure • CSS 3 – Cascading Style Sheets (version 3) – Presentation, Layout and User Interface • Java. Script – Behavior and Business Logic 86

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 • Building Android Apps with HTML, CSS, and Java. Script: Making Native Apps with Standards-Based Web Tools, Jonathan Stark & Brian Jepson, O’reilly, 2012 • Building i. Phone Apps with HTML, CSS, and Java. Script: Making App Store Apps Without Objective-C or Cocoa, Jonathan Stark, O’reilly, 2010 • • • What is HTML 5? – https: //www. youtube. com/watch? v=4 o. X 9 DXH 4 fi. A What is CSS 3? – https: //www. youtube. com/watch? v=o. Hmm 9 d. MAW 0 s What is Java. Script? – https: //www. youtube. com/watch? v=955 L 9 -No. Bo. E HTML 5 Tutorial For Beginners – https: //www. youtube. com/watch? v=9 g. Tw 2 EDka. DQ CSS Tutorial for Beginners – https: //www. youtube. com/watch? v=Wz 2 kl. MXDq. F 4 Java. Script & j. Query Tutorial for Beginners – https: //www. youtube. com/watch? v=VRn. QOc. Vcl. S 8 87