웹표준과 웹접근성, JQuery, AJAX

제이쿼리 발생배경

->  먼저 웹표준과 웹접근성에 대해 알아야함.

 

웹표준

• 여러 브라우저나 기기에서도 다 돌리기 가능(동일한 내용 확인가능)
• 웹에서 표준적으로 사용되는 기술 또는 규칙
• 표준화 단체 W3C가 권고한 표준안에 따라 웹사이트 작성시 이용하는 HTML, CSS, Java Script등에 대한 규정

 

웹접근성

• 장애인 등도 사용가능(모든 사용자가 신체적, 환경적 조건에 관계없아 웹에 접근 및 이용)
• 4대원칙

- 인식의 용이성 (Perceivable)

모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

• (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
• (자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
• (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
• (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
• (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
• (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.
• (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

-  운용의 용이성(Operable)

사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

• (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. (PC웹)
• (누르기 동작 지원) 터치(touch) 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 한다. (모바일웹)
• (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
• (조작 가능) 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
• (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
• (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
• (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
• (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
• (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
• (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

- 이해의 용이성(Understandable)

콘텐츠는 이해할 수 있어야 한다.

• (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
• (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
• (콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.
• (표의 구성) 표는 이해하기 쉽게 구성해야 한다.
• (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.
• (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

- 견고성(Robust)

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

• (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
• (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

웹 표준과 웹 접근성

 

---

제이쿼리란?

-오픈소스 기반의 자바스크립트 라이브러리

->(제이쿼리 외 다른 프레임워크 종류 :  Prototype, script.aculo.us, dojo등)

 

 

발생이유

2000년대 중반 웹 브라우저들간의 자바스크립트 호환성이 낮아서 개발자들이 어려움을 겪던 시절로

“write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표

 

장점

• 제이쿼리를 쓰면 자바스크립트와는 다르게 어떤 브라우저던지 다 돌아감(90%이상의 브라우저 지원)
• HTML DOM을 쉽게 구현가능, CSS 스타일도 간단히 적용가능.
• 애니메이션 효과나 대화형 처리를 간단하게 적용.
• 같은 동작을 하는 프로그램을 보다 짧은 코드로 구현.
• 다양한 플러그인과 참고할 수 있는 문서가 다량 존재.
• ajax처리 방식도 편리하게 사용가능.

---

AJAX란?

- Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법

- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나.

- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신

async : 성능을 향상시키기위해 쓰임

자바에서 쓰레드를 생각해보자

순서대로시작하고 끝나지 않고 끝나는대로 실행

 

특징

• 페이지 새로고침 없이 서버에 요청
• 서버로부터 데이터를 받고 작업을 수행

접근성

- Ajax를 지원하지 않는 웹 브라우저

• 오페라 7 이하
• 마이크로소프트 인터넷 익스플로러 4.0이하.
• 텍스트 기반의 브라우저 링크스, w3m
• 시각장애인을 위한 브라우저
• 1997년 이전 브라우저