지난주에는 멋진 Chroma Hash를 소개해드렸는데, 이번에 또 다른 jQuery 패스워드 플러그인을 발견했습니다.
iPhone 스타일의 패스워드 플러그인을 입력창에 사용하면 iPhone처럼 입력한 값을 점 모양의 문자로 감추어버립니다.
아직 글자를 중간에 삽입할 수 없는 등의 몇 가지 한계가 있습니다.

from iPhone-like password field; quickshow character
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Brad Neuberg씨가 이번에 iPhone에 포함된 두 가지 근사한 HTML5 기능에 대해 알려주셨습니다.

Safari 자바스크립트 데이터베이스 프로그래밍
HTML5 스펙에는 클라이언트 데이터 저장을 위한 새로운 메커니즘이 있습니다. 바로 자바스크립트 데이터베이스 지원입니다. HTML 5는 현재 Web Hypertext Application Technology Working Group(WHATWG)가 개발하고 있습니다.

자바스크립트 데이터베이스 지원은 Safari 3.1 이후부터 가능하며, iPhone OS는 2.0 이후부터 가능합니다.

HTTP 쿠키가 허용하는 용량보다 많은 데이터를 사용자의 로컬 컴퓨터에 저장하려는 웹 개발자라면 이 문서를 꼭 읽어보셔야 합니다.

HTML5 응용프로그램 캐시
구글의 Michael Nordman씨가 "이건 아직 Safari나 iPhone에서 지원하지 않습니까?"라고 물었습니다.

David Kilzer씨가 이에 대한 답변을 남겼습니다. "이 기능은 iPhone OS 2.1에 포함되었습니다. iPhone에 설치된 Safari에서 '+' 버튼을 눌러 '홈 스크린에 추가하기'를 사용하면, (HTML5 스펙별로) manifest가 정의된 웹 응용프로그램이 다른 캐시된 리소스와 함께 저장될 것입니다. 이 기능이 동작하려면 manifest 파일이 '반드시' 정확한 MIME 타입으로 제공되어야 합니다.

Mac OS X에는 아직 이 기능을 지원하는 Safari를 탑재하지 않았습니다."

from HTML5 Features in latest iPhone; Application Cache and Database
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

iPhone in Action을 집필하고 계시는 Christopher Allen씨와 Shannon Appelcline씨가 Ajaxian 커뮤니티에 몇몇 챕터를 무료로 다운로드 받을 수 있도록 공개해주셨습니다.
from Exclusive iPhone in Action Chapter Downloads

'[IT] Web Tech' 카테고리의 다른 글

Fennec (Mobile Firefox) Alpha 1 릴리스  (0) 2008.10.21
MAMA, 웹 표준을 누가 쓰죠?  (0) 2008.10.20
alert()에게 작별을  (3) 2008.10.17
웹 에디터 비교  (4) 2008.10.14
iPhone in Action 일부 챕터 다운로드  (0) 2008.10.10
Pyjamas: Python을 위한 GWT  (0) 2008.10.08
IE 8 Beta 2 Ajax 기능  (0) 2008.10.08
JavaScript로 만든 팩맨  (0) 2008.09.20
iPhone에서도 SVG를 사용할 수 있습니다  (0) 2008.09.19
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Dylan Schiemann씨가 iPhone이 SVG를 지원하지 않는 것에 실망했다는 글을 쓴 적이 있습니다:
iPhone의 Safari는 현재 SVG를 지원하지 않습니다. Mac과 Windows의 Safari 3 베타는 현재 지구상에서 SVG 성능이 가장 좋은 브라우저입니다. 그래서 이번 누락에 대해 다소 실망했습니다. 우리는 연말쯤에는 iPhone이 Safari 3로 업그레이드하고 SVG에 대한 네이티브 지원을 해주기를 바랍니다. 현재로서는 SVG와 mousemove 이벤트 핸들러가 없어서 동적인 차트나 그리기 도구는 요원한 일입니다.
하지만, 이제 iPhone 2.1 브라우저에서는 SVG 컨텐트와 테스트가 정상 작동하는 것을 보실 수 있습니다!

from SVG working on the iPhone
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Tomi Mickelsson씨가 병을 돌려라(Spin the Bottle)라는 이름의 iPhone 웹 프로그램을 만들었습니다. 아시다시피, 웹 프로그램은 애플 스토어에 들어갈 필요가 없습니다.

iPhone/Touch/에뮬레이터에서 프로그램을 실행해볼 수 있습니다. 그리고 아래처럼 Tomi씨가 iPhone의 특수 API들을 어떻게 사용했는지 보실 수 있을 것입니다:
[code:js]
function startTouch() {
    setTimeout(hideURLbar, 100);
 
    document.body.ontouchstart = function(e) {
        oldangle1 = 0; oldangle2 = 0; oldangle3 = 0;
        //spinout();
        cancelspin();
    }
 
    document.body.ontouchmove = function(e) {
        // prevent window scrolling!
        e.preventDefault();
 
        if (timer_rot != 0)
            return;
 
        var touch = e.touches[0]; // finger 1
        var dx = centerx - touch.pageX;
        var dy = centery - touch.pageY;
        var angle = Math.atan2(dy, dx);
 
        oldangle3 = angle;
        oldangle1 = oldangle2;
        oldangle2 = oldangle3;
 
        var val = "rotateZ(" + angle + "rad)";
        bottle.style.webkitTransform = val;
        shadow.style.webkitTransform = val;
        rot = angle;
        //cancelspin();
    }
    document.body.ontouchend = function(e){
        if (timer_rot == 0) {
            var val = ((oldangle2 - oldangle1) + (oldangle3 - oldangle2)) / 2;
            val /= 3;
            if (val == 0.0)
                val = rand(0.3)+0.2;
            else if (Math.abs(val) <0.3)
                val *= 3;
 
            //cancelspin();
            startanim(val);
        }
    }
}
// remove our touch handlers
function stopTouch() {
    document.body.ontouchstart = null;
    document.body.ontouchmove = null;
    document.body.ontouchend = null;
}

from iPhone Web App: Spin the Bottle
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

iPhone 응용프로그램들은 많은 주의와 이해를 필요로 합니다. 수많은 iPhone 응용프로그램 개발자들에게 이러한 작은 응용프로그램들은 iPhone 플랫폼에서의 개발을 값을 매길 수 없는 어마어마한 캐시 카우가 될 수 있습니다. 하지만 iPhone이 Safari를 구동시킨다는 것을 생각해보면, Safari에서 사용할 수 있게된 새로운 WebKit 기능의 사용에 더 많이 열광하지 않는다는 것이 놀랍습니다.

jQuery UI팀의 수석개발자(lead developer)인 Paul Bakaus씨는 Safari가 웹 개발자들에게 제공할 수 있는 가능성에 대해 찾기 시작했습니다:
저는 제가 Safari에서 시도했던 것들에 만족할 수 없어서, 최근 iPhone SDK 문서와 실제 CSS 변환 스펙을 깊이 연구하기 시작했습니다.

WebKit iPhone에서 동작하는 멋진 기능들에 대해 처음 읽었을 때는 조금 회의적이었습니다. 문서가 거의 없어서 다른 어떤 개발자에 의해 구현된 적도 없고, 데모도, 테스트도 없었습니다. 시간많은 학생 몇 명이 바로 뛰어들어야 하는 것 아냐? 라고 생각했었습니다.
iPhone 기능에 대한 정보를 찾는 Paul씨의 방법은 조금 부족했었던 것 같습니다. 그래서 Paul씨는 iPhone 시뮬레이터를 이용해  내장된 Webkit 기능들 특히 2D CSS 변환을 해킹하기 시작했습니다.
멋진 녀석이 있습니다: perspective 기능은 다른 기본 기능들이 어떻게 동작하는지 정의하는 것 같습니다:

실제 예제를 볼까요: 다음 세 함수들을 보세요:
  • rotateX - 엘리먼트를 X축 상에서 회전
  • rotateY - 엘리먼트를 Y축 상에서 회전
  • rotateZ - 엘리먼트를 Z축 상에서 회전(기본값, "rotate"와 같음)
이 함수들을 사용해보세요 - 세가지 모두 여러분에게 평면, 2D 애니메이션을 제공해줍니다. 사실은 이들이 3D 매트릭스를 사용한 함수들이이지만 말이죠.  하지만, -webkit-perspective 속성을 200으로 변경하고 실행해보세요. 지금은 가상 깊이가 만들어지고 이 세가지 함수들은 여러분에게 믿을 수 없는 결과를 안겨줄 것입니다.
Paul씨는 끝으로 iPhone 브라우저에서 다룰 수 있는 전형적인 iPhone 응용프로그램과 유사한 아주 멋진 뒤집기(flip) 효과를 만들었습니다. 작은 데모일 뿐이지만, 이것은 iPhone에서 웹 브라우저 기반 응용프로그램이 상호반응할 수 있는 방법과 모바일 웹 사용자들에게 보여줄 수 있는 것에 대한 가능성을 열어주었습니다.

데모를 보시려면, iPhone이나 iPhone 시뮬레이터가 필요합니다.

from 3D CSS Transforms on the iPhone
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Matthew Congrove씨가 iPhone SKD를 가지고 놀았지만, 원래 자기 분야가 아니라 자기 분야로 돌아와 iPhone용 웹 응용프로그램을 작성하셨다고 합니다. 그리고 새로운 것들을 가능하게 한 Safari의 업데이트에 아주 즐겁게 놀라셨다고 합니다:
연구 도중에 저는 제가 정말 좋아함에도 불구하고 완전히 잊혀진 어떤 것을 떠올렸습니다; iPhone 업데이트가 네이티브 써드파티 응용프로그램만을 위한 것은 아니었지만, 이미 있는 응용프로그램들도 업그레이드 했습니다. 네, 이미 있는 응용프로그램에는 Safari도 포함되어있습니다. iPhone의 내장 브라우저 업그레이드는 CSS 애니메이션과 트랜지션에 대한 지원, JavaScript로 접근할 수 있는 데이터베이스, 약간의  새로운 DOM 셀렉터 등을 추가했습니다. 나에게 이것은 myDailyPhoto 응용프로그램이 좀 더 네이티브 Cocoa 느낌을 낼 수 있다는 것을 의미했습니다. 여기까지 생각이 미치자마자 저는 자리에 앉아 이런 작은 테스트 프로그램을 작성했습니다.


휙휙 움직이는 효과(flick effect)를 위해 Matthew씨는 아래와 같은 CSS를 작성했습니다:
[code:css]
.divSlide {
        -webkit-animation-name: "slide-me-to-the-right";
        -webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" {
        from { left: 0px; }
        to { left: 100px; }
}

from iPhone Safari Flick Navigatrion By Example
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

WebKit의 새로운 CSS 변환에는 회전, 크기 변경 등의 여러 기능이 있어 사람들이 여러 가능성을 생각할 수 있게 되었습니다. LifeRayPaul Bakaus씨는 실험적으로 이런 새 기능을 이용해 iTunes 같은 멋진 Coverflow 효과를 작성하셨습니다. 실시간으로 흐름 및 애니메이션도 지원하지만, canvas나 미리 렌더링된 그래픽은 사용하지 않았습니다.
이 편리하고 매력있는 css 기능은 커스텀 CSS 태그를  이용해 페이지의 어느 엘리먼트에서도 모든 종류의 2d 변환을 실행할 수 있도록 합니다. 이것은 DOM 엘리먼트를 회전하거나 변형할 수 있을 뿐 아니라, 여러분이 원하는 것을 위해 일반적인 매트릭스 함수를 사용할 수도 있다는 의미입니다.

CSS 변환은 nightly build 뿐 아니라 Safari 3.1과 iPhone에서도 가능합니다. 따라서, 현재의 사용자들을 목표로 삼는 것도 가능합니다.

사용자 삽입 이미지
Paul 씨는 실제 Coverflow 위젯을 작성하는데 jQueryUI를 사용했으며, jQueryUI의 슬라이더로 슬라이드 효과를 낼 수 있었습니다. 마우스를 클릭하거나 키보드의 좌/우 화살표를 이용해 탐색할 수 있습니다.

이 데모를 보시려면 CSS 변환이 지원되는 Safari 3.1 이나 Webkit이 필요합니다.

from Using CSS transforms to Build a Coverflow Effect on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1

댓글을 달아 주세요

  1. addr | edit/del | reply BlogIcon 하늘빠 2010.05.03 18:21

    흐미.. 아주 좋네요. 그런데 유료. ㅠㅠ

iPhone 원격 디버거

2008.04.24 00:38 from [IT] Web Tech

Jon Brisbin씨는 iPhone 개발을 하는 Java 개발자인데, 보다 나은 iPhone 원격 디버거가 필요한 가려움증을 스스로 해결하기로 하고 iPhoneDebug를 만들었습니다:

iPhone Debug Consle 은 개발 중에 iPhone/iPod Touch 을 더 잘 보고 더 잘 동작해보기 위해 만들어졌습니다. 저는 "console.log 구문을 넣은 뒤에 리로드"해야 하는 디버깅 방법에 좌절하고 있었습니다. 저는 Firebug의 콘솔과 디버거 같이 끝내주는 무엇을 원했습니다.

페이지와 상호연동할 방법이 없었기 때문에 iPhone/iPod Touch 응용프로그램을 디버깅하려는 저의 노력은 점점 실패로 느껴졌습니다. console.log 구문을 넣고 페이지를 리로드 하기 전에는 변수값과 CSS 값을 얻어낼 수도 없었습니다. 이건 아니다 싶었습니다.

제가 필요로 하는 것을 찾던 중에, Joe Hewitt씨의 iPhone/Firebug 통합본을 보게 되었습니다. 하지만, 저는 데스크탑 브라우저에서 firebug나 "console.log" 없이도 동작할 수 있는 보다 굳건한 무엇을 원했습니다.

Java 개발자인 저는, 자연스럽게 데스크탑 브라우저와 iPhone간의 메시지 전달을 위해 COMET과 Jetty의 이용을 고려하게 되었습니다. 며칠이 지난 뒤에, 실행가능한 해결책이 나왔습니다. 그것은 모바일 JavaScript의 것을 데스크탑 콘솔에 기록할 수 있었는데, 제 경우에 있어 가장 큰 이점은 결과를 제 데스크탑 콘솔로 받으면서 iPhone에서 실행할 JavaScript를 보낼 수 있었다는 것입니다. Firebug와 마찬가지로, 메소드를 호출하고 CSS 값을 가져오고, Firebug로 응용프로그램을 작성할 때 사용했었던 디버깅 방법들이 모두 가능합니다.

아래가 실제로 동작하는 화면입니다:

Issuing Commands in ipd Console

Issuing Commands in ipd Console


from iPhone Remote Debugger on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

from iPhone WebKit Goodness: 3D CSS Transforms and ontouch events on Ajaxian

사용자 삽입 이미지

그림:
1992년...
Visual Basic 개발자 : 메모리 관리요? 그런 것도 해요? 불쌍한 Visual C++ 개발자들...
COM 개발자 : 질 낮은 스크립팅? 고수준? 불쌍한 Visual Basic 개발자들...

2008년...
iPhone 웹킷 개발자 : 메모리 관리요? [대괄호 [쓰고 [여기저기 ]]]? 불쌍한 Cocoa 개발자들...
Objective C 개발자 : 질 낮은 스크립팅? 고수준? 불쌍한 JavaScript 개발자들...

글쓴이는 애플의 다른 제품에는 관심이 없지만(차세대 맥북 프로나 3G iPhone이 나오거나 말거나 하는 식이죠), "iPhone 에서 뭘 개발할 수 있지?" 에 대해서는 관심이 많다고 합니다.

JavaScript 로만 할 수 있는 것을 찾고 있는데, 지난번에 발표된 iPhone SDK는 Cocoa 개발자들만 좋을 것 같다고 합니다. WebKit 사용자들을 위한 onguesture* 이벤트 같은 것도 있기는 했고요.

이제 iPhone Ajax 개발자들을 위한 몇가지 사항이 더 추가되었습니다.

일단 첫번째는 Safari입니다. 3.1 버전이 발표되고 나서 CSS 2D 변환이 가능했었는데, iPhone에서는 진정한 앨범 넘기기 효과를 만드는 게 가능한 3D 변환도 지원된다고 합니다.

그 다음은 onguesture* 이벤트에 이은 ontouch* 이벤트와 새로운 DOM 인터페이스인 Touch, TouchList, TouchEvent 등입니다.

이 같은 지원을 무척 반기면서도 걱정 반, 기대 반인 모양입니다.  웹 진영은 안 그래도 어려우니까 잡스옹께서 잘 봐달라고 하네요.
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요