홈페이지 웹표준 가이드 차세대 학사정보시스템 구축 단계명 : 설계 시스템명 : 학생정보서비스(홈페이지)

Slides:



Advertisements
Similar presentations
임직원 APP 설치 가이드 경영전략처 정보기획 TF 팀. 임직원 App- 운영체제 구분  안드로이드 갤럭시, 갤럭시노트, 갤럭시 S4 [ 삼성전자 ] 옵티머스 [LG 전자 ] 베가 [ 팬텍 모토로이 [ 모토롤라 ]  ios 아이폰 [ 애플.
Advertisements

2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
밥 팀 명 : TTL 조 팀 원 : 김정용 (PM) 서종규 노재현 엄성욱.
난이도 : 초급 제1장 앱 인벤터 소개 및 준비.
웹 호환성 향상 전략 조 훈 DBDIB DBDIB.
컴퓨터와 인터넷.
Secure Coding 이학성.
일반 요구 사항 비즈니스 요구사항 고객/정보/위치/상태 탐색방법 제품/서비스 홍보 및 광고 방법
관광 스마트 북 발행 제안 OSMD( One Source Multi Device ).
파워포인트 2007.
30강_웹문서 제작 팁 웹문서 제작 팁 Lecturer Kim Myoung-Ho Nickname 블스
1. 신뢰할 수 있는 싸이트 등록 인터넷 익스플로러 실행 후 실행
Web Service Computing and Practice_
Windows 8 Ksystem G&I 설치.
Chapter05 오디오와 비디오 HTML5 Programming.
Visual Basic .NET 처음 사용하기.
11장. 포인터 01_ 포인터의 기본 02_ 포인터와 Const.
FTP 프로그램 채계화 박재은 박수민.
전광판 어플 크레파스통 도상미 박아란 이민영.
iframe 사용하기 Chapter 3 Part 2
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
웹접근성 수준진단 자체 점검표.
KHS JDBC Programming 4 KHS
IT사이버강좌 / Unicms온라인 강좌 스마트폰 이용 설명서
컴퓨터 프로그래밍 : 실습3 2장 데이터와 식.
제 1장. 멀티미디어 시스템 개요.
스크래치 언어 이해 스크래치 이용법 습득 고양이가 말을 하며 움직이는 예제 작성
CHAP 12. 리소스와 보안.
Wireless Java Programming
웹 사이트 분석과 설계 (주제 : 화면설계) 학번 : 성명 : 한형진.
(개정판) 뇌를 자극하는 Red Hat Fedora 리눅스 서버 & 네트워크
자바응용.
인터넷 따라 하기 ◆ 인터넷 시작 하기 ◆ 인터넷 끝내기 ◆ 홈페이지 방문 및 정보검색 ◆ 전자우편( ) 가입
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
MVC 모델을 이용한 웹 애플리케이션 작성 웹 애플리케이션 개발 순서를 알아본다 웹 애플리케이션의 실행 순서를 이해한다.
정보화 사회의 실생활 사례 컴퓨터개론 과제 모바일 인터넷과 차성오.
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
웹디자인
Windows XP 서비스 팩2를 설치하는 10가지 이유
플래시 애니메이션 제작과정 (E-러닝) Lee Sunghoon 1.
접근성 있는 리치 인터넷 애플리케이션 제작기법
법령안편집기 연결버튼 표시가 안 될 경우 정부입법지원센터( 입안 및 심사안을 진행시
웹사이트 분석과 설계 (화면 설계) 학번: 성명: 박준석.
XML (eXtensible Markup Language) 개요
학습목표 처음 만드는 비주얼 베이직 프로그램 프로그램 실행과 실행 파일 생성. 학습목표 처음 만드는 비주얼 베이직 프로그램 프로그램 실행과 실행 파일 생성.
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
3장 JSP프로그래밍의 개요 이장에서 배울 내용 : JSP페이지의 기본적인 개요설명과 JSP페이지의 처리과정 그리고 웹 어플리케이션의 구조에 대해서 학습한다.
모바일(폰)메일 서비스 정흠수 최동훈.
01. 분산 파일 시스템의 개요 네트워크에 분산된 파일을 사용자가 쉽게 접근하고 관리할 수 있게 해준다.
12 그리드 시스템.
멀티미디어시스템 제 5 장. 멀티미디어 데이터베이스 개념 IT응용시스템공학과 김 형 진 교수.
웹 사이트 분석과 설계 [디자인 리서치] 학번: 이름 : 홍지애.
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
9 브라우저 객체 모델.
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
프로그래밍 언어 학습을 위한 가상실습환경 창원대학교 이수현.
멀티미디어 활용 -플래시 CS3 류 정 남.
웹사이트 분석과 설계 (화면 설계) 학과:e-비즈니스 학번: 이름 :조인환.
Installation Guide.
Windows XP 서비스 팩2를 설치하는 10가지 이유
버스와 메모리 전송 버스 시스템 레지스터와 레지스터들 사이의 정보 전송을 위한 경로
About Html5 모바일인터넷과 이수진.
6 객체.
하이브리드 네트워크 환경에서의 멀티스크린 서비스 기술 ETRI Technology Marketing Strategy
Chapter 11. 문서 인쇄 및 파일 형식.
실전 프로젝트: 홈페이지 구축 시트콤 프렌즈 팬 사이트 구축하기.
웹 사이트 분석과 설계 학과 : e-biz 경영학과 2-2 학번 : 이름 : 이재섭.
Presentation transcript:

홈페이지 웹표준 가이드 차세대 학사정보시스템 구축 단계명 : 설계 시스템명 : 학생정보서비스(홈페이지) 문서번호 : nKNOU-DEHP-05

목차 가. 웹 표준 가이드라인 ……………………………………………………………………… 2 웹 접근성 정의 ……………………………………………………………………… 3 기술가이드라인 ……………………………………………………………………… 9 웹 표준 준수지침 ………………………………………………………………… 10 접근성 시험 및 참조사이트……………………………………………………… 11

가. 웹 표준 가이드라인

가. 웹 표준가이드라인 A. 웹 접근성 정의 1.1 W3C 정의 1) Web Accessibility Initiative (WAI)에서의 정의 1. 웹 접근성은 장애를 지닌 사람이 웹을 이용할 수 있는 것을 의미. 2. 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점. 2) Web Content Accessibility Guidelines ( WCAG 2.0 )의 웹접근성 지침의 목적 1. WCAG 1.0기준과 달리 장애인의 실제적인 사용성에 초점을 맞춘 것이 가장 큰 특징. 2. 인터넷 기술의 발전 속도에 맞는 신기술 수용 부분까지 고려해서 제정. 3. 사용성이란 접근성의 확대된 개념으로 단순히 장애인이 웹에 접근하는 수준에서 한 걸은 더 나아가 인터넷을 직접 활용할 수 있도록 하는데 초점을 맞춤. 3) WCAG 2.0 가이드 라인 1. 인지성 - 정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다. 1-1. 모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단언어들과 같은 형태로 제공해야 한다. 1-2. 시간에 기본한 미디어에 대한 대안을 제공해야 한다. 1-3. 정보와 구조 손실 없이 콘텐츠를 다른 방식 (예를들면 더욱 간단한 형태)들로 표현될 수 있어야 한다. 1-4. 사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

가. 웹 표준가이드라인 A. 웹 접근성 정의 1.2 한국형 웹 콘텐츠 접근성 지침 2.0 2. 운용성 - 사용자 인터페이스 요소와 탐색은 운용 가능해야 한다. 2.1. 키보드로 모든 기능을 사용할 수 있도록 해야 한다. 2.2. 읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다. 2.3. 알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다. 2.4. 사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치해 있는지를 알 수 있도록 도와주는 방법을 제공 해야 한다. 3. 이해성 - 정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다. 3.1. 텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다. 3.2. 웹페이지의 운용을 예측 가능한 방법으로 제작해야 한다. 3.3. 사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다. 4. 내구성 - 콘텐츠를 보조기술을 포함한 넓고 다양한 사용자 에이전트에 의존되어 해석될 수 있도록 충분한 내구성을 가져야 한다. 4.1 보조기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다. 1) 웹 접근성을 고려한 콘텐츠 제작 방법 1. 원칙, 지침, 검사 항목의 3단계로 구성. 2. 본 지침을 준수할 경우, 비장애인, 노인 등이 장애인, 젊은이 등과 동등하게 웹 사이트에서 제공하는 콘텐츠를 인식하고, 이를 운영하고 이해할 수 있게 되는 것. 1.2 한국형 웹 콘텐츠 접근성 지침 2.0

가. 웹 표준가이드라인 A. 웹 접근성 정의 2) 한국형 웹 콘텐츠 접근성 2.0 개요 ( KWCAG 2.0 ) 1. 인식의 용의성 - 모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1.1 대체 텍스트 - 적절한 대체 텍스트 제공 : 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공 해야 한다. 1.2 멀티미디어 대체 수단 - 자막 제공 : 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다. 1.3 명료성 - 색에 무관한 콘텐츠 인식 : 콘텐츠는 색에 관계없이 인식될 수 있어야 한다. - 명확한 지시사항 제공 : 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다. - 텍스트 콘텐츠의 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다. - 배경음 사용 금지 : 자동으로 재생되는 배경음을 사용하지 않아야 한다. 2. 운용의 용의성 -사용자 인터페이스 구성요소는 조작 가능하고 내비게이션할 수 있어야 한다. 2.1 키보드 접근성 - 키보드 사용 보장 : 모든 기능은 키보드만으로도 사용할 수 있어야 한다. - 초점 이동 : 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다. 2.2 충분한 시간 제공 - 응답시간 조절 : 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다. - 정지 기능 제공 : 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

가. 웹 표준가이드라인 A. 웹 접근성 정의 2.3 광과민성 발작 예방 - 깜빡임과 번쩍임 사용 제한 : 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다. 2.4 쉬운 내비게이션 - 반복 영역 건너뛰기 : 콘텐츠의 반복되는 영역은 건너 뛸 수 있어야 한다. - 제목 제공 : 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. -적절한 링크 텍스트 : 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다. 3. 이해의 용이성 -콘텐츠는 이해할 수 있어야 한다.) 3.1 가독성 - 기본 언어 표시 : 주로 사용하는 언어를 명시해야 한다. 3.2 예측가능성 - 사용자 요구에 따른 실행 : 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다. 3.3 콘텐츠의 논리성 - 콘텐츠의 선형화 : 콘텐츠는 논리적인 순서로 제공해야 한다. - 표의 구성 : 표는 이해하기 쉽게 구성해야 한다. 3.4 입력 도움 - 레이블 제공 : 입력 서식에는 대응하는 레이블을 제공 해야 한다. - 오류 정정 : 입력 오류를 정정할 수 있는 방법을 제공 해야 한다.

가. 웹 표준가이드라인 A. 웹 접근성 정의 4. 견고성 -웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다. 4.1 문법준수 - 마크업 오류 방지 :마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다. 4.2 웹 애플리케이션 접근성 - 웹 애플리케이션 접근성 준수 : 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

가. 웹 표준가이드라인 A. 웹 접근성 정의 1.3 웹 접근성 및 정보통신 접근성에 대한 주요 정의 구분 정의 1.3 웹 접근성 및 정보통신 접근성에 대한 주요 정의 구분 정의 장애인·노인 등의 정보통신 접근성 향상을 위한 권장지침 정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것 웹 접근성 이니셔티브 (WAI: Web Accessibility Initiative) 장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것 Wikipedia 표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것 한국정보화진흥원 어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것

이해의 용이성 (Understandable) 가. 웹 표준가이드라인 B. 기술 가이드라인 인식의 용이성 (Perceivable) 1.1( 대체 텍스트 ) 텍스트 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다 . 1.2( 멀티미디어 대체 수단 ) 동영상 ,음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다 . 1.3( 명료성 ) 콘텐츠는 명확하게 전달되어야 한다 운용의 용이성 (Operable) 2.1( 키보드 접근성 ) 콘텐츠는 키보드로 접근할 수 있어야 한다 . 2.2( 충분한 시간 제공 ) 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다 2.3( 광과민성 발작 예방 ) 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다 2.4( 쉬운 내비게이션 ) 콘텐츠는 쉽게 내비게이션할 수 있어야 한다 . 이해의 용이성 (Understandable) 3.1( 가독성 ) 콘텐츠는 읽고 이해하기 쉬워야 한다 . 3.2( 예측 가능성 ) 콘텐츠의 기능 과 실행결과는 예측 가능해야 한 다 . 3.3( 콘텐츠의 논리성 ) 콘텐츠는 논리적으로 구성해야 한다 . 3.4( 입력 도움 ) 입력 오류를 방 지하거나 정정할 수 있어야 한 다 . 견고성 (Robust 4.1( 문법 준수 ) 웹 콘텐츠는 마 크업 언어의 문법을 준수해야 한 다 . 4.2( 웹 애플리케이션 접근성 ) 웹 애플리케이션은 접근성이 있어야 한다 .

가. 웹 표준가이드라인 C. 웹 표준 준수지침 1.1 전자정부 웹 표준 준수지침 1.2 지침의 적용범위 1.1 전자정부 웹 표준 준수지침 - 목적 : 정부기관에서 홈페이지 구축 시 콘텐츠에 접근하려는 모든 사람들이 어떤 컴퓨터나 운영체제, 또는 웹 브라우저(web browser)를 사용하는 환경에 구애 받지 않고 홈페이지를 이용할 수 있도록 하는 것을 목적으로 한다. - 본 지침은 공포 이후 정부기관에서 구축하는 모든 정보화 시스템 구축 사업의 계획 수립, 시스템 구축, 감리 등 전 단계에 적용한다. 다만, 관계법령에서 따로 정한 경우는 제외할 수 있다. 1.2 지침의 적용범위 내용의 문법준수 모든 웹 문서는 적절한 문서타입을 명시해야 한다. 명시한 문서타입에 맞는 문법을 준수해야 한다. 모든 페이지는 사용할 인코딩 방식을 표기해야 한다. 내용과 표현의 분리 논리적인 마크업을 구성하여 구조적인 페이지를 만들어야 한다. 사용된 스타일 언어는 표준적인 문법을 준수해야 한다. 동작의 기술 중립성 보장 스크립트의 비 표준 확장 사용은 배제되어야 한다. 스크립트 비 사용자를 위한 대체텍스트나 정보를 제공해야 한다. 플러그인의 호환성 플러그인은 다양한 웹 브라우저를 고려해야 한다. 콘텐츠의 보편적 표현 메뉴는 다양한 브라우저 사용자도 접근할 수 있어야 한다. 다양한 인터페이스(입력기기)로 웹 사이트를 이용할 수 있어야 한다. 운영체제 독립적인 콘텐츠 제공 제공되는 미디어는 범용적인 포맷을 사용해야 한다. 부가기능의 호환성 확보 인증기능은 다양한 브라우저에서 사용 가능해야 한다. 다양한 프로그램 제공 정보를 열람하는 기능은 다양한 브라우저에서 사용 가능해야 한다. 별도의 다운로드가 필요한 프로그램은 윈도우, 리눅스, 매킨토시 중 2개 이상의 운영체제를 지원해야 한다.

가. 웹 표준가이드라인 D. 접근성 시험 및 참조사이트 1.1 웹 접급성 / 웹 표준화 관련단체 1.1 웹 접급성 / 웹 표준화 관련단체 W3C 월드와이드웹 컨소시엄 ENG : http://www.w3c.org KOR : http://www.w3c.or.kr WAI 웹 접근성에 대한 전략, 가이드라인, 리소스의 개발 http://www.w3.org/WAI 한국정보화진흥원 국내·외의 정보격차 해소를 종합적으로 지원하기 위한 사업수행: http://www.nia.or.kr/Index.aspx?PortalID=ko IABF 정보통신 접근성 향상 표준화 포럼 http://www.iabf.kr/ 1.2 웹 접근성 / 웹 표준 테스트 웹 접근성 테스트 프로그램 웹 접근성 테스트 프로그램 KADO-WAH 프로그램 다운로드 http://www.wah.or.kr/Achive/Kadowah.asp Markup Validation 테스트 웹 문서의 markup (HTML, XHTML, …)을 검사 http://validator.kldp.org CSS Validation 테스트 캐스케이딩 스타일시트 (CSS) 와 스타일시트를 포함한 (X)HTML 문법검사 http://css-validator.kldp.org Link Checker 테스트 RSS/Atom 피드, MobileOK 컨텐츠, 또는 깨진 링크 찾기 등의 특정 콘텐츠 검색 http://validator.w3.org/checklink

가. 웹 표준가이드라인 D. 접근성 시험 및 참조사이트 1.3 웹 접근성 관련 표준자료 HTML5 한글 명세서 1.3 웹 접근성 관련 표준자료 웹 접근성 국제 표준 W3C Recommendation WCAG 1.0 Eng http://www.w3.org/TR/WAI-WEBCONTENT/ WCAG 1.0 Kor http://gregshin.pe.kr/wcag/wai-pageauth.html 웹 접근성 국제 표준 후보 W3C Working Draft WCAG 2.0 Eng http://www.w3.org/TR/WCAG20/ 웹 접근성 국내 표준 KWCAG 2.0 PDF http://www.wah.or.kr/Example2.0/index.asp HTML 표준 HTML 4.01 Eng http://www.w3.org/TR/1999/REC-html401-19991224/ HTML 4.01 Kor http://trio.co.kr/webrefer/html/cover.html XHTML 표준 XHTML 1.0 Eng http://www.w3.org/TR/xhtml1/ XHTML 1.0 Kor http://trio.co.kr/webrefer/xhtml/overview.html HTML5 초안 W3C Working Draft HTML 5 Eng http://www.w3.org/TR/html5/ HTML 5 differences from HTML 4 Eng http://www.w3.org/TR/html5-diff/ HTML5 한글 명세서 ttp://html5.clearboth.org/spec