Html5 입문 API

소개글

Html5 입문 API에 대한 보고서 자료입니다.

목차

HTML5 실습
•Part1. HTML5의 기초 지식1
•00.DOM
◦쇼핑 목록
•Part2. HTML5의 새로운 기능4
•03. 캔버스
◦사각형 그리기
◦도형 그리기
◦테트리스
•04. Video & Audio
◦비디오 재생
◦비디오 플레이어
•06. 폼 요소
◦폼 요소
◦폼 검증
•07. 드래그 & 드롭
◦쇼핑 목록
◦쇼핑 목록2
◦쇼핑 목록(크로스 브라우징)
◦쇼핑 목록(J-Query)
•Part3. 웹 애플리케이션 작성용 API9
•10. 커뮤니케이션 API
◦아이디 중복 확인
◦마우스 좌표 전송
◦채널 통신
•11. 오프라인 웹 어플리케이션
◦캐쉬 테스트
◦게시물 목록별 캐쉬
◦캐쉬 섹션 테스트
◦캐쉬 업데이트
•12. 웹 스토리지
◦로그인
◦캐시 업데이트(자동)
•13. Web SQL Database
◦북마크 관리
•14. Web Workers
◦워커
◦공유워커
•15. Web Socket
◦Echo 테스트
◦웹소켓 채팅
•16. Geolocation
◦현재 위치
◦위치 추적
•17. Server-Sent Events
◦Polling 예제(ajax/sse)
◦sse 채팅
•18. 그 밖의 API
◦Ajax 예제

본문내용

HTML5 입문과정에서 알아야 할 API소개 및 실습 예제.

[개발환경]
-. eclipse-jee-indigo-win32
-. node_setup_0.6.1.1
-. jdk-6u26-windows-i586
-. apache-tomcat-6.0.32
-. 웹브라우저 : 크롬,파이어폭스,오페라,IE8,사파리 모두 설치


1. 위 개발환경을 모두 Default로 설치하고
eclipse에서 웹서버로 apache6.0을 선택하여 추가후
서버목록에서 Apache서버에 프로젝트 Html5Lab을 추가해준다.

2. Apache서버 설치후 web.xml에 mime-mapping설정에 아래 설정 추가

appcache
text/cache-manifest


ogv
video/ogg


webm
video/webm


3. nodeJS프로그램 설치후 cmd 모드에서 해당 설치 디렉토리 하위에
15장 chatServer.js 파일을 위치하고 node.exe chatServer.js를 실행해준다.
이는 15장 예제 실행시에만 수행해 주면 됨.

4. 설정 완료후 최초 index.html 페이지 접속시 구글프레임 설치 창이 뜨면 수락하고 적용.
이는 인터넷 익스플로어에서 지원되지 않는 html5 기능을 구글 프레임 내에서 수행가능하게 해준다.

5. html5 는 아직 모든 브라우저가 지원하지 않는 기능이 많아서
브라우저를 변경해가면서 테스트를 수행해 봐야 함.
가장 많은 지원을 하는 브라우저는 구글 크롬 브라우저로 대부분 테스트는 여기서 진행하면 동작함.

키워드

HTML5,   WEB,   웹프로그래밍