본문 바로가기

html5

Manifest for web application 요약 Manifest for web application을 사용할 일이 있어 스펙을 살펴보며 간단히 정리했다. 이 스펙은 web application을 브라우저가 아닌 곳에서 실행시킬 때 기기에서 표시할 정보와 실행에 필요한 정보를 저장하는 방법에 대해 정의하고 있다. 모바일 사이트나 web os등 이 스펙이 사용되는 곳은 심심치 않게 있겠지만 일반 사용자에게는 거의 눈에 띄지 않는 스펙이기도 하다. 개인적인 필요로 http://w3c.github.io/manifest/ 문서를 한 번 살펴보면서 정리한 것이므로 개인적으로 불필요하다고 생각하는 부분은 정리하지 않았고 문서의 품질을 높이기 위해 리뷰를 하지 않았으므로 내용이 누락되어 있거나 오역이 있을 가능성이 높다. 그러므로 이 문서를 참고할 분들은 적용 전에.. 더보기
WebSocket API 지난 7월 13일 강남역에서 열렸던 JSLounge 여섯번째 세미나에서 발표한 WebSocket API 자료이다. Web Socket API from JeongHwan Jang WebSocket의 경우 표준이 논의된지 상대적으로 오래된 상황이라 이미 다양한 라이브러리가 나와 있고 WebSocke에 대한 번역서도 나와 있을 정도로 널리 알려진 프로토콜/API이다. 개인적으로 업무에 활용하게 되면서 내용을 살펴봤고 HTTP와는 달리 서버와 항상 연결되어 있다는 점에서 게임, 채팅, Push 등 HTTP의 약점을 메꿀 수 있을 것이라고 생각한다. API는 간단한 편이나 프로토콜까지 살펴보기에는 다소 어렵다는 생각이 든다. 특별히 WebSocket을 지원할 서버를 만드는 것이 아니라면 프로토콜을 살펴보지 않아도.. 더보기
HTML5 API - The Screen Orientation API and Fullscreen 지난 5월 2일 JSLounge의 다섯 번째 세미나에서 발표한 HTML5 API - The Screen Orientation API and Fullscreen 발표자료이다. 지난 달 게임을 개발할 때 유용하게 사용할 수 있는 HTML5 기능들에 대해 조사하다가 조금 더 자세히 알아보고 싶은 생각이 들어 주제로 정했다. HTML5 API - The Screen Orientation API and Fullscreen from JeongHwan Jang Fullscreen은 이미 플래시에서의 전체 화면 기능이나 동영상을 볼 때 종종 사용했던 기능으로 프로그램을 사용하여 기능을 제어할 수 있다는 점을 빼면 특이한 내용은 없다. 개발자의 관점에서는 혼동할 수 있는 부분이 있으나 특별히 어려운 것은 아니다. 반면 .. 더보기
fluent 2013에서 관심 있는 세션 JavaScript와 HTML5를 주제로 하는 Fluent 컨퍼런스가 5월 28일부터 30일까지 샌프란시스코에서 열린다. 한 번쯤 가보고 싶은 컨퍼런스지만 이래저래 연이 닿고 있지 않은 컨퍼런스다. 트위터를 돌아다니다가 누가 이 컨퍼런스에 대해 이야기했길래 가볍게 스케쥴을 살펴보다가 관심이 생기는 세션 몇 개를 정리해본다. Secrets of Awesome JavaScript API Design혼자만 사용할 기능을 만드는 것이 아니라면 항상 고민하게 되는 주제이다. 설명 중 APIs are developer UX.라는 표현이 와닿는다. Who Killed My Battery: Analyzing Mobile Browser Energy Consumption모바일 브라우저와 배터리 소모량의 관계라니. 삼성전자.. 더보기
Getting Started with WebRTC 지난 화요일 JSLounge의 네 번째 세미나에서 Getting Started with WebRTC라는 제목으로 WebRTC에 대해 발표했다. 완전히 새로운 구성으로 발표를 하기에는 아직 스스로도 WebRTC에 대해 잘 알지 못하기에 스스로도 이번 기회에 공부한다는 목표로 http://www.html5rocks.com/en/tutorials/webrtc/basics/ 의 내용을 정리하는 방법을 이용했다. Getting started with WebRTC from JeongHwan Jang 이번 준비를 하면서 느낀 것은 WebRTC가 단순히 카메라와 마이크로 수집한 정보만을 보내기 위한 스펙이 아니고 많은 활용 가능성이 있는 스펙이라는 점이다. 여러 보안 문제로 브라우저에서 실행되는 이상 데스크톱 애플리케.. 더보기
[책리뷰] HTML5 Canvas HTML5 Canvas저자스티브 펄튼 지음출판사한빛미디어 | 2012-01-20 출간카테고리컴퓨터/IT책소개플래시 개발자, 웹 개발자, 입문자도 쉽게 익히는『HTML5 C...글쓴이 평점 얼마전에 몇 몇 동료분들과 Canvas 스터디를 시작했었다.Canvas는 HTML5 스펙 중 가장 현실세계에서 사용이 가능하고 뭔가 그럴싸해 보이는 UI를 만들 수 있는 기술이다. 이처럼 html5 기술 중 실제 사용할 수 있는 사례가 있나 싶다..아무튼 알아두면 써먹을 곳이 많은 기술이다. 다시 스터디 이야기로 돌아가서,,예상대로(?) 난 많은 분들께 구박을 받으며 숙제를 잘 안하는 등 어렵게 따라가고 있다. 사실 책을 잘 읽지도 많은 부분을 공부하지 못하고 있지만, 일단 책을 사고 뒤적거리고는 있긴하다.그래서 간단한.. 더보기
Mobile Web & HTML5 performance optimization 6월 14일부터 16일까지 Velocity라고 하는 웹 최적화와 운영에 대한 컨퍼런스가 Santa Clara에서 열리고 있습니다. 아직 현지에서는 마지막 날 행사가 남아 있겠네요. 이 행사의 워크샵 중에 모바일 웹과 HTML5의 퍼포먼스 최적화에 대한 자료가 있어 공유해봅니다. 워크샵의 진행자는 Maximiliano Firtman 이며 이 사람은 Programming the Mobile Web(2010년 7월 출간)과 jQuery Mobile Up and Running(2011년 10월 출간 예정)의 저자이기도 합니다. 또한 http://www.mobilexweb.com/의 운영자이기도 합니다. 모바일 웹 개발에 있어서 당장이라도 적용해볼 수 있는 여러 내용들을 담고 있으니 모바일 웹에서의 성능 향상 방.. 더보기
HTML5 - 쿠키 vs. 로컬스토리지 (local storage) 일전에 모바일웹에서 사용자의 특정 값을 비로그인 환경에서 보관해야 할 개인화된 정보가 있었습니다. 당연히 쿠키를 사용하면 쉽게 해결 될 수 있는 것이였습니다. 하지만 모바일 환경이라는 점(HTML5를 보다 잘 지원함으로)으로 쿠키를 대체할 수 있는 기술을 검토해 봤습니다. 여기저기 흩어져 있는 자료를 모은 정도이지만 그때 검토하기 위해 정리한 자료를 공유합니다. (Mindjet이라는 MindMap을 사용해서 그림이미지로 첨부합니다) 모바일웹에서는 로컬스토리지 사용이 충분히 가능한 상황임을 알게 되었습니다. 특히나 모바일에서는 성능문제가 PC보다 민감하다고 볼 수 있는데요. 쿠키의 경우 HTTP Header에 매번포함되어야 하는 문제도 있습니다. 물론 쿠키의 얼마 안되는 사이즈가 중요한 문제는 아니긴 합니.. 더보기