slide#1: HTML5가 가져올 웹트렌드 미리보기

- 인사 및 소개
 -> 알서포트에서 프론트-엔드 엔지니어로 근무중인 경준호
 -> 현재 파이어준닷컴 운영, 자바스크립트에 대해 다룸
 -> 알서포트: PC원격 제어 기술을 기반으로한 솔루션 개발회사
 -> 떨린다, 미숙한 점이 있더라도 양해
      
- HTML5가 무엇인지 어떤 세상을 열어줄 것인지에 대하여
 -> 작업 욕구 불살라 드리는 시간 되었으면 하는 바램 

- "The Future of the Web is HTML5"
- MS(마이크로소프트)가 블로그를 통해 언급한 것
  http://blogs.msdn.com/b/ie/archive/2010/04/29/html5-video.aspx
- Why?

- HTML5가 등장한 이유
    

slide#2:

별도의 브라우저 플러그인을 설치하지 않고
네이티브 애플리케이션 수준의
리치한 웹 애플리케이션을 개발한다.

- 나름 내려본 결론
- 기능(특징) 하나하나에 브라우저 벤더들간의 논쟁에는 관심없다.
  오직 구현 가능한지에 대해 생각할 뿐
- 구체적으로 살펴보자
    

slide#3: HTML5는...

HTML + CSS + Javascript API
- HTML5는 단순한 마크업 오해 -> x, HTML + CSS + JavascriptAPI

- 마크업, 스타일링 구질구질한 소개 및 사용법 생략
  -> 구글신이 응답
- HTML5의 핵심 기능인 자바스크립트 API를 중심으로 설명
    

slide#4: Javascript API 크게 3가지로 구분해서 소개

- Desktop Experience -> 데스크탑 애플리케이션과 같은
- Client Side Storage -> 오프라인 모드 지원
- Realtime Interaction -> 실시간 상호작용
    

slide#5: Desktop Experience


- Notifications -> 알림 기능
- Drag and drop -> 끌어다 놓기
- Web Workers -> Background Processing
- HTMLElement APIs
  - SVG
  - Video & Audio
  - Canvas 2D & 3D(WebGL)

- 데스크탑 애플리케이션 수준의 웹 애플리케이션 개발
 - 웹기반 3D 게임 
 - 웹기반 오디오/비디오 애플리케이션(증강현실, TTS)
 - iPhone 웹앱
    

slide#6: Notifications

- 응용: 이메일/메시지 도착알림 등

- 이 발표자료에 소개된 예제는 구글(Marcin Wichary 씨)에서
  만든 HTML5 프리젠테이션 자료에서 발췌한 것
    

slide#7: Drag and drop

- 기존에도 구현했었음 mousemove, mousedown, mouseup...
- dragstart, dragend, dragenter, dragover, dragleave, drop
- drop 이벤트에 의해서 외부 파일 드랍 가능
- 응용: 드래그 앤 드롭 파일 업로드
    

slide#8: Web Workers

- 멀티 스레드
- 부하 테스트
- 속도 테스트 http://firejune.com/1447
- 응용: 백그라운드 데이터베이스 싱크로나이저, 갱신여부 확인
    

slide#9: Audio and Video

- pause, load 등
- https://developer.mozilla.org/en/using_audio_and_video_in_firefox
- 라이브러리 (Scott Schiller씨)
  http://www.schillmania.com/projects/soundmanager2/
- 코덱(CODEC) 이슈, 스트리밍(Streaming) 이슈
    

slide#10: SVG in HTML5

- 라이브러리 소개: 라파엘(Raphaël) http://raphaeljs.com/
- 응용: 동적으로 생성되는 그래프
    

slide#11: SVG example

- SVG 애니메이션  http://mrdoob.com/98/3D_Waveform_HTML5
- SVG 갱신 확인
    

slide#12: Canvas

- HTML5 이전부터 있던 요소 HTML5에서 확정
- 플래시와 유사한 컨텐츠를 소화하기 위한 솔루션
- IE는 지원하지 않음 ->  VML이라는 독자 표준
- 솔루션 explorercanvas
 -> http://code.google.com/p/explorercanvas/

- http://mrdoob.com/117/Fire_HTML5
- http://mrdoob.com/116/Water_Remix_HTML5
- http://mrdoob.com/115/Water_HTML5
- http://firejune.com/1369
- Firejune.Gravity();

- ThinVNC
  - 61.105.77.182
    

slide#13: Canvas example

- HTML5 Video, Canvas요소를 이용한 시각적 변화 3
 -> http://firejune.com/1585
    

slide#14: Canvas 3D (WebGL)

- 아직 기본 브라우저에 포함 되어있지 않음
- 웹브라우저 개발 버전 다운로드
  - http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
  - Chromium.app/Contents/MacOS/Chromium --enable-webgl
- WebGL을 기반으로 3D 애플리케이션 또는 게임 개발을 돕는 자바스크립트 3D 엔진
- CopperLicht http://www.ambiera.com/copperlicht/index.html
    

slide#15: Client Side Storage

- Web Storage
- Web SQL Database
- Application Cache API
  -> 오프라인 실행 및 자료 보존기능  
  -> 워드, 스프레드시트, 스케줄러, 이메일 클라이언트, 지도 등
  -> 웹이 오프라인을 지원한다는 의미는? -> WebOS
    

slide#16: Web Storage

- Shell 증명: window.localStorage['value']
- 브라우저별 스토리지 저장공간
  http://d.hatena.ne.jp/uupaa/20100106/1262781846
    

slide#17: Web SQL Database

- SQLite
    

slide#18: Application Cache API

- 시연 불가
    

slide#19: Realtime Interaction

- Web Sockets
- Geolocation

- 온라인 게임
- 지도 -> 카네비게이션
    

slide#20: Web Sockets

- 루프 -> x
- 차세대 양방향 통신 기술이다.
- 크로스-브라우저를 위한 대안으로 COMET이 있습니다.
- 구글 웨이브 서비스 실시간 댓글 또는 포스팅
- Comet 관련 문서
  http://www.ibm.com/developerworks/kr/library/j-jettydwr/
  http://ajaxian.com/archives/comet-a-new-approach-to-ajax-applications
    

slide#21: Geolocation

- iRoute http://iroute.mobi
    

slide#22: END

- 이것으로 주요한 HTML5의 기능들을 모두 살펴 보았음
    

slide#23: When can I use HTML5?

- 지금 사용가능
- HTML5가 본격화되는 시기는 -> IE9 출시를 시작으로

- 브라우저 얘기 -> H/W 가속이슈(모두 되면 좋으련만...)
- Apple Safari -> CSS transform 가속
  - http://webkit.org/blog/386/3d-transforms/
- 모바일 사파리에는 이미 적용

- Google Chrome -> WebGL
- MS IE -> HTML + SVG 가속
    

slide#24: quake2-gwt-port

- 최신 하드웨어 및 소프트웨어 기술이 집약적으로
  적용되는 개발 분야 -> 게임(동영상)