미니의 꿈꾸는 독서, 그리고 프로그래밍 이야기

앞서 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 예제 브라우저가 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 버전에 ..

State Pattern - 디자인 패턴 참고서적 : Head First Design Pattern 소스코드 다운로드 : http://www.wickedlysmart.com/headfirstdesignpatterns/code.html 패턴 정의 #12 - 스테이트(state) Pattern 객체의 내부 상태가 바뀜에 따라서 객체의 행동을 바꿀 수 있습니다. 마치 객체의 클래스가 바뀌는 것과 같은 결과를 얻을 수 있습니다. 음료수 자판기와 같은 vending machine을 설계할 때, 스테이트 다이어그램을 그려봤을 겁니다. 이러한 경우에 사용하는 디자인 패턴입니다. 중첩된 if문으로 각각의 상태를 체크하는 대신, 각각의 상태를 구상 클래스로 정의해서 사용하는 방식입니다. 클래스의 개수가 많아질 수 있다는..

간혹 SCORM 콘텐츠 패키지에 대해 문의하시는 분들이 있습니다. 이번에 관련 절차를 한번 정리해 보려고 합니다.. 음.. 이건 제 나름대로 정리하는 방식이니까.. 참고하시면 됩니다. (요런 작업에는 정석이라는 것이 없어서요.. -.-) 1. 콘텐츠 추출 패키지할 콘텐츠를 정리합니다. 보통 html 파일과 swf 파일, 그리고 여러 스크립트 파일이 여기에 해당할 겁니다. 간혹 fla파일과 같은 원본 파일을 배포할 콘텐츠에 넣으시는 분들이 있는데요.. 용량도 커지고.. 소스도 유출되고.. 빼는 게 좋겠죠.. ^^ 2. API 파일 선정 SCORM을 사용하려면 SCORM API를 삽입해야 합니다. 그러려면 사용할 API가 필요한데요.. 일반적으로 SCORM 콘텐츠에 포함된 APIWrapper.js 파일을 사..

Composite Pattern - 디자인 패턴 참고서적 : Head First Design Pattern 소스코드 다운로드 : http://www.wickedlysmart.com/headfirstdesignpatterns/code.html 패턴 정의 #11 - 컴포지트(composite) Pattern 객체들을 트리 구조로 구성하여 부분과 전체를 나타내는 계층구조를 만들 수 있습니다. 이 패턴을 이용하면 클라이언트에서 개별 객체와 다른 객체들로 구성된 복합 객체(composite)를 똑같은 방법으로 다룰 수 있습니다. 트리 구조를 살펴보면 노드(node)와 잎(leaf)으로 구성되어 있는 것을 알 수 있습니다. 이러한 노드와 잎을 한가지 형태로 표현할 수 있도록 구성되어 있는 것이 컴포지트 패턴입니다...

Iterator Pattern - 디자인 패턴 참고서적 : Head First Design Pattern 소스코드 다운로드 : http://www.wickedlysmart.com/headfirstdesignpatterns/code.html 패턴 정의 #10 - 이터레이터(iterator) Pattern 컬렉션 구현 방법을 노출시키지 않으면서도 그 집합체 안에 들어있는 모든 항목에 접근할 수 있게 해주는 방법을 제공합니다. 반복적으로 처리해야 하는 것을 통합해 주는 패턴입니다. 배열, ArrayList, Hashtable등의 리스트 처리 방식이 모두 다릅니다. 이런 것을 iterator 패턴을 이용하면 동일한 방식으로 처리할 수 있습니다. 배열의 경우에는 직접 구현해 주어야 하지만, ArrayList나 H..

Template Method Pattern - 디자인 패턴 참고서적 : Head First Design Pattern 소스코드 다운로드 : http://www.wickedlysmart.com/headfirstdesignpatterns/code.html 패턴 정의 #9 - 템플릿 메소드 (Template Method) Pattern 템플릿 메소드 패턴에서는 메소드에서 알고리즘의 골격을 정의합니다. 알고리즘의 여러 단계 중 일부는 서브클래스에서 구현할 수 있습니다. 템플릿 메소드를 이용하면 알고리즘의 구조는 그대로 유지하면서 서브클래스에서 특정 단계를 재정의 할 수 있습니다. 알고리즘의 템플릿 즉, 틀을 만들기 위한 패턴입니다. 추상클래스를 만들어 두고, 여기에 templateMethod를 둡니다. temp..

Adapter & Facade Pattern - 디자인 패턴 참고서적 : Head First Design Pattern 소스코드 다운로드 : http://www.wickedlysmart.com/headfirstdesignpatterns/code.html 패턴 정의 #8 - 어댑터(Adapter) Pattern 한 클래스의 인터페이스를 클라이언트에서 사용하고자 하는 다른 인터페이스로 변환합니다. 어댑터를 이용하면 인터페이스 호환성 문제 때문에 같이 쓸 수 없는 클래스들을 연결해서 쓸 수 있습니다. 흔히 11자형 플러그와 돼지코 플러그의 상호 어댑터를 연상하면 쉬울 겁니다. 간단히 클래스 다이어그램을 살펴보시기 바랍니다. - 클라이언트에서는 타겟 인터페이스만 볼 수 있습니다. - 어댑터에서 타겟 인터페이스를..