'프로그래밍/하이브리드앱(폰갭)'에 해당되는 글 2건

  1. 2012.05.15 모바일 웹 프로그래밍 - 주소창 보이지 않게 하기
  2. 2012.05.06 모바일 웹 개념

화면을 밑으로 스크롤하면 주소창이 보이지 않게 하는 스크립트를 <head>태그 안에 넣어준다. 모바일 웹 페이지의 내용이 스크롤바 없이 짧을 경우에는 주소창이 없어지지 않고 그대로 보이게 된다.

ex)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">


<script type="text/javascript">
window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>


</head>
<body>
</body>
</html>

 

 

Posted by -현's-

댓글을 달아 주세요

●모바일 어플리케이션의 종류

네이티브 앱(Native App)
- 모바일 기기에 직접 설치되고 사용되어지는 어플리케이션이다.

 

모바일 웹(Mobile Web)
- 모바일 웹브라우저에 의해 실행되는 웹 사이트로 일반적인 웹사이트를 모바일로 옮긴 형태를 말한다.

 

하이브리드 앱(Hybrid App)
- 웹과 네이티브 앱의 중간 형태이다

 

모바일 웹앱(Mobile Web App)
- 모바일 웹의 한 형태이지만 일반적인 웹보다 모바일에 더 최적화되고 네이티브 어플리케이션화된 형태를 표현한다.

 


모바일 웹은 기존의 웹사이트를 바탕으로 레이아웃만 모바일 환경에 맞게 바꾸는 것이기 때문에 기존 일반 웹기술을 바탕으로 구현된다. 그래서 모바일 웹을 공부하기전 일단 기존 웹기술(jsp, sql, 웹서버 등)을 먼저 배워야 한다. 모바일 웹을 구현하기 위해 배워야 할 것들은 html5, css3, 모바일 웹 프레임워크(jQuery mobile, senchar touch) 등이 있다.

 

 

 

●모바일 웹의 원리

- 일반적으로 모바일 웹은 기존 웹사이트의  레이아웃을 변경하는 것이기 때문에 기존 웹페이지 하나하나를 수작업으로 모바일용 레이아웃을 만들어 주어야 한다.

 

- 기존 웹사이트의 index페이지에 해당 사이트에 접속한 브라우저가 pc브라우저인지 모바일 브라우저 인지 구분하는 스크립트를 넣어준다. 그리고 모바일 브라우저로 접속한 경우 모바일용 웹페이지로 이동시킨다.

ex)

<script>

var browser = navigator.userAgent.toLowerCase();

var user_browser = (browser.indexOf('iPhone')!=-1);          

if ( user_browser ) {

 document.location.href = "mobile_index.html";                //만약 아이폰에서 웹사이트로 접속했다면 모바일  웹으로 이동시켜라

}

</script>


 

- 모바일용 웹페이지는 따로 디렉토리에 만들어서 연결하던가(ex. http://www.주소.com/m) 2차도메인을 만들어서 연결한다(ex. www.m.주소.com).

 

 

 

Posted by -현's-

댓글을 달아 주세요