HTML5

1.HTML5 소개

2004년 WHATWG의 초안으로부터 시작된 이 표준안은 웹 브라우저 호환성, 구조적이고 의미적 마크업 및 편리한 웹폼 기능을 제공하여 웹 개발자들의 생산성을 높임

1.1 HTM5의 배경

HTML의 호환성을 유지, 웹 개발자들이 실질적으로 부딪히는 문제를 해결하는 것이다.

정보와 의미, 손 쉬운 텍스트로 편집하도록, 쉽게 배우고 쓸수 있었기 때문,

90년대 후반 웹 브라우저 업체의 점유율 전쟁, 상요 브라우저 벤더들의 비표준 태그들이 남발, HTML 기본 정신을 훼손, 웹 서비스의 혁신이 늦어졌고

1.1.1 웹 표준과 웹 2.0

구글 같은 검색 엔진과 검색 광고의 성장과 특히, 블로그 같은 사용자 생산 콘텐츠를 잘 검색 하기 위한 HTML, CSS 레이아웃을 통한 웹 표준 기법이 각광

Structure, Presentation, Behavior를 분리

개발자와 디자이너 간의 역할 분담을 명확히

코드 유지 보수 및 생산성에 큰 영향

장애인을 위한 웹 접근성에도 매우 뛰어난 개발 방법론

웹 2.0: 플랫폼으로서 웹, 웹 자체를 소프트웨어로 보는 웹 어플리케이션 시대

Ajax, Open API

1.1.2 HTML5의 시작

웹 기술적 혁신은 웹브라우저 업계에도 시작

W3C는 이러한 변화를 수용할 준비를 하고 있지 못했다.

2004년 W3C와 의견차이로 WHATWG 형성

Web Form2.0, Web Application 1.0 표준안 만듬.  

1.3.3 HTML5가 아닌것

Server-Sent Events

웹 서버로 부터 전달되는 데이터 예를 들어 SMS 같은 것을 받을 수 있도록 EventSource를 저으이하고 이벤트를 기다릴 수 있도록 하는 API를 기술

Communications

Ajax의단점 크로스 도메인 문서 접근을 가능하게 해주는 스펙이다.

XHR 때문에 약간 논의가 지지부진한 면이 있었음.

Web SQL Database

자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API

Web Sockets API

한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통ㅅ힌을 할 수 있는 별도 프로토콜을 정의

Web Workers

웹 어플리케이션이 주 문서와 병렬적으로 스크립트를 백그라운드로 수행 할 수 있게 해주는 API, 쓰레드 기반 메시지 처리를 가능하게 해준다.

HTML5 시대

서버와 독립적인 웹어플리케이션

특히, 모바일 환경에서 오프라인 기능과 로컬 데이터베이스의 지원은 웹 서버와 독립할 수 있는 여건을 만들어준다.

기존의 RDBMS와 MVC 기반 플랫폼에서 늘어나는 데이터를 잘 처리하기 위해 RESTful한 데이터 통신을 제공

HTML5의 단점

학습비용(Learning Cost) -> 투자의 관점에서 접근 필요

프론트 웹 개발 방식에 많은 JavaScript API가 제공되기 때문에 마크업 개발자들의 경우 어늘 정도는 자바스크립트 언어를 다룰 줄 알아야 한다.

문자 인코딩

1. HTTP 헤더에서 선언

2. 유니코드 Bom에서 선언

3. Meta 태그 사용

<meta http-ｅquiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">

HTML5 콘텐츠 모델

- 메타데이타 콘텐츠 (metadata content)

콘텐츠의 모양, 동작을 설정 하거나 다른 문서와의 관계를 나타낸다.

base, command, link, meta, noscript, script, style, title

- 플로우 콘텐츠 (flow content)

대부분의 body 요소 안의 요소들이 포함된다. 플로우 콘텐츠는 하위에 텍스트나 임베디드 콘텐츠를 포함한다.

a, abbr, address, map>area, article, aside,audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist,del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1 ~ h6,header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math,menu, meter, nav, noscript, object, ol,output, p, pre, progress, q, ruby, samp,script, section, select, small, span, strong,style[scoped], sub, sup, svg, table,textarea, time, ul, var, video, wbr

- 섹셔닝 콘텐츠 (sectioning content)

헤딩과 푸터의 범위를 결정하는 요소이다. 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가지고 있다.

article, aside, nav, section

- 헤딩 콘텐츠 (heading content)

섹션의 헤더를 의미한다. h1, h2, h3, h4, h5, h6, hgroup

- 프레이징 콘텐츠 (phrasing content)

문서의 텍스트를 의미한다. 프레이징 콘텐츠는 하위에 텍스트나 임베디드 콘텐츠를

포함한다.

a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map,mark, math, meter, noscript, object,output, progress, q, ruby, samp, script,select, small, span, strong, sub, sup, svg,textarea, time, var, video, wbr

- 임베디드 콘텐츠 (embedded content)

이미지, 비디오, 플래시 등 외부 콘텐츠를 문서내에 표현한다.

audio, canvas, embed, iframe, img, math,object, svg, video

- 인터액티브 콘텐츠(interactive content)

사용자와 상호작용하는 요소들이다.

a, audio[controls], button, details, embed,iframe, img[usemap], input, keygen,label, menu, object[usemap], select,textarea, video[controls]

- 트랜스패런트 콘텐츠 (transparent content)

부모 요소의 콘텐츠에 따라 포함하는 콘텐츠의 분류가 바뀌는 요소를 말한다

MathML이나 SVG를 문서 안에서 사용할 수 있다.

article

문서내의 독립적인 글을 article로 표시할 수있다. 블로그, 뉴스 본문등...

article요소 안에 article 요소가 들어갈 경우 안쪽은 밖의 article 요소의 내용과 관련이 있는 내용이라는 것을 의미한다.

aside

문서의 주 내용이 아닌 관련성이 낮은 내용들은 aside로 표시 할수 있다.

CSS2와 차이점

모듈 기반으로 개발되어 있다. 원하는 모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트 하는것이 가틍하다.

CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여 포토샵과 자바스크립트 및 서버측 기술에만 완전히 의존하던 영역들을 개척했다.

특히 그래픽 디자인에만 의존하던 영역이 CSS3만으로도 상당부분 가능해지면서 웹 사이트의 성능 향상에 크게 기여

HTML5 API

Offline Application Cache

오프라인 환경을 고려한 API들이 있다. 이 API들이 오프라인에서 정상적으로 작동하기 위해서는 결국 CSS, 이미지, 자바스크립트 틍과 같이 리소스를 필요로한다. 이러한 환경를 궁극적으로 충족시켜 주는 것이 바로 Application Cache API 이다.

- 오프라인 브라우징: 오프라인 상태에서도 사용자가 사이트에 접근 할수 있다.

- 속도향상: 로컬 영역에 저장된 리소스들은 매우빠른 로드 속도로 호출된다.

- 서버부하감소: 브라우저는 오직 리소스가 변경된 경우에만 다운로드를 시도한다.

manifast 속성을 지정하여 캐시할 파일들의 목록을 지정할 수 있다. 여기에 지정되는 파일은 간단한 텍스트 파일이며, 파일의 절대 또는 상대 경로를 기입하여 참조한다.

“.manifast 파일의 mime-type은 반드시 “text/cache-,manifest” 이어야 한다.

Web Storage

일종의 클라이언트-사이드 데이터베이스, 이 데이터는 서버가 아닌 각 사용자의 브라우저에 보관된다. 일반 데이터베이스와의 두드러진 차이점은 우리에게 익숙한 Key-value 형식으로 보관/갱신/호출 한다는 것이다. localstorage, sessionstorage로 구분

쿠키 대신 WebStorage사용하기

쿠키는 수년동안 사용자의 고유 데이터를 추적하는데 사용되어 왔지만 심각한 단점들이 있다.  가장큰 결함은 모든 쿠키 데이터가 HTTP 요청 해더에 포함되어 버린다는 점. 이는 결국 응답시간에 나쁜 영향을 미친다.

개인 자료가 HTTP 요청에 전송되지 않는다.

Web SQL Database

이제 부터 클라이언트 웹 개발자들은 풍부한 쿼리 능력을 가진 웹 어플리케이션을 만들 수 있게 되었다. SQL 쿼리를 별도로 익혀야하는 노고가 뒤따른다.

클라이언트의 저장ㅅ에 영구히 보존할수 있고, 리소스 점유율이 많은 덩치큰 데이터를 체계적으로 관리 할수 있다.

Web Database를 사용하는 대부분의 사례가 비동기 API를 사용한다. 리턴값을 통해서 데이터를 얻지 못한다.

HTML을 통한 트랜잭션이다. 이것은 외부에서 SQL문을 실행할 수 없다.

읽고 쓰기위한 트랜잭션, 읽기만 하는 트랜잭션

데이터베이스 개설(이름, 버전, 설명, 크기를 정한다.)

Web Sockets

꾸준한 성장과 인기를 얻고 있는 Comet의 대안으로 고안되었다. 이것은 웹 어플리케이션이 full-duplex 단일 소켓 연결을 가능케 한다. 이는 서버와 브라우저 사이에 진정한 양방향 통신 채널을 제공하는 것을 의미하며, 연결 관리를 단순화 한다. 하지만 서버에서 Web Sockets프로토콜을 지원하는 환경에서만 작동하며, 추가적으로 서버에 모듈을 설치하거나 독립적으로 이를 지원하는 서버에서 정상적으로 작동한다.

Web Workers

빠르다, 브라우저에 부담을 주지 않고 백그라운드에서 스크립트연산을 수행하는 것이다.

이것이 가능한 이유 브라우저가 OS-레벨의 스레드를 생성하기 때문

스크립트를 이용하여 무거운 연산을 실행하면 브라우저는 먹통 상태가 된다. 이런한 경우 이벤트 리스너가 제대로 작동하지 않아 오작동이 발생하거나 제때 콜백이 호출되지 않거나 짦은 시간동안 상호작용이 발생하는 프로그램 로직에 치명적인 오류를 안겨줄 수 있다.

Server-Sent Event

일종의 푸시 테크놀러지이다. 브라우저가 서버로부터 지속적으로 데이터를 스크림하는 상태가 되는 것을 말한다.

모바일 HTML5

Offline 지원: LocalStorage, Web Database, App Cache

미디어 처리: Video, Audio, Canvas

입력 지원: Advanced Forms

위치정보: GeoLocation