html5 썸네일형 리스트형 일주일간 모은 링크 #5 How to develop a HTML5 Image Uploader HTML5를 적용한 이미지 업로더를 만드는 방법에 대한 글입니다. canvas태그를 사용하였으며 Firefox 4.1에서 동작하는 방법입니다. drag & drop을 이용하여 업로드할 파일을 선택하고 canvas에 preview를 보여주고 간단한 수정도 추가합니다. 그리고 ajax를 이용하여 업로드를 합니다. (얼마나 업로드 되었는지도 보여줄 수 있군요!) 로컬 파일을 불러 이미지 preview를 보여주는 부분이 저는 좀 신기합니다. FileReader()를 사용하는데 제가 이 부분에 대해서는 잘 몰라 하는 이야기이긴 합니다만 보안 문제가 발생할 수도 있을 듯 한데요. 아직 IE에서 동작하지 않기 때문에 국내에서 본격적으로 적용하기에는 .. 더보기 일주일간 모은 링크 #3 Tangram - 바이두에서 만든 자바스크립트 라이브러리 바이두에서 만든 자바스크립트 라이브러리로 65KB (gzip 압축시 17.7 KB)인 매우 작은 사이즈를 자랑합니다. Cheat Sheet를 봐서는 많은 기능보다는 핵심적인 기능으로만 구성했다는 느낌이 듭니다. 핵심적인 라이브러리 외에도 효과, 버튼, 날짜 선택기 등 기본적인 그러나 빈번하게 사용되는 컴포넌트를 같이 제공하고 있습니다. 자바스크립트로 .tar.gz 파일 로드 & 자바스크립트로 ID3 tag 읽기 자바스크립트를 이용하여 .tag.gz 파일을 읽고 MP3의 ID3 tag를 읽는 라이브러리입니다. 기본적으로 작지 않은 크기의 파일을 읽어야 하므로 실제 서비스에 적용하는 일은 그렇게 많지 않을 것으로 생각합니다. 하지만 자바스크립트를 사용.. 더보기 HTML5 어떻게 대응해야 하는 것일까요? HTML5 가 2010년 웹세상의 핫 키워드 중 하나였던 것 같습니다. 여기저기서 세미나가 열리고, 웹에는 지금 제가 쓸 내용과 비슷한 포스트가 잔뜩 쌓여 있습니다. 서점에서는 책도 벌써 여러권 전시되어 있더군요. HTML5이라는 것이 나왔는데, 도대체 어떻게 대응해야 하는가? 에 대한 이야기를 할까 합니다. 먼저 HTML5가 무엇인지 짧게 정리를 해볼까요? HTML5는 웹 개발자가 원하는 욕구에 의하여 출발하여, 공식적인 웹표준을 담당하고 있는 W3C라는 곳에서 표준을 인정하여 워킹그룹으로 진행되고 있는 개선된 웹UI 기술이라고 할 수 있습니다. HTML5하면 HTML의 히스토리나 역사 이야기가 꼭 나오는데요, 이런 부분은 다른 글에서 쉽게 찾을 수 있을것 같아서 생략합니다. 누구를 위한것인가? 매우 .. 더보기 Sencha Animator Ext JS, Sencha Touch 등으로 유명한 Sencha에서 Sencha Animator(http://www.sencha.com/products/animator/)를 출시하였습니다. Sencha Animator는 WebKit 계열의 브라우저에서 동작하는 CSS3 기반의 애니메이션을 만들 수 있는 도구입니다. 플래시와 유사하게 타임라인을 지원하며 객체와 이미지를 화면에 드래그하고 키 프레임을 설정할 수도 있습니다. 하지만 CSS3로 동작하기 때문에 플래시가 동작하지 않는 iOS 기반의 기기에서도 정상적으로 동작합니다. 또한 CSS3에서 제공하는 기능을 적용할 수도 있으며 사용자가 직접 CSS를 만들어 적용할 수도 있습니다. 홈페이지에서 홍보 문구로 내세우고 있는 것은 1. 서드파티 플러그인 없이 C.. 더보기 이전 1 2 다음