본문 바로가기

HTML5

[ Hybrid App ] Jquery에서 PHP+Mysql 서버로 부터 Json 값 받기 [프롤로그]우선, 이 자료는 이틀간 삽질을 한 끝내 만들어낸 소스입니다.json_encode라는 것으로JSON 데이터를 받을 수 있다고 하지만,여러번 테스트를 해보았지만,, 결과적으로 되지 않았습니다.... 결국, 2가지 방법을 찾게 되었는데요. 1. JSON문자열을 직접 만들자!!!그래서 php서버 에서 mysql로 받은 데이터를 직접 반복문을 통해서 JSON 문자열을 생성 시켰습니다. 생성 시킨 JSON문자열은 ajax를 통해서 콜백 받은 함수에서 JSON.parse함수로 인스턴스화 시켜서 그 데이터를 사용하는 구조입니다. 2. PHP JSON 라이브러리 를 사용하자. (다운로드 : http://pear.php.net/package/Services_JSON/download/)출처 : http://my.. 더보기
[ Hybrid App ] Page별 Html 파일 분할 시, Javascript 이벤트 처리 다중 Page를 한 html파일에 한 Javascript로 해놓은 샘플은 많이 보았습니다.하지만!!! 전 코딩을 분할 시켜서 보는게 이해하기도 편하고 수정도 편해서,예전 안드로이드 할 때도 클래스를 자주 분할 시켜 둡니다. HTML5를 분할 시키고, 그냥 id 값만 불러와 event 처리를 하니,아무 현상도 일어나지 않아 고민을 많이 했습니다. html: ( 따로 분할된 HTML)테스트 javaScript: ( 따로 분할된 Javascript)$("#btnId").bind('tap',function(event, ui){ alert("탭 이벤트 발생");}); main.html (처음 불러지는) 페이지의 이벤트는 잘 처리 되지만,Page를 이동 시키면 이벤트 발생이 되지가 않습니다.위 같이 href로 이동.. 더보기
[ Hybrid App ] SenchaTouch Loading Spinner var myMask = new Ext.LoadMask(Ext.getBody(), {msg: "Please wait..."});myMask.show();ormyMask.hide();생성 한후 show와 hide 함수를 이벤트에 잘 이용하시면 됩니다.^^ 더보기
[ HTML5 ] Sin, Cos을 이용한 Vounce 이해 제5장 Circle Move Your browser does not support HTML5 Canvas. 위와 같이 벽면에서 Circle을 사용할려고 할 때, 입사각과 반사각을 구하게 된다. 이럴 때 사용하는 공식이 좌우 벽면 : 180 - angle 상하 벽면 : 360 - angle 위와 같은 공식을 사용하게 된다. ( 자세히 알고 싶으신 분은 위 Canvas 소스에 있으니 참고하세요.^^) 왜 저런 공식이 나오는 지 궁금해서 한번 조사해보았다. Cos Sin의 원리만 알면 간단했다. 위 그림을 보시면 연두색이 Cos 이며 빨간색은 Sin임을 알 수 있다. [ 원리 ] 1. 180도일 경우 Sin의 값은 동일하다. 2. 360도일 경우 Cos의 값은 동일하다. 하지만!! 3. 360도일 경우 Sin.. 더보기
[ HTML 5 ] Canvas Transform 출처: http://aslike.egloos.com/2898232 Canvas2D의 변환은 여타 3D API에서 제공하는 변환처럼 행렬로 처리된다 동차 좌표계를 포함 Canvas2D에 사용되는 행렬은 3 by 3 행렬이 된다. 변환 할 좌표를 x, y 라 하고, 최종 변환 된 좌표를 x', y' 이라고 했을 때, 변환 공식은 다음과 같다. 위쪽은 OpenGL을 많이 다뤄본 사람들에게 익숙한 행렬 곱 표현 방법이고 아래쪽은 DirectX를 많이 다뤄본 사람들에게 익숙한 행렬 곱 표현 방법이다 어느쪽이든 결과는 같다 눈치 빠른 사람은 눈치 챘으리라고 생각하지만 위 그림의 행렬에서 a, b, c, d, e, f는 위에서 설명한 함수 중 transform( a, b, c, d, e, f ) setTransfor.. 더보기
[ HTML 5 ] HTML5 캔버스 문자 API 1. 자동 기본값 : 10px san-serif 2. measureText : Text의 속성을가지고 있는 객체( 현재 width만 구현되어 있는 상태 ) 3. 현재까지 나온 event : - 'load' : Canvas가 로드 될시 - 'keyup' : 키보드를 눌렀을 때 - 'change' : 컴포넌트의 변화가 있었을 때 - 'click' : 컴포넌트를 클릭 했을 시 4. 중복되는 event함수에서는 eval()을 사용할 수 있다. - eval(구분자 +' = e.target.value') - 보안의 문제점이 있다. - 알아보기가 어렵다. 5. 표준 폰트 스타일 : normal | italic | oblique | inherit 표준 폰트 두께 : normal | bold | bolder | ligh.. 더보기
[ HTML5 ] Canvas를 이용하여 눈내리는 모션. 그렇게 좋은 내용은 아니고 참고만 하시면 될듯 합니다. 이미지 위로 눈이 내리는 효과를 내보았습니다. 움직임이 깔끔하지는 않지만, 참고용으로 보시면 나쁘지 않을 듯 합니다. Canvas resize, Gradation, 도형 그리기, shadow등 여러 기능을 이용했습니다. 이번엔 파일로 올리지만, 다음 부터 도메인으로 직접 링크 시켜 놓을 생각입니다. 그럼 오늘도 즐코딩하세요. 더보기
[ HTML5 : CSS3 ] Transition 데모 책에 예제 소스를 연습하다가, transition 이라는 멋진 속성을 보게 되었습니다. 하지만, ease-in, ease-in-out등 옵션이 몇가지가 있는지 궁금해서 조사해봤는데~ 역시 수는 적지만 다양한 옵션이 있네요. 샘플은 아래 사이트에서 부분적인 소스만 복사한 것이구요. 참고용으로 보시면 될듯 합니다. 사이트: http://css3.bradshawenterprises.com/transitions/ Demo - Different timing functions Ease Ease In Ease Out Ease In Out Linear Custom Hover on me 더보기

티스토리툴바