'PP/HTML5'에 해당되는 글 3건

  1. 2012.01.05 VIDEO
  2. 2012.01.04 HTML5 가이드
  3. 2012.01.04 HTML5 가이드
posted by 방랑군 2012. 1. 5. 00:24

vidia video element

현재 우리가 동영상을 접하게 되는 웹상의 플레이어들 (유튜브, 다음, 티스토리 등등) 의 대부분은 플래쉬 기반 포맷을 제공합니다

우리가 흔히 말하는 플짤도 플레쉬 짤방의 준말이죠, 그만큼 플래쉬를 이용한 동영상 플레이어가 차지하는 비중이 지대하다 할 수 있습니다

지금까지 동영상을 웹상에 적용하기 위해 object 나 embed 를 사용하여 플래쉬 또는 미디어플레이어 와 같은 플러그인을 이용해 왔는데

HTML 5 에서의 video 태그는 네이티브 태그로서 별도의 외부 프로그램의 도움없이 독립적인 방식으로 동영상을 재생하게 됩니다

동영상 플레이를 이유로 이유로 억지로 설치해야만 했던 액티브X와 같은 프로그램이나 플로그를 더이상 설치할 필요가 없다는 소리죠

HTML 5 에서 이와같은 태그를 선보인것은 보다 웹표준에 맞는 그에 근거하는 마크업을 위한 새로운 시도가 아닐까 합니다

우리나라의 경우는 다른 나라보다 플래시의 사용빈도가 현저히 월등한 수준이나 외국의 경우 플래시 기능을 지향하고

웹표준에 맞추어 이미지나 플래시 보다는 웹표준에 맞는 시멘틱 마크업을 적용해 나가고 있습니다

우리나라에서도 조금씩 웹표준에 맞는 마크업을 시도하는 추세로 HTML 5 이 나옴과 동시에

보다 명확한 웹표준 마크업을 위해 발전해 나가고 있다고 생각합니다

1 video

액티브X나 <embed>,<object>의 사용없이 간편하게 동영상을 재생할 수 있는 기능으로

기본적인 비디오 엘리먼트의 속성 및 값은 다음과 같습니다

속성 (Attribute)

값 (Value)

설명 (Description)

N controls

Boolean (true/false)

각 브라우저 고유의 컨트롤 바를 표시

N autoplay

Boolean (true/false)

동영상 파일이 로드되는 즉시 자동으로 재생

N loop

Boolean (true/false)

동영상 재생이 끝나면 처음부터 다시 반복, 반복 재생 획수 지정

N src

URL

동영상 파일의 경로를 지정

N poster

IMG URL

재생할 동영상이 로드 중이거나 버퍼링 중일때 보여질 이미지

N preload

Auto,

None,

Metadata

동영상 파일을 다운로드하여 재생하게끔 하는 방식

auto - 자동으로 다운로드

none - 사용자가 컨트롤을 조작하지 전까지 다운금지

metadata - 메타데이터를 가져오며 사용자가 컨트롤을 조작하면 실제 비디오 부분을 다운

N width

Pixels

재생할 동영상의 가로(넓이) 크기

N height

Pixels

재생할 동영상의 세로(높이) 크기

N 아이콘으로 표시된 항목은 HTML5부터 추가된 속성(애트리뷰트)들 입니다.


다음은 HTML 5 를 사용함에 있어 아직 해결하지 못한 코덱에 관한 문제들입니다


브라이저 (Browser)

H.264 + AAC + MP4

WebM

Theora + Vorbis + Ogg

파이어폭스 3.6

오페라 10.63

구글 크롬 8.0

애플 사파리 5.0.3 (with 쿽타임)

마이크로 소프트 익스 9 beta


브라우저마다 사용하는 코덱은 다음과 같습니다


브라이저 (Browser)

코덱 (Codec)

Microsoft + Apple

H.264 Codec

Firefox + Opera

Ogg Theora Format

Google

VP8 Video Codec

현재 주 대표 브라우저들이 자체 비디오 코덱을 사용하고 있기때문에 그야말로 표준 코덱이 존재하지 않습니다

하여 각 브라우저마다 사용하는 비디오 코덱이 다릅니다 video 태그가 생겨났다고 해도 코덱에 관한 문제가 아직도 남아있다는 말이 됩니다

2 기본적인 비디오 태그 작성법

<video src="동영상 URL" preload="false" width="480" height="360"></video>

여기서 중요한 점은 각 크로스브라우저의 비디오 태그의 사용법에 대한 내용입니다

말씀드렸듯이 각 브라우저마다 사용하는 코덱이 다르기 때문에 각 브라우저에 맞는 태그를 사용하셔야 합니다

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 5 Video 예제</title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" /> <!-- Microsoft + Apple -->
<source src="http://www.w3schools.com/html5/movie.webm" type="video/webm" /> <!-- Google -->
<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" /> <!-- Firefox + Opera -->
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>

[★] 알아두면 유용한 사이트 HTML5 Video elements

http://videojs.com
http://www.html5video.org
http://www.diveintohtml5.org/video.html



'PP > HTML5' 카테고리의 다른 글

HTML5 가이드  (0) 2012.01.04
HTML5 가이드  (0) 2012.01.04
posted by 방랑군 2012. 1. 4. 13:03

'PP > HTML5' 카테고리의 다른 글

VIDEO  (0) 2012.01.05
HTML5 가이드  (0) 2012.01.04
posted by 방랑군 2012. 1. 4. 13:02
출처 : http://kimstar.pe.kr/blog/249

개요

새로운 마크업

편리한 Form 속성

  • datetime (달력)
  • range (스크롤바)
  • url(웹사이트 목록)
  • email(메일 주소 유효확인)
  • color (색상표)

API 제공

  • canvas
  • video
  • audio
  • AppCache
  • Key/Value 기반 데이터 저장소 (DOM Storage, IndexedDB)
  • SQL 기반 데이터베이스 (Web Database)
  • Web Stocket
  • 문서간 알림 기능 (Server-sent Event)
  • contenteditable (사용자 경험 증대????)
  • draggable (드래그 앤 드롭)
  • Geolocation
  • ...

마크업

구조와 문법

01.<!doctype html>
02.<html>
03.<head>
04.<meta charset="UTF-8">
05.<title>HTML5 마크업</title>
06.</head>
07.<body>
08.<p>차세대 웹표준으로서 HTML5
09.</body>
10.</html>

문자 인코딩

  • HTTP 헤더에서 선언
  • 유니코드 BOM에서 선언
  • meta 태그 사용
1.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
2.<meta charset="UTF-8">

MathML와 SVG

1.<title>SVG in text/html</title>
2.<p>
3.A green circle:
4.<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
5.</p>

문법 검사

구조

01.<article>
02.<hgroup>
03.<h1>Apples</h1>
04.<h2>Tasty, delicious fruit!</h2>
05.</hgroup>
06.<p>The apple is the pomaceous fruit of the apple tree.</p>
07.<section> // ==> 예를 들면 탭의 요소로 사용, 의미가 없는 요소라면 div를 써라
08.<h1>Red Delicious</h1> // ==> 각 section에서 전체 문서와 상관없는 h1 사용
09.<p>These bright red apples are the most common found in many supermarkets.</p>
10.</section>
11.<section>
12.<h1>Granny Smith</h1>
13.<p>These juicy, green apples make a great filling for apple pies.</p>
14.</section>
15.</article>
  • nav : 네비게이션을 위한 섹션
  • article : 독립적인 글 (블로그 글, 뉴스 본문), article 중첩시 안쪽것(블로그 글)은 바깥것(댓글)과 관련 있다.
  • aside : 본문과 관계없는 내용 (광고, 링크)
  • hgroup : 섹션의 제목이 여러단계일때 사용 (Heading Group)
  • header : 소개(목차, 검색창, 로고 등이 배치), 문서구조상 섹션으로 간주안함.
  • footer : 가까운 섹션의 푸터 (저자, 저작권 등 배치), 문서구조상 섹션으로 간주안함.
  • figure : 그래픽/비디오의 캡션을 표시
1.<figure>
2.<video src="ogg"></video>
3.<figcaption>Example</figcaption>
4.</figure>

헤딩과 섹션

  • 헤딩 : h1, h2, h3, h4, h5, h6, hgroup
  • 섹셔닝 루트 (상위/다른 아웃라인과 무관) : blockquote, body, details, fieldset, figure, td
  • 예제 #1
01.<body>
02.<h1>Foo</h1>        // 1. Foo (Grunt 문단을 가지고 있는 body 섹션의 헤딩)
03.<h2>Bar</h2>        // 1-1. Bar (Baz 문단과 blockquote 요소 포함한 섹션의 헤딩)
04.<blockquote>
05.<h3>Bla</h3>
06.</blockquote>
07.<p>Baz</p>
08.<h2>Quux</h2>       // 1-2. Quux (내용이 없고 헤딩만 있는 섹션의 헤딩)
09.<section>           // 1-3. Thud (section 요소로 표시된 섹션의 헤딩)
10.<h3>Thud</h3>
11.</section>
12.<p>Grunt</p>
13.</body>
  • 예제 #2
1.<body>              // body 요소로부터 하나의 섹션이 만들어지고
2.<h1>A</h1>      // 이 섹션은 헤딩 A와 문단B를 갖는다
3.<p>B</p>
4.<h2>C</h2>      // 이 섹션은 다은 두개의 섹션을 포함한다. h2 요소로부터 하나의 섹션이 만들어지고 헤딩 C와 문단 D를 갖는다.
5.<p>D</p>
6.<h2>E</h2>      // 그 다음 h2 요소로부터 하나의 섹션이 또 만들어지고 헤딩 E와 문단 F를 갖는다.
7.<p>F</p>
8.</body>

그 밖의 요소

  • video, audio : 비디오/오디오 콘텐츠, 스크립트로 제어, source요소에 여러개 미디어 사용가능
  • embed : 플러그인 콘텐츠 사용
  • mark : 중요하다고 생각되는 텍스트에 표기
  • progress : 진행상황
  • meter : 분량,수량을 나타냄
  • time : 날짜,시간
  • ruby, rt, rp : 루비 주석 (일본어에서 한문에 음을 달때), < ruby >기준 텍스트 < rt > 또는 < rp >에 루비주석
  • canvas : 동적인 비트맵 이미지 구현시
  • command : 사용자가 수행할 수 있는 명령
  • details : 추가정보, summary를 통해 요약,제목,캡션등을 표시
01.<section class="progress window">
02.<h1>"Really Achieving Your Childhood Dreams" 복사중...</h1>
03.<details>
04.<summary>복사중...
05.<progress max="375505392" value="97543282"></progress> 25%
06.</summary>
07.<dl>
08.<dt>초당 전송량:</dt> <dd>452KB/s</dd>
09.<dt>복사할 파일명:</dt> <dd>/home/rpausch/raycd.m4v</dd>
10.<dt>걸린시간:</dt> <dd>01:16:27</dd>
11.</dl>
12.</details>
13.</section>
  • datalist : option의 묶음을 나타낸다. input의 list, datalist의 id로 서로 연결된다.
  • keygen : 서버로 공개키 보내고, 로컬에 개인키 저장
  • output : 생성된 결과물
  • style, script : "text/css"와 "text/javascript" 같은 type 속성이 생략 가능해짐
01.<style>
02.#myelement {
03.width: 100px;
04.}
05.</style>
06.<script>
07.function myfunction() {
08.return 'Hello world';
09.}
10.</script>
  • input : type속성에 따라 다양한 형식으로 사용됨
    • hidden(감춰짐), text(텍스트), search(검색), tel(전화번호), url(URL), email(이메일), password(비밀번호)
    • datetime(날짜와 시각), date(날짜), month(달), week(주), time(시각), datetimelocal(로컬 날짜와 시각)
    • number(숫자), range(범위), color(색), checkbox(체크박스), radio(라디오 버튼), file(파일), submit(전송)
    • image(이미지), reset(리셋 버튼), button(버튼),

새로운 속성

  • media : a, area의 미디어 속성
  • ping : a, area의 ping 속성(클릭정보 수집 등)
  • hreflang, rel : area의 속성 ???????????????????????
  • target : base에 target 속성 (a에서와 비슷)
  • charset : meta의 charater set속성
  • autofocus : input(hidden일때 빼고) / textarea / button에 문서 로드시 자동 포커스되는 속성
  • placeholder : input/textarea 에 힌트(예:아이디 입력) 속성. 긴 힌트는 title 속성을 사용해야함.
  • form : input/output/select/textarea/button/fieldset 요소에 사용되는 속성. form 밖에 위치할 수 있게함.
  • required : input(hidden/image 제외) / button(submit 제외)의 유효성 검사 속성. 반드시 사용자가 입력해야함.
01.<h1>회원 등록</h1>
02.<form action="/newaccount" method=post>
03.<p>
04.<label for="username">이메일 주소:</label>
05.<input id="username" type=email required name=un>       // 입력 필수요소
06.<p>
07.<label for="password1">비밀번호:</label>
08.<input id="password1" type=password required name=up>   // 입력 필수요소
09.<p>
10.<label for="password2">비밀번호 확인:</label>
11.<input id="password2" type=password onforminput="setCustomValidity(value != password1.value ? '비밀번호가 불일치' : '')">
12.<p>
13.<input type=submit value="계정 생성">
14.</form>
  • disable : fieldset을 비활성화
  • autocomplete, min, max, multiple, pattern, step : input의 속성
  • type, label : menu요소에 지정하여 컨텍스트 메뉴 제작
  • scoped : style 요소에 지정하여 특정부분만 스타일 적용
  • async : style요소에 지정하여 스크립트 로딩/실행 타이밍 조절
  • manifest : html요소에 지정. API에서 캐시정보 사용가능.
  • sizes : link에 아이콘 기본 크기정보 표시
  • reversed : ol에 지정하여 번호순서 변경
  • sandbox, seamless, srcdoc : iframe를 샌드박스로 사용.

글로벌 속성

  • 글로벌 속성(class, dir, id, lang, style, tabindex, title)을 모든 요소에 지정할 수 있음.
  • contenteditable : content를 edit할 수 있다.
  • contextmenu : context menu를 지정할 수 있음.
  • data-* : 저작자가 새로운 속성을 지정
  • draggable : drag & drop API를 사용할 수 있음
  • hidden : 문서상에 존재하지 않도록 함. CSS로 화면에 안보이는것과 다름.
  • role, aria-* : 보조기기에서 접근성 향상
  • spellcheck : 맞춤법 검사.
  • onclick, onfocus.. : HTML4의 on{이벤트이름} 사용가능

변경된 요소

  • a : 버튼처럼 상호작용 요소 없으면 문단/리스트/표/섹션등 포함 가능
01.<aside class="advertising">
02.<h1>광고</h1>
03.<a href="http://naver.com">
04.<section>
05.<h1>HTML5 오픈 컨퍼런스!</h1>
06.<p>차세대 웹 서비스를 위한 새로운 웹 표준!</p>
07.</section>
08.</a>
09.<a href="http://daum.net">
10.<section>
11.<h1>HTML5 가이드 북!</h1>
12.<p>가이드 북을 함께 나눠드립니다.</p>
13.</section>
14.</a>
15.</aside>
  • address : 문서구조에서 특정범위에 적용
  • b : 다르게 나타내야 하는 텍스트 (상품이름, 키워드..)
  • hr : 문단 수준의 나눔을 의미함
  • i : 다른 텍스트와 구분할 텍스트를 표시 (기술용어, 다른표현, 생각..)
  • label : 포커스를 이동하지 않음
  • menu : 툴바/컨텍스트메뉴를 위해 개선됨
  • small : 작게 출력 (추가적 코멘트, 법적 표현 등..)
  • string : 중요함 (강한강조 X)

변경된 속성

  • border : border는 0을 지정해야 함. 대신 CSS를 권장.
  • language : 왠만하면 생략
  • name : a요소의 name속성보다 id속성을 권장
  • summary : table요소의 summary속성은 HTML5의 다른걸로 권장

빠진 요소

  • basefont, big, center, font, s, strike, tt, u : 표현과 관련하여 빠짐
  • frame, frameset, noframes : 컨텐츠 네비게이션할때 영향 미치는 것
  • acronym : 많이 안씀. abbr 사용할것
  • applet : object로 대체
  • isindex : 다른 콘트롤 요소로 대체
  • dir : ul로 대체

빠진 속성

  • HTML5 에서 빠진 놈들

    • version : html 요소
    • name(id 사용 권장) : img 요소
  • 표현과 관련된 놈들 (CSS로 대체해라)

    • align : caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr 요소
    • alink, link, text, vlink : body 요소
    • background : body요소
    • bgcolor : body요소
    • border : table, object 요소
    • cellpadding, cellspacing : table 요소
    • frame : table 요소
    • frameborder : iframe 요소
    • height : td, th 요소
    • scrolling : iframe 요소
    • valign : col, colgroup, tbody, td, tfoot, th, thead, tr 요소
    • width : hr, table, td, th, col, colgroup, pre 요소

예제

01.<body>
02.<header>
03.<h1>HTML5 의 세계로!</h1>
04.<nav>
05.<ul>
06.<li><a href="news.html">새소식</a></li>
07.<li><a href="blog.html">블로그</a></li>
08.<li><a href="example.html">예제</a></li>
09.</ul>
10.</nav>
11.</header>
12.<div> <!-- 여러개의 주제라서 div로 묶음. 하나의 주제라면 section이 좋다. -->
13.<article>
14.<header>
15.<h1>HTML5 오픈 컨퍼런스가 열립니다.</h1>
16.</header>
17.<p>2010 년 7 월 2 일 ...</p>
18.<!-- 블로그 글 내용 -->
19.<footer>
20.<p>
21.<time pubdate datetime="2010-06-20T14:36-08:00">어제</time> 작성 되었음
22.</p>
23.</footer>
24.</article>
25.<article> <!-- 생략 -->
26.</article>
27.<article> <!-- 생략 -->
28.</article>
29.</div>
30.<footer>
31.<p> <!-- 푸터임을 알기에 nav를 쓰지 않고 그냥 p  -->
32.<a href="about.html">이 블로그에 관하여</a>
33.| <a href="policy.html">개인정보 보호정책</a>
34.| <a href="contact.html">연락처</a>
35.</p>
36.</footer>
37.</body>

CSS3

text-shadow

  • 그림자 효과
  • blur 생략시 0
1.text-shadow:5px 5px 0 #ccc;
2.filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
3.Color=#cccccc, Positive=true);
4.display:inline-block; zoom:1; text-shadow:x_offset y_offset
5.blur_radius color

text-overflow

  • 글이 넘칠때 말줄임표(...)
1.text-overflow:ellipsis;
2.-o-text-overflow:ellipsis;

word-wrap

  • 워드랩 (강제 개행)
1.word-wrap:break-word;

@font-face

  • ttf (비 IE지원)
  • eot (IE 지원)
1.@font-face{ font-family:ngttf; src:url(NanumGothic.ttf);}
2.@font-face{ font-family:ngeot; src:url(NanumGothic.eot);}
3.body, input, textarea, select, button{ font-family:NanumGothic, 맑은고딕, ngttf, ngeot;}

opacity

  • 투명도
1.opacity:0.5;
2.filter:alpha(opacity=50);

box-shadow

  • 박스형 테두리 그림자
  • 순서 : X좌표, Y좌표, blur값, 그림자색
1.box-shadow:10px 10px 10px silver;
2.-moz-box-shadow:10px 10px 10px silver;
3.-webkit-box-shadow:10px 10px 10px silver;
4.filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, strength=10); box-shadow:x_offset y_offset blur_radius color

border-radius

  • 둥근 테두리
1.border-radius:30px;
2.-moz-border-radius:30px;
3.-webkit-border-radius:30px;

background(s)

1.background:
2.url(bg.gif) no-repeat left top,
3.url(bg.gif) no-repeat right top,
4.url(bg.gif) no-repeat left bottom,
5.url(bg.gif) no-repeat right bottom;

gradient

1.background:#3EAF0E -webkit-gradient(linear, 0% 0%, 0% 100%,
2.from(#3EAF0E), to(#fff));
3.background:#3EAF0E -moz-linear-gradient(top, #3EAF0E, #fff);
4.filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#3EAF0E, endColorStr=#ffffff);

transform

  • 회전, 이동, 크기, 비틀기
1.-o-transform:rotate(90deg);-o-transform-origin:0 100%;
2.-moz-transform:rotate(90deg);-moz-transform-origin:0 100%;
3.-webkit-transform:rotate(90deg);-webkit-transform-origin:0 100%;
4.filter:progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886
5.e-17, M12=-1, M21=1, M22=6.123031769111886e-17, sizingmethod='autoexpand');

transition

  • 메뉴에 마우스 올리면 부드럽게 움직이는 효과
1.a{padding:10px 15px; margin:0;
2.-o-transition:0.2s;
3.-webkit-transition:0.2s;
4.}
5.a:hover{padding:15px 20px; margin:-6px; opacity:0.8;}

animation

  • 'webkitFire'라는 사용자 정의 에니메이션 실행
1..ani { -webkit-animation:webkitFire infinite 1s linear;}
2.@-webkit-keyframes 'webkitFire'{
3.from{ -webkit-transform:rotate(0deg);}
4.to{-webkit-transform:rotate(360deg);}
5.}

HTML5 API

미디어 요소 - Audio와 Video 요소

01.<video autoplay>
02.<source src="foo.ogg" type="video/ogg">
03.<source src="foo.mp4" type="video/mp4">
04.<source src="foo.webm" type="video/webm">
05.당신의 브라우저는 <pre><video></pre> 요소를 지원하지 않습니다.
06.</video>
07.<input type="button" onclick="playPause()" value="Play/Pause">
08. 
09.function playPause() {
10.var myVideo = document.getElementsByTagName('video')<0>;
11.if (myVideo.paused)
12.myVideo.play();
13.else
14.myVideo.pause();
15.}

미디어 요소 - Canvas 요소

1.<canvas id="example" width="200" height="200">
2.이 메시지는 사용자의 브라우저에서 HTML5 캔버스를 지원하지 않는 경우 표시 됨
3.</canvas>
4. 
5.var example = document.getElementById('example');
6.var context = example.getContext('2d');
7.context.fillStyle = "rgb(255,0,0)";
8.context.fillRect(30, 30, 50, 50);

미디어 요소 - SVG(Scalable Vector Graphics) 요소

2.<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
3.</svg>

Offline Application Cache

  • 리소스를 로컬에 저장하면 ==> 오프라인 브라우징, 속도 향상, 서버 부하 감소(브라우저는 변경된 리소스만 다운로드)
  • 캐시파일 목록 지정
1.<html manifest="http://foo.example.com/example.manifest">  // mime-type은 "text/cache-manifest"
  • manifest 예제
01.CACHE MANIFEST              // 첫줄에 항상 위치
02.# 명시적으로 캐시된 항목  // 주석은 #으로 시작
03.CACHE:
04.index.html
05.stylesheet.css
06.images/logo.png
07.scripts/main.js
08.# 사용자가 온라인 상태가 되었을 때 필요한 리소스들
09.NETWORK:
10.login.php
11./myapi
13.# static.html 파일은 main.py 파일에 접근할 수 없을 때 보여짐
14.FALLBACK:
15./main.py /static.html
16./ /offline.html             // 오프라인되면 offline.html 이 보여짐
  • window.applicationCache 개체

    • status 프로퍼티 : 캐시 상태 확인 - appCache.UNCACHED, appCache.IDLE, appCache.CHECKING, appCache.DOWNLOADING, appCache.UPDATEREADY, appCache.OBSOLETE
    • upate() : 캐시를 갱신하도록 시도
    • swapCache() : 오래된 캐시를 새로운 파일로 교체
    • addEventListener() : 이벤트 리스너 등록
  • window.applicationCache 개체 예제

01.var appCache = window.applicationCache;
02.appCache.update(); // 사용자의 캐시를 갱신하도록 시도함
03....
04.if (appCache.status == window.applicationCache.UPDATEREADY) {
05.appCache.swapCache(); // 가져오기에 성공한 경우 새로운 캐시로 교체
06.}
07. 
08.function handleCacheEvent(e) {
09.//...
10.}
11.function handleCacheError(e) {
12.alert('Error: 젠장! 캐시 갱신을 실패하였습니다.');
13.};
14. 
15.// 최초 manifest 의 캐시가 완료된 경우 이밴트 발생
16.appCache.addEventListener('cached', handleCacheEvent, false);

Web Storage

  • Client-Side Database
  • Key-value 형식, 보관/갱신/호출
  • 브라우저에서 제공하는 저장공간 사용 (다른 브라우저간 호환 안됨)
  • 종류 : localStorage / sessionStorage (브라우저 종료 후 데이터 유지 여부에 따라)
  • 예제
01.if (typeof(localStorage) == 'undefined' ) {
02.alert('당신의 브라우저는 HTML5 localStorage 를 지원하지 않습니다. 브라우저를 업그레이드하세요.');
03.} else {
04.try {
05.localStorage.setItem("name", "Hello World!"); // key-value 형식으로 저장
06.} catch (e) {
07.if (e == QUOTA_EXCEEDED_ERR) {
08.alert('할당량 초과!'); // 할당량 초과로 인하여 데이터를 저장할 수 없음
09.}
10.}
11.document.write(localStorage.getItem("name")); // 저장된 값 호출
12.localStorage.removeItem("name"); // 스토리지로 부터 일치하는 아이템 삭제
13.}
  • 쿠키는 HTTP 요청헤더에 포함됨 --> 응답시간에 나쁜 영향 --> Web Storage로 대체하라
1.if (('localStorage' in window) && window.localStorage !== null){
2.// Web Storage  사용
3.} else {
4.// document.cookie 사용
5.}

Web SQL Database

  • client 저장소에 영구 보존 가능, 덩치큰 데이터 체계적 관리 가능
  • 비동기 API : non-blocking 이므로 리턴값 사용X, 정의된 콜백함수에 데이터 전달됨
  • HTML을 통한 트랜젝션 : transaction(읽고 쓰기), readTransaction(읽기전용)
  • 데모 : http://html5.firejune.com/demo/webdb.html 

Web Sockets

  • Server & Client 사이의 full-duplex 통신채널. Comet의 대안으로 고안됨
  • 서버에서 Web Sockets 프로토콜을 지원해야 함.
  • XHR1보다 적은 대역폭, 빠른 송/수신
  • 클라이언트 예제
01.<!DOCTYPE html>
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<title>Web Socket Example</title>
05.<meta charset="UTF-8">
06.<script>
07.window.onload = function() {
08.var s = new WebSocket("ws://localhost:9876/");
09.s.onopen = function(e) { alert("opened"); }
10.s.onclose = function(e) { alert("closed"); }
11.s.onmessage = function(e) { alert("got: " + e.data); }
12.};
13.</script>
14.</head>
15.<body>
16.<div id="holder" style="width:600px; height:300px"></div>
17.</body>
18.</html>

Web Workers

01.<!DOCTYPE html>
02.<html>
03.<title>Test threads fibonacci</title>
04.<body>
05.<div id="result"></div>
06.<script language="javascript">
07.// 워커 생성, 할일은 js에 있음
08.var worker = new Worker("fibonacci.js");
09. 
10.// 워커의 작업결과
11.worker.onmessage = function(event) {
12.document.getElementById("result").textContent = event.data;
13.console.log("Got: " + event.data + "\n");
14.};
15. 
16.// 오류처리
17.worker.onerror = function(error) {
18.console.log("Worker error: " + error.message + "\n");
19.throw error;
20.};
21. 
22.// 작업 지시
23.worker.postMessage("5");
24.</script>
25.</body>
26.</html>

Server-Sent Event

  • 일종의 푸시 기술, 서버에서 이벤트 발생시 클라이언트로 즉시 전달
  • Client 코드
1.var source = new EventSource('event.php');
2.source.onmessage = function (event) {
3.alert(event.data);
4.};
  • Server 코드 (PHP)
1.<?php
2.header("Content-Type: text/event-stream");
3.echo "data: " . time() . "\n";
4.?>

Rich Web API

Selector API

  • querySelector() : 노드를 발견하지 못하면 null
  • querySelectorAll() : 노드를 발견하지 못하면 빈 목록
  • 예제
01.// 클래스 이름이 'warning', 또는 'note'인 단락 요소(<p>)를 모두 찾음
02.var special = document.querySelectorAll("p.warning, p.note");
03. 
04.// id 가 'main', 'basic', 'exclamation'인 요소들 중 첫 번째 발견된 요소를 찾음
05.var el = document.querySelector("#main, #basic, #exclamation");
06. 
07.// HTML 문서의 <body>에 속한 <style> 요소들 중 'type' 속성이 없거나, 'text/css'인 첫 번째 발견된 요소를 찾음
08.var style = document.body.querySelector("style<type='text/css'>, style:not(<type>)");
09. 
10.// id 가 'fruits'인 요소의 <input> 요소(체크박스)들 중 선택된(checked) 요소를 찾음
11.var list = document.querySelectorAll("#fruits input:checked");
12. 
13.// 또는
14.var list = document.getElementByID('fruits').querySelectorAll("input:checked");

Drag and Drop

Geolocation

01.// Geolocation 지원여부 확인
02.if (navigator.geolocation) {
03.console.log('Geolocation 을 지원합니다.');
04.}
05.else {
06.console.log('이 브라우저또는 OS 는 Geolocation 을 지원하지 않습니다.');
07.}
08. 
09.// 페이지 로드시 위치정보 표시
10.window.onload = function() {
11.var startPos;
12.navigator.geolocation.getCurrentPosition(function(position) {
13.startPos = position;
14.document.getElementById('startLat').innerHTML = startPos.coords.latitude;
15.document.getElementById('startLon').innerHTML = startPos.coords.longitude;
16.}, function(error) {
17.alert('오류 발생. 오류 코드: ' + error.code);
18.// error.code 는 다음을 의미함:
19.// 0: 알 수 없는 오류
20.// 1: 권한 거부
21.// 2: 위치를 사용할 수 없음 (이 오류는 위치 정보 공급자가 응답)
22.// 3: 시간 초과
23.});
24.};

IndexedDB

  • on/offline 저장 가능, Client-side Database
  • Web Database 와 비교시..
    • 스크립트로 다루기에 최적화된 인터페이스
    • 알고리즘 방식의 입/출력
    • 동기/비동기 지원
    • 커서 지원하여 RDB 형식으로 설계가능
  • 예제
01.var db = indexedDB.open('books', 'Book store', false);
02.if (db.version !== '1.0') {
03.var olddb = indexedDB.open('books', 'Book store');
04.olddb.createObjectStore('books', 'isbn');
05.olddb.createIndex('BookAuthor', 'books', 'author', false);
06.olddb.setVersion("1.0");
07.}
08.// db.version === "1.0";
09.var index = db.openIndex('BookAuthor');
10.var matching = index.get('fred');
11.if (matching)
12.report(matching.isbn, matching.name, matching.author);
13.else
14.report(null);

Notifications

File API

WebGL

아이폰 기반 HTML5 앱 개발

개요

01.// 등록되는 아이콘, iPhone : 57x57 ,iPad : 72x72 사이즈의 png
02.// 자동으로 모서리 둥글게 처리됨 (싫으면 파일이름을 apple-touch-icon-precomposed.png 로 하라)
03.<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
04.// 로딩시 StartUp 이미지
05.<link rel="apple-touch-startup-image" href="/startup.png">
06.// 브라우저 UI를 안보이게 함(마치 native app 처럼)
07.<meta name="apple-mobile-web-app-capable" content="yes" />
08.// 상태바의 색상을 지정 (default:회색, black , black-translucent:반투명)
09.<meta name="apple-mobile-web-app-status-bar-style" content="black" />

개발 & 테스트

 

'PP > HTML5' 카테고리의 다른 글

VIDEO  (0) 2012.01.05
HTML5 가이드  (0) 2012.01.04