웹 서비스의 한계를 넘어 - IE8 for Developer
한국마이크로소프트
개발자 및 플랫폼 사업 본부 차세대 웹 플랫폼 팀 김대우 http://www.uxkorea.net IE8 for Developer!!!
웹 개발자를 위한 IE8 디버깅 Accelerator Web Slice Visual Search 웹 개발자를 위한 IE8 디버깅
시작은 F12 한눈에 보이는 HTML DOM CSS 벗기기 Script 디버깅 프로파일러 브라우져 호홖성 체크 … Accelerator
현재 보고 있는 사이트에서 기존의 서비스로 직접 연결가능 Web Slice
웹의 다양한 컨텐츠를 빠르게 조회 사용자의 직접적인 구독 UI 모듈을 최소화한 개발 가능 Visual Search
다양한 검색 제공자로부터 빠른 검색을 수행 시각적인 검색 제공 UI모듈 개발 필요 없음 Guest - Auction Accelerator Accelerator – Developer
Web 페이지의 컨텐츠와 다양한 온라인 서비스를 갂단한 동작으로 제휴 기능 추가적인 클라이언트 UI 개발 필요 없음 – 개발 모듈 최소화 표준 XML기반 OpenService 포맷 XML 문서 기반 Accelerator 등록 제공 Accelerator – Developer
homepageUrl：Accelerator에 의해 액세스하는 Web 서비스의 URL
diaplay：Accelerator의 메뉴에 표시되는 항목
activity：Accelerator의 동작 설정 - category ：Accelerator가 제공하는 기능별로 그룹화 Map: Windows Live Map, Google Maps Blog: Windows Live Spaces, Blogger Define: Encarta, Wikipedia Add: Del.icio.us ···
4. 제공하는 Accelerator를 설치한다 (코딩 예제) window.external.AddService(http://maps.live.com/livemaps.xml) ; Web Slice Web Slice – Developer 자주 업데이트되는 Web 페이지의 일부분(또는 젂체 )에 대하여 갂단하게 업데이트 정보를 체크할 수 있는 기능 즐겨 찾기 컨텐츠 상태 표시 즐겨 찾기, 피드, WebSlices 볼드：업데이트 폴더에서 컨텐츠를 관리 가능 이탤릭：종료 직젂 그레이：종료 또는 오류
세부 사항 사항의 미리보기 윈도우 Web 페이지로의 HTML 인용 (static 컨텐츠) 기본적인 HTML 스타일을 가져와 클릭만으로 web 사이트에 액세스 WebSlice를 구현 하기 위해서는 WebSlice의 HTML 속성을 Web 페이지에 적용 WebSlice는 hAtom 마이크로 포맷과 WebSlice 포맷의 조합을 사용하여 구현
아이콘 표시영역 업데이트 데이터 동기 영역
...Amazon Kindle, Unopened
Current bid: US $282.11
This clip updates every 15 minutes
hAtom 속성(기본 속성) entry-title feed 아이템의 제목 이름
Item - $66.00
entry-content feed 아이템의 내용
ttl (옵션) 페이지 업데이트 주기(분단위 – 최소 단위 15분)
feedurl (옵션) 업데이트 정보를 취득하기 위한 대체 URL Subscribe to WebSlice
endtime (옵션) 종료시각
End time:1 day 18 hours
Web Slice – 배포방안 AddToFavoritesBar API 사용자가 이 method를 호출하면, WebSlice 의 구독을 허가하는 대화상자가 표시window.external.addToFavoritesBar(string URL, string Title, [optional] string Type) URL : WebSlice의 URL(필수) Title : WebSlice 의 이름(필수) Type : 링크의 유형(Slice)(옵션)
(코딩 예제) Web Slice –참조 사항 피드의 다운로드 엔짂은 디폴트에서 1일 1회 업데이트 확인 - 업데이트 간격의 최소단위는 15 분 - 「도구」->「인터넷 옵션」 >「컨텐츠」 >「피드」 > 「설정」에서 변경가능
최소 업데이트 갂격 (time-to-live) 지정 - ttl 설정 값은 사용자 설정 값보다 우선 -
대체 피드의 제공 - 업데이트를 다른 소스(Feed URL) 에서 가져오기 설정도 가능 - Subscribe Web Slice – 인증 WebSlice 증가한 피드와 동일 취급 데이터는 사용자의 로컬머싞에 저장 사적인 데이터는 인증을 통해서 공개
Cookies 기반 인증 - Cookies 의 유효기갂 지났을 경우, 재인증이 필요한 로그인을 위한 Link 를 WebSlice 컨텐츠로 제공하는 것을 추천
HTTP 기반의 인증 - HTTP 기본 인증, HTTP 다이제스트 인증을 지원 - HTTP 기본 인증은, HTTPS(SSL) 경유만 지원 Web Slice vs. RSS 피드 피드는 새로운 내용을 프로모션에 유용 Ex) 뉴스 문서,블로그 기고, 검색 결과 등
WebSlice는 시시각각 변화하는 웹페이지의 일부를 표시하는데 이상적 Ex) 일기 예보, 옥션 아이템 & 프로파일 등 Visual Search Visual Search - Developer IE8 의 검색 박스 기능 향상 서비스 제공자가 실시간 검색 추천 리스트를 제공 가능(Search Suggestion)
서비스 제공자는 자사의 컨텐츠를 이용한 이미지 등을 같이 제공 가능(Visual Search)
검색 박스는 서비스 제공자로부터의 정보와 사용자의 컴퓨터에 저장된 정보를 포함한 결과를 제공 가능 Visual Search - Developer Query strings / Text Suggestions Visual Suggestions
Descriptions
Sections / Section Titles
URLs Visual Search – 두가지 결과 포맷
JSON format Text suggestions Descriptions URLs XML format Text suggestions Descriptions URLs Sections Images Search Suggestion은 JSON과 XML 형식 두 가지 모두 구현이 가능하나 XML 형식이 더 많은 추가 기능을 가지고 있음(Section 구분 및 Visual Search 등) Visual Search – XML 포맷
JSON Format XML Format
[ “seattle”,
[“seattle”,
JSON Format XML Format
[“seattle”,
1. 해당 페이지에서 Search Provider를 설치할 수 있다면 알릴 수 있음 (혹은 직접 설치 가능) : 기존 Search Provider 등록과 동일
2. 기존에 설치 되어있는지를 체크 한 후에 설치 확인 창이 열리며 기본 Search Provide로 설정할 것인지에 대한 체크 박스(미 체크)와 Search Suggestion 을 사용할 것인지 체크 박스(체크)가 있음
3. 추가하기 버튼을 누르면 브라우저 오른편 상단의 Search Box에 Search Provider로 추가 Visual Search – 설치 및 설정
4. Search Box를 마우스로 클릭하면 설치된 Search Provider를 바로 선택할 수 있음
5. Mange Add-on 페이지에서 설치된 Search Provider들의 순서나 Default 그리고 사용 여부 등을 수정할 수 있음 Visual Search – 설치 및 설정
6. Search Box를 마우스로 클릭하면 설치된 Search Provider를 바로 선택할 수 있음
7. 결과 리스트 중에 원하는 것을 클릭하면 해당하는 페이지로 바로 이동 가능 Beyond Browser? 감사합니다