부라우져별 개발자 도구 설치 설정하기
1.사파리 브라우져 개발자용 메뉴 설정하기
설정 => 기본설정
"메뉴 막대에서 개발자용 메뉴 보기"를 선택
메뉴에 개발자도구가 보인다.
2.파이어폭스 브라우져 개발자용 메뉴 설정하기
http://www.mozilla.or.kr/ko/에 접속하여 다운로드후 설치.
Mozilla Firefox 시작페이지 => 부가기능 관리자 선택
1) "web developer"로 검색 => 결과에서 2) Web Developer1.2.5 선택 => 3) 설치하기클릭
다시시작 클릭
1.크롬 브라우져 개발자용 메뉴 설정하기
브라우져에서 Store를 선택한다.
"web developer"를 입력후 검색
Web developer를 선택 후 CHROME에 추가를 클릭하여 설치
Web developer를 선택하면 메뉴가 나온다.
'5.하이브리드 앱 > 참고' 카테고리의 다른 글
| 모바일를 위한 10가지 가이드 지침 (0) | 2013.08.14 |
|---|
모바일를 위한 10가지 가이드 지침
출처 - http://www.w3c.or.kr/Translation/mwbp_flip_cards/
"모바일웹 모범사례 1.0 (Mobile Web Best Practices 1.0)"은 모바일 장비에서 이용되는 컨텐츠를 보다 편리하게 설계하고 이용할 수 있도록 제정한 W3C의 웹표준입니다. 본 팜플렛에는 모바일웹 모범사례를 10가지 주제로 쉽게 설명하고 있습니다. 본 팜플렛의 가이드라인을 따르면 컨텐츠 제공자들은 더 많은 고객에게 컨텐츠를 제공할 수 있게되고, 효과적인 웹사이트와 어플리케이션을 구현할 수 있으며, 다양한 장비에서 웹을 편리하게 브라우징 할 수 있을 것입니다.
상세 내용 참조: http://www.w3.org/TR/mobile-bp/
모바일화를 위한 10가지 가이드
1.하나의 웹을 위한 설계
다양한 장비를 고려하여 설계한 컨텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다.
하나의 웹을 위한 설계
주제의 일관성:다양한 장비에서 동일 URI에 접속했을 때 제공되는 정보와 기능은 일관성이 있어야 한다.
성능:사용자에게 향상된 기능을 제공하기위해 장비 성능을 상세히 확인해야한다.
오작동:다양한 장비가 각각 다르게 해석하여 발생할 수 있는 오작동을 염두에 두고 설계한다.
테스팅:실제 장비와 에뮬레이터 상에서 테스트를 수행한다.
2.웹 표준 준수
세계 곳곳의 제각기 다른 장비와 브라우저의 호환을 위해서는 표준을 준수해야한다.
유효한 MARKUP: 표준 문법에 유효한 문서를 작성한다.
컨텐츠 포맷 지원: 장비가 지원하는 컨텐츠를 전송한다.
선호하는 컨텐츠 포맷 제공: 가능하면 장비가 선호하는 포멧으로 컨텐츠를 전송한다.
캐릭터 인코딩 지원: 장비가 지원하는 캐릭터 인코딩을 사용한 컨텐츠를 제공해야한다.
캐릭터 인코딩 정보 활용: 장비에서 사용되는 캐릭터 인코딩을 확인한다.
스타일 시트 사용: 장비가 지원하지 않는 경우를 제외하고, 레이아웃과 형식의 설계는 스타일 시트를 사용한다.
구성: 논리적인 문서 구성을 위해 마크업 언어(markup language) 기능을 사용한다.
오류 메시지: 발생한 오류 정보를 알 수 있는 메시지를 제공하고, 그러한 오류를 피해 브라우징을 계속할 수 있도록 한다.
3.유해요소 제거
모바일 장비의 제한 된 화면크기, 키보드, 기타 기능으로 발생하는 사용자의 문제를 고려하여 설계한다.
팝업창:팝업창이나 새로운 창이 열리지 않도록 하고, 사용자에게 사전 정보없이 현재 창을 바꾸지 않는다.
테이블 속의 테이블:테이블 내에 또 다른 테이블을 포함하지 않는다.
테이블 레이아웃:테이블을 이용하여 레이아웃을 구성하지 않는다.
여백과 그래픽:여백 공간에 그래픽을 사용하지 않는다.
프레임 비사용:프레임을 사용하지 않는다.
이미지 맵(IMAGE MAPS):이미지 맵은 장비에서 효과적으로 지원되지 않는 한 사용하지 않는다.
4.장비 제한 주의
쿠키(COOKIES):이용 가능한 쿠키에 의존해서는 안된다.
객체나 스크립트:임베드 되어 있는 객체나 스크립트에 의존해서는 안된다.
테이블 지원:장비에서 테이블을 지원하지 않는 경우 사용하지 않는다.
테이블 대체:가능한 경우에는 테이블 형식을 대체할 수 있는 형식으로 작성한다.
스타일 시트 지원:필요한 경우 스타일 시트 없이도 문서를 읽을 수 있도록 구성한다.
글꼴:글꼴 관련 스타일링에는 의존하지 않는다.
색상 사용:색상을 통해 얻을 수 있는 정보도 색상을 사용하지 않고 이용할 수 있게 한다.
5.웹 네비게이션 최적화
NAVBAR:페이지 상단에는 최소의 네비게이션 메뉴바를 제공한다.
네비게이션:일관된 네비게이션 메카니즘을 제공한다.
타겟 ID 링크:각 링크의 타겟을 명확히한다.
파일 포멧:이용되는 파일의 포멧이 장비에서 지원되는지 주의한다.
타겟의 접근:네비게이션 메뉴와 자주 사용하는 기능에는 키보드 숏컷(shortcut)을 지정한다.
URI:URI를 짧게하여 입력을 쉽게한다.
균형:사용자가 원하는 정보와 페이지에 제공되는 링크 수의 균형을 맞춰 원하는 정보를 쉽게 얻도록 한다.
6.그래픽과 색상 확인
이미지 크기 조절:고유 크기가 있는 이미지는 서버에서 크기를 조절한다.
대용량 그래픽:장비에서 제공할 수 없는 이미지는 사용하지 않는다. 정보제공을 위해 꼭 필요한 것이 아니면 고사양의 고해상도 이미지의 사용은 피한다.
이미지 크기 설정:고유 크기가 있는 이미지는 마크업에 이미지 크기를 설정한다.
NON-TEXT 대체:텍스트가 아닌 요소(이미지, 애니메이션, 동영상 등)에 대해서는 그에 상응하는 텍스트를 제공한다.
색상 명암:전경과 배경의 색 조합은 적절한 명암 대비를 유지해야 한다.
배경 이미지 가독성:배경에 이미지를 사용할 경우 컨텐츠 내용을 볼 수 있어야 한다.
측정:마크업 언어 속성 값과 스타일 시트 속성 값에는 픽셀 측정과 절대 단위를 사용하지 않는다.
7.가볍고 간결한 사이트
최소화:간결하고 효율적인 마크업을 사용한다.
페이지 사이즈 제한:장비의 메모리 한계를 고려한 페이지를 설계한다.
스타일 시트 크기:스타일 시트의 크기를 최소화한다.
스크롤링:추가적인 스크롤링을 사용해야 하는 경우가 아니라면, 한 방향으로 스크롤을 하도록 제한한다.
8.네트워크 자원 절약
오토 리프레쉬:사용자에게 사전에 알리거나 중지 방법을 제공하지 않는 한, 주기적인 페이지 오토 리프레시는 사용하지 않는다.
경로 변경:마크업으로 자동 경로 변경(redirection)을 사용하지 않고, 서버 설정을 통한 HTTP 3xx code 경로 변경을 사용한다.
외부 자원:외부 자원의 링크 활용을 최소화한다.
CACHING:HTTP 응답에는 캐쉬 정보를 제공한다.
9.사용자 입력 가이드
키입력 최소화:키 입력 횟수를 최소화한다.
텍스트 입력 최소화:가능하면 텍스트 입력을 피한다.
기본값(default) 제공:가능하면 미리 선택된 기본값을 제공한다.
기본 입력 모드:장비가 지원하는 기본 텍스트 입력 모드, 언어, 포멧을 설정한다.
탭 순서:링크, 폼 컨트롤과 객체를 이용한 논리적 탭 순서를 생성한다.
라벨 컨트롤:모든 폼 컨트롤에 적절한 라벨을 붙이고, 명시적으로 라벨과 폼 컨트롤을 연계시킨다.
위치 제어:라벨과 연관된 폼 컨트롤이 서로 적절한 위치에 있도록 한다.
10.모바일 유저 배려
페이지 제목:간단 명료한 페이지 제목을 제공한다.
명확성:명확하고 간단한 언어를 사용한다.
한 눈에 의미 파악:페이지의 내용을 간단 명료하게 하여 다음 페이지의 내용까지 파악할 수 있도록 한다.
제한:사용자가 요청한 범위로 컨텐츠를 제한한다.
적절:모바일 환경 사용에 적절한 컨텐츠를 보장한다.
적절한 페이지 사이즈:장비의 성능과 네트워크 부하 등을 고려하여 사용하기 편리하고 유용한 크기로 페이지 사이즈를 분할한다.
'5.하이브리드 앱 > 참고' 카테고리의 다른 글
| 부라우져별 개발자 도구 설치 설정하기 (0) | 2013.08.15 |
|---|
