Chapter 16 Mobile Web Page

Size: px

Start display at page:

Download "Chapter 16 Mobile Web Page"

Annabella McDowell
5 years ago
Views:

1 Sungkyunkwan University Chapter 16 Mobile Web Page Prepared by J. Jung and H. Choo Web Programming Copyright Networking Networking Laboratory Laboratory 1/26

2 Native App vs. Mobile Web App Native App Mobile Web App Execution Speed Fast Slow Platform Must be produced for each platform One version runs on all platforms Release Releasing via App Market No need to release Version Update It takes a considerable amount of time Immediately reflected Offline Available Slightly Available Web Programming Networking Laboratory 2/26

Mobile Web & Desktop Web Mobile devices have smaller screen size and lower processing power than desktops. Mobile web browsers are quite diverse.

3 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. Web Programming Networking Laboratory 3/26

4 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 Web Programming Networking Laboratory 4/26

5 Responsive Web Design Example (1/5) Understanding the syntax of responsive web design Web Programming Networking Laboratory 5/26

6 Responsive Web Design Example (2/5) <!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; } Web Programming Networking Laboratory 6/26

7 Responsive Web Design Example (3/5) #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; } Web Programming Networking Laboratory 7/26

8 Responsive Web Design Example (max-width: 480px) { /* 너비가 480px 이하부터는아래스타일적용 */ #jb-container { width: auto; } #jb-content { float: none; width: auto; } #jb-sidebar { float: none; width: auto; } } </style> </head> Web Programming Networking Laboratory 8/26

9 Responsive Web Design Example (5/5) <body> <div id="jb-container"> <div id="jb-header"> <h1>responsive Layout</h1> <div id="jb-content"> <h2>content</h2> <p>lorem ipsum dolor sit amet, adipiscing risus.</p> <div id="jb-sidebar"> <h2>sidebar</h2> <ul> <li>lorem</li> <li>ipsum</li> <li>dolor</li> </ul> <div id="jb-footer"> <p>copyright</p> </body> </html> Web Programming Networking Laboratory 9/26

10 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. Web Programming Networking Laboratory 10/26

11 JQuery Mobile Example (1/2) Understanding the syntax of JQuery Mobile <!DOCTYPE html> <html> <head> <title>my Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> Web Programming Networking Laboratory 11/26

12 JQuery Mobile Example (2/2) <body> <div data-role="page">  <div data-role="header"> <h1>my Title</h1>  <div data-role="content"> <p> 안녕하세요? jquery 에오늘입문하였습니다.</p>  <div data-role="footer"> <h4>thank you!</h4> </body> </html> Web Programming Networking Laboratory 12/26

13 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() {}); Web Programming Networking Laboratory 13/26

JQuery Mobile Components (1/12) Grid Layout Understanding the syntax of Grid Layout in JQuery Mobile <body><div data-role="page" id="page1"> <div data-role="header"> <h1>header 영역 </h1> <div

14 JQuery Mobile Components (1/12) Grid Layout Understanding the syntax of Grid Layout in JQuery Mobile <body><div data-role="page" id="page1"> <div data-role="header"> <h1>header 영역 </h1> <div data-role="content"> <div class="ui-grid-d">  <div class="ui-block-a"><div class="ui-bar ui-bar-a"> 블록 1 <div class="ui-block-b"><div class="ui-bar ui-bar-b"> 블록 2 <div class="ui-block-c"><div class="ui-bar ui-bar-c"> 블록 3 <div class="ui-block-d"><div class="ui-bar ui-bar-d"> 블록 4 <div class="ui-block-e"><div class="ui-bar ui-bar-e"> 블록 5 <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 class="ui-block-b"><a href="#" data-role="button"> 버튼 2</a> <div class="ui-block-c"><a href="#" data-role="button"> 버튼 3</a> </body> Web Programming Networking Laboratory 14/26

JQuery Mobile Components (2/12) Button (1/3) Understanding the syntax of Button in JQuery Mobile <body> <div data-role="page"> <div data-role="header"> <h1>my Title</h1> <!

15 JQuery Mobile Components (2/12) Button (1/3) Understanding the syntax of Button in JQuery Mobile <body> <div data-role="page"> <div data-role="header"> <h1>my Title</h1>  <div data-role="content"> <p> 안녕하세요? jquery 에오늘입문하였습니다.</p> <a href="#" data-role="button" data-icon="star">star button</a>  <div data-role="footer"> <h4>thank you!</h4>   </body> Web Programming Networking Laboratory 15/26

JQuery Mobile Components (3/12) Button (2/3) <body><div data-role="page" id="page1"> <div data-role="header"> <h1>header 영역 </h1> <div data-role="content" > <button data-icon="arrow-l">1_ 왼쪽방향화살표버튼

16 JQuery Mobile Components (3/12) Button (2/3) <body><div data-role="page" id="page1"> <div data-role="header"> <h1>header 영역 </h1> <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 data-role="footer" data-position="fixed"> <h4>footer 영역 </h4> </body> Web Programming Networking Laboratory 16/26

17 JQuery Mobile Components (4/12) Button (3/3) Web Programming Networking Laboratory 17/26

18 JQuery Mobile Components (5/12) Input Box (1/2) <!DOCTYPE html> <html> Understanding the syntax of Input Box in JQuery Mobile <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jquery Mobile</title> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h1>header 영역 </h1> Web Programming Networking Laboratory 18/26

19 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 data-role="fieldcontain"> <label for="txt3">(3) 도시이름 </label> <input type="text" name="return" id="txt3" value=" 서울 "> <div data-role="footer" data-position="fixed"> <h4>footer 영역 </h4> </body> </html> Web Programming Networking Laboratory 19/26

20 JQuery Mobile Components (7/12) List View (1/2) Understanding the syntax of List View in JQuery Mobile <!DOCTYPE html> <html> <head> <title>my Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> Web Programming Networking Laboratory 20/26

JQuery Mobile Components (8/12) List View (2/2) <body> <div data-role="page"> <div data-role="header"> <h1>my Title</h1> <!-- /header --> <div data-role="content"> <!-- data-inset 속성으로상하좌우여백추가 --> <!

21 JQuery Mobile Components (8/12) List View (2/2) <body> <div data-role="page"> <div data-role="header"> <h1>my Title</h1>  <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 data-role="footer"> <h4>thank you!</h4>  </body> </html> Web Programming Networking Laboratory 21/26

22 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=" /> <script src=" <script src=" </head> <body> <div data-role="page" id="page" data-title=" 페이지 " data-add-back-btn="true">  <div data-role="header" data-backbtn="true"> <h1> 페이지 </h1> Web Programming Networking Laboratory 22/26

23 JQuery Mobile Components (10/12) Multi-line List View (2/3) <div data-role="content"> <ul data-role="listview"> <li> <a href="#">  <img width="80px" height="80px" src="img.png">  <h3> 제목 1</h3>  <p> 내용 1</p>  <p class="ui-li-aside"> 작성자 1</p>  <span class="ui-li-count">1</span>  </a> </li> <li> <a href="#"> <img width="80px" height="80px" src="img.png"> <h3> 제목 2</h3> <p> 내용 2</p> <p class="ui-li-aside"> 작성자 2</p> <span class="ui-li-count">2</span> </a> </li> Web Programming Networking Laboratory 23/26

24 JQuery Mobile Components (11/12) Multi-line List View (3/3) <li> <a href="#"> <img width="80px" height="80px" src="img.png"> <h3> 제목 3</h3> <p> 내용 3</p> <p class="ui-li-aside"> 작성자 3</p> <span class="ui-li-count">3</span> </a> </li> </ul> <div data-role="footer" class="ui-bar" data-position="fixed">  <div data-role="controlgroup" data-type="horizontal"> <a href="#"> 페이지 1</a> <a href="#"> 페이지 2</a> <a href="#"> 페이지 3</a> </body> </html> Web Programming Networking Laboratory 24/26

25 JQuery Mobile Components (12/12) Radio Select Button Understanding the syntax of Radio Button in JQuery Mobile <body><div data-role="page" id="page1"> <div data-role="header"> <h1>header 영역 </h1> <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 data-role="footer" data-position="fixed"> <h4>footer 영역 </h4> </body> Web Programming Networking Laboratory 25/26

26 Other JQuery Mobile Components Web Programming Networking Laboratory 26/26

src1-malan/ajax/ajax1.html ajax1.html Gets stock quote from quote1.php via Ajax, displaying result with alert().

src1-malan/ajax/ajax1.html ajax1.html Gets stock quote from quote1.php via Ajax, displaying result with alert(). src1-malan/ajax/ajaxhtml 1 1 1 1 1 2 2 2 2 2 2 2 2 30. 3 3 3 3 3 3 3 3 3 40. 4 4 4 4 4 4 4 4 ajaxhtml Gets stock quote from quotephp via Ajax, displaying result with alert(). Building Mobile Applications