장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
모두를 위한 웹 디자인 (컴퓨터/IT)
미리보기

모두를 위한 웹 디자인 (컴퓨터/IT) 단계적 기능 향상을 이용한 UX를 고려한 웹 UI 만들기 (위키북스 오픈소스 웹 시리즈 51)

  • 토드 파커 , 스콧 젤, 패티 톨랜드, 메기 코스텔로 와치스 지음 | 남덕현 옮김 |
  • |
  • 위키북스
  • |
  • 2013-06-28 출간
  • |
  • 492페이지
  • |
  • 188 X 240 mm
  • |
  • ISBN 9788998139278
★★★★★ 평점(10/10) | 리뷰(1)
판매가

30,000원

즉시할인가

27,000 원

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
27,000원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

목차

▣ 00장: 단계적 기능 향상을 이용한 디자인 사례

더 넓어진 웹 세상
- 모든 사람이 웹을 이용하고 있거나 곧 그렇게 될 것이다.
- 사용자의 기대감 이끌기
- 사용자 접근성 필요 증대
- 다른 기기를 이용한 웹 접속의 증가
- 기기와 브라우저의 질긴 생명의 끈
웹 2.0의 지뢰들
- 브라우저에 대한 편협한 관점
- “자바스크립트가 꼭 필요”하다면 많은 사용자가 떠날 것이다.
- CSS는 또 다른 오류가 발생할 잠재성이 있다
- 부가기능의 블랙 박스
- 새로운 기기는 예상하지 못한 인터랙션 규칙을 동반한다.
단계적 기능 향상이 방법이다

[1부] 테스트 주도적인 단계적 기능 향상 접근법

▣ 01장: 접근 방식

브라우저 성능 테스트
단계적 기능 향상을 위한 계획 : 자세히 살펴보기
설계에서 적용까지: 단계적 기능 향상을 적용한 개발 요소 만들기
실전에 적용하기

▣ 02장: 단계적 기능 향상 적용하기 : 자세히 살펴보기

자세히 살펴보기 개요
- 콘텐츠 계층구조 정의와 컴포넌트 HTML 매핑
- 기초 마크업, 최소한의 안전 스타일 만들기
- 마크업, 스타일, 스크립트 개선사항 적용하기
사례 1: 뉴스 웹 사이트에서의 구조와 구성 계획하기
- 콘텐츠 구성과 네이밍 평가하기
- 콘텐츠 구성을 위한 기본 HTML 계층구조 특성 이용
- 내비게이션 구조잡기
- 레이어 콘텐츠와 애니메이션 콘텐츠 적용
- 동적인 필더링과 정렬 지원
사례 2: 결제 페이지 프로세스, 유효성, 데이터 전송
- 결제 페이지 디자인 파헤치기
- 접근성을 보장하기 위한 폼 마크업
- 제약사항과 검증절차 적용하기
- 기본 경험과 향상된 경험 결합하기
사례 3 : 인터랙티브한 데이터의 시각화
- 예산 라인 그래프를 위한 기초 마크업 선택
- 접근성이 높은 슬라이더 폼의 기초 마크업 만들기
- 파이 그래프 만들기
사례 4: 브라우저에서 모든 기능이 지원되는 포토 매니저
- 글로벌 내비게이션 요소 마크업하기
- 복잡한 앨범과 다중 인터랙션 지원하기
- 사용자 정의 폼과 오버레이 메뉴 만들기
- 뒤로 가기 버튼 지원하기
‘자세히 살펴보기’를 적용할 때 필요한 체크리스트

▣ 03장: 의미있는 마크업 만들기

텍스트와 이미지 마크업
- 의미있는 마크업 텍스트를 표현하기 위한 요소
- 리스트(List)
- 표를 이용한 데이터(tabular data)
- 이미지(Images)
- 리치 미디어(Embedded rich media)
- 외부 페이지 콘텐츠 추가하기
인터랙티브한 콘텐츠 마크업하기
- 앵커 링크
- 폼 구조
- 폼 제어
페이지의 문맥 작성하기
- 블록 vs. 인라인 요소를 사용할 때 알아야 할 것
- ID와 class를 이용해 요소 인식하기
- WAI-ARIA 랜드마크 role을 이용해 메인 페이지 인식하기
- 읽을 수 있는 코드 순서 유지하기
- title 어트리뷰트를 이용하라
HTML 문서 설정하기
- DOCTYPE
- 문서의 헤더
접근성 추가하기
- 접근성 가이드라인과 법률 표준
- 웹 콘텐츠 접근성 가이드라인 (Web Content Accessibility Guidelines, WCAG)

▣ 04장: 효과적으로 스타일 적용하기

페이지에 CSS 적용하기
- 외부 스타일스트에서 스타일 운영하기
- 외부 스타일시트 연결하기
- 의미있는 명명 규칙 사용하기
기본 경험과 향상된 경험 스타일 입히기
- 기본 경험을 제공하는 안전한 스타일
- 향상된 경험을 제공하는 스타일 적용하기
접근성 고려하기
브라우저의 비일관성과 버그 다루기
- 조건부 주석
- 일반적인 이슈와 해결책

▣ 05장: 스크립트를 이용한 향상과 인터랙션

자바스크립트 올바르게 참조하기
- 인라인 자바스크립트 사용 금지
- 외부 자바스크립트 참조하기
기본 경험에서 자바스크립트 위치 이해하기
스크립트 향상을 위한 실무 사례
- 콘텐츠가 준비되면 스크립트를 실행하라
- 마크업에 동작 적용하기
- 자바스크립트를 이용해 향상된 마크업 만들기
- 콘텐츠의 노출 관리하기
- 스타일 향상 적용하기
사용성과 접근성의 유지와 강화
- 키보드 접근 적용하기
- WAI-ARIA 어트리뷰트 지정하기
- 접근성 테스트
- 뒤로 가기 버튼의 관리

▣ 06장: 브라우저 성능 테스트

EnhanceJS : 성능 테스트 프레임워크
EnhanceJS의 매커니즘 : 테스트 방법
EnhanceJS를 이용해 개선사항 적용하기
EnhanceJS 설정
- 추가 스타일시트 로딩하기
- 추가 스크립트 로딩하기
- 경험 토글 링크 수정하기
- EnhanceJS의 pass/fail 조정하기
EnhanceJS 테스트 세트 확장하기
- EnhanceJS 옵션으로 테스트 세트 수정하기
- EnhanceJS의 인스턴스 생성하기
- 디버깅을 위한 성능 테스트 경고 활성화
서버에서 EnhanceJS 최적화하기

[2부] 단계적 기능 향상 적용하기

▣ 07장: 단계적 기능 향상을 적용한 위젯 만들기

위젯 코딩 방법
위젯 예제 다루기
예제 코드 내려받기

▣ 08장: 접을 수 있는 콘텐츠

자세히 살펴보기
접근이 쉬운 접을 수 있는 콘텐츠 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 접을 수 있는 스크립트 적용
접을 수 있는 스크립트 사용하기

▣ 09장: 탭 메뉴

자세히 살펴보기
탭 메뉴 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 탭 메뉴 스크립트
좀 더 개선하기
- 즐겨 찾기와 방문기록(뒤로 가기 버튼) 탐색
- 자동으로 회전하는 탭
- 외부 탭 콘텐츠 참조하기
- 아코디언처럼 보이기
탭 스크립트 이용하기

▣ 10장: 툴팁

자세히 살펴보기
title 콘텐츠로 툴팁 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 향상된 툴팁 스크립트
앵커 링크로 툴팁 만들기
외부 소스로 툴팁 만들기
툴팁 스크립트 사용하기

▣ 11: 트리구조 메뉴

자세히 살펴보기
트리 메뉴 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 향상된 트리 스크립트
트리 메뉴 스크립트 이용하기

▣ 12장: HTML5 canvas를 이용한 그래프

자세히 살펴보기
기초 마크업
그래프에 접근성 추가하기
- 테이블 데이터 파싱하기
- 데이터를 가시화하기 위해 canvas 이용하기
- 향상된 테이블 스타일 적용하기
- 데이터 접근성 유지하기
canvas 그래프 좀 더 살펴 보기: visualize.js 플러그인

▣ 13장: 대화 상자와 오버레이 메뉴

자세히 살펴보기
대화상자 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 개선된 대화상자 스크립트
대화상자 좀 더 깊이 살펴보기
대화상자 스크립트 이용하기

▣ 14장: 버튼

자세히 살펴보기
input 기반 버튼 스타일 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- hover 상태 스크립트 작성
버튼에 좀 더 복잡한 비주얼 적용하기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- input을 button으로 변경하는 스크립트
input을 button으로 변경하는 스크립트 이용하기
버튼 좀 더 깊이 살펴보기

▣ 15장: 체크박스, 라디오 버튼, 별점

자세히 살펴보기
사용자 정의 체크박스 만들기
- 기초 마크업
- 향상된 마크업과 스타일
- 체크박스 스크립트
사용자 정의 라디오 버튼 만들기
- 기초 마크업
- 향상된 마크업과 스타일
- 라디오 버튼 스크립트
사용자 정의 input 좀 더 살펴보기 : 별점 위젯
- 기초 마크업
- 향상된 마크업과 스타일
- 별점 위젯 스크립트 만들기
사용자 정의 input과 별점 스크립트 사용하기

▣ 16장: 슬라이더

자세히 살펴보기
슬라이더 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 슬라이더 스크립트
슬라이더 스크립트 이용하기

▣ 17장: 셀렉트 메뉴

자세히 살펴보기
접근성이 고려된 사용자 정의 셀렉트 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 향상된 사용자 정의 셀렉트 스크립트
사용자 정의 셀렉트 좀 더 살펴보기: 최신 옵션 스타일 적용
사용자 정의 셀렉트 스크립트 이용하기

▣ 18장: 리스트 빌더

자세히 살펴보기
리스트 빌더 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 리스트 빌더 스크립트
리스트 빌더 좀 더 살펴보기: 다중 선택, 정렬, 자동완성, 문맥 메뉴
- 다중 선택
- 드래그 앤 드롭 정렬
- 자동 완성
- 문맥 메뉴
리스트 빌더 스크립트 사용하기

▣ 19장: 파일첨부

자세히 살펴보기
사용자 정의 파일 input 만들기
- 기초 마크업과 스타일
- 향상된 마크업과 스타일
- 사용자 정의 파일 input 스크립트
사용자 정의 파일 input 스크립트 사용하기

▣ 요약: 미래를 내다보다

도서소개

『모두를 위한 웹 디자인』는 단계적 기능 향상을 적용해 모든 사용자가 다양한 환경에서 사용할 수 있는 웹 페이지를 만드는 방법을 소개한다. 단계적 기능 향상의 개념을 설명하고, 그 개념이 적용된 웹 UI를 만들고, WAI-ARIA를 이용해 웹 접근성까지 고려한 최종 UI를 만드는 방법을 다양한 사례를 통해 설명한다.

단계적 기능 향상(Progressive Enhancement)과 리치 인터넷 애플리케이션에 대한 접근 표준(WAI-ARIA)을 적용한 웹 UI 만들기!

이 책에서는 단계적 기능 향상을 적용해 모든 사용자가 다양한 환경에서 사용할 수 있는 웹 페이지를 만드는 방법을 소개한다.

단계적 기능 향상의 개념을 설명하고, 그 개념이 적용된 웹 UI를 만들고, WAI-ARIA를 이용해 웹 접근성까지 고려한 최종 UI를 만드는 방법을 다양한 사례를 통해 설명한다. 또 사용자들이 접속하는 환경에 따라 그 환경에서 지원 가능한 기능과 스타일을 선택할 수 있게 브라우저의 지원 범위를 확인하는 스크립트들을 이용해 UI 모듈의 스타일과 기능 구현을 선택할 수 있는 방식을 소개하고, 각 예제 UI에 그 기법을 적용해 설명한다.

각 예제의 UI를 만들기 위한 시맨틱 마크업의 작성, CSS의 적용, 기능과 동작을 위한 스크립트를 순서대로 차근차근 설명함으로써 누구든지 각 과정을 따라 하기만 하면 결과물을 만들 수 있는 형태로 구성돼 있다. 그리고 UI의 목적과 형태에 맞게 WAI-ARIA를 적용해 웹 접근성을 개선하기 위한 실무적인 방법을 소개한다.

《출판사 리뷰》

단계적 기능 향상은 다양한 사용자에게 가능한 최상의 경험을 제공하는 것을 목적으로 삼고, 코드 작성과 테스트도 단순화하는 웹 개발 접근법이다. 사람들이 사이트에 어떤 기기를 통해 접근하든(아이폰이나 최신 사양의 컴퓨터, 또는 스크린리더를 이용해) 이해하고 사용하기 쉬운 경험이 돼야 하고 가능한 한 모든 기능을 이용할 수 있어야 한다.

이 책이 바로 그렇게 하는 방법을 보여 줄 것이다. 이 책은 단계적 기능 향상의 원리와 장점을 이해하기 위한 실무 가이드일 뿐 아니라 여러분이 디자이너이든 개발자든 상관없이 단계적 기능 향상을 구현하는 구체적인 코드와 스크립트를 언제, 어느 부분에 어떻게 적용하는지 알려줄 것이다.

★ 이 책에서 다루는 내용 ★

◎ 일반적인 코딩 방식이 사용자를 배려하지 않는 이유와 단계적 기능 향상이 좀 더 포괄적으로 접근하는 대안이 될 수 있는 방법
◎ 복잡한 인터페이스 디자인을 분석하고, 어떤 환경에서도 동작하는 시맨틱 HTML 경험의 기초를 다지고, 그 위에 개선 사항을 안전하게 추가하는 방법
◎ 기능 향상을 적용할 수 있는 기기에만 기능 향상을 반영하는 데 도움이 되는 브라우저 테스트
◎ 단계적 기능 향상을 적용하기 위한 HTML, CSS, 자바스크립트 코드 작성의 실무 사례와 HTML5와 CSS3 기법을 효과적으로 적용할 수 있는 사례
◎ 범용적인 접근을 보장하기 위한 WAI-ARIA 및 키보드 지원과 같은 접근성 기능 적용 방법
◎ 시맨틱 HTML을 프로젝트에 바로 적용할 수 있는 jQuery 기반 위젯을 비롯한 슬라이더, 탭, 트리 컨트롤, 차트와 같은 인터랙티브 컴포넌트로 변환하는 구체적인 기법
추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.