루키의 보석함

작년 영국의 파이낸셜타임즈는 애플의 앱스토어의 폐쇄성과 수익 분배 이슈에 대응하기 위해서 HTML5를 활용한 웹 앱을 도입했다고 합니다. 그래서 빠른 업데이트가 가능하고 기존의 웹사이트와 통합해서 관리할 수 있게 되었고, 가입자도 5개월만에 1백만 접속자가 웹앱에 접속함으로 인해 성공한 사례로 회자되고 있습니다. 실제로 아이폰으로 파이낸셜타임즈(http://app.ft.com)에 접속해 보면 "홈 화면 추가"를 통해 Web App으로 등록을 유도하도록 잘 설명되어 있습니다. 처음 등록한 후, 일반 앱처럼 실행되고 로컬 저장소도 사용하는 것을 보면서 잘 만들었다는 생각이 들기도 했습니다. 아직 HTML5가 보편화되지는 않았지만 향후 발전 가능성에 대해서는 잘 보여준 사례라고 할 수 있을 것 같습니다. 실제..

예전에 HTML 태그에 대해서 정리했었는데요. 오늘 살펴보니 DOM을 활용해서 제어할 수 있는 기능이 추가되어 있네요. 즉, 동영상 내에 재생, 중지 등의 버튼이 포함되는 것 뿐만 아니라 HTML 내에 있는 버튼을 통해서 동영상을 제어할 수 있도록 Methods, Properties, 그리고 Events가 제공되고 있습니다. 다음 예제를 살펴보시면 재생과 정지를 하는 버튼과 속성(Property)를 변경해서 동영상 크기를 제어하는 것을 알 수 있습니다. HTML5에서 항상 그렇듯 지원하는 브라우저에서만 제대로 보입니다. ㅠㅠ Example 1 Play/Pause Big Small Normal Your browser does not support HTML5 video. Video courtesy of Bi..

현재 웹브라우저로는 HTML5를 활용한 본 테스트를 사용할 수 없습니다. (크롬, 파이어폭스, 사파리로 보세요~ 미니) HTML5로 블로그의 BGM 형태의 모델도 가능할 것 같아서 걍 한번 만들어 봤습니다. 지난번에 설명한 태그를 활용했구요.. 자동 재생하도록 설정하고 제어 컨트롤을 숨겨봤습니다. ^^ 구글 크롬, 파이어폭스, 사파리에서 사운드를 켜시면 음악이 재생되는 것을 들을 수 있을 겁니다. 음악은 현재 "짝"이라는 프로그램에서 사용하는 류이치 사카모토의 rain이란 곡입니다. 당연히 HTML5의 audio 태그를 지원하는 브라우저에서만 재생이 됩니다. 기존의 IE8 이하에서는 멀뚱한 텍스트만 보이겠죠.. 지난번 HTML5 강좌에서도 한번 설명한 것이기는 하지만 소스를 간단히 한번 보시죠.. 아래 ..

앞서 video 태그에 대해서 알아봤는데요. 이번에는 HTML5에서 지원하는 audio 태그에 대해서 한번 정리해 보려고 합니다. 그래서 플래시 등과 같은 플러그인으로 처리했었고, 모든 브라우저를 똑같이 지원하지는 못했죠. 그래서 HTML5에서는 표준으로 sound 파일이나 audio 스트림을 재생하기 위한 audio 태그를 정의하게 됩니다. HTML5의 video 태그에서 지원하는 포맷은 Ogg, MPEG 4, WebM의 세가지라고 했는데요.. audio 태그에서도 3가지 포맷을 지원합니다. Ogg Vorbis, MP3, Wav 포맷이 이에 해당합니다. 현재 각 브라우저별로 지원하는 동영상 포맷은 다음과 같습니다. Format IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Saf..

이러닝 분야 뿐만 아니라 많은 웹 사이트들이 동영상을 제공하고 있습니다. 현재까지는 표준이 없어 플래시와 같은 플러그인을 통해 동영상을 보여줬는데요. 브라우저마다 플러그인 지원 여부가 달라 표준화가 필요했었습니다. 현재 HTML5에서는 이러한 동영상을 출력하기 위한 표준을 제공하고 있습니다. HTML5의 태그가 이에 해당하는데요. video 태그에 대해 간략하게 정리하려고 합니다. HTML5의 video 태그에서 지원하는 포맷은 Ogg, MPEG 4, WebM의 세가지 입니다. Ogg는 Theora 비디오 코덱과 Vorbis 오디오 코덱을 포함한 컨테이너로 보통 ogg라는 확장자를 사용하는 동영상입니다. MPEG 4는 잘 아는 대로 H.264 비디오 코덱과 AAC 오디오 코덱을 사용하고 있구요. WebM..

HTML5 활용 - 마크 필그림 지음, 현동석.강유훈 옮김/에이콘출판 HTML5에 대한 관심이 생겨 자료를 살펴보던 중 만난 책입니다. 제목 처럼 구글 개발자를 통해 HTML5의 구성이 어떻게 이루어져 있으며, 실제 활용하는 방법까지 충실하게 설명되어 있습니다. 1장을 "HTML이 지나온 길"을 읽으면서 어렴풋이 알고 있던 HTML의 역사에 대해 보다 확실하게 이해하게 되었습니다. 이 책을 잘 보면 video를 설명할 때도 그렇고 해당 주제에 대한 보다 깊이 있는 설명을 자주 하고 있습니다. 이런 면에서 매우 잘 만들어진 책이라는 느낌을 받았네요.. 프로그래머가 아닐지라도 IT 관련 업무를 한다면 1장은 꼭 읽었으면 하는 생각이 들었습니다. 2장 "HTML5 지원 감지 여부"는 HTML5의 주요 기능을 ..

자.. HTML5의 두번째 시간을 시작해 보도록 하겠습니다. 먼저 HTML5의 예제를 한번 보도록 하죠.. HTML5 예제 브라우저가 video 태그를 지원하지 않습니다.-..- 아마도 파이어폭스, 사파리, 크롬등의 브라우저에서 보면 곰 한마리가 나올겁니다. 반면에 IE에서 살펴보면 video 태그를 지원하지 않는다는 텍스트가 나타납니다. 아직 IE에서는 HTML5를 지원하지 않기 때문에 다른 브라우저를 설치하셔서 꼭 확인해보시기 바랍니다. 다른 브라우저를 설치하고 난 다음에 이런 생각을 할 겁니다. 뭐야~ 기존에 다 되던거 아닌가? 그러나 기존에 embed 태그나 object 태그로 윈도우 미디어플레이어나 플래시로 재생하던 것과는 차이가 있습니다. 바로 표준 HTML 규격으로 외부의 플러그인 설치 없이..

제 홈페이지와 동시에 연재하려고 옮겨 봅니다. 요즘 HTML5에 대한 이야기들을 종종 볼 수 있습니다. 상당히 흥미를 가지고 있었던 주제인데요.. 이번에 새롭게 정리해 보려고 합니다. HTML5의 정의 HTML5는 HTML, XHTML, HTML DOM에 대한 새로운 표준으로 W3C(World Wide Web Consortium)와 WHATWG(Web Hypertext Application Technology Working Group)의 상호 협의로 만들어진 것입니다. W3C는 XML, XHTML등의 표준을 작성한 곳으로 이미 여러번 설명했었구요.. WHATWG는 web form과 application에 대한 표준을 만들던 곳이라고 합니다. 중간에 XHTML이 나오기는 했지만, HTML의 XML 버전에 ..