HTML5와웹앱 2012.04.13. 채원석
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
HTML5와 웹 앱2012.04.13.채원석
발표순서
개요
웹 표준 기술
HTML5 등장배경
HTML5의 중요성
모바일 웹 앱
결론
http://cuttherope.iehttp://chrome.angrybirds.com
개요
개요
http://slides.html5rocks.com/
http://html5.creation.net/html5-guide.pdf
웹 표준 기술
HTML (Hypertext Markup Language) XML (eXtensible Markup Language) XHTML (eXtensible + HTML) CSS (Cascading Style Sheets) JavaScript DOM (Document Object Model)
웹 표준 기술
• HTML (Hypertext Markup Language)– 웹 문서 작성을 위한 기본 언어
– 링크, 인용 등으로 구조적 문서를 만드는 방법 제공
– 미리 정해진 태그 사용
– 주로 보여주는 모양을 표시하는 태그
<html><head><title>웹 문서입니다.</title>
</head><body>
.
.</body>
</html>
웹 표준 기술
• XML (eXtensible Markup Language)– 웹 문서를 넘어서 모든 종류의 데이터, 문서 표현
– DTD 이용 사용자 정의 태그 생성
– 모양보다는 내용과 구조를 표시하는 태그
– 문법 규칙이 엄격
<?xml version="1.0" encoding="euc-kr"?><kmc>
<직원><사원번호>0001</사원번호><성명>홍길동</성명>
</직원><직원>
.
.</직원>
</kmc>
+ XSL또는 CSS
웹 표준 기술
• XHTML (eXtensible Hypertext Markup Language)– HTML을 XML 문서 규칙에 맞게 만든 것
– 미리 정해진 태그 사용
– XML과 같이 문법 규칙이 엄격
– XML이 사용되는 모든 툴 사용 가능
– 브라우저 지원 문제가 걸림돌
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<html xmlns=http://www.w3.org/1999/xhtml“ xml:lang=“ko-KR”><head>
<title>웹 문서입니다.</title></head><body>
.
.</body>
</html>
웹 표준 기술
• CSS (Cascading Style Sheets)– 구조적 문서(HTML, XML)에 Font, color, 레이아웃 등을 적용하기 위해 사용되는 언어
– 가장 큰 목적은? 문서의 내용과 표현을 분리하는 것!
– 문서의 사이즈 감소로 전송되는 데이터 량 감소
– 유지보수 비용 절감
– HTML은 내용과 구조 표현 -> 검색엔진 이해
+ CSS
웹 표준 기술
• JavaScript– 웹 문서가 문서가 아닌 애플리케이션으로서의 동작을 하도록 하는 브라우저에서 실행되는 프로그래밍 언어
• DOM (Document Object Model)– 내부적인 구조의 기초(html:외부적인 표현의 기초)– 웹문서에 사용되는 요소를 객체화하여 문서를 구성하는 모델
웹 표준 기술
• JavaScript & DOM 사용 예– bold로 표기된 부분이 DOM API 사용부분, 나머지는 JavaScript
var table = document.getElementById(“table”);var tableAttrs = table.attributes;for (var i = 0; i < tableAttrs.length; i++) {
if (tableAttrs[i].nodeName.toLowerCase() == “border”) {table.border = “1”;
}}table.summary = “note : increased border”;
웹 표준 기술
• DOM– 웹 문서의 각 요소에 어떻게 ‘접근(제어)’할까에 대해
– 각 요소를 ‘객체화’하고 ‘계층적으로 구조화’하여
– ‘표준’화된 ‘프로퍼티’와 ‘메소드’를 통해
– 각 객체(요소)에 ‘접근’할 수 있도록 만들어진 문서 모델
HTML5 등장배경
마크업 언어의 발전사
HTML5 등장배경
1999년 HTML4.01권고, 이후 XHTML에 주력
W3C
WHATWG2004년 워크숍에서 HTML 표준화를 바라는 브
라우저 제작사의 제안을 배척
2007년 HTML WG 발족하여 HTML5 제정에 협력할 것을 표명
2008년 HTML5가W3C의 초안으로 공개
2004년 애플, 모질라, 오페라 등 브라우저 제작사 들 자체 표준화 단체 결성(WHATWG)
2009-10 HTML5 사양 최종 심사 청구
2009-07 XHTML2 WG 활동을 중지하고 HTML5 표준화 작업 진행
사양서의 타이틀을WHATWG HTML로 바꾸고 사양의 업데이트를 진행 중
HTML5 등장배경
World Wide Web의 진화
http://evolutionofweb.appspot.com
1단계 2단계 3단계 4단계
HTML5 등장배경
World Wide Web의 진화◦ 1단계(1989~1999): 웹사이트의 시대 HTML, URL, HTTP라는 세 가지 기술에 기초한 웹 기술 인간 중심의 정보처리 및 지식공유
◦ 2단계(2000~2004): XML과 웹서비스, 시맨틱 웹 XML 기반 정보 처리 다양한 디바이스/서비스/멀티미디어 연결
◦ 3단계(2005~2009): 웹 2.0, 웹 플랫폼 시대의 성장 구글, 아마존, 위키피디아 제2의 전성기로 다양한 신규 서비스 등장 기반 마련
◦ 4단계(2010~현재): 웹 앱의 시대, 모바일과 N스크린 시대 HTML5와Web API를 통해 스마트기기 대상 웹 응용 환경 제공 위치정보 및 소셜 정보 등의 결합 통합 응용 플랫폼
http://evolutionofweb.appspot.com
HTML5 등장배경 Web 2.0◦ 개방, 참여, 공유◦ “플랫폼으로서 웹”◦ Ajax(Asynchronous JavaScript and XML)◦ G메일, 구글맵◦ SOA + RIA + OSS ~= Web 2.0
RIA(Rich Internet Application)◦ 웹 기반 애플리케이션◦ 브라우저 내 실행◦ 설치 없이 바로 실행◦ 기존 데스크탑 애플리케이션과 동일한 기능◦ Flex and AIR, Silverlight, 야후 위젯, 파이어폭스 확장 기능
HTML5의 격상◦ 2009년 구글 I/O -> HTML5 데모◦ 애플 스티브 잡스의 플래시 탑재 거부◦ RIA 기술의 대체 수단
HTML5의 중요성
HTML5란?◦ 마크업 언어 뿐만 아니라, CSS3와 웹 애플리케이션을 위한 JavaScript API 확장을 포함
통칭되는 HTML5
HTML내용과 형식
- 문서구조- 멀티미디어- 폼과 이벤트
CSS3표현방법
- 표현 기능모듈화
- 웹 폰트
JavaScript각종API
- Web Storage- Web Socket- Geolocation
- 디자인과 프로그램의독립성 확보- 문서 구조의 의미 전달
- 서로 다른 브라우저 상에서 일관성 유지- 효과적인 표현방식 변경
- 풍부한 기능- 자원 제어- 로컬 애플리케이션
HTML5의 중요성 멀티 디바이스 지원◦ Fragmentation(디바이스, 플랫폼) 문제 해결◦ Multi Screen, Multi resolution
Rich Web Application◦ 오프라인 지원 및 다양한 입력 지원◦ 미디어 처리(Canvas, Audio, Video)◦ 위치 기반 서비스(GeoLocation)◦ 쉬운 검색, 호환성, 접근성
Standards◦ 데스크탑/모바일◦ 웹 앱 스토어◦ 웹 - 애플리케이션 플랫폼
Open APIs & Mash-Up 하이브리드 앱◦ App Inventor, DroidDraw, PhoneGap, Appcelerator, WebView…
N스크린, 성능, UI, 새로운 기회…
모바일 웹 앱
The Web as an application development platform
http://www.w3.org/2012/02/mobile-web-app-state
모바일 웹 앱
Web Platform Layer
User Interaction
Presentation
Transport
Resources
JavaScript + Web APIs
HTML5 + CSS3
HTTP
Web Resource URIs(Service, Content, Site)
모바일 웹 앱
Web Application◦ 인터넷과 같은 네트워크를 통해 접근하는애플리케이션
◦ 브라우저 환경에서 동작하거나, 브라우저가 지원하는 언어로 코딩된 소프트웨어
결론
전종홍(ETRI 표준연구센터)HTML5와 차세대웹 기술은
멀티디바이스와 N스크린 지원을 위한 유일한대안으로
유무선 통합의 관점과
웹 표준기반 디바이스 호환성의 중요성을 일깨우고
새로운 웹과 앱의 개발기회,
새로운 수익모델의 가능성,
그리고 많은 새로운웹 경험의 편리함을
제공하는 출발점 …
그러나!◦ 너무 많은 기대?◦ 이상과 현실의 차이?
Related Documents
