Search results for 'canvas'

[책리뷰] HTML5 Canvas

2012.05.03 09:32



HTML5 Canvas

저자
스티브 펄튼 지음
출판사
한빛미디어 | 2012-01-20 출간
카테고리
컴퓨터/IT
책소개
플래시 개발자, 웹 개발자, 입문자도 쉽게 익히는『HTML5 C...
가격비교 글쓴이 평점  


얼마전에 몇 몇 동료분들과 Canvas 스터디를 시작했었다.

Canvas는 HTML5 스펙 중 가장 현실세계에서 사용이 가능하고 뭔가 그럴싸해 보이는 UI를 만들 수 있는 기술이다. 이처럼 html5 기술 중 실제 사용할 수 있는 사례가 있나 싶다..아무튼 알아두면 써먹을 곳이 많은 기술이다.


다시 스터디 이야기로 돌아가서,,

예상대로(?) 난 많은 분들께 구박을 받으며 숙제를 잘 안하는 등 어렵게 따라가고 있다. 

사실 책을 잘 읽지도 많은 부분을 공부하지 못하고 있지만, 일단 책을 사고 뒤적거리고는 있긴하다.

그래서 간단한 리뷰를 작성해볼까 한다.

Canvas를 공부하고 싶으면 그냥 이 책이 제일 좋다고 할 수 있다. 물론 다른 책은 잘 모르겠지만 여튼 난 눈에 띄는 책은 못봤다.

이책은 Canvas에 대한 기본적인 API를 설명하고, 중간부터 바로 응용편이다.

응용편이라고 보이는 챕터에서는, 간단한 물리학을 이용한 애니메이션/Audio/Video/PhoneGap연동 등을 다룬다.  말하자면 Canvas를 활용해서 다른 HTML5기술이나 최신 기술로 할 수 있는게 뭘까? 실제 어떻게 하지? 에대한 실제 사례를 보여주고 싶었던 것 같다.


간단하게 Chart와 같은 것을 그리고, 이미지를 간단하게 편집하는 기능을 만들고 싶다면 앞부분에 설명되는 Canvas API만으로도 충분하다.

이런 부분은 W3C홈페이지를 참고해도 좋다. 

http://dev.w3.org/html5/2dcontext/

Canvas 를 가지고 가볍게 공부하고 싶은 분들, 자바스크립트로 신기한 애니메이션을 어떻게 만드는지 궁금했던 분들에게는 교과서와 같은 느낌으로 접근할 수 있다. 

이책은 좀 두껍다.(691페이지) 1~4챕터까지 보고 뒤에는 연관성이 없어보이니 원하는 응용편을 살펴보면 될 것 같다.


자 Canvas를 활용한 HTML5기술을 한 번 익혀보시길~!



니가요 HTML5_JS_CSS canvas, html5, SVG

일주일간 모은 링크 #5

2011.01.10 02:00
How to develop a HTML5 Image Uploader
HTML5를 적용한 이미지 업로더를 만드는 방법에 대한 글입니다. canvas태그를 사용하였으며 Firefox 4.1에서 동작하는 방법입니다. drag & drop을 이용하여 업로드할 파일을 선택하고 canvas에 preview를 보여주고 간단한 수정도 추가합니다. 그리고 ajax를 이용하여 업로드를 합니다. (얼마나 업로드 되었는지도 보여줄 수 있군요!) 로컬 파일을 불러 이미지 preview를 보여주는 부분이 저는 좀 신기합니다. FileReader()를 사용하는데 제가 이 부분에 대해서는 잘 몰라 하는 이야기이긴 합니다만 보안 문제가 발생할 수도 있을 듯 한데요. 아직 IE에서 동작하지 않기 때문에 국내에서 본격적으로 적용하기에는 무리가 있을 수도 있지만 경험삼아 만들어보면 좋을 듯 합니다.

Java의 String.format 메소드를 JavaScript로 구현한 코드입니다. Java에 익숙한 분이라면 편리하게 사용할 수 있는 유틸리티가 아닌가 합니다. 이런 저런 자료를 찾다 보면 일본 쪽에서도 JavaScript와 관련된 재미있는 코드를 많이 볼 수 있습니다. 국내에서는 단순히 copy & paste의 대상인 것 같아 조금 아쉬운 느낌이 드네요.

CSS를 이용하여 Javascript를 대체할 수 있는 32가지에 대해 소개하는 글입니다. 세계 지도, 타임라인, 라이트박스, 아코디언, 차트 (별로 예쁘지는 않네요)등 빈번하게 사용하게 되는 UI를 Javascript를 사용하지 않고 CSS만으로 만들 수 있는 방법을 소개하고 있습니다. Javascript에 대한 지식이 없더라도 비슷한 효과를 낼 수 있는 방법이라는 점에서 코드에 익숙하지 않은 초보 개발자나 디자이너들에게 유용한 페이지라고 생각합니다.

nundefined HTML5_JS_CSS canvas, CSS, FileReader, html5, image uploader, String.format

일주일간 모은 링크 #3

2010.12.26 23:00
Tangram - 바이두에서 만든 자바스크립트 라이브러리
바이두에서 만든 자바스크립트 라이브러리로 65KB (gzip 압축시 17.7 KB)인 매우 작은 사이즈를 자랑합니다. Cheat Sheet를 봐서는 많은 기능보다는 핵심적인 기능으로만 구성했다는 느낌이 듭니다. 핵심적인 라이브러리 외에도 효과, 버튼, 날짜 선택기 등 기본적인 그러나 빈번하게 사용되는 컴포넌트를 같이 제공하고 있습니다.

자바스크립트를 이용하여 .tag.gz 파일을 읽고 MP3의 ID3 tag를 읽는 라이브러리입니다. 기본적으로 작지 않은 크기의 파일을 읽어야 하므로 실제 서비스에 적용하는 일은 그렇게 많지 않을 것으로 생각합니다. 하지만 자바스크립트를 사용하여 PC상에서만 하던 작업을 웹브라우저에서도 할 수 있다는 점에서 재미있는 라이브러리라고 하겠습니다. 

자바스크립트를 공부할 때 읽으면 좋을 책들을 단계별로 소개하고 있습니다. 초급/중급/고급/신의 네 가지 수준으로 나누어 소개하고 있으며 이 외에도 참고하면 좋을 블로그에 대한 소개도 되어 있습니다. 마지막에는 여러 책 중 단 세 권만을 선택해야 할 때 고른 책도 정리되어 있습니다. Professional JavaScript for Web Developers, Object-Oriented JavaScript, JavaScript Patterns 가 바로 그 주인공이네요. 안타깝게도 아직 국내에 번역서는 안나온 상태입니다.

HTML5의 Canvas에 대한 튜토리얼 사이트입니다. Basics, Advanced, Games의 세 단계로 나뉘어 있으며 현재 Basics는 완료되고 Advanced가 연재 중입니다. 아직까지 연재된 분량이 어렵지 않고 절 하나의 양이 그렇게 많지 않으므로 하루에 한 절씩 따라하며 익히다 보면 어느새 Canvas에 대해 많은 것을 알 수 있게 될 것 같습니다.

초보자를 위한 자바스크립트 디자인 패턴입니다. 무료로써 파일, ePub, PDF, 온라인 버전 등을 제공하고 있습니다. 위에서 언급한 JavaScript Patterns 책을 구입하기 전에 이 글부터 먼저 보면 좋을 것으로 생각합니다.


nundefined HTML5_JS_CSS Baidu, canvas, Design Patterns, html5, id3, mp3, tangram, tar.gz, tgz, tutorial, 자바스크립트 책

일주일간 모은 링크 #1

2010.12.12 23:30

자바스크립트의 성능을 향상시키는 10가지 방법에 대한 글입니다. 로컬 변수를 활용하라, with()구문을 사용하지 말라 등 속도를 높이기 위한 방법을 설명해두었습니다. 최근 자바스크립트 엔진의 속도가 빨라지면서 코드가 느리게 짜여진 경우에도 문제가 발생하는 일은 많지 않지만 어딘가에 있을 자바스크립트의 실행 속도가 느려 고민하는 분들은 이 글을 읽고 한 번쯤 코드를 살펴보면 좋을 것 같습니다.

iOS, android, nokia & symbian, blackBerry 등 다양한 기기에서 모바일 웹 개발을 할 때 살펴봐야 할 공식 가이드를 한 곳에 모아둔 곳입니다. 글에서 모아둔 가이드가 완전하지 않고 때로는 틀리는 경우도 있다고 경고하고는 있지만 모바일 웹을 만들 때 가장 먼저 살펴봐야 할 자료들이라고 생각합니다.

HTML의 Canvas와 자바스크립트를 이용하여 누드 사진을 판독하는 자바스크립트 라이브러리입니다. 서버에서 누드 사진을 판독하는 기술은 이미 오래 전에 도입된 것으로 알고 있는데 이제 HTML을 이용한 이미지에 대한 처리가 가능해지면서 이런 재미있는(?) 코드도 나오는 듯 합니다. 현재 이 코드는 IE9, FF3.6 이상, 크롬, 사파리 (아이폰/아이패드 포함), 오페라 브라우저에서 사용할 수 있습니다. <video>를 사용한 동영상에서 누드 사진(동영상이라고 해야할까요?)을 판독하는 데모도 있습니다만 제 네트워크 속도가 문제인지 정상적으로 데모를 확인할 수는 없었습니다.

크롬 웹스토어가 오픈하면서 크롬 브라우저에서 애플리케이션을 실행시킬 수 있게 되었는데요 여기에 발표된 여러 앱들이 iPad의 디자인에서 얼마나 많은 영향을 받았는지에 대한 기사입니다. 저는 아직 설치를 해보지 않았는데 기사에 있는 이미지들을 보면 iPad앱과 거의 동일한 것을 알 수 있습니다. 기사 내에서 iPadification of the web (웹의 아이패드화)이라는 표현을 썼는데요 이런 방향이라면 내년 상반기에는 국내에서도 iPad 앱과 유사한 웹을 만나게 될 가능성이 높을 것 같습니다. 물론 이렇게 된다면 HTML5와 자바스크립트의 활용도가 더 커지겠지요.



nundefined HTML5_JS_CSS canvas, Detection, guideline, IPAD, javascript, Mobile Web, Performance, Web App, 누드사진판독, 모바일웹, 성능, 성능향상, 향상