chapter 16 mobile web page - skkumonet.skku.edu/wp-content/uploads/2018/08/chapter-16... ·...

Web Programming Networking Laboratory 1/26

Sungkyunkwan University

Copyright 2000-2012 Networking LaboratoryCopyright 2000-2018 Networking Laboratory

Chapter 16

Mobile Web Page

Prepared by J. Jung and H. Choo


Native App vs. Mobile Web App

Native App Mobile Web App

Execution Speed Fast Slow

PlatformMust be produced

for each platform

One version runs

on all platforms

Release Releasing via App Market No need to release

Version UpdateIt takes a considerable

amount of timeImmediately reflected

Offline Available Slightly Available


Mobile Web & Desktop Web

Mobile devices have smaller screen size and lower processing power

than desktops.

Mobile web browsers are quite diverse.

Mobile devices and desktops have different user interfaces. Mobile

devices are mostly touch-based, while desktops still use a mouse and

keyboard.


Responsive Web Design

Responsive web design: A page where a web page responds

appropriately by reading the user’s environment

By web designer Ethan Marcotte


Responsive Web Design Example (1/5)

Understanding the syntax of responsive web design

<!doctype html><html lang="ko"><head><meta charset="utf-8"><title>CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>

#jb-container {width: 940px;margin: 10px auto;padding: 20px;border: 1px solid #bcbcbc;

}

#jb-header {padding: 20px;margin-bottom: 20px;border: 1px solid #bcbcbc;

}



#jb-content {width: 580px;padding: 20px;margin-bottom: 20px;float: left;border: 1px solid #bcbcbc;

}

#jb-sidebar {width: 260px;padding: 20px;margin-bottom: 20px;float: right;border: 1px solid #bcbcbc;

}

#jb-footer {clear: both;padding: 20px;border: 1px solid #bcbcbc;

}



@media (max-width: 480px) {/* 너비가 480px 이하부터는아래스타일적용 */#jb-container {

width: auto;}

#jb-content {float: none;width: auto;

}

#jb-sidebar {float: none;width: auto;

}}

</style></head>


Responsive Web Design Example (5/5)<body><div id="jb-container">

<div id="jb-header"><h1>Responsive Layout</h1>

</div><div id="jb-content"><h2>Content</h2><p>Lorem ipsum dolor sit amet, … adipiscing risus.</p>

</div><div id="jb-sidebar"><h2>Sidebar</h2><ul>

<li>Lorem</li><li>Ipsum</li><li>Dolor</li>

</ul></div><div id="jb-footer"><p>Copyright</p>

</div></div>

</body></html>


JQuery Mobile

JQuery Mobile is one of the mobile frameworks.

JQuery Mobile touch-based HTML5 UI framework

Web applications written in JQuery Mobile can be executed in the

same way without changing the source on all kinds of smartphones,

tablets and desktops.


JQuery Mobile Example (1/2)

<!DOCTYPE html><html><head>

<title>My Page</title><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.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

Understanding the syntax of JQuery Mobile

JQuery Mobile Example (2/2)

<body><div data-role="page">

<div data-role="header">

<h1>My Title</h1></div><div data-role="content">

<p>안녕하세요? jQuery에오늘입문하였습니다.</p></div><div data-role="footer">

<h4>Thank you!</h4></div>

</div></body></html>


JQuery Mobile Event

Tab Event

$("#element").on("tap", function() {});

TabHold Event

$("#element").on("taphold", function() {});

Swipe Event

$("#element").on("swipe", function() {});

SwipeLeft Event

$("#element").on("swipeleft", function() {});

SwipeRight Event

$("#element").on("swiperight", function() {});

Orientation Change Event

$(window).on("orientationchange", function() {});

JQuery Mobile Components (1/12)Grid Layout

<body><div data-role="page" id="page1"><div data-role="header"> <h1>header 영역</h1> </div> <div data-role="content"> <div class="ui-grid-d"> <div class="ui-block-a"><div class="ui-bar ui-bar-a">블록 1</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-b">블록 2</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-c">블록 3</div></div> <div class="ui-block-d"><div class="ui-bar ui-bar-d">블록 4</div></div> <div class="ui-block-e"><div class="ui-bar ui-bar-e">블록 5</div></div> </div> </div> <div data-role="footer" class="ui-bar ui-grid-b" data-position="fixed"> <div class="ui-block-a"><a href="#" data-role="button">버튼 1</a></div> <div class="ui-block-b"><a href="#" data-role="button">버튼 2</a></div> <div class="ui-block-c"><a href="#" data-role="button">버튼 3</a></div> </div> </div></body>

Understanding the syntax of Grid Layout in JQuery Mobile

JQuery Mobile Components (2/12)Button (1/3)


<div data-role="header"><h1>My Title</h1>

</div><div data-role="content">

<p>안녕하세요? jQuery에오늘입문하였습니다.</p><a href="#" data-role="button" data-icon="star">Star button</a>

</div><div data-role="footer">

<h4>Thank you!</h4></div>

</div>

</body>

Understanding the syntax of Button in JQuery Mobile



<body><div data-role="page" id="page1"> <div data-role="header"> <h1>header영역</h1> </div> <div data-role="content" > <button data-icon="arrow-l">1_왼쪽방향화살표버튼</button> <button data-icon="arrow-l">2_왼쪽방향화살표버튼</button> <button data-icon="check">3_확인버튼</button> <button data-role="none" data-icon="refresh">기존버튼</button> <input type="button" value="4_검색버튼" data-icon="search"> <input type="submit" value="5_그리드버튼" data-icon="grid"> <input type="reset" value="6_경고버튼" data-icon="alert"> <input type="button" value="7_홈버튼" data-icon="home"> <a href="#" data-role="button" data-icon="info">8_정보버튼</a> </div> <div data-role="footer" data-position="fixed"> <h4>footer영역</h4> </div> </div></body>


JQuery Mobile Components (5/12)Input Box (1/2)

<!DOCTYPE html><html>

<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>jQuery Mobile</title><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.11.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="page1">

<div data-role="header"><h1>header 영역</h1>

</div>

Understanding the syntax of Input Box in JQuery Mobile


JQuery Mobile Components (6/12)Input Box (2/2)

<div data-role="content"><label>(1)도시이름

<input type="text" name="return" id="txt1"></label><div data-role="fieldcontain" class="ui-disabled">

<label for="txt2">(2)도시이름</label><input type="text" name="return" id="txt2" data-role="none">

</div><div data-role="fieldcontain">

<label for="txt3">(3)도시이름</label><input type="text" name="return" id="txt3" value="서울">

</div></div><div data-role="footer" data-position="fixed"><h4>footer 영역</h4>

</div></div>

</body>

</html>


JQuery Mobile Components (7/12)List View (1/2)

<!DOCTYPE html><html><head>

<title>My Page</title><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.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

Understanding the syntax of List View in JQuery Mobile

JQuery Mobile Components (8/12)List View (2/2)


<div data-role="header"><h1>My Title</h1>

</div><div data-role="content">

<ul data-role="listview" data-inset="true" data-filter="true">

<li><a href="#">Benz</a></li><li><a href="#">BMW</a></li><li><a href="#">AUDI</a></li><li><a href="#">현대자동차</a></li><li><a href="#">기아자동차</a></li>

</ul></div><div data-role="footer">

<h4>Thank you!</h4></div>

JQuery Mobile Components (9/12)Multi-line List View (1/3)

<!DOCTYPE html><html>

<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>jQuery Mobile</title><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.11.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" data-title="페이지" data-add-back-btn="true"><div data-role="header" data-backbtn="true"><h1>페이지</h1>

</div>


JQuery Mobile Components (12/12)Radio Select Button

<body><div data-role="page" id="page1"> <div data-role="header"> <h1>header 영역</h1> </div> <div data-role="content"> <fieldset data-role="controlgroup"> <legend>학년</legend> <input type="radio" name="syear" id="syear1" value="1"/> <label for="syear1">1학년</label> <input type="radio" name="syear" id="syear2" value="2"/> <label for="syear2">2학년</label> <input type="radio" name="syear" id="syear3" value="3" checked="checked"/> <label for="syear3">3학년</label> <input type="radio" name="syear" id="syear4" value="4"/> <label for="syear4">4학년</label> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>학기</legend> <input type="radio" name="semester" id="semester1" value="1" checked="checked"/> <label for="semester1">1학기</label> <input type="radio" name="semester" id="semester2" value="2"/> <label for="semester2">2학기</label> </fieldset> </div> <div data-role="footer" data-position="fixed"> <h4>footer 영역</h4> </div></div></body>

Understanding the syntax of Radio Button in JQuery Mobile


Other JQuery Mobile Components

https://jquerymobile.com/demos/

chapter 16 mobile web page - skkumonet.skku.edu/wp-content/uploads/2018/08/chapter-16... ·...

Documents