1. HTML5 변천사
 - HTML3.2 -> HTML4.01 -> XHTML1.0 -> HTML5

2. HTML Elements

2.1. 섹션(구조) 정의 요소
<section>: 문서의 특정 영역을 구분
<header>: 문서 또는 영역의 머리말에 해당하는 내용 구분
<footer>: 문서 또는 영역의 꼬리말에 해당하는 내용 구분
<nav>: 다른 페이지를 가리키는 링크들의 모음(네비게이션) 구분
<article>: 하나의 글 또는 기사(본문)의 단위 구분
<hgroup> : 태그에서는 h1-h6태그를 사용하고 subheading, 대체제목, line으로 구분할때 사용되어짐
<aside>: 본문의 흐름에서 벗어나는 내용 구분(참고, 팁, 사이드바, 인용)

2.2. 콘텐츠 삽입 요소
<figure>: 이미지, 비디오 등에 자막(캡션) 표현
<source> : codec의 지원이나 media type에 기초하여 브라우져가 선택하게 하여 video와  audio파일을 거기에 맞게 대체시켜 줌
<video>: 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시(UI API 제공)
<audio>: 별도의 플러그인 설치를 필요로 하지 않는 음원 자료를 표시(UI API 제공)
<canvas> : 그래프나 게임 같은 동적인 비트맵 그래픽 표시하는데 사용
<embed> : 플러그인 컨텐츠 표시할 때 사용

2.3. Form 요소
<datalist> :
<keygen> : 키의 페어를 생성하기 위한 컨트롤을 나타냄
<output> : 스크립트에 의한 계산 결과 등 어떠한 출력 결과를 나타냄

2.4. 인터렉티브(상호작용) 요소
<dialog>: 사람 간에 일어난 대화 영역 구분
<details>: 추가적인 상세정보를 담고있는 영역(툴팁의 내용)
<datagrid>: 동적인 데이터를 효과적으로 표현(트리, 목록, 표)
<menu>, <command>: menu는 command 요소를 포함하여 즉각적인 동작 발생(콘텍스트 메뉴)
<command> : 사용자가 실행할 수 있는 명령어를 표시하는데 사용

2.5. 텍스트레벨 요소
<mark>: 강조할 필요까진 없으나 주목해야 할 문구를 표현(형광펜)
<meter>: 특정한 범위에 속하는 숫자 값을 표현(월급, 득표율, 테스트 점수 등)
<time>: 특정한 시각을 표현
<progress>: 현재 진행 중인 상태를 표현(다운로드 완료율)
<ruby/rt/rp> : 루비를 마크업함

3. HTML5 Attributes

3.1. input type
 - text, password, hidden, file 같은 제한적인 사용을 하며 필요한 부분은 스크립트로 제어해왔는데 좀더 다양해짐
 . tel : 전화번호
 . search : 검색 박스
 . url : 웹 주소
 . email : 이메일 주소
 . datetime : 정확하고 절대시간 지정
 . date : 날짜 pickers
 . month : 잘 표시
 . week : 주표시
 . time : timestamps
 . datetime-local : 로컬의 날짜와 시간
 . number : 숫자(spinbox)
 . range : 슬라이더
 . color : 색깔 pickers

3.2 Form Controls
 - form을 동적으로 콘틀로할 수 있게 됨
  . required : 사용자들은 빈필드로 submit할 수 없음
  . placeholder   : input내에 text를 보여주거나 focus가 활성화 되면 필드를 공백으로 만들어 주고, focus가 되지 않았을때는 기본적으로 입력된 내용이 보여지게 함 
  . autofocus : 특정 input태그에 focus를 이동시키지만, script가 아닌 마크업이기때문에 모든 웹사이트에서 동일한 동작을 함
  . autocomplete : 자동 완성 데이터 저장
  . novalidate : form 요소에는 폼을 제출할 때 유효성 검증을 거치지 않도록 함
  . list : datalist와 select와 함께 사용할 수 있음
  . pattern :정규표현식으로 체크 가능

3.3. html
 - manifest : 응용 프로그램은 저장을 위한 캐쉬와 데이타 추출을 위한 manifest를 가짐, 어플리케이션 캐싱과 관련됨

4. HTML5 Features
 - Web workers : HTML4 지원 브라우저의 자바스크립트는 단일 프로세스로 순차적으로 동작하는데 반해 HTML5는 다중 쓰레딩 지원(단일 프로세스로 순차적으로 동작함을 극복한 동시에 다양한 어플리케이션을 실행가능하게 함)
  예)     var worker = new Worker('js/worker.js'); worker.onmessage = function(event) {console.log('Result: ' + event.data);}
 - Web Database : 자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API며, 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 줌
  예) var dbase = window.openDatabase("Test", "1.0", "Sample DB", 90000);
 - Web Storage : 업체별 로컬 스토리지기술을 표준화함(IE의 userData, FF의 Dom Storage, Flash의 Local Shared Object, Google Gear), Session Storage와 Local Storage 를 제공함
 - Web Socket : 한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API를 제공함
 - Geolocation API : 위치 정보(GPS/WiFi/3G based location)를 브라우저에서 Script API를 통해 제공받을 수 있음(위치 정보 : 위도, 경도, 높이, 정확도, 진행방향, 진행속도)
  예) navigator.geolocation.getCurrentPosition(function(position);
 - Drag & Drop API :  쉬운 Drag & Drop 지원
 - Application cache : App Cache는 원하는 리소스를 오프라인으로 선언하면 되고 CACHE MANIFEST로 선언후 cache.manifest 파일에 내용을 적으면 됨
 - Cross-document messaging : 서로 다른 도메인간의 메세지를 주고 받을 수 있음(보안 이슈 발생 가능성 존재)
 - Microdata :  itemprop라는 속성을 통해 사용자 정의로 의미를 부여해 검색 엔진이나 시맨틱 엔진이 이를 처리할 수 있게 함
 - HTML-RDFa : Microdata와 함께 마크업언어에 의미 정보 표현이 가능해 시맨틱웹의 기반 표준이 될 것임

5. 데모 사이트
 - HTML 5 Demos and Examples
 - HTML5 Gallery

1. 개요

기존의 데이터 저장은 클라이언트 사이드는 쿠키, 서버 사이드는 세션 외에는 GET아나 POST 방식으로 데이터를 전달받으면서 기능 구현을 했습니다. 하지만 Server-Side 로 처리 되던 데이터 처리에 대한 부하를 Client-Side 로 가져 오면서 좀더 여유있는 리소스의 이용을 통하여 보다 빠른 속도의 웹 어플리케이션의 구현이 가능 해지게 한 방식이 바로 Local Storage 에 관한 기술들입니다.
오프라인(Offline) 상에서 수정된 데이터를 온라인(Online)이 되었을 때 실 서버로 동기화하여 온라인 Only의  환경적 제약을 뛰어 넘을 수 있게 될 것입니다.

2. 종류

 - Internet Exploere 의 userData - 1M
 - Firefox 의 DOM Storage - 5M
 - Flash Local Shared Object - 100KB
 - Google Gears
 - Cookie  - 4K

3. 영향

이 기술은 HTML 5 Client-Side Database Storage에 영향을 주어서 draft에 포함되어 있습니다.
Ajax Performance 이슈의 대안으로도 활용되고 있죠.

[참조 사이트]

• Local Storage 에 관한 기술

Yammer는 twitter의 기업용 솔루션으로 보면 될 거 같습니다. 현재는 무료인데 이 서비스 정말 괜찮은 아이디어인거 같습니다.
사용 방법은 twitter와 거의 모든 사용법이 동일하고 단지 글 입력부분이 140자로 제한되지는 않는 것 같구요. Enterprise 2.0의 전형적인 서비스죠. 기업의 소통을 잘해줄 수 있는 기업형 SNS서비스.
간단한 사용방법은 아래와 같습니다.

1. 회원 가입
 - 이메일 입력 후 수신 메일에서 activate 링크 클릭하고 필요한 회원 정보 입력하면 끝
 - 회원 가입 후 Org Chart 입력부분이 있음(도식화해서 보여줌)
  . I work with : 같이 일하는 사람
  . I manage : 같이 일하는 후임
  . I report to : 같이 일하는 상관
 - 가입 완료되면 paran.com(pepsi@paran.com) 이메일로 가입된 사람들의 리스트를 보여주고 Follow 할수 있음

2. 기타 기능
 - 모든 기능은 Twitter와 유사함
 - 그룹 만들어서 그룹끼리 커뮤니케이션 가능
 - RSS로 공유 기능 제공
 - 다이렉트메세지를 보내고 싶은시면 보내고 싶은 사람의 id 앞에 "D id"를 넣어 사용함(Follow가 되지 않으면 서로 다이렉트 메세지(개인간의 보안글)을 보내고 받을수 없음)
 - #와 함게 사용되는 단어를 해쉬태그라고 함. .해쉬태그는 tag 처럼 링크가 걸리고, 링크를 선택하면 해쉬태그를 단 모든 글을 검색해서 보여줌.

 

SSL방식으로 SOAP 통신시 아래와 같은 오류가 날 경우 해결책을 공유합니다. 대부분의 경우 클라이언트에서 certificate 체크과정에서 나는 오류일 겁니다.

javax.net.ssl.SSLHandshakeException: sun.security.validator.
ValidatorException: 
PKIX path building failed: sun.security.provider.certpath.
SunCertPathBuilderException: 
unable to find valid certification path to requested target

1. 접속할 서버의 인증서를 다운 받음
 - https://url에서 IE7 에서 주소창 옆에 자물쇠 아이콘 클릭하여 인증서보기에서 추출
 - aaa.cer로 저장

2. keystore 처리
 - keytool -import -trustcacerts -file "/tmp/aaa.cer" -keystore "/tmp/aaa.ks"
 - 암호가 입력되면 keystore에 추가됨(/tmp/aaa.ks)

3. SOAP Client 어플에 설정 추가
 - 첫번째 방법
  . System.setProperty("javax.net.ssl.keyStore", "/tmp/aaa.ks");
  . System.setProperty("javax.net.ssl.keyStorePassword", "password");
  . System.setProperty("javax.net.ssl.trustStore", "/tmp/aaa.ks");

 - 다른 대안
 AxisProperties.setProperty("axis.socketSecureFactory","org.apache.axis.components.net.SunFakeTrustSocketFactory");
  . SunFakeTrustSocketFactory 클래스를 선언하여  certificate 체크를 안하게 함