« Previous : 1 : Next »

[javascript] node.js - 서버사이트 자바스크립트의 기대주

Posted at 2010/11/02 22:32
Filed under Extreming X/Style&Design

자바스크립트는 현재 점점 빨라지고 있고 또한 강력해지고 있다. 특히 각종 모바일 디바이스가 보급되면서 모바일 웹에 대한 관심이 커졌고, 이에 따라 자바스크립트 엔진의 성능 역시 발전하고 있다. 팜프리는 이미 모든 애플리케이션을 자바스크립트를 사용해 만들 수 있도록 했고, 아이폰 및 안드로이드에서도 여러 가지 프레임워크를 통해 네이티브 애플리케이션과 같은 UI 및 성능을 보이는 웹 애플리케이션 개발이 가능해졌다. 하지만 이는 모드 클라이언트 사이트에서의 자바스크립트, 쉽게 얘기해서 브라우저에서 동작하는 자바 스크립트를 말한다.

jQuery.js 등의 스크립트 라이브러리를 요즘 많이 사용하고 있는데, node.js 는 서버사이드에서 강력한 성능을 발휘할 수 있는 서버사이드 자바스크립트 라이브러리라고 할 수 있다. 우리는 node.js 를 통해서 자바스크립트의 미래를 짐작해 볼수 있을 것이다.

기존에는 서버사이드에서 스크립트를 돌려서 모든 연산을 수행하고 그 결과값으로 HTML을 만들어서 클라이언트에게 전송했다. 클라이언트는 HTML을 랜더링해서 사용자에게 보여주는 역활을 했고, 자바스크립트는 클라이언트측에서 자잘한 UI기능을 수행하며 감초역활을 했는데, 현재는 서버와 클라이언트의 역활이 상당히 많이 달라졌다.

과거 서버에서의 역활들이 클라이언트로 만히 이동을했다. jQuery등을 사용해서 UI플로우 및 여러 인터렉션과 각종 로직의 상당 부분을 클라이언트 사이드에서 처리한다. 그리고, 요즘 흔히 오픈API라고 불리는 API를 제공하여 서버의 데이터에 대한 접관과 처리를 클라이언트가 제오할수 있도록 했다.

node.js는 구글이 개발해서 현재 크롬 브라우저에 탑재되어 있는 자바스크립트 엔진인 V8을 기반으로 만들어진 서버사이트 스크립트 이다. 오히려 V8의 기능을 자바스크립트를 통해 사용 할수 있도록 만들어진 wrapper라고 말하는 것이 더 정확한 표현일 것이다.
node.js 는 V8이 내부적으로 특정 기능을 수행하는 과정에서 유저가 등록한 callback function 을 호출해 주도록 한다.

창시자 Ryan Dahl이 발표한 design goal을 정리하면,
- Function은 직접 I/O에 연결되지 않는다.
- 저수준(low-level)을 지향하며, 스트리밍으로 모든 것을 처리하되, 데이터 버퍼일을 강제하지 않는다.
- TCP, DNS, HTTP 등의 중요한 프로토콜에 대해 빌트인 된 형대로 지원된다.
- 다양한 HTTP 기능들을 지원한다.
- 클라이언트 사이트 자바스크립트 프로그래밍과 비슷하며, 동시에 과거의 유닉스 시스템 프로그래밍과도 친숙하다.

* 프레젠테이션 : http://www.scribd.com/doc/23801896/Node-js-JSConf-2009

Home : http://www.nodejs.org/
API : http://www.nodejs.org/api.html

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0)

(0)

Posted by 홍반장

Tag: javascript, jquery, node.js, 자바스크립트
Response: No Trackback , No Comment
RSS :: http://tcbs17.cafe24.com/tc/rss/response/5611

[HTML] <canvas> tag

Posted at 2010/11/02 21:58
Filed under Extreming X/Style&Design

HTML 5 <canvas> Tag

Example

How to display a red square, with the canvas element:

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

Try it yourself »

Definition and Usage

The <canvas> tag is used to display graphics.

The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

Differences Between HTML 4.01 and HTML 5

The <canvas> tag is new in HTML 5.

Tips and Notes

Tip: You can write text between the start and end tags, to show older browser that they do not support this tag.

Note: Some browsers already support the <canvas> tag, like Firefox, Chrome, and Opera.

Attributes

New : New in HTML 5.

Attribute	Value	Description
heightNew	pixels	Sets the height of the canvas
widthNew	pixels	Sets the width of the canvas

Standard Attributes

The <canvas> tag also supports the Standard Attributes in HTML 5.

Event Attributes

The <canvas> tag also supports the Event Attributes in HTML 5.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0)

Posted by 홍반장

Tag: canvas, HTML5
Response: No Trackback , No Comment
RSS :: http://tcbs17.cafe24.com/tc/rss/response/5610

SOA 시대와 웹 프로그래밍 모델

Posted at 2010/11/02 21:30
Filed under Extreming X/Architect

SOA 시대와 웹 프로그래밍 모델
유비쿼터스 컴퓨팅이나 SOA 같은 개념을 현실과 그대로 비교해 보면 거창하게 느껴지기도 하고, 이론적이라고 치부할 수도 있다.
하지만 누군가 상상하고 그린 모습이 미래를 만드는 후보가 되고 끈길지고 열정적인 사람이 매달린 꿈은 곧 현실이 된다.

WOA = REST?
WOA가 곧 REST(Representational State Transfer)는 아니지만, 둘은 구분하기 어려울 정도로 꽤나 닮아 있다. 다음은 위키피디아에서 찾은 WOA 정의다.
Web Oriented Architecture(WOA) is a style of software architecture that extends service-oriented architecture(SOA) to web based applications, and is sometimes considered to be a light-weight wersion of SOA. WOA is also aimed at maximizing the browser and server interactions by use of technologies such as REST and POX(Plain Old XML).
REST는 WOA 를 위해 쓰이는 기술중의 하나일 뿐임을 알 수 있다.

SOFEA(Service-Oriented Front-End Architecture)
SOFEA가 기준으로 삼는 5가지 원칙은 아래와 같다.
1. 표현 층에서 서로 직교하는 세 가지 다른 처리인 애플리케이션 내려받기와 표현흐름, 데이터 교환은 서로 구분해야 한다.
2. 클라이언트 유형을 고려해 내려 받는 방법을 다양하게 해야 한다.
3. 표현 흐름은 서버 개입 없이 클라리언트가 처리한다. 대부분의 웹 프레임워크가 사용하는 프론트 컨트롤러 패턴은 바람직 하지 않다.
4. 표현 층도 반드시 복잡한 데이터 구조와 타입, 데이터 제약을 지원해야 한다. 이상적인 모습은 클라이언트/서버 모델이 아니라 P2P모델을 통한 자연스런 이벤트 통지다.
5. MVC는 표현 층 개발에는 좋은 패턴이지만 프론트 컨트롤러를 사용하는 MVC 구현은 잘못된 방식이다. MVC 컨트롤러는 표현흐름과 데이터교환을 주도하는 핵심 구성요소로 클라이언트 상태 변화를 관장한다.

아래의 그림 1, 이는 전통적인 MVC 와 SOFEA가 제시한 MVC 차이를 잘 표현하는 그림이 다.
1. 전통적인 MVC 모델
Figure 1. Classic MVC

2. 웹 2.0의 새로운 아키텍처
Figure 2. Modern Web 2.0 architecture

현재의 문제점은 지금까지의 작업에 묻혀서 생각의 전환이 쉽지않는다는 것과 좀더 나은 프로그램을 하려는 마음이 생기지 않는데에 있다. 작업일정에 쫓기다 보면 계속 동일한 방법만 반복되는게 현실이니까.
방법론이나 프로세스를 꾸준히 발전시켜서 적용하는건 일단은 리더의 문제라고 담아 짊어지려 한다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0)

Posted by 홍반장

Tag: MVC패턴, REST, SOFEA, WORA, 안드로이드, 웹개발
Response: No Trackback , No Comment
RSS :: http://tcbs17.cafe24.com/tc/rss/response/5609

[도서구매] 가난뱅이의 역습, 행복은 혼자 오지 않는다. 생각버리기 연습, 글로벌 소프트웨어를 꿈꾸다.

Posted at 2010/11/02 19:44
Filed under 생활의 발견/Books

가난뱅이의 역습 - 무일푼 하류인생의 통쾌한 반란!

: 한국의 88만원세대, 일본의 버블세대, 유럽의 천유로세대 등 양극화사회에서 점점 가난으로 내몰리는 젊은이들의 생존전략을 유머러스하게 담은 책. 공짜로 살아가는 생활 기술과 가난뱅이의 등골을 빼먹는 사회에 대항하는 반란의 노하우를 유머로 승화시켜 전달하고 있다. 자본주의와 신자유주의에 대항하는 일환으로 재활용가게를 운영하고 있는 저자만의 유쾌하고 기발한 방식으로 양극화가 심화되는 사회에 대소동을 일으켜 가난뱅이들이 창궐하는 세상을 바꾸자고 이야기한다.
싼 집을 얻기 위해 노숙을 하고, 밥값을 아끼기 위해 걸식을 하며, 맥도날드 햄버거 하나로 세끼를 때우기도 하고 때로는 먹튀(먹고 튀는)작전까지 행할 수 밖에 없는 이 시대의 모습을 재미있는 일러스트와 함께 날카롭게 꼬집으며 희화화하였다. 또한 사회의 약자로 착취당하며 살고 있는 가난한 젊은세대가 주체가 되어 지역에서 연대하며 살아가기, 재활용 혁명 등 새로운 공동체를 만드는 실천적인 방법 또한 제시하고 있다.

행복은 혼자 오지 않는다 - 웃기는 의사 히르슈하우젠의 도파민처럼 짜릿한 행복 처방전

: 독일의 의사이자 코미디언인 에카르트 폰 히르슈하우젠이 쓴, 행복에 대한 상식을 깨는 책. 의술 없이도 사람들을 건강하게 만들 줄 아는 저자는 유쾌하고 에너지 넘치게 살아가는 법을 차근차근 일러준다. 행복을 좇는 것이 아니라 행복이 스스로 찾아오게끔 하라고 조언하며, 행복을 ‘공동의 행복’, ‘우연의 행복’, ‘순간의 행복’, ‘자기극복의 행복’, ‘충만한 행복’으로 분류해 우리가 스스로 행복해질 수 있는 다양하고 기발한 방법에 대해 말한다.
과연 우리를 진짜로 행복하게 만드는 것은 무엇일까? 이 책은 이 물음에 대한 답을 심리학과 신경생물학적 연구 결과를 기반으로, 의사로서의 지식과 경험을 들어 재밌고 설득력 있게 제시한다. 행복을 갈구하는 우리의 태도를 조급해하지 않고 편안한 마음을 가질 수 있도록 변모시키며, 일상생활과 밀접한 주제들을 유머가 섞인 이야기로 만들어 고유의 행복론을 전한다. 특유의 재치 있는 문체, 행복한 색감의 일러스트와 유머러스한 사진이 재미를 더한다.

생각 버리기 연습

: 일본 열도를 뒤흔든 생각 버리기 연습법을 담은 책. 어떻게 해야 복잡하고 쓸데없는 생각을 버릴 수 있을까? 저자는 우선 우리를 괴롭히는 잡다한 생각의 정체를 바로 알아야 한다고 이야기한다. 잡다한 생각의 근본 원인을 파악했다면, 그 다음은 우리의 일상생활에서 어떻게 적용할지에 대해 알아야 할 것이다. 저자는 이 과정을 말하기, 듣기, 보기 같은 8가지 영역으로 나누고, 우리의 일상생활에서 바로 실천할 수 있는 방법을 제시한다.
예를 들어 ‘말하기’ 영역에서는 자신의 감정을 ‘응시’하는 법에 대해 이야기한다. 만약 분노 에너지가 들끓어 화가 난다고 생각되면, 이 감정을 따옴표로 묶어버린다. 즉 ‘화가 난다’가 아니라 ‘나는 화가 난다고 생각한다’라고 감정을 객관적으로 바라보는 법을 익히는 것이다. 이렇게 일상에서 바로 실천할 수 있는 방법을 몸에 익히면, 우리를 괴롭히는 복잡하고 쓸데없는 생각으로부터 자유로워지게 될 것이다.

글로벌 소프트웨어를 꿈꾸다

: 성공하는 소프트웨어 회사에서 일하고 싶다
국내 소프트웨어 업계는 눈부신 발전을 해 왔다. 특히 기술과 기법에서는 세계 수준에 뒤떨어지지 않는다고 해도 과언이 아니다. 어느 정도 성공도 이뤘다. 그런데 왜 인도나 이스라엘처럼 세계적으로 성공한 글로벌 소프트웨어 회사는 나오지 않을까? 그 이면에 문화적인 요소가 있다. 세계 수준에 근접한 기술과 기법은 그에 걸맞는 균형 잡힌 사고와 문화 수준이 어우러질 때 극대화될 수 있다. 이것은 의식적으로 노력한다고 해서 쉽게 바꿀 수 있는 것이 아니다. 사고와 문화 수준은 회사 구성원 모두에게 내재된 것이며 무의식적인 행동으로 드러나기 때문이다. 무의식적인 행동으로 드러나는 것을 바꾸는 것은 어렵다. 개발 과정에서 항상 문서를 작성하고, 어떤 환경에서도 동료검토하는 것을 당연시 여기는 것은 내재화된 문화에서만 가능하다. 그리고 이런 내재화된 문화는 소프트웨어의 본질에 대한 확고한 신념을 갖고 있을 때 형성될 수 있다. 이런저런 핑계로 하지 않는다면 그것은 표면적인 지식에 불과하다. 문화로 내재화된 것이 아니다. 소크라테스, 데카르트와 같은 선각자들이 가르치려고 했던 것은 본질에 대한 심오한 통찰력이었다. 이 책은 소프트웨어의 문화, 본질, 그리고 통찰력에 관한 책이다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0)

Posted by 홍반장

Tag: 가난뱅이, 글로벌, 도서구매, 생각, 소프트웨어, 연습, 행복
Response: No Trackback , 4 Comments
RSS :: http://tcbs17.cafe24.com/tc/rss/response/5608

가장 나쁜 것은 아무 결정도 하지 않는 것이다

Posted at 2010/11/02 10:31
Filed under 생활의 발견/행복한경영

가장 나쁜 것은 아무 결정도 하지 않는 것이다
어떤 결정을 내려야 할 때 가장 좋은 것은 올바른 결정이고,
다음으로 좋은 것은 잘못된 결정이며,
가장 나쁜 것은 아무 결정도 하지 않는 것이다.
- 로저 엔리코

실수없는 최고의 결정을 내리려다 결정적 순간을 놓치는 경우가 많습니다.
의사결정에 있어 가장 중요한 것은 타이밍입니다.
많은 경우 잘못된 판단을 하는 것 보다 타이밍을 놓치는 것이 훨씬 나쁜 결과를 초래합니다.
요즘처럼 환경이 급격하게 변하는 때에는
70% 확신이 서면 결정하고 실행에 옮기는 것이 좋다고 말해집니다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0)

Posted by 홍반장

Response: No Trackback , No Comment
RSS :: http://tcbs17.cafe24.com/tc/rss/response/5607

딱 3년만

Posted at 2010/11/02 10:31
Filed under 생활의 발견/아침편지

딱 3년만
남들이 혀를 차는 생활을 해보자.
'아, 전혀 여한이 없는 최선의 노력을 다했다.'라고
스스로에게 말해줄 수 있을 만큼 피투성이의 노력을 기울여 보자.
지금까지 어떤 경력도 쌓지 못했고, 아무런 기술도 학력도
없다 해도 상관없다. 지금 당신에게 아무 것도 없다 해도
당신은 당신이 꿈꾸는 모든 것을 이룰 수 있다.
무엇이든 할 수 있고, 누구든 될 수 있고,
어떤 것이든 가질 수 있다.

- 김애리의《책에 미친 청춘》중에서 -

* '3년'이 중요한 것은 아닙니다.
중요한 것은 '여한이 없도록' 하는 것입니다.
어떤 일을 여한이 없게 3년만 몰입하면 인생이 달라집니다.
여기저기 기웃거리며 이것도 저것도 아니게 일하면
주어진 기회를 결국 허송세월하는 꼴이 됩니다.
딱 3년만 혼을 담아 몰입하십시오.
다음 일들은 저절로 풀립니다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0)

Posted by 홍반장

Response: No Trackback , No Comment
RSS :: http://tcbs17.cafe24.com/tc/rss/response/5606

아이폰(iphone) safari 웹개발 기본 팁 - input box 자판 지정

Posted at 2010/11/02 01:23
Filed under Extreming X/Style&Design

출처 : http://mrwebi.blog.me/70089919955

1. -webkit-text-size-adjust

페이지가 회전할때 폰트사이즈가 자동으로 변경되지 않도록 한다 그러나 안좋은 면이 있는데 보통 webkit 브라우저들에서는 적용안됨.

auto : default값, 화면의 폭에 맞추어서 텍스트 크기가 자동으로 조절된다.

none : 폰트의 자동크기변환을 막으며 모바일웹에서 일반적으로 설정한다.

n% : 폰트크기를 지정된 사이즈로 변경한다.

html {

-webkit-text-size-adjust:none;

}

2. apple-mobile-web-app-capable

content값이 yes로 지정하면 풀스크린모드로 자동하고 그렇지 않으면 일반모드로 작동한다.

window.navigator.standalone의 속성을 사용해서 풀스크린모드를 표시할수 있다.

content : yes|no

iphone os 2.1 이상

3. apple-mobile-web-app-status-bar-style

content : black | black-translucent | default

iphone os 2.1 이상

4. format-detection

content : default | no

전화번호형식의 경우 자동으로 전화걸기로 연결되는데 no로 할 경우 불가능하도록 한다.

iphone os 1.0 이상

5. viewport

content : width [number | device-width], height [number | device-height], initial-scale [number], user-scalable [no | yes]

width : default 980, 범위 200 ~10,000 (숫자로 입력) 픽셀로 표시됨

height : width값에 따라 비유로 적용이 됨, 범위 223 ~ 10,000 (숫자로 입력) 픽셀로 표시됨

initial-scale : 웹페이지가 보일 때 최초 한번 적용되어서 보이는 비율, zoom in에 대한 범위를 다음 속성으로 지정할수 있다.

minimum-scale : default 0.25, 범위 0 ~ 10.0

maximun-scale : default 1.6, 범위 0 ~ 10.0

user-scalable : yes | no (no 속성은 스크롤 할때 input box에 enter가 입력 되는 것을 막음.

device-width : 기기 width 픽셀값

device-height : 기기 height 픽셀값

7.iphone safari Apple Touch Icon표시

Apple "favicon" 표시방법(WebClip Bookmark)

이미지 파일 사이즈 : 57 * 57

8.아이폰에서 동영상 재생은 MP4파일로 링크
※ 오페라 같은경우 아래와 할경우 파일이 다운이 됨. 옴니아2에서도 동작은 함.

아이폰에서는 약간의 딜레이(곰티비, 다음TV팟 모두 그렇듯)를 거치면 영상이 아주 잘 재생됩니다.

<A HREF="AAAA.mp4"> 동영상보기 </A>

9.가장 상위 오브젝트는 수치로 가로를 넣어줘야함.

ex> <div style="width=100%;"> ---> <div style="width=480px;">

10.작은 모바일 화면에 맞게 웹페이지 화면 맞추기

META 태그를 쓰면 화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다.
다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서 화면을 맞추면 되더군요

11.모바일로 홈페이지 접속하는 사람들만 골라서 모바일홈페이지로이동시켜주기

12.모바일 사파리의 inputtype에 따른 키보드 레이아웃변화

1. <input type='text' /> 기본 텍스트 타입 입니다.

따로 변경된 부분은 없는 일반 적인 키보드 레이아웃이며 Form 요소로서 return 부분의 Text만 Go 로 변경됬습니다.

2. <input type='search' /> search 타입 입니다.

기본 text type과 동일하며 return 부분의 Text만 Search 로 변경됬습니다. Form 의 내부에 있을때만 적용됩니다.

3. <input type='tel' /> tel 타입 입니다.

제일 특이한 부분인데요 전화번호를 입력하기 위한 숫자 키보드가 나타납니다.

4. <input type='url' /> url 타입 입니다.

url 입력시 사용자 편의를 위해 하단에 "." , "/" , ".com" 등의 국가코드에 대한 알리아스를 제공합니다. ".com" 버튼을 길게 탭하고 있으면 선택할수 있는 리스트가 나타납니다.

5. <input type='email' /> email 을 입력할수 있는 type 입니다.

위의 url 과 동일하세 입력편의를 위한, "@" , "." 을 기본 레이아웃으로 제공하여 줍니다.

6. <input type='password' /> 일반적으로 많이 쓰이는 password 타입입니다.

텍스트를 타이핑하면, 숨김문자로 표시됩니다. 한가지 단점으로, 영문키보드만 사용가능합니다.

7. <input type='number' /> 마지막으로 숫자 입력을위한 number 타입입니다.

이때 나타나는 레이아웃은 일반 키보드 레이아웃에서 "123" 숫자 키를 선택했을떄 나타나는 레이아웃과 동일합니다.

8.사파리에서 검색에 히스토리 아이콘 표시하는 방법

사파리에서 검색에 히스토리 아이콘 표시하는 방법

다음 브라우저에서는 text field로 표시가 되는 것을 확인하였다고 하네요

Safari

Camino

Firefox

IE6

IE7

Opera 9

그러나 유효하지 않는 XHTML이 되버려서 safari만을 위한 자바스크립트를 사용하는 것이 더 좋을 것 같다.

스크립트 많이 쓰이는 구만...

safari ->사파리 브라우저 확인용 변수 사용자가 정의를 해야 되겠군요.

if (safari) {

var s = $("#s"); // s라는 ID값을 가진 객체를 jquery로 선택

s.attr("type", "search").attr("results", "5");

}

if (safari) {

var s = document.getElementById("s");

s.type = "search";

s.setAttribute("results", "5");

}

13.아이폰 모바일 사파리에서 아이폰 기본어플 실행하기

1. 전화걸기
Anchor 태그에 "tel" 프로토콜을 사용하면 자동으로 전화 연결이 됩니다. 전화 기능이 없는 아이팟 터치 에서는 주소록에 등록하기 메뉴가 뜹니다. 또한 '&lt meta name = "format-detection" content = "telephone=no &gt' 태그 설정을 해주지 않으면 연속 되는 7자리 이상의 숫자나 특정 패턴의 숫자는 전화번호로 인식하기 때문에 주의 하여야 합니다.

2. 문자보내기
Anchor 태그에 "sms" 프로토콜을 사용하면 문자보내기로 연결됩니다.
문자 보내기 어플은 아래와 같이 전화번호를 입력하여 받는사람을 지정할수 있습니다.

<a href="sms:">문자보내기 어플실행</a>
<a href="sms:1588-0010">Show 고객센터에 문자보내기 </a>

3. 메일보내기
Anchor 태그에 "mailto" 프로토콜을 사용하여 메일을 보낼수있습니다. 이는 모바일 사파리 뿐만 아니라 모든 브라우져에서 공통된 기능이구요, mailto 에는 받는사람, 메일제목, 참조자, 메일 내용까지 지정하여 어플을 실행시킬수 있습니다.
또한 메일보내기는 사파리를 종료하지 않고 메일보내기가 실행되므로, 사용자 관점에서는 참유용한 기능인듯 합니다.

mailto 에서사용 가능한 속성은 아래와 같습니다.

cc : 참조
bcc : 숨은 참조
subject : 메일제목
body : 메일본문

<a href="mailto:">메일보내기 실행</a>
<a href="mailto:sgb000@hanmail.net">bongdal 에게 메일보내기</a>
<a href="mailto:sgb000@hanmail.net?cc=sgb000@naver.com&bcc=sgb000@nate.com&subject=mailto test&body=mail send body">내용채워서 메일보내기</a>

4. 지도 어플 실행하기
조금 특이한 부분으로 애플과 구글의 제휴로 인해 실행되는부분인듯합니다.
그냥 Anchor 태그에 구글맵 주소를 입력하면 자동으로 구글 지도 어플을 실행시킵니다.

<a href="http://maps.google.com/maps?q=seoul&z=5">서울지도보기</a>
<a href="http://maps.google.com/maps?daddr=seoul&saddr=busan">서울-부산 길찾기</a>

Google Maps parameters

**Table 1** Supported Google Maps parameters
Parameter	Notes
q=	The query parameter. This parameter is treated as if it had been typed into the query box by the user on the maps.google.com page. `q=*` is not supported
near=	The location part of the query.
ll=	The latitude and longitude points (in decimal format, comma separated, and in that order) for the map center point.
sll=	The latitude and longitude points from which a business search should be performed.
spn=	The approximate latitude and longitude span.
sspn=	A custom latitude and longitude span format used by Google.
t=	The type of map to display.
z=	The zoom level.
saddr=	The source address, which is used when generating driving directions
daddr=	The destination address, which is used when generating driving directions.
latlng=	A custom ID format that Google uses for identifying businesses.
cid=	A custom ID format that Google uses for identifying businesses.

5. YouTubu 어플 실행하기
역시, Anchor 에서 youtube와 연결된 링크가 있을경우 자동으로 내장된 YouTubu 어플이 실행됩니다.
웹상에서는 위의경로는 웹페이지에서 실행되며, 아래의 경로는 전체화면 플레이어가 실행됩니다.

<a href="http://www.youtube.com/watch?v=a_GaLdTbOG4">YouTube Play1</a>
<a href="http://www.youtube.com/v/a_GaLdTbOG4">YouTube Play2</a>

6. 아이튠즈 및 앱스토어 실행하기
아래의 URL로 앱스토어 및 아이튠즈 어플이 실행가능합니다.
한가지 주의 할점은 앱스토어의 경우 "http://itunes.apple.com/kr/app/id304608425?mt=8" 어플이 일반적인 경로(일반 web에서 사용)이나, 모바일 사파리에선 내부에서 자동으로 아래 패턴으로 변경하여 사용합니다. 하지만 어플위에 올라간 UIWebview 컨트롤상에서는 따로 구현해주지 않으면 앱스토어 넘어가지 않습니다.

<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=304608425&cc=kr&mt=8&ign-iphone=1 ">지도어플(앱스토어 연결)</a>
<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=156093464&id=156093462&s=143441">Toy Story OST(itunes 연결)</a>

14.모바일 사파리에서 Geolocation 사용하기

Geolocation 객체는 모바일 사파리에서 위치 정보를 담고 있는 오브젝트로 OS3.0 이상에서 사용가능하며.
좌표체게는 위도와 경도를 이용하는 WGS84 좌표계를 쓰고 있다.

"위치 정보는 확률적 추정에 의한 것으로 정확성을 보장하지 않는다"(FF3.5 위치정보 도움말)

<script type="text/javascript">
/* Mobile Browser UA 체크 */
var ua = navigator.userAgent.toLowerCase();
browser = {
skt : /msie/.test( ua ) && /nate/.test( ua ),
lgt : /msie/.test( ua ) && /([010|011|016|017|018|019]{3}\d{3,4}\d{4}$)/.test( ua ),
opera : /opera/.test( ua ) || /opera mobi/.test( ua ),
ipod : /webkit/.test( ua ) && /\(ipod/.test( ua ) ,
iphone : /webkit/.test( ua ) && (/\(iphone/.test( ua ) || /\(device/.test( ua )),
android : /webkit/.test( ua ) && /android/.test( ua )
}

/* OS version 체크 */
<PRE class=code-javascript>var version = (function(){
var retObj = {}
if(browser.ipod || browser.iphone){
var pattern = /(iphone|ipod)+\s+os+\s+(\d)_(\d)(?:_(\d))?/igm
var result = pattern.exec(ua);

if(result != null && result.length > 0){
retObj.versionFull = result[0];
retObj.os = result[1];
retObj.major = result[2];
retObj.minor = result[3];
retObj.build = result[4] ? result[4] : 0;
}
}

return retObj;
})()</PRE>
// 3.1.2 에서는 Geolocation이 제대로 동작하지 않음.
if((browser.ipod || browser.iphone) && (version.major > 2 && version.build < 2)){
navigator.geolocation.getCurrentPosition(foundLoc);
}

function foundLoc(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("위도 : "+latitude +" , 경도 : "+longitude )
}

</script>

16.기울기에 따라 css따로 불러오게 하기

case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;

case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;

}
}
window.onload = orient();

</script>

</body>
</html>

17.툴바 숨기기

사파리브라우저의 주소입력창과 검색창이 있는 툴바를 보이지 않는 상태로 변환합니다.
툴바가 사라지는 것이 아니라 스크립트를 통하여 스크롤을 아래로 내려 툴바 바로 아래에서부터 웹페이지가 보여질수 있도록 하는것입니다.
이 스크립트를 사용하는 경우 사용자에게 최초로 페이지를 보여줄때 툴바가 차지했던 부분까지 화면공간을 확보하여 보여줄 수 있습니다.

window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);

}, false);

</script>

18.콘텐츠 길이가 너무 짧아 툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우

페이지 콘텐츠 길이가 너무 짧아서 스크롤할 내용이 없을때 이 스크립트는 우리가 원하는 기능을 수행하지 않을 수도 있습니다.
그리고 페이지 콘텐츠 길이가 스크롤을 내리기에 어정쩡한 길이라면 툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우도 있습니다.
이런문제를 해결하기 위해서는 높이값을 최대사이즈로 지정하여 페이지가 스크롤될 수 있게 할 수 있습니다.

19.라운드 박스

.box {
-webkit-border-radius: 5px; /* safari */
-moz-border-radius: 5px; /* firefox */
background: #ddd;
border: 1px solid #aaa;
}

20.터치이벤트

touchstart
touchend
touchmove
touchcancel (시스템이 터치한 것을 취소하는 경우)

이벤트 발생시 event객체를 전달 받는데 다음과 같은 프로퍼티가 존재합니다.

touches : 복수로 화면에 터치되는 각 손가락들에 대한 터치 이벤트 모음들. 이 객체들은 페이지에 터치되는 좌표들의 값을 가지고 있습니다.
targetTouches : 터치할 때 발생합니다. 그러나 전체 페이지가 아닌 타깃 요소에만 반응합니다.

21. 제스쳐

gesturestart
gestureend
gesturechange

event 객체를 전달받으며 다음과 같은 프로퍼티가 존재합니다.

event.scale : 확대비율 값입니다. 값 1은 확대축소가 되지 않은 기본 상태 입니다. 값이 1보다 작을 때는 줌-아웃이며 줌-인일때는 1보다 값이 큽니다.
event.rotate - 회전 각도입니다.

출처 : http://cafe.naver.com/republiccompany.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=97

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0)

Posted by 홍반장

Tag: inputbox, number, safari, tel, 구글맵, 모바일웹, 사파리, 숫자자판, 아이폰, 자판 지정, 전화걸기, 전화번호판
Response: No Trackback , No Comment
RSS :: http://tcbs17.cafe24.com/tc/rss/response/5605

« Previous : 1 : Next »

- 홍반장

Notices

Authors

긍적적인 사고, 음식의 절제, 규칙적인 운동 - 최근 글

Recent Trackbacks

Calendar

« 2010/11 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Bookmarks

Site Stats

Total hits:: 180027
Today:: 173
Yesterday:: 243

Subscribe to RSS articles Subscribe to RSS responses Subscribe to ATOM articles Subscribe to ATOM responses

긍적적인 사고, 음식의 절제, 규칙적인 운동

[javascript] node.js - 서버사이트 자바스크립트의 기대주

[HTML] <canvas> tag

HTML 5 <canvas> Tag

Example

Definition and Usage

Differences Between HTML 4.01 and HTML 5

Tips and Notes

Attributes

Standard Attributes

Event Attributes

SOA 시대와 웹 프로그래밍 모델

[도서구매] 가난뱅이의 역습, 행복은 혼자 오지 않는다. 생각버리기 연습, 글로벌 소프트웨어를 꿈꾸다.

가장 나쁜 것은 아무 결정도 하지 않는 것이다

딱 3년만

아이폰(iphone) safari 웹개발 기본 팁 - input box 자판 지정

Tag Cloud

긍적적인 사고, 음식의 절제, 규칙적인 운동 - 최근 공지

Notices

Archives

Categories

Authors

긍적적인 사고, 음식의 절제, 규칙적인 운동 - 최근 글

Recent Posts

긍적적인 사고, 음식의 절제, 규칙적인 운동 - 최근 댓글

Recent Comments

긍적적인 사고, 음식의 절제, 규칙적인 운동 - 최근 트랙백

Recent Trackbacks

Calendar

Bookmarks

Site Stats