웹표준 개발개요 비즈로.

Presentation on theme: "웹표준 개발개요 비즈로."— Presentation transcript:

1 웹표준 개발개요 비즈로

2 웹 2.0과 웹 표준 문서의 구조화 및 표준코딩의 장단점 표준코딩 적용 사례 다이나믹 한 서비스 지원 사이트 개발 가이드
차 례 웹 2.0과 웹 표준 문서의 구조화 및 표준코딩의 장단점 표준코딩 적용 사례 다이나믹 한 서비스 지원 사이트 개발 가이드 XML 서비스

3 결과 Explorer 소스 결과 Firefox Opera 결과 Safari 결과 웹 2.0과 웹 표준 1-1
웹 2.0 은 개방적, 유저중심적 서비스를 통칭하는 표현임 예) 블로그 서비스 UCC 동영상 서비스 웹표준, 검색서비스 , RSS , XML 등 사이트간 닫혀있던 데이터 공유 와 더불어 USER 에 대한 서비스를 좀더 개방적으로 진보한다는 포괄적인 뜻을 담음. 따라서 웹표준은 웹2.0에 종속되는 의미임 웹표준이란? 웹사이트는 웹 브라우저를 통하여 서비스됨 대표적 예) INTERNET EXPLORER / FIREFOX / OPERA / SAFARI 결과 Explorer 소스 결과 Firefox Opera 결과 Safari 결과 위와 같이 동일한 소스를 표현하는 방식이 브라우저마다 제각각 이었다

4 explorer 웹 2.0과 웹 표준 1-2 원인 : 각각의 브라우저가 웹 표준을 100% 인식, 지원하지 못했다.
원인 : 각각의 브라우저가 웹 표준을 100% 인식, 지원하지 못했다. 가장큰 예 :Explorer explorer Firefox opera safari 웹 브라우저의 과거 시장지배 구조 브라우저 시장에서 독과점 지위를 가진 explorer 에서 웹 표준 인식 서비스에 가장 취약했다. 따라서 점유율이 낮았던 다른 브라우저들이 점차적으로 explorer 의 점유율을 축소시키며 따라오기 시작하였다. 그럼에 따라 웹 어플리케이션 개발자들은 점유율이 높아진 다른 브라우저에서의 호환을 고려하지 않으면 안 되는 시대가 도래 한 것이다.

5 웹 2.0과 웹 표준 1-3 웹표준이 포괄하는 기술적 범위 HTML CSS DOM XML XHTML JAVASCRIPT 등의 모든 웹 코딩 기술 결론 : 웹 표준은 웹 서비스를 하기 위하여 개발되는 모든 웹 어플리케이션에 대하여 웹 표준 개발 가이드(W3C 제공)의 원칙을 지켜, 사이트간 정보교류, 브라우저간 통일된 서비스, 불필요한 데이터를 줄여 축소된 데이터 보관등을 하기 위한 하나의 가이드라인이라고 볼수 있다.

6 문서의 구조화 1-1 ▶ 테이블이 난무하는 구조에서 벗어나 컨텐츠 별로 문서를 분리하여 구조화 한다.
위 화면을 이용하여 table 방식과 표준 가이드라인 방식으로 비교해 보겠다.

7 문서의 구조화 1-2 Document Document 예) 구방식의 테이블 사용 예 예) Div 를 이용한 문서의 구조화

8 문서의 구조화 1-3 Table 방식의 HTML 작성시 장점 Table 방식의 HTML 작성시 단점
▶ 새로운 방식의 작성법을 배우지 않아도 되어 당장은 편하다. ▶ 드림 위버 등의 툴을 이용하여 그려 낼 수 있어서 편하다. Table 방식의 HTML 작성시 단점 ▶ 각 섹션이 메인 테이블에 종속적이다. (변화를 주지 못하며, 다이나믹 한 컨트롤을 취하기가 어렵다) ▶ 간단한 섹션을 표현하기 위하여 수많은 태그가 삽입되어, 사이트의 규모가 커지면 커질수록 용량이 불필요하게 비대해 진다. ( 불필요한 트래픽 사용량도 늘게 된다 ) ▶ 타인에게 유지보수 인계 시, 또는 본인 스스로도 사이트 유지보수에 어려움을 겪는다. - 부분적 단순 외형변경에도 화면구조 자체를 변경하지 않으면 안 된다. ▶ 테이블 태그 중 한 부분 의 실수 라도 전체 구조를 살펴보며 수정해야 한다. ▶ 결과적으로 회사에 시간적,인적,물적 모든 부분에서 보이지 않게 손실을 입게 된 다.

9 문서의 구조화 1-4 웹 표준 방식의 장점 웹 표준 방식의 단점 ▶ 각 섹션(컨텐츠)이 어느 곳에도 종속적이지 않다.
▶ 코딩 량이 간단하며 소스를 한눈에 보아도 구조를 파악 할 수 있다. ▶ 코딩 량이 간단하므로 용량 또한 크게 준다. ▶ 자바스크립트를 통한 각 섹션 및 섹션이 포함한 하위 Element 들의 컨트롤이 매우 쉬워진다. - 결과적으로 더욱더 다이내믹한 표현 및, 동적인 서비스를 취할 수 있다. ▶ 유지 보수 중 누구에게 인수인계를 하더라도 복잡한 절차가 없고 업무적응이 쉽다. ▶ Cross 브라우저 호환성이 높아진다. ▶ 간소해 진 코딩으로 인해 로딩 및 파싱 이 빨라지므로 user 에게 빠른 웹 서비스를 제공한다. ▶ 섹션의 폐기 후 새로운 컨텐츠 제공 시 굉장히 신속하고 더욱더 편하게 제공할 수 있다. 웹 표준 방식의 단점 ▶ 테이블 방식보다 작성하기가 어렵다 ▶ 새로운 코딩 법을 배워야 한다.

10 표준코딩 적용 사례 1-1 위 섹션에서 클러스터 서비스가 종료되고 큰 사이즈의 광고를 취할 때, table 방식과 표준 방식의 차이를 설명하시오.

11 표준코딩 적용 사례 1-2 한 컨텐츠를 표현하기 위하여 작성된 두가지 예 <TABLE> <TR>
<TD><IMG 태그></TD> <TD> <TD>’ 제2롯데월드 졸석결정’ 또입증 ‘김무성 원내대표 반대</TD> </TR> <TD>신용카드 혜택 못줄인다 “가장 이승철다운 음반됐죠</TD> <TD>마이클잭슨 557억원 피소 도둑질도 가족끼리?</TD> </TABLE> <div> <span style=‘float:left;’><IMG 태그></span> <span> <ul> <li>”제2롯대월드 졸석결정” 또입증 “김무성 원내대표 반대</li> <li>”신용카드 혜택 못줄인다 “가장 이승철다운 음반됐죠”</li> <li>마을잭슨, 577억원 피소 도둑질도 가족끼리?</li> </ul> </span> </div> 한 컨텐츠를 표현하기 위하여 작성된 두가지 예

12 위와 같은 구조를 가진 html 코드를 변형하는 방법론을 설명하시오
다이나믹한 서비스 지원 1-1 ○ 자바스크립트의 영향력이 커졌다. - 과거에 자바스크립트는 폼 필드의 무 결성 체크, 또는 간단하고 조잡한 기능(시계 등 )을 표현하는 도구로만 인식 - Mootools, Prototype.js, jQuery.js , Extjs.js 등의 프레임워크의 등장 - 웹 서비스의 동적인 구현을 위한 도구로 자바스크립트가 강력히 떠오름 - Ajax 기술을 사용하는 기반 ○ 웹 표준과 맞물리면서 자바스크립트가 최하위 Element 의 접근 및 컨트롤이 쉬워졌다. - 테이블 방식의 코딩구조에서 어떠한 동적 서비스를 지원하기에 쉽지 않음. - 웹 표준 방식의 코딩에서 자바스크립트가 강력한 힘을 발휘함. <div id=“section”> <span> <ul> <li>가나다라마바사</li> <li>아자차카타파하</li> </ul> </span> 위와 같은 구조를 가진 html 코드를 변형하는 방법론을 설명하시오

13 < CSS가 올바르게 사용된 예 >
사이트 개발 가이드 1-1 웹 표준 원칙을 준수하며 개발하기 위한 조건 ○ 개발작업에 쓰일 컴퓨터에 각각의 브라우저를 설치하여, 작업 후 각 브라우저로 확인한다. - MicroSoft Internet Explorer v 6.x, v 7.x, v 8.x - Mozila Fire Fox v 3.x - Apple Safari v 3.x - ASA Opera v 9.x 웹 표준을 이해하고, 파싱하는 데에는 각 브라우저마다 차이가 있다. ○ HTML 과 CSS 는 철저히 분리한다. <DIV STYLE=‘WIDTH:500PX;POSITION:ABSOLUTE;MARGIN:0;PADDING:0;TEXT-ALIGN:CENTER;’> <UL> <LI STYLE=“FLOAT:LEFT;WIDTH:500PX;HEIGHT:20PX;”>가나다라마바사</LI> </UL> </DIV> <STYLE> .SECTION{ POSITION:ABSOLUTE; WIDTH:500PX; MARGIN:0; 등등… } </STYLE> <DIV CLASS=“SECTION”> <UL> <LI>가나다라마바사</LI> </UL> </DIV> < CSS 가 잘못 사용된 예 > < CSS가 올바르게 사용된 예 >

14 위와 같이 복잡한 구조의 표 작성 시 어떠한 방법이 가장 좋은 방법인지에 대해 설명하라
사이트 개발 가이드 1-2 ○ 복잡한 구조의 표(테이블)은 기존방식대로 테이블을 사용한다. 위와 같이 복잡한 구조의 표 작성 시 어떠한 방법이 가장 좋은 방법인지에 대해 설명하라 ○ 웹표준 == DIV 는 FALSE 다. DIV는 단지 컨텐츠 를 분리해주는 구조분리형 태그일 뿐이다. 과도한 DIV 사용은 금물이다. ○ 웹 표준에 해당하는 코딩 원칙을 숙지하여 사용한다.

15 < 소유한 자료를, 현재 웹사이트 의 기존 코딩만으로 구현하여 서비스 중 일 때의 활용범위 제한 >
XML 서비스 ○ XML 이란? 사이트가 가진 데이터베이스 (자료) 를 보다 더 효율적으로 제공하거나 , 혹은 다른 형태로 변형하여 서비스 하기 위한 개발방법 이다. 소유자 DATABASE 웹사이트 협력 사업자 MOBILE WEB USER < 소유한 자료를, 현재 웹사이트 의 기존 코딩만으로 구현하여 서비스 중 일 때의 활용범위 제한 >