Presentation is loading. Please wait.

Presentation is loading. Please wait.

Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University

Similar presentations


Presentation on theme: "Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University"— Presentation transcript:

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

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

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

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

5 Outline Mobile Apps HTML5 – Hyper Text Markup Language (version 5)(2012) – Content and Structure CSS3 – Cascading Style Sheets (version 3) – Presentation, Layout and User Interface JavaScript – Behavior and Business Logic 5

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

7 App Development Comparison 7 Source: Web Apps Hybrid Apps Native Apps Full Fast Mandatory Expensive Partial Very Fast Available Reasonable Not Available None Reasonable Available Native Speed as Necessary Full Low Overhead Device Access Speed Development Cost App Store Approval Process

8 8 Building Android Apps with HTML, CSS, and JavaScript: Making Native Apps with Standards-Based Web Tools, Jonathan Stark & Brian Jepson, O’reilly, 2012 Source:

9 Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa, Jonathan Stark, O’reilly, Source:

10 10 Source: Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Scott Preston, Apress, 2012

11 Learn HTML5 and JavaScript for iOS 11

12 Mobile Apps Mobile Website – Classic Website Mobile Apps – Web Apps Responsive Web Design (RWD) 12 Source: Scott Preston, Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Apress, 2012

13 Mobile Website Classic Website 13

14 Mobile Apps (Web Apps) 14

15 Responsive Web Design (RWD) 15

16 Mobile Web App 16 HTML JavaScript CSS Phone Data External Data Templates 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

17 Mobile Web App Organizing files in directories Classic Website – / - for all HTML files – /css - for all CSS – /js - for all JavaScript – /images - for all images Mobile Web App – /m -for all HTML files – /m/css - for all CSS – /m/js - for all JavaScript – /m/images - for all images. 17 Source: Scott Preston, Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Apress, 2012

18 HTML5 18

19 HTML5 Game 19

20 Objective-C to JavaScript 20

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

22 HTML Versions VersionYear HTML1991 HTML+1993 HTML HTML HTML XHTML HTML Source:

23 The Declaration 23 HTML5 HTML 4.01 XHTML 1.0 Source:

24 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 24 My Title Hello World Source:

25 HTML Tag, Element, Attribute 25 My Title content This is a paragraph. HTML Element

26 26 My Title Tag Start Tag End Tag Opening Tag Closing Tag HTML Element HTML Tag, Element, Attribute

27 27 Element TagAttibute HTML Tag, Element, Attribute

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

29 What HTML5 is Not It’s Not XHTML – This is a div – This is another div It’s Not HTML4+1 HTML5 is Not Just Markup – Not just tags – It’s also a set of JavaScript APIs Provide a richer user experience 29 Source: Scott Preston, Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Apress, 2012

30 30 HTML5 is The New HTML Standard Source:

31 HTML5 is The New HTML Standard 31 Source:

32 New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D Graphics Local Storage Local SQL Database Web Applications 32 Source: HTML5 is The New HTML Standard

33 HTML5 Multimedia With HTML5, playing video and audio is easier than ever. HTML5 33 Your browser does not support the video tag. Source:

34 HTML5 Graphics With HTML5, drawing graphics is easier than ever: Using the element Using inline SVG Using CSS3 2D/3D 34 Source:

35 HTML5 Applications With HTML5, web application development is easier than ever. Local data storage Local file access Local SQL database Application cache Javascript workers XHTMLHttpRequest 2 35 Source:

36 Semantic Elements HTML5 Forms Semantic Elements – New elements for headers, footers, menus, sections, and articles. HTML5 Forms – New form elements, – new attributes, – new input types, – automatic validation. 36 Source:

37 HTML5 uses CSS3 New Selectors New Properties Animations 2D/3D Transformations Rounded Corners Shadow Effects Downloadable Fonts 37 Source:

38 HTML5 index.html 38 My Title Hello World

39 CSS3 39

40 Cascading Style Sheets (CSS) a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. 40 Source:

41 CSS3 CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS. 41 Source:

42 CSS 42

43 css 43

44 CSS 44 body {background-color:yellow;} h1 {color:green} p {color:red;} div {color:blue; font-size:18px;}

45 45 JavaScript

46 JavaScript is a Scripting Language – A scripting language is a lightweight programming language. – JavaScript is programming code that can be inserted into HTML pages. – JavaScript code can be executed by all modern web browsers. – JavaScript is easy to learn. 46 Source:

47 JavaScript: Writing Into HTML Output 47 document.write(" This is a heading "); document.write(" This is a paragraph ");

48 JavaScript: Reacting to Events 48 Click Me!

49 JavaScript: Changing HTML Content 49 x=document.getElementById("demo"); x.innerHTML="Hello JavaScript”;

50 MVC Framework of Mobile Apps (HTML5, CSS3, JavaScript) 50 Source:

51 HTML5 Editors 51

52 Maqetta: Online HTML5 WYSIWYG Editor 52

53 Aloha Editor: HTML5 WYSIWYG editor 53

54 Adobe Dreamweaver 54

55 BlueGriffon: WYSIWYG content editor 55

56 Online Editor: 56

57 Notepad++ 57

58 Sublime Text 58

59 HTML5 Mobile Apps Simulators 59

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

61 Online browser simulator: ipadpeek.com 61

62 Opera Mobile Emulator 62

63 63 iPhone5Simulator

64 Xcode iPhone Simulator 64

65 65

66 66

67 67

68 68

69 Demo Building Mobile Apps with HTML5, CSS3, and JavaScript 69

70 HTML5 CSS3 JavaScript Hello World 70 Hello World HTML5 by Myday body {background-color:yellow;} h1 {color:green} p {color:red;} div {color:blue; font-size:18px;} function sayHello() { var strNameInput = document.getElementById('txtNameInput').value; var strOutput = "Hello, my friend, " + strNameInput; document.getElementById('divOutput').innerHTML = strOutput; } Hello, World! What's your name? Press Me! Hi index.html

71 Online Editor: 71

72 72 CompileOnline: Try jQueryMobile Online

73 73

74 HTML5 74

75 HTML5 Event 75

76 HTML5 viewport 76

77 HTML5 77

78 CSS3 78

79 JavaScript 79

80 Mobile App with HTML5, CSS3, and JavaScript 80

81 81

82 HTML5 CSS3 JavaScript Hello World 82 Hello World HTML5 by Myday body {background-color:yellow;} h1 {color:green} p {color:red;} div {color:blue; font-size:18px;} function sayHello() { var strNameInput = document.getElementById('txtNameInput').value; var strOutput = "Hello, my friend, " + strNameInput; document.getElementById('divOutput').innerHTML = strOutput; } Hello, World! What's your name? Press Me! Hi index.html

83 HTML5 CSS3 JavaScript Hello World 83 Hello World HTML5 by Myday body {background-color:yellow;} h1 {color:green} p {color:red;} div {color:blue; font-size:18px;} function sayHello() { var strNameInput = document.getElementById('txtNameInput').value; var strOutput = "Hello, my friend, " + strNameInput; document.getElementById('divOutput').innerHTML = strOutput; } Hello, World! What's your name? Press Me! Hi index.html Hello, World! What's your name? Press Me! Hi

84 HTML5 CSS3 JavaScript Hello World 84 Hello World HTML5 by Myday body {background-color:yellow;} h1 {color:green} p {color:red;} div {color:blue; font-size:18px;} function sayHello() { var strNameInput = document.getElementById('txtNameInput').value; var strOutput = "Hello, my friend, " + strNameInput; document.getElementById('divOutput').innerHTML = strOutput; } Hello, World! What's your name? Press Me! Hi index.html body {background-color:yellow;} h1 {color:green} p {color:red;} div {color:blue; font-size:18px;}

85 HTML5 CSS3 JavaScript Hello World 85 Hello World HTML5 by Myday body {background-color:yellow;} h1 {color:green} p {color:red;} div {color:blue; font-size:18px;} function sayHello() { var strNameInput = document.getElementById('txtNameInput').value; var strOutput = "Hello, my friend, " + strNameInput; document.getElementById('divOutput').innerHTML = strOutput; } Hello, World! What's your name? Press Me! Hi index.html function sayHello() { var strNameInput = document.getElementById('txtNameInput').value; var strOutput = "Hello, my friend, " + strNameInput; document.getElementById('divOutput').innerHTML = strOutput; }

86 Summary Mobile Apps HTML5 – Hyper Text Markup Language (version 5)(2012) – Content and Structure CSS3 – Cascading Style Sheets (version 3) – Presentation, Layout and User Interface JavaScript – Behavior and Business Logic 86

87 References Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Scott Preston, Apress, 2012 Building Android Apps with HTML, CSS, and JavaScript: Making Native Apps with Standards-Based Web Tools, Jonathan Stark & Brian Jepson, O’reilly, 2012 Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa, Jonathan Stark, O’reilly, 2010 What is HTML5? – https://www.youtube.com/watch?v=4oX9DXH4fiA https://www.youtube.com/watch?v=4oX9DXH4fiA What is CSS3? – https://www.youtube.com/watch?v=oHmm9dMAW0s https://www.youtube.com/watch?v=oHmm9dMAW0s What is JavaScript? – https://www.youtube.com/watch?v=955L9-NoBoE https://www.youtube.com/watch?v=955L9-NoBoE HTML5 Tutorial For Beginners – https://www.youtube.com/watch?v=9gTw2EDkaDQ https://www.youtube.com/watch?v=9gTw2EDkaDQ CSS Tutorial for Beginners – https://www.youtube.com/watch?v=Wz2klMXDqF4 https://www.youtube.com/watch?v=Wz2klMXDqF4 JavaScript & jQuery Tutorial for Beginners – https://www.youtube.com/watch?v=VRnQOcVclS8 https://www.youtube.com/watch?v=VRnQOcVclS8 87


Download ppt "Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University"

Similar presentations


Ads by Google