[분류 전체보기]검색결과, 375건
- HTML5 개발을 도와주는 도구들 2010.11.01 4
- [jQTouch] Demos 훓어보기 2010.10.28
- [jQTouch] Extensions (확장기능) 2010.10.28
- [jQTouch] GET, POST 전송 2010.10.27
- [jQTouch] 페이지 전환 이벤트 2010.10.27
- 주요 브라우저 HTML5 지원 점수 2010.10.27
- 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개 2010.10.26
- [jQTouch] 페이지 전환 효과 (에니메이션 효과) 2010.10.26
- [jQTouch] 페이지 전환 2010.10.26
- 회생하는 플래시? 2010.10.26
- [jQTouch] 목록 스타일 2010.10.25 1
- [jQTouch] jQTouch - 기본 환경 설정 2010.10.25
- [CSS3] Media Queries 2010.10.25
- 2011년 8개 IT 메가 트렌드, HTML5 역할 언급 2010.10.21
- 원소스 멀티플랫폼을 위한 기술적 현황 2010.10.21
소프트웨어 개발의 생산성은 개발 도구에 많이 의존한다.
흔히 개발도구는 삽 대신 포크레인으로 땅을 빠는 것과 비교된다. 그 만큼 개발 효율성을 높인다는 예기이다
HTML5 기반의 개발 역시 우수한 도구가 지원되면 개발의 생산성 향상은 물론이며 아직 표준이 완성되지 않아 업계 불안감이 내재된 특수성에도 긍정적인 효과를 줄 수 있다.
이 글에서는 지금까지 발표된 HTML5 개발 도구들을 정리해 볼까 한다
Adobe Edge
얼마전 블로그를 통해 소개했었다. 어도비에서 HTML5 개발 플랫폼을 공개했다.
기존 툴에서의 컨버팅 내보내기 같은 포팅 기능이 아니라 자체적인 HTML5 개발툴이다.
아직 본 모습은 보지 못했지만 개인적으로 매우 기대하고 있는 툴이기도 하다
: 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개
: Adobe vows the "best" HTML5 tools
Flash To HTML5
아이폰 등장으로 가장 곤혹을 치런 것은 플래시이다. 잡스의 공공연한 비판과 HTML5 지원세에 어도비가 좀 흔들렸드랬다. HTML5 등장으로 가장 민감했을 것 같은 플래시가 HTML5 변환 기능을 제공하기로 했다
: 어도비, 플래시→HTML5 변환툴 공개
일러스트레이트, HTML5 Pack
얼마전 작성했던 원소스 멀티플랫폼을 위한 기술적 현황 에서도 소개한 바 있다
일러스트레이트에서도 결과물을 HTML5 관련 기술로 변환하는 일종의 포팅기능을 제공하기로 했다
: 어도비 일러스트레이터, HTML5 Pack 배포
드림위버, HTML5 Pack
웹 페이지 개발 도구로 꽤 유명한 어도비의 드림위버에서도 HTML5를 지원한다
HTML5 문서 타입과 태그를 지원하며 HTML5 기반 동영상 표현을 위한 확장 위젯도 제공된다
: 어도비, HTML5 지원에 날개를 펴다
Aptana Studio
개인적으로는 잘 몰랐지만 웹 클라이언트 개발자들에게 꽤 유명한 개발툴인 Aptana 에서도 HTML5 개발을 지원하게 된다. HTML5 용 태그의 자동완성과 브라우저 지원현황 등이 표시된다
: Aptana, HTML5를 지원하는 웹 개발 툴
Sencha Animator
HTML5 스펙과 조금 무관할 수 있으나 CSS3 역시 HTML5 계열(?)로 종종 같이 소개된다
CSS3 기반의 에니메이션 제작 툴이다.
: CSS3 애니메이션 생성기 - Sencha Animator
기타 (개발을 도와주는 유틸리티)
직접적인 개발 툴이나 포팅툴은 아니지만 HTML5기반 콘텐트 개발시 유용하게 사용될 많은 유틸리티가 제공된다.
이 블로그에서도 한번씩 언급한 내용이지만 다시 한번 모아 둔다
: jQuery Visualize, HTML5 차트 라이브러리 소개
: RGraph, HTML5 그래프 라이브러리 소개
: Modernizr 라이브러리: HTML5, CSS3 새요소 지원여부 검사
: Raphael, 자바스크립트 (벡터) 그래픽 라이브러리
: Gordon, 자바스크립트로 만든 플래시 런타임
여기까지가 개인적으로 알고 있는 HTML5 관련 개발툴이며 미처 소개하지 못한 다른 제품도 있으리라 본다.
중간중간에 새로 알게 되는 유용한 개발도구가 있다면 계속해서 블로그에 추가할 예정이다
'모바일 > HTML5' 카테고리의 다른 글
| CSS3 3D Effect (0) | 2013.08.02 |
|---|---|
| ... (0) | 2013.07.23 |
| 주요 브라우저 HTML5 지원 점수 (0) | 2010.10.27 |
| 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개 (0) | 2010.10.26 |
| [CSS3] Media Queries (0) | 2010.10.25 |
역시 데모를 따라 제작하기 보다는 데모에서 사용된 코드와 흐름을 간략히 분석하는 것으로 훓어보자.
총 두개의 데모가 제공되는데, Clock app 과 To-Do app 이다. 이 두 데모는 각각 세계시간과 할일 목록을 관리하는 앱이다. 데모에서는 jQTouch 기반으로 작성되었으며 jQuey를 이용해 로직을 정의하였다
무엇보다 데모의 유용성은 jQTouch기반 웹앱의 아이디어를 보여준다는데 있다.
즉 코드의 구성보다는 웹앱에 걸맞는 jQTouch 앱의 사례를 보여준다는데 의미가 더 크다.
jQTouch가 모바일 웹앱에 초점을 맞춘 만큼 이 두 데모도 데스크탑보다는 스마트폰에서의 활용도가 높은 특징을 보여준다. 모쪼록 jQTouch를 이용하는 개발자들도 이 데모로 출발하여 가치있는 웹앱에 도전해 보기 바란다.
Clock app
GMT를 기준으로 세계시간을 표시하는 시계앱이다. 참고로 GMT는 영국의 그리니치 천문대를 중심으로 한 시간대로 그리니치 평균시라하며 대한민국의 경우 그리니치 평균시 보다 9시가 빠른 GMT+9 시간대에 속한다.
먼저 UI 구성을 살펴보면,
아래와 같이 시계 표현을 위한 각각의 이미지들이 존재하며 clock.css에서 div요소와 이미지를 매칭시키고 있다.
최초 시계구성은 addClock 함수에서 div 요소를 생성하는 것으로 처리하며 시간이 흘러가는 것은 updateClocks 함수가 1초마다 반복실행되면서 처리하도록 한다. 이때 시계의 분침,시침,초침등의 움직임은 CSS3의 transform 기능으로 정의하였다
$('.sec', $el).css('-webkit-transform', 'rotate(' + ( second * 6 ) + 'deg)');
앱이 처음 실행될 때 기본값으로 두 개의(필라델피아,로스앤젤레스) 시계가 표시되며 setInterval() 을 통해 매 1초마다 시계를 갱신시킨다
addClock('Los Angeles', -8.0); //로스앤젤레스 시계 초기화
updateClocks(); //시계 업데이트
setInterval(updateClocks, 1000); //매 1초마다 갱신
그리고 시계를 추가하기 위해 폼(form)을 이용하는데, 이전 글([jQTouch] GET, POST 전송) 의 POST로 submit 하는것이 아니라 자체 스크립트 호출로 처리하고 있다
$('#time').submit(function(){
addClock($('#label').val(), Number($('#timezone').val())); //시계추가
$('input').blur(); //포커스 제거
$('#add .cancel').click(); //cancel 클릭
this.reset(); //폼리셋
return false;
});
아래 화면은 데모를 실행한 화면이며 각각 처음화면, 시계추가, 추가된 화면이다
소스가 비교적 어렵지 않으니 직접 살펴보고 음미(?)해 보기 바란다
To-Do app
두번째 데모는 '할일 목록'을 관리하는 앱이다.
우선 데모 실행화면부터 보자.아래 실행화면을 보면 지금까지 스타일로 사뭇 달라 보인다.
이 데모에서는 기본 jQTouch 화면과 다른 스타일을 위해 css에 많은 할애을 하고 있는 것이 특징이다.
특히 타이틀바와 중간영역에 있는 짙은 밤색 처리는 백그라운드 이미지로 처리하였는데 이미지파일이 아닌 이미지 데이터 문자열로 처리하고 있다.
나머지는 일반적인 CSS 스타일 지정이며, 이와 같이 얼마든지 앱스타일을 변경할 수 있다는 것을 느끼면 되겠다
할일 목록을 추가하는 것은 submitForm 함수에서 처리하는데, incomplete 라는 ul 요소에 li를 새로 추가하는 로직이다. 앞의 체크박스도 같이!
$el = $('#add form');
if ($('#todo', $el).val().length > 1) {
var itemid = $('#home ul li').length + 1;
$('#home .incomplete').append($('<li><input type="checkbox" /> <span>' + $('#todo', $el).val() + '</span></li>'));
}
jQT.goBack();
$el.get(0).reset();
return false;
}
할일 앞의 체크박스를 클릭하면 to do 와 completed 사이를 오가는데 다음과 같은 코드로 처리한다
var $el = $(this);
if ($el.attr('checked')) {
$el.parent().prependTo('.complete');
} else {
$el.parent().appendTo('.incomplete');
}
});
참고로 Completed 하위 목록은 가운데 줄이 그어져 있는데 다음의 css로 처리된 것이다
다음은 할일 추가와 일부 제거한 모습이다.
마치며...
데모를 살펴 보면서 느낄 수 있겠지만, jQTouch를 이용한 웹앱 역시 자바스크립트, jQuery 와 같은 기본적인 웹 클라이언트 기술에 능숙한 것을 요구한다. jQTouch 가 아이폰 앱에 걸맞는 UI 구성은 도와주지만 앱의 로직 부분까지 담당하지는 않기 때문이다.
'모바일 > Javascript' 카테고리의 다른 글
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
|---|---|
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
jQTouch 에서 제공하는 데모를 기준으로 빠르게 훓어보았지만 기본적인 사용법은 거의 다룬셈이다
지금까지 살펴본 내용은 UserInterface, Animations, AJAX, Callback Events 정도인데 이 이상의 내용은 jQTouch 기본 사용법과 더불어 일반 웹 개발 스킬과 아이디어가 접목되어야 그럴싸한 웹앱이 탄생할 것이다
jQTouch 데모를 기준으로 남은 것은 Extensions 와 Demo 부분인데, 먼저 Extensions 를 살펴보자
Extensions 은 말그대로 일종의 jQTouch 확장 기능인데 이 글에서는 데모 코드를 따라 작성하기 보다는 jQTouch 기본 데모를 소개하는 수준에서 글을 마칠까 한다.
jQTouch 는 기본적인 라이브러리 기능에 추가해서 덧 붙일 수 있는 확장 기능을 정의할 수 있도록 구조화되어 있는데, 마치 플러그인과 유사한 느낌이다. jQTouch 객체에 addExtension 함수를 통해 확장 함수를 등록할 수 있으며 이 함수가 정의된 js 파일은 떼었다 붙일 수 있도록 별도의 파일로 정의하기를 권장한다.
ver1 beta2 에서는 총 4개의 확장 기능을 제공하며 extensions 폴더에 각각 독립된 js파일로 구성되어 있다
jQTouch 가 제공하는 4개의 확장 기능을 간략히 살펴보자
Auto Titles
먼저 자동 타이틀이다. 말 그대로 타이틀을 자동으로 구성해 주는 확장기능인데 링크로 페이지 이동시 링크 제목을 타이틀 내용으로 사용한다. 아래 화면처럼 Oranges링크를 클릭하면 타이틀의 내용이 자동으로 Oranges가 된다.
Auto Titles 확장 기능을 정의한 파일은 jqt.autotitles.js 파일인데 div 요소가 교체될 때 발생하는 pageAnimationStart 이벤트를 통해 해당 기능을 구현하고 있다
Floaty Bar
페이지에 둥둥 떠서 스크롤에 따라 자동으로 이동하는 보조 바(bar)인 플로티 바를 제공한다.
아래 화면처럼 플로티바가 페이지 위에 나타나며 스크롤 이동에 자동으로 반응한다. 그리고 Bar를 숨기거나 토글시킬 수 있다. jqt.floaty.js 파일에 로직이 정의되어 있으며 플로티 바로 사용할 div 요소에 makeFloaty, scrollFloaty, toggleFloaty, hideFloaty 등의 함수를 구성해 준다
GeoLocation
현재 위치를 위도와 경로로 반환하는 확장 기능인데 내부적으로 HTML5의 Geolocation 스펙을 이용하고 있다
참고: [HTML5] Geolocation
단말기가 Geolocation 기능을 지원해야 하며 사용자가 위치정보 제공에 동의해야 사용이 가능하다.
아래 화면은 크롬 브라우저에서 실행한 결과이다. jqt.location.js 파일에 로직이 정의되어 있다
Offline
인터넷 연결이 끊긴 오프라인 상태에서도 웹앱을 이용할 수 있도록 지원하는 확장기능인데 내부적으로 HTML5 의 Application Cache 스펙을 이용하고 있다
참고: [HTML5] 오프라인 웹 어플리케이션
서버에 캐시될 파일을 정의한 메니페스트파일(.manifest) 파일이 존재해야 하며 MIME타입이 설정되어 있어야 한다.
jQTouch 에서는 이 모든 파일을 제공해 주므로 서버설정만 맞춰주면 된다. 그리고 자동으로 캐시 업데이트 및 캐시 관리를 수행해 주기 때문에 오프라인 환경을 쉽게 개발할 수 있다.
아래는 데모 화면인데 페이지의 모든 리소스를 로컬에 저장했으며 오프라인 상태에서도 실행할 수 있다는 안내이다
이것으로 jQTouch 가 제공하는 4가지 확장 기능에 대해 간략히 살펴 보았다.
참고로 이 확장기능도 좋지만 더 유용한 기능이 있다면 얼마든지 커스텀하게 확장할 수 있을 것이다.
jQTouch 는 기능을 쉽게 확장할 수 있도록 구조화되어 있으며 아이디어만 있으면(그리고 자바스크립트, jQuery 에 대한 지식) 개발자 개개인이 참신한 확장기능을 구현하여 널리 사용자를 이롭게(?) 할 수 있을 것이다
'모바일 > Javascript' 카테고리의 다른 글
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
|---|---|
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
POST 전송부터 살펴보자.
POST 전송은 웹 페이지의 폼(form) 양식을 서버로 전송하는 규칙인데, jQTouch 에서는 POST전송을 내부적으로 Ajax 호출로 처리한다. 그리고 POST 처리 결과를 받아서 자동으로 페이지요소를 생성, id를 부여하여 자연스럽게 jQTouch 화면으로 구성해 준다. 이 결과 처리 부분이 참으로 독특하다
우선 데모를 보자. 아래는 POST 전송을 위한 클라이언트 측 코드이며 폼양식이 정의되어 있다
코드에서는 전형적인 웹 페이지의 폼 요소 정의를 볼 수 있으며 일부 jQTouch용 class 속성이 이용되었다
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.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>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>POST Demo</h1>
</div>
<ul class="rounded">
<li><a href="#form1">Form</a></li>
</ul>
</div>
<form id="form1" action="server.asp" method="POST" class="form">
<div class="toolbar">
<h1>Post Demo</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li><input type="text" name="param" value="" placeholder="Typed Post Message" /></li>
</ul>
<a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
</form>
</body>
</html>
폼을 전송할 대상은 server.asp 이다.
server.asp 는 폼 데이터를 전송받아 처리하는 서버측 파일로 php, jsp, asp, aspx 등 어떤 것을 사용해도 무방하다. 여기서는 폼 데이터를 전달받아서 출력하는 매우 단순한 코드를 정의하였다
param = request.form("param")
Response.Write param
%>
<div>
<div class="toolbar">
<h1>Server</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li href="#"><%=param %></li>
</ul>
</div>
이 코드 역시 매우 단순한 형태로 전달받은 데이터를 출력하고 일부 목록을 생성하여 출력하는 형태이다
서버측코드를 해석하기 위한 웹서버가 존재해야 하며 필자의 경우 IIS 기반이라 asp 를 이용하였다
다음은 데모를 실행한 화면이다. 텍스트상자에 글을 입력하고 전송하면 결과를 출력한다
신기한것은 server.asp 의 결과화면이다
server.asp 코드 그 어디에도 jQTouch 관련 설정이 없다. 그런데도 결과화면은 보는 바와 같이 jQTouch 화면으로 나오고 있다. 그래서 내부 구조를 좀 확인하고자 jQTouch 핵심 엔진인 jqtouch.js 파일을 들여다 봤다.
아니나 다를까 결과 화면은 jQTouch 로직에 의해 자동으로 생성되는 것을 확인할 수 있었다
그리고 호출은 jQuery 용 Ajax 가 이용되었고 결과화면 링크는 page-1, page-1... 형태로 자동 부여 된다
jqtouch.js 파일을 보면 POST 전송의 시작은 submitForm() 함수이며 showPageByHref() 함수를 거쳐
$.ajax({ ... }); 로 전송이 이루어지며 결과화면의 자동 생성을 위해 insertPages() 함수로 이어진다
insertPages() 함수에서 페이지 요소를 생성하고 자동 증가 id를 부여하고 결과화면으로 구성한다
따라서 결과화면의 요청 URL을 보면 아래와 같이 자동으로 부여된 id page-(number++)형태가 된다
http://yourdomain/jQTouch/demos/test/formNpost.html#page-1
참. 재미있는 구조다.
GET 요청도 거의 유사한 매커니즘이다.
jQTouch 는 <a href="targetPage.asp"> 와 같은 기본 링크는 모두 Ajax 호출로 처리하고 결과 화면을 자동으로 구성해 준다. 이전에 jQTouch 페이지 전환에 대한 내용을 다룬적이 있는데 그 글에서는 완전한 외부링크를 다루었었다. 즉 target 설정으로 '_blank' , '_webapp' 혹은 rel='external' 속성을 줘서 jQTouch 에서 완전히 분리된 외부링크를 호출하는 것이다 => [jQTouch] 페이지 전환
반면 Ajax를 통한 GET 요청은 jQTouch 의 내부 알고리즘에 의해 Ajax호출로의 변환, 결과화면 자동구성이 지원되는 것이다. 사실 jQTouch 에서 외부링크로 호출하는 경우는 많지 않을 것으로 보인다.
코드는 거의 유사하여 일부 코드 조각만 제시한다. a 태그에 target, rel 속성이 없다는 것을 확인하자
<li><a href="serverGet.asp?param=Hello! GET Request~">GET Request</a></li>
</ul>
서버측 코드는 GET 요청이므로, requery.form 대신 request.querystring로 전달받는다.
실행화면은 다음과 같다
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
|---|---|
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
: [jQTouch] 페이지 전환
보통 웹 페이지는 자신이 처음 로드될 때 그리고 페이지를 빠져나갈 때 각각 이벤트를 걸 수 있다
즉 페이지가 처음 표시될 때 load 이벤트, 페이지를 이탈할 때 unload 이벤트가 발생하여 원하는 작업을 처리할 수 있다.
jQTouch 에서 일반적으로 사용하는 페이지 전환은 뷰의 교체 즉 페이지내 div 요소로의 이동이다.
즉 하나의 페이지에 정의된 div의 교체이기 때문에 위와 같은 한 페이지 기반의 로드,언로드 이벤트 처리가 적합하지 않다. 따라서 div 가 교체될 때 그리고 div 를 이탈할 때 발생하는 이벤트가 따로 존재해야 한다
jQTouch 는 이와같은 당연한 논리구조를 알고 있으며 적절한 이벤트를 제공해 주고 있다
바로 pageAnimationStart, pageAnimationEnd 이벤트가 그것이다
페이지 전환 즉 div 의 교체는 slide, slideup 과 같은 에니매이션효과로 전환되며 이 에니매이션 효과에 대해 이벤트를 추가하는 방식이다
페이지 전환, 이탈 두 시점에 pageAnimationStart, pageAnimationEnd 모두 발생하며 각각 전환 에니매이션의 시작과 끝을 알린다. 또한 이벤트 함수로 전달되는 매개변수의 direction 속성을 통해 페이지의 전환, 이탈을 구분할 수 있다. (direction가 in 인 경우: 페이지 전환 , out 인 경우: 페이지 이탈)
아래 화면은 차례대로 페이지를 처음 이동한 것과 뒤로갔다가 다시 돌아왔을대의 결과 화면이다
첫 이동 시 에니매이션 시작과 끝을 알리는 두 이벤트가 모두 발생하였고 Back 했을 때 역시 두 이벤트가 발생하였다. 다만 direction 속성이 in 과 out 으로 페이지의 전환,이탈을 구분하고 있다. 이로써 일반적인 웹페이지 링크 모델에서의 페이지 로딩,언로딩 이벤트 효과를 jQTouch div 교체 모델에서도 적용할 수 있는 것이다.
코드는 jQTouch가 제공하는 데모코드와 동일하며 jQuery 문법이 사용 되었음을 알 수 있다
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.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'
]
});
$(function(){
// Page animation callback events
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '… ');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
});
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Page Switch Event</h1>
</div>
<ul class="rounded">
<li><a href="#pageevents">Page Switch Event</a></li>
</ul>
</div>
<div id="pageevents">
<div class="toolbar">
<h1>Page Switch Event</h1>
<a class="back" href="#">Back</a>
</div>
<div class="info" style="font-weight: normal;">
</div>
</body>
</html>
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
|---|---|
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
이전에 브라우저별 HTML5 호환성 점수를 살펴 본 적이 있다
=> 브라우저의 HTML5 호환성 점수
현 시점에 주요 브라우저들이 최신 버전을 속속 내 놓고 있다
브라우저들의 HTML5 지원 점수를 계산해 준 글이 있어 소개한다
: HTML5: Internet Explorer 9 (IE9) vs. Google Chrome 8 vs. Firefox 4 vs. Opera 11 vs. Safari 5
Internet Explorer 8 – 32
Internet Explorer 9 Beta – 80
Firefox 3.6.10 – 145
Firefox 4 Beta 6 – 235
Google Chrome 7.0.517.41 – 248
Google Chrome 8.0.552.11 Beta – 262
Opera 11 Alpha – 223
Opera 10.63 – 203
Safari 5.0.2 – 178
WebKit r70433 – 196
377 만점 기준으로 나온 점수이다
크롬 브라우저가 가장 높은 점수를 보이며 기대했던 IE9 는 베타라고는 하지만 예상보다 실망스럽다
'모바일 > HTML5' 카테고리의 다른 글
| ... (0) | 2013.07.23 |
|---|---|
| HTML5 개발을 도와주는 도구들 (4) | 2010.11.01 |
| 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개 (0) | 2010.10.26 |
| [CSS3] Media Queries (0) | 2010.10.25 |
| 2011년 8개 IT 메가 트렌드, HTML5 역할 언급 (0) | 2010.10.21 |
아... 듣던 중 반가운 소리다. 드디어 HTML5 도 디자인 개발툴이 나온다뉘...
개인적으로 매우 목말라 있던 사건이다
누군가 빵!~ 하고 터뜨리기를 기대하고 있었는데,
예상보다 빨리 그것도 HTML5 와 기술 경쟁 위치에 있는 어도비가 터뜨릴 줄이야...
플래시 CS5 를 통한 iOS 변환 기능에 이은 HTML5 그래픽 도구까지!!!
이 모든것이 어도비 자사의 이익을 위한 결정이겠지만, 훌륭하다!
양다리든 뭐든 상관없다. 훌륭한 결정이다.
MS의 실버라이트, 어도비의 플래시와 같은 RIA 개발 업체의 (어쩔수 없는?) HTML5 사랑?이 엿보인다 ㅎ
나. 어도비를 사랑?하게 될 것만 같은 ㅎㅎㅎ.. 플래시 개발자도 아닌데 말이쥐...
HTML5 컨텐츠를 쉽고 빠르게 개발할 수 있는 디자인 툴은 반드시 필요하며 이 툴의 보급은
HTML5의 성장에 큰 도움이 될 것으로 본다
이제 HTML5 날코딩은 안뇽!~~~
'모바일 > HTML5' 카테고리의 다른 글
| HTML5 개발을 도와주는 도구들 (4) | 2010.11.01 |
|---|---|
| 주요 브라우저 HTML5 지원 점수 (0) | 2010.10.27 |
| [CSS3] Media Queries (0) | 2010.10.25 |
| 2011년 8개 IT 메가 트렌드, HTML5 역할 언급 (0) | 2010.10.21 |
| [HTML5]로컬자원활용,그 위치와 용량 그리고 유효기간은? (3) | 2010.10.19 |
링크 태그인 a 태그에 class 속성의 설정으로 뷰 전환 효과를 지정할 수 있는데 슬라이드 효과에서 부터 페이드효과 그리고 큐브 형태의 에니메이션 효과까지 다양하게 지원된다
마치 파워포인트의 각 슬라이드가 넘어갈 때 줄 수 있는 효과와 유사하다
매우 간단한 사용법이라 블로깅 하기가 민망한 수준이다. 단지 class 속성 정의 뿐이니...
뷰 전환의 기본값은 'slide' 이다.
slide는 왼쪽으로 미끄러지듯 페이지가 전환되는 효과이다.
그리고 누구나 흥미를 가질만한 효과는 flip, swap, cube 정도라 생각된다
이 세 효과는 시각적으로 매우 동적인 전환 효과를 보여준다
아래 화면은 차례대로 flip, swap, cube 효과로 뷰를 전환시키는 모습이다
flip 는 화면을 뒤집는듯한 효과, swap 은 두 화면이 시각적으로 교체되는 효과, cube는 입방체모양희 전환효과를 보여주고 있다. 이런 화려한 효과가 단지 몇자만으로 가능하다니, 다시한번 jQTouch에게 고마울 따름이다
기타 다른 전환 효과도 앞선 예 보다는 정적이지만 보편적인 전환 효과로써 가치가 있을 것이다
slide : 기본값. 오른쪽에서 왼쪽으로 미끄러지 듯 전환
slideup: slide와 유사. 단 방향은 아래에서 윗쪽으로 미끄러지 듯 전환
dissolve: 점차 밝아지는 효과
fade: 점차 뚜렷해지는 효과. dissolve와 시각적으로 유사
pop: 팝업처럼 쏟아 오르는 효과
간단하기 때문에 일부 코드 조각만 제시한다
<li><a href="#animdemo">slid(default)</a></li>
<li><a href="#animdemo" class="slideup">slideup</a></li>
<li><a href="#animdemo" class="dissolve">dissolve</a></li>
<li><a href="#animdemo" class="fade">fade</a></li>
<li><a href="#animdemo" class="flip">flip</a></li>
<li><a href="#animdemo" class="pop">pop</a></li>
<li><a href="#animdemo" class="swap">swap</a></li>
<li><a href="#animdemo" class="cube">cube</a></li>
</ul>
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
|---|---|
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
상향식은 원리와 하부구조와 같은 원리를 먼저 이해하고 응용기술을 학습하는 방식이며
하향식은 응용기술을 구현하면서 원리와 하부구조를 이해해 가는 방식을 말한다
이를테면 OS원리와 메모리구조, 알고리즘과 같은 하부구조나 원리를 먼저 학습하고 C언어, 닷넷을 공부하는 방식을 상향식이라 할 수 있는데 대체로 정석 공부법으로 통하며 프로그램을 제대로 시작하고 싶은 시간많고 의지충만한 이들에게 권하는 방법이다. 반면 언어의 문법을 빠르게 학습하고 웹 사이트나 응용프로그램을 개발하면서 부딪히는 이슈를 해결하면서 부족분을 채워나가는 방식을 하향식이라 할 수 있는데 대체로 많은, 비 전공이면서 빠르게 개발을 하고 싶은 이들에게 권장하는 방식이다
물론 이 분류는 순수히 개인적인 구분이다. 그러나 대체로 개발자라면 무슨 말인지 이해가 될 것이다.
수 많은 개발자들이 하향식으로 접근하고 있으며 안타깝게도 하향식에서 머물러 있기도 한다
대체로 상향식이 정도로 통하며 막 시작하는 입문자에게 권장하기도 한다
심지어 경력이 꽤 쌓인 개발자들도 자조 섞인 목소리로 하향식에 머문 자신과 다른 개발자들을 비판하곤 한다
물론 그런 비판 속에 필자 역시 100% 떳떳할 수 없다고 고백한다
이 글에서 이런 말을 언급하는 이유는, 개발자의 학습 형태나 자질은 논하고자 하는 것은 아니다
원론적인 측면에서 비판받고 있는 하향식 학습이, 경우에 따라선 의미 있기도 하다는 것을 말하려 한다
지금 빠르게 학습 중인 jQTouch 가 그에 해당한다. 일주일에 어느정도 끝을 보려 하는 이 공부는 사용법에 초점을 맞추고 있다. 내부적으로 jQTouch 가 어떤 코드로 돌아가는지 (매우 궁금하지만) 당장 필요하지는 않다.
특히 jQTouch와 같은 원천기술을 몇 단계 랩핑한 라이브러리는 그 원리의 이해가 꼭 필요하지도 않다.
따지자면 브라우저, 자바스크립트, jQuery, jQTouch 로 이어진 원리와 그 사용법의 학습으로 이어질 수 있는데 jQTouch 를 이용하는 목적에 비해 너무 많은 노력을 할애해야 한다는 것이다.
그리고 또, 흔히 비판받는 코딩 기법인 'Code and Fix' 형태의 학습방식도 취하고 있다
Code and Fix는 일단 코드부터 짜 보고 고친다는 뜻인데, 제대로 설계하지 않고 무작정 코드부터 짜고 적당히 버그를 고치면서 일하는 방식을 말한다. 대단히 비판받는 업무 방식으로 제대로된 설계와 잘 짜여진 코드의 중요성을 강조할 때 언급된다. 그러나 이 방식 역시 간단한 테스트나 프로토타입 수준의 학습에는 일면 효율적이기도 하다
뭐, 잡설이 길었지만 핵심은 한가지 이다
현재 개인적으로 빠르게 진행중인 jQTouch 학습은 다분히 하향식 그리고 Code and Fix 형태로 진행하고 있지만 주제와 학습 목적에 비추어 보면 나름 적절하다는 것이다
(물론 그 어떤 좋은 포장이라도, 개발이 매우 생소한 입문자라면 정도를 따르는 것이 좋다)
이제 주제로 들어가자. jQTouch 를 통한 페이지 전환이다
대부분 웹 개발자들은 '페이지 이동' 개념이 명확하다. A페이지 -> B페이지로의 이동은 링크로 통한다
웹의 하이퍼텍스트, 하이퍼링크 구조에 기반한 명백한 개념이지만 이 개념이 다른 환경에서는 걸림돌이 되기도 한다. 간혹 웹 개발자가 윈도우응용개발을 할 때 혼란을 느끼는 부분이기도 하다.
jQTouch는 다분히 웹앱에 초점이 맞춰진 개발 플랫폼이며 페이지라는 개념보다 뷰(View) 라는 개념이 더 어울린다. 즉 순수 웹 환경에서의 화면은 페이지인 경우가 많으며 화면의 전환은 곧 페이지의 이동을 의미하는 반면 웹앱에서의 화면은 뷰라 할 수 있으며 화면 전환은 뷰의 교체를 의미한다고 할 수 있다. 다시말해 뷰의 활성화(Show) 그리고 비활성화(Hide)의 개념이라 할 수 있겠다. 물론 jQTouch 에서도 링크를 통한 페이지 이동이 지원된다. 다만 기본적으로는 뷰의 전환이라는 개념이 사용된다.
내부 div 의 전환
jQTouch 가 지원하는 페이지 이동의 개념은 기본적으로 div 요소의 전환을 의미한다. 즉 다음과 같이 A라는 div 에서 B라는 div 로의 링크가 곧 화면의 전환이다. 이런 형태가 jQTouch 에서 매우 보편적인 화면 전환방법이다.
즉 jQTouch 기반 웹앱은 이런 형태의 화면 전환 처리를 권장한다.
<a href="#B">Div Switch</a> <!-- A 화면에서 B화면으로의 이동 -->
</div>
...
<div id="B"> ... </div>
외부 링크
내부 div 전환이외에도 일반적인 페이지 링크가 지원된다. 외부 링크를 사용할 땐 target 을 명시하여 이동대상을 지정할 수 있다. 다음 코드는 새창으로 새 페이지를 연다는 의미이다
만일 새창을 열고 싶지 않다면 target="_webapp" 을 설정하면 된다. 또 다른 방법으로는 rel 속성을 지정할 수 있다. 다음코드와 같이 링크태그에 rel 속성을 지정하면 페이지 이동이 가능하다
Back 버턴
jQTouch 에서는 div 로 화면을 전환했을 때 '뒤로가기' 기능을 자동으로 지원한다. 다음과 같이 a 태그 class 속성에 "back" 을 지정하면 이동 전 div로 다시 돌아간다
이때 사용되는 이미지는 jQTouch 객체 생성때 지정한 다음의 이미지가 이용된다
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
......................................
]
마지막으로 여기서 설명한 내용을 포함하는 데모이다. 차례대로 첫페이지와 div 전환, 페이지 이동을 캡쳐한 것이다
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.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>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>First Page</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#secondDiv">Div Switch</a></li>
<li class="forward"><a href="SecondPage.html" target="_blank">Page Transfer(target="_blank")</a></li>
<li class="forward"><a href="SecondPage.html" target="_webapp">Page Transfer(target="_webapp")</a></li>
<li class="forward"><a href="SecondPage.html" rel="external">Page Transfer(rel="external")</a></li>
</ul>
</div>
<div id="secondDiv">
<div class="toolbar">
<h1>Second Page</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#home">Back</a></li>
</ul>
</div>
</body>
</html>
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
|---|---|
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (0) | 2010.10.12 |
회생? .. 플래시가 죽진 않았지만, 아이폰 등장으로 그 위세가 주춤했던 건 사실이다
그런데 그런 플래시가 N스크린을 위한 플랫폼으로 자리매김할 징조가 보인다
기사원문: 플래시의 대 반격…'아이폰'만 빼고 다 지원
개인적으로 영역이 달라, 플래시를 잘 다루진 못하지만 매우 훌륭한 그래픽 개발 플랫폼이라 생각해 왔다.
그리고 이미 RIA 시장에 대한 위치도 나름 확고하고 전세계 수 많은 개발자들을 보유하고 있다
음.. 플래시 개발자들은 좋겠다! 하나의 기술로 N스크린을 대응할 수 있다니...
그리고 플래시전용 앱스토어까지 등장한다고 하니... 그야말로 좋은 징조이다
그리고 아이폰에 플래시가 지원되지 않는다고는 하지만 아예 방법이 없는 것은 아니다
플래시 CS5 에 포함된 Applications for iPhone 기능으로 플래시코드를 iOS 코드로 변환할 수 있다
이미 이렇게 변환된 앱이 앱스토어에 판매중이기도 하다
=> 원소스 멀티플랫폼을 위한 기술적 현황
하나의 벤더에서 개발한 제품으로는 원소스 멀티 플랫폼을 실현하는 첫 번째 기술이지 않을까 한다
다음은 기사의 일부이다
플래시가 '아이폰'을 제외한 전 스마트 기기에 모두 탑재된다
어도비는 여기에 더해 자체 애플리케이션 스토어인 '인마켓(InMarket)'도 함께 발표했다. 인마켓은 플래시로 만들어진 다양한 애플리케이션을 사고 팔 수 있는 장터다
특히 PC를 기반으로 한 수많은 플래시 콘텐츠를 스마트폰과 태블릿PC, 스마트TV까지 확장하는 'N스크린' 전략을 본격적으로 선보이고 있다
'일상' 카테고리의 다른 글
| 블로그,QR코드 만들다 (0) | 2010.11.04 |
|---|---|
| 실버라이트는 윈도우 폰을 위한 개발 플랫폼이다 (0) | 2010.11.03 |
| 구글, 크롬OS 발표, 기대와 혼란! (2) | 2010.10.18 |
| MS 어도비 인수? (0) | 2010.10.08 |
| 표준은 결국 (사회적) 동의이다 (0) | 2010.09.27 |
아이폰과 같은 스마트폰의 가장 기본적인 UI 구성은, 박스가 세로로 나열된 목록형태를 많이 띄고 있다
게임과 같은 엔터테인먼트 어플은 컨텐트의 특성상 독창적인 UI구성을 가지지만 설정화면과 같은 정적인 화면 구성은 대부분 아래와 같이 목록 형식으로 구성된다
따라서 목록형식은 가장 흔하게 사용되는 UI 구성이라 할 수 있으며 jQTouch 에서도 이를 지원하고 있다
기존 HTML 태그 중 '순서없는 목록'에 해당하는 ul 그리고 li 목록을 이용하여 아이폰 스타일의 UI를 손쉽게 구현할 수 있다.
기본 목록
아무런 치장없이 ul 태그와 li 태그만 간단히 정의해도 jQTouch에 의해 자동으로 아이폰 스타일의 변환된다
다음의 코드를 생각해 보자. HTML 태그로 순서 없는 목록을 정의하는 것이다
<ul><li>AAA</li><li>BBB</li><li>CCC</li></ul>
이 코드는 jQTouch 에 의해 아이폰 스타일로 자동 변환된다.
아래 화면은 일반 웹 화면과 jQTouch 결과 화면을 비교한 것이다
단지 목록만 정의했을 뿐인데, 이처럼 아이폰 스러운 화면을 만날 수 있다니, 매우 고마운 일이 아닐 수 없다
추가 목록
기본 목록을 그대로 사용해도 되지만 좀더 아이폰스럽고 미려한 UI를 위해 몇 가지 방법이 제공된다
jQTouch 에서는 ul 태그에 class 속성을 정의하도록 하여 목록의 스타일을 변화시키게 한다.
class 속성에 rounded, form , metal, individual, plastic, edgetoedge 등 5가지 서로 다른 스타일을 적용할 수 있다. 아래 화면은 'ul 의 class 속성'에 차례로 rounded, form, metal, individual 을 적용한 결과이다
rounded 는 둥근 모서리형태의 목록, form은 각지고 높이가 좀더 작은 목록, metal 은 메탈스러운 목록 마지막으로 individual 가로로 나열된 모습이다.
그리고 edgetoedge 각이 없는 딱딱한 사각형 모양의 스타일이며 하위 li 태그에 sep 속성을 부여해 다음과 같이 일종의 목록 그룹 효과를 줄 수 있다
목록 치장하기
목록의 전체 스타일이외에도 각각의 목록에 추가 스타일을 지정할 수 있다. 'li의 class 속성'으로 이를 지정할 수 있는데 아래 화면은 li의 class 속성에 arrow, forward를 각각 적용한 결과이다. 이 효과는 목록을 터치하면 추가 컨텐트가 존재함을 의미할 때 주로 사용된다
그리고 li 태그 안에 small 태그의 의 class 속성에 counter 를 부여하면 목록에 숫자를 추가할 수 있다
또한 목록 링크 이후 정의된 텍스트는 아래와 같이 밑글자로 처리된다. 아래 화면을 참조하자
마지막으로 글에서 설명된 목록 스타일을 한 페이지에 모두 적용해 보자
아래 화면은 코드를 실행한 결과화면이며 화면 이후 전체 코드를 제시한다
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.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>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>jQTouch List Demo</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#">AAA</a><small class="counter">5</small></li>
<li class="forward"><a href="#">BBB</a><em>bbb</em></li>
</ul>
<ul class="metal">
<li class="arrow"><a href="#">AAA</a></li>
<li class="arrow"><a href="#">BBB</a></li>
</ul>
<ul class="form">
<li class="arrow"><a href="#">AAA</a></li>
<li class="forward"><a href="#">BBB</a></li>
</ul>
<ul class="plastic">
<li class="arrow"><a href="#">AAA</a></li>
<li class="forward"><a href="#">BBB</a></li>
</ul>
<ul class="individual">
<li class="arrow"><a href="#">AAA</a></li>
<li class="forward"><a href="#">BBB</a></li>
</ul>
</div>
</body>
</html>
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
|---|---|
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (0) | 2010.10.12 |
| 자바스크립트 메뉴를 추가하며... (2) | 2010.10.07 |
일전에 jQTouch 를 간단히 언급했었다 => [JQTouch] 모바일 웹 UI 라이브러리
이번주에 jQTouch 를 조금 살펴 볼 예정인데, 그 첫글로 기본적인 사용 환경 설정을 다루고자 한다.
웹 개발 환경은 다른 응용개발 환경보다 훨씬 심플하다는 것이 매력적이다
다른 응용 환경 구성과 같은 구구절절한 개발툴과 Add-In 형태의 프로그램, 까탈스러운 구성파일의 설정 과정이 없어 쉽게 시작할 수 있고 개발모델 역시 심플하여 접근하기 매우 용이하다. 맘에 든다 ㅎㅎ
jQTouch 역시 심플한 웹 개발모델을 제시하며, 결국에는 자바스크립트, CSS, HTML 과 같은 기본적인 웹 개발 요소들이 사용될 뿐이다. 물론 jQTouch 라이브러리를 참조해야 하지만 이것 역시 자바스크립트의 범주이다
1. jQTouch 라이브러리 다운로드
흔히 jQTouch 를 플러그인이라 표현 하지만 라이브러리라 표현해도 무방할 것이다
가장 먼저 시작할 것은 이 라이브러리를 개발 PC에 다운로드 하는 것이다. 아래의 링크에서 최신버전의 jQTouch 라이브러리를 다운받는다. 현재시점(2010.10.25) 기준 1.0 beta 2 버전을 다운받는다
: http://www.jqtouch.com/
다운받은 파일의 구성은 jQTouch 라이브러리 파일, 테마 스타일 파일, 확장팩 파일, 데모파일 등이다
여기서 데모를 확인해 보면 참으로, 아이폰 앱 스타일에 적합하다는 것을 느낄 것이다
2. 테마 선택(적용)하기
jQTocuh 는 jQuery 기반의 UI 라이브러리이다. 따라서 스크립트파일과 더불어 스타일을 정의한 CSS파일도 포함되어 있다. 스타일은 총 두개로 나누어져 있는데 jQTouch 테마와 Apple 테마가 그것이다
jQTouch 고유 테마는 검정색 바탕에 회색톤과 하얀 글자가 특징이다. 반면 Apple 테마는 아이폰 UI와 유사하게 청색 계열의 느낌과 흰 바탕 그리고 검정색 글자로 구성된다. 아래 두 화면에서 그 차이를 느낄 수 있다
두 테마 중 하나를 선택할 수 있는데 다운로드 받은 파일 중 theme 폴더에 각각 다음처럼 정의되어 있다
Apple 테마 : themes > apple > theme.css
jQTouch 테마: themes > jqt > theme.css
jQTouch 를 적용하는 우리의 웹 페이지에 (경로를 맞춰) 다음과 같이 스타일을 정의하면 된다
그리고 기본적인 jQTouch 스타일을 정의한 파일은 jQTouch 폴더에 있는 jqtouch.css 파일이다
이 파일 역시 웹 페이지에 스타일로 정의해 둔다
3. jQTouch 라이브러리 참조하기
일종의 핵심 엔진을 참조하는 것으로 jQTouch 스크립트 라이브러리에 대한 참조이다
jQTouch 폴더의 jqtouch.js 파일이 그것이다. 또한 jQTouch 가 jQuery 기반으로 작성되었기 때문에 jQuery 라이브러리의 참조도 필수이다. jQTouch 를 다운받은 폴더에는 친절하게도 jQuery 라이브러리가 포함되어 있다. 현재 jQTouch 버전은 jQuery 1.3.2 버전을 사용하고 있다. 아래와 같이 스크립트를 참조한다
<script src="./jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
4. jQTouch 객체 생성으로 시작하기
각종 기본 설정을 정의하는 일종의 초기화 과정을 객체 생성 코드로 정의할 수 있다
이 초기화 객체에 사용되는 매개변수를 보면 jQTouch 가 하이브리드 형태의 웹앱에 초점이 맞춰진 라이브러리라는 것을 간접적으로 알 수 있다. 예를 들어, 아이폰 바로가기 아이콘이라던지 로딩 화면등 웹앱의 구성요소 정의가 그것이다.
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'./jqtImg/back_button.png',
'./jqtImg/back_button_clicked.png',
'./jqtImg/button_clicked.png',
'./jqtImg/grayButton.png',
'./jqtImg/whiteButton.png',
'./jqtImg/loading.gif'
]
});
</script>
5. 설정 끝, 지금부터는 div 엘리멘트와 id, class 속성들과의 잔치?이다
jQTouch 의 적용을 위한 기본 설정은 이것으로 끝이다. 이제부터는 Div 엘리멘트의 정의와 각종 HTML 요소 그리고 id, class 속성을 통한 형식 지정, 스타일 정의로 화면을 jQTouch 답게 구성할 수 있다. 지금부터가 jQTouch 라이브러리의 구체적 사용법을 알고 진행해야 하는 과정이다.
위 설정들을 포함한 가장 기본적인 jQTouch 기반 웹 페이지의 구성은 아래와 같다
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "./jqtLib/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "./jqtLib/theme.min.css";</style>
<script src="./jqtLib/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtLib/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: 'red',
preloadImages: [
'./jqtImg/back_button.png',
'./jqtImg/back_button_clicked.png',
'./jqtImgg/button_clicked.png',
'./jqtImg/grayButton.png',
'./jqtImg/whiteButton.png',
'./jqtImg/loading.gif'
]
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
First jQTouch Demo
</div>
<div>
Hello World!!!
</div>
</div>
</body>
</html>
실행 화면
일부 웹 개발자들은 jQTouch 를 자신의 웹 프로젝트에 적용하고자 할 때 디렉터리와 파일 경로를 자신의 입맛대로 구성하고 싶어한다. 나 역시 마찬가지로...
그러나 jQTouch 는 테마를 정의한 스타일시트 파일에 이미지 경로가 포함되어 있어 주의를 요한다
ex) background: url(img/toolbar.png) #000000 repeat-x;
위 코드는 theme.css 파일에 정의된 이미지 경로를 보여준다. 하위 img 폴더를 기준으로 하고 있다
이 코드는 기본적으로 다운로드 한 jQTouch의 경로로써, 만일 개발자에 의해 이 경로가 해석되지 않는다면 의도하지 않는 결과를 보여줄 수 있다. 따라서 자신만의 경로를 정의할 때 이 부분을 감안해야 할 것이다. 제일 편한 것은 처음 다운로드 받은 jQTouch 의 폴더,파일 구조를 그대로 사용하는 것이다
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
|---|---|
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (0) | 2010.10.12 |
| 자바스크립트 메뉴를 추가하며... (2) | 2010.10.07 |
| JSON (JavaScript Object Notation) (0) | 2010.10.06 |
CSS3에서는 출력되는 미디어의 종류와 조건에 맞도록 스타일을 설정할 수 있는 Media Query 라는 것을 제공한다. 이미 CSS2 에서 스크린모드(screen) 와 프린트모드(print)에 따른 서로 다른 출력 스타일을 지정할 수 있는 Media Type이 제공되었으나 세세한 조정을 할 수 없어 활용도가 높지 않았다고 한다.
그러나 CSS3에서 개선된 Media Query는 보다 더 세밀한 설정이 가능해 높은 활용도가 기대된다
특히 요즘처럼 멀티 디바이스, 멀티 스크린 시대에는 더욱 그 활용가치가 높지 않을까 생각한다
이에 대한 이론적 내용과 사용법은 W3C와 다른 훌륭한 블로그의 글을 링크함으로 대신 하려 한다
http://www.w3.org/TR/css3-mediaqueries/
http://manyoung.tistory.com/tag/media%20query
http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/
http://firejune.com/1580
http://www.webdesignerwall.com/tutorials/css3-media-queries/
미디어쿼리가 적용된 데모는 다음의 링크에서 확인할 수 있다
지원되는 브라우저에서 창 크기를 조절하면서 확인해 보기 바란다
http://disruptive-innovations.com/zoo/hmo/CSSMQdemo.html
http://test.unintentionallyblank.co.uk/media.html
http://css-tricks.com/examples/ResolutionDependantLayout/example-one.php
http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/
'모바일 > HTML5' 카테고리의 다른 글
| 주요 브라우저 HTML5 지원 점수 (0) | 2010.10.27 |
|---|---|
| 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개 (0) | 2010.10.26 |
| 2011년 8개 IT 메가 트렌드, HTML5 역할 언급 (0) | 2010.10.21 |
| [HTML5]로컬자원활용,그 위치와 용량 그리고 유효기간은? (3) | 2010.10.19 |
| HTML5, 속도와 호환성 문제 그리고 느린 대응 (2) | 2010.10.18 |
삼성SDS가 2011년 IT 메가트랜드를 발표했다
소셜, 개방, 스마트, 클라우드, 하이브리드 등이 핵심키워드로 선정되었는데 이중 하이브리드 웹이라는 주제에서 HTML5 의 역할이 정의 되어 있다
[현상]HTML5 가 가까운 미래 IT 환경에서 요직(?)을 차지하게 될 것이라는 분석에 동의한다
HTML5와 같은 차세대 웹 표준의 등장으로 기존의 RIA 플랫폼 기능들이 표준웹으로 통합되며, Web기반 OS, Web App Store등장 등으로 Web이 점차 App과 유사해 지고 있다.
[발전방향]
HTML5는 궁극적으로 오디오, 동영상, 쌍방향 플러그인 등을 필요 없게 만들 것이며, App과 Web은 서로 간의 장단점을 보완하며 궁극적으로 하나의 시스템으로 통합되어 갈 것이다
'모바일 > HTML5' 카테고리의 다른 글
| 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개 (0) | 2010.10.26 |
|---|---|
| [CSS3] Media Queries (0) | 2010.10.25 |
| [HTML5]로컬자원활용,그 위치와 용량 그리고 유효기간은? (3) | 2010.10.19 |
| HTML5, 속도와 호환성 문제 그리고 느린 대응 (2) | 2010.10.18 |
| [HTML5 실습] Canvas를 이용한 텍스트-> 이미지 변환기 (2) | 2010.10.13 |
각종 거대 개발사에서 아이폰 플랫폼에 포팅하기 위한 여러 시도만 봐도 그러하다.
특히 버림 받은(?) 어도비의 애플 사랑이란... 측은하기 까지 하다 ㅎㅎ
다양한 스마트폰, 다양한 태블랫 PC, 다양한 스마트TV, 그외 다양한 가전 플랫폼이 속속 등장하고 있는 요즘과 미래 상황에 이기종 플랫폼의 부담은 날이 갈수록 증가한다
과연 하나의 소스로 다양한 플랫폼에 얹힐 수 있는 날이 올까?
기술의 통합, 표준은 자본주의 환경에서의 기업들의 이해관계를 따진다면 실현은 불가능해 보인다
음.. 그렇다고 정부가 나서나? 우리나라 위피 사례는 섣부른 정부 개입의 문제점을 보여줬다
또, 그렇다고 소프트웨어를 위한 전세계적인 범정부가 있을 수 있나...
그럼 별도의 표준화 기구 정도는 예상해 볼 수 있겠다. 그러나 말했듯이 다양한 이해관계.. 음. 될리 없지..
물론, 꼭 그렇게 될 필요가 있나? 라는 원초적 질문이라면 패스~~
여하튼 플랫폼 이식, 멀티플랫폼화에 대한 요구는 환경의 다양성,발전과 더불어 끊임없이 제기될 것이다
원소스 멀티플랫폼을 위한 기술적 현황
2010.10.21
현재의 소프트웨어 플랫폼은 그 어느 때보다 멀티 플랫폼에 대한 요구가 강하게 나타나고 있다
스마트폰의 열풍과 참신한 모바일기기의 보급, 성장세는 소프트웨어 생태계에 많은 순 기능적 변화를 주고 있다. 이러한 성장세는 거대 업체들의 비즈니스 기회로 활용되고 있으며 그 만큼 다양한 플랫폼이 출시되기에 이른다. 애플의 iOS, 구글의 안드로이드, 마이크로소프트의 윈도모바일7등을 대표적인 이기종 플랫폼 사례로 들 수 있으며 이와 더불어 기존 PC의 OS환경도 여전히 유효한 플랫폼으로 자리하고 있다.
이들 이기종 플랫폼은 각기 다른 개발 언어와 런타임 환경을 제공하고 있어 하나의 제품을 다른 플랫폼에 이식하기 매우 어려운 구조를 띄고 있다. 따라서 소프트웨어 개발사(자) 입장에서는 하나의 소스가 여러 플랫폼에 쉽게 이식될 수 있는 환경을 간절히 원하고 있으며 이는 시장의 기술적 흐름을 통해서도 명백히 알 수 있다
이 글에서는 원소스 멀티플랫폼화를 실현하기 위한 몇 가지 기술적 움직임을 살펴보기로 한다
웹 (모바일 웹, 하이브리드 앱)
멀티 플랫폼 실현을 위한 가장 보편적이고 잘 알려진 환경이 바로 웹이다. 이기종 플랫폼이라도 브라우저에 의존하는 웹 어플리케이션은 표준만 준수한다면 동일하게 구동된다. 즉 하나의 소스로 여러 플랫폼에 구동 가능하므로 멀티 플랫폼의 대안으로써 많이 활용된다.
다음과 같은 기술들이 웹의 한계를 극복시켜 줌으로써 앱으로써의 웹을 실현 가능케 한다
HTML5
웹의 기능을 대폭 향상시키는 차세대 표준 스펙. 전용 앱 못지 않은 어플 개발 가능
PhoneGap(Bondi, Titanium)
흔히 웹앱으로 불리는 하이브리드 앱 개발을 위한 프레임워크
웹에서도 장치의 고유 기능(가속도 센서, 기울기 센서 사진, 연락처 등)에 접근 가능
WebGL
OpenGL 프로젝트 중 하나로 별도의 플러그인 없이 웹에서 3D처리가 가능케 함
SVG
XML기반 2차원 백터 그래픽 언어로 표준 웹 기술임
플래시] Applications for iPhone
애플의 아이폰, 아이패드등의 제품에서는 플래시가 구동되지 않는다.플래시 개발사인 어도비는 거대한 애플 앱스토어 시장에 진입하기 위해 플래시 어플리케이션을 iOS 전용 어플리케이션으로 포팅해 주는 툴을 개발하였다
플래시 CS5 버전에 포함된 이 기능은 액션스크립트3로 개발된 플래시코드를 iOS 전용코드로 변환하여 앱스토어에 전용 앱으로 배포할 수 있도록 지원한다
관련 내용: http://labs.adobe.com/technologies/packagerforiphone/
Pdf: http://www.adityabansod.net/wordpress/wp-content/uploads/2009/11/iPhoneAppsCS5.pdf
사례: Chroma Circuit, Trading Stuff, Fickleblox, Just Letters, Red Hood, South Park
일러스트레이터] HTML5 Pack
대표적인 그래픽 저작 툴이 일러스트레이터는 CS5 버전에서 그래픽 결과물을 HTML5, CSS3, SVG등 웹 표준으로 포팅하는 기능을 포함 시켰다. HTML5 등의 표준 기술로 포팅된 결과물은 이기종 플랫폼에 구애 받지 않고 웹으로 구동시킬 수 있다. 이것 역시 원소스 멀티플랫폼을 위한 움직임이라 하겠다
관련 기사: http://www.macworld.com/article/154033/illustratorcs5_html5.html
Java] AlcheMo for iPhone
애플의 아이폰, 아이패드등의 제품에서는 자바프로그램 역시 구동되지 않는다
AlcheMo for iPhone 는 J2ME기반에서 개발된 자바코드를 아이폰에서 해석 가능한 C++ 코드로 포팅해 준다. 이 툴은 모바일 게임 개발툴을 제공하는 Innaworks Development Limited사에서 개발했다
관련내용: http://tech.gaeatimes.com/index.php/archive/how-to-install-compile-run-java-on-iphone/
Java] JVM for iPhone
자바를 개발한 SUN 사에서는 애플의 제품에 자사의 자바응용프로그램을 구동시키기 위해
J2ME에 기반한 아이폰용 JVM을 개발하겠다고 발표한적이 있다. 이것은 몇 년 전에 발표된 내용으로 애플의 ‘코드를 해석하는 소프트웨어 불가’ 방침에 그 행보가 확실치 않다. 다만 원소스 멀티플랫폼을 위한 SUN사의 노력을 엿볼 수 있다
관련 기사: http://www.infoworld.com/d/developer-world/sun-well-put-java-iphone-042
지금까지 소개한 사례들은 대체로 아이폰 포팅을 주제로 하고 있다.이는 현재 대세가 되는 플랫폼을 향한 업계의 반응이며 다른 플랫폼이 부각된다면 여전히 관련 포팅 기술이 출시될 것이다.
결국 이러한 움직임이 멀티플랫폼화를 위한 업계의 노력이라 할 수 있겠다.
또한 이런 노력과 시도들은 그만큼 시장의 요구가 있다는 반증이 될 것이다
'모바일' 카테고리의 다른 글
| 필요악? ActiveX (0) | 2010.11.25 |
|---|---|
| IE 8, 웹 조각(Web Slices) (0) | 2010.11.11 |
| 차세대 웹을 바라보는 차세대 시각이 필요하다 (0) | 2010.10.07 |
| Code Syntax Highlighter 툴 소개 (0) | 2010.09.30 |
| MobiOne, 아이폰 에뮬레이터 (5) | 2010.08.31 |
