Download presentation
Presentation is loading. Please wait.
1
2011년 봄학기 정보컴퓨터공학부 컴퓨터 소프트웨어 설계 및 실험
Mobile Web page 2011년 봄학기 정보컴퓨터공학부 컴퓨터 소프트웨어 설계 및 실험
2
목차 모바일 웹 페이지 소개 모바일 웹 페이지 구현 실습 모바일 웹 페이지란? 모바일 페이지의 필요성 모바일 웹 개발 전략
모바일 언어 모바일 콘텐츠 유형 모바일 웹 페이지 구현환경 실습
3
모바일 웹 페이지 소개
4
모바일 웹 페이지란? 모바일 환경을 위한 웹 페이지.
5
모바일 웹 페이지의 필요성 최근 스마트 폰 보급의 급증으로 모바일 환경에서 웹 페이지를 이용 하는 빈도가 늘어남.
최근 스마트 폰 보급의 급증으로 모바일 환경에서 웹 페이지를 이용 하는 빈도가 늘어남. 이에 따라 일반 데스크톱 환경에 맞게 구현된 웹 페이지를 모바일 환 경에서 구현하는데 문제가 발생하게 됨
6
모바일 웹의 구현 이슈 화면이 작음 일반 네트워크에 비해 느림 수십 가지의 플랫폼이 존재
7
일반 웹 페이지의 문제점 ->따라서 모바일 환경에 적합한 페이지가 필요하다!!
기존 홈페이지는 해상도가 높은 컴퓨터 모니터에서는 적합 하지만 스마트 폰 화면에서는 글자가 작게 보임. 페이지의 크기를 확대/축소 하는 것이 불편. 플래시 애니메이션과 같은 제약이 있는 경우에 해당 페이 지를 볼 수 없음. 클릭하기 어려움 ->따라서 모바일 환경에 적합한 페이지가 필요하다!!
8
Worldwide Mobile Browser Shere
9
모바일 웹 페이지 구현
10
모바일 웹 개발 시 고려할 사항(1) 페이지를 쉽게 네비게이션 할 수 있게 디자인하라. 가능하면 페이지를 나누어서 보여주어라.
레이아웃의 고정크기를 잡지 않는다. 레이아웃을 잡기 위해서 테이블을 이용하지 마라. 픽셀이 아닌 상대적인 값을 이용 하라.(em, ex, bolder, larger or thick) 한쪽 방향으로만 스크롤이 될 수 있게 하라.
11
모바일 웹 개발 시 고려할 사항(2) 이미지는 JPG와 GIF포맷만 사용하라. 기본 폰트만 사용하라.
한 페이지의 크기는20KB를 넘지 않게 하라. 이미지의 개수를 최소화해라. 프레임을 사용하지 말아라.
12
모바일 웹 개발 시 고려할 사항(3) CSS3은 사용하지 마라.
HTTP1.1뿐만 아니라 HTTP1.0도 지원하고 있는지 테스트 하라. 링크의 Target을 지원하지 않는 단말기가 많기 때문에 정의하지 말아라. 브라우저 상단에 보이는 Title을 지원 안하는 경우가 많다는 것을 인지 하라. 이미지 맵을 사용하지 말아라. 팝업을 사용하지 말아라.
13
모바일 웹 개발 시 고려할 사항(4) 기본256 컬러만 사용 하라. 브라우저에 내장된 객체나 스크립트를 사용하지 않는다.
onmouseover, onkeydown와 같은 트리거스크립트를 사용하지 않 는다. 가능하면 쿠키를 이용하지 말아라. 전체페이지 사이즈가 장치 최대메모리에 영향을 줄 수 있다는 것 을 인지하라.
14
모바일 마크 업 언어(1) XHTML XHTML-MP(XHTML 모바일 프로파일 )
XML의 엄격한 문법 규칙 준수와 HTML의 태그 집합을 결합한 언어. 모바일 브라우저는 HTML의 느슨한 규칙보다 XML 형식의 마크업을 더 쉽게 가공 할 수 있음. XHTML은 HTML을 지원하는 모바일 브라우저를 위해 최적화된 마크업. XHTML-MP(XHTML 모바일 프로파일 ) 모바일 웹을 위한 표준 마크업. 대부분의 XHTML-MP모바일 브라우저는 무선 CSS, CSS MP, CSS2 지원.
15
모바일 마크 업 언어(2) WML(Wireless Markup Language) 무선 마크업 언어.
저전력 모바일 디바이스를 위해 만들어졌음. 간단하지만 오래된 언어.
16
Viewport 설정 각 장치의 해상도가 다르기 때문에 모바일 페이지로 보면 각각 다른 크기의 화면이 보여지게 됨. 이때 이를 해결하기 위해 HEAD에 meta 태그 중에 viewport를 설정함. Ex) 아이폰 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> Ex) 갤럭시s <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target- densitydpi=high-dpi”/>
17
실행 페이지 비교 일반 모바일
18
모바일 웹 프레임워크 프레임워크(Framework) 모바일 웹 프레임워크 유명한 모바일 웹 프레임워크
소프트웨어의 구체적인 부분에 해당하는 설계와 구현 을 재사용이 가능하게끔 일련의 협업화된 형태로 클 래스들을 제공하는 것 모바일 웹 프레임워크 모바일 환경에 최적화된 다양한 클래스들을 제공하여 모바일 웹 구현을 간편하고 효율적으로 만들 수 있게 해주는 프레임워크 유명한 모바일 웹 프레임워크 iUI ( jQTouch ( iWebkit ( jQuery Mobile ( jQtouch 적용 사례 – 신세계몰(
19
실습
20
jQTouch 사용하기(1) jQTouch 참고 웹 사이트 jQuery 기반의 모바일 웹 프레임워크 다운로드
참고 웹 사이트 jQTouch 시작하기( 간단한 jQTouch 강좌 ( Boost your next mobile web app with jQTouch ( 제공하는 데모(jqtouch-1.0-beta-2-r109.zip/demos/main/index.html)
21
jQTouch 사용하기(2) 사용법 1) 다운받은 zip파일을 jQTouch를 사용할 웹 페이지 파일(‘.php’, ‘.html’ 등)이 있는 폴더에 압축해제 한다. 2) 웹 페이지 코드의 <head>부분에 아래의 코드를 추가한다. <style type="text/css" "jqtouch/jqtouch.min.css";</style> <style type="text/css" "themes/jqt/theme.min.css";</style> <script src="jqtouch/jquery min.js" type="text/javascript" charset="utf-8"></script> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'jqtouch.png', addGlossToIcon: false, startupScreen: 'jqt_startup.png', statusBar: 'black', preloadImages: [ 'themes/jqt/img/back_button.png', 'themes/jqt/img/back_button_clicked.png', 'themes/jqt/img/button_clicked.png', 'themes/jqt/img/grayButton.png', 'themes/jqt/img/whiteButton.png', 'themes/jqt/img/loading.gif' ] }); </script>
22
실습 내용 목표 jQTouch를 활용하여 4주차 실험에서 만들었던 OpenAPI 페이지를 모바일 웹 페 이지로 만들어보자. 세부 사항 검색 결과는 제목만 나오도록 하고, 클릭 시 해당 페이지로 이동하도록 구현한다.
23
실습 내용 결과 화면
24
jQTouch.html(1)
25
jQTouch.html(2)
26
Result.php 결과 목록 출력하는 법 <li class="forward"><a href="링크주소" target="_blank">보여질 문자열</a></li>
Similar presentations
