코딩 예제) Window.External.Isserviceinstalled( „Map');
Total Page:16
File Type:pdf, Size:1020Kb
웹 서비스의 한계를 넘어 - 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 <?xml version="1.0" encoding="utf-8" ?> <openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0"> <homepageUrl>http://maps.live.com</homepageUrl> <display> <name>Live Maps 지도 서비스</name> <icon>http://maps.live.com/favicon.ico</icon> </display> <activity category="Map"> <activityAction context="selection"> <execute method="get“ action="http://maps.live.com/default.aspx?where1={selection}" /> <preview method="get" action="http://maps.live.com/geotager.aspx"> <parameter name="b" value="{selection}" /> <parameter name="clean" value="true" /> <parameter name="w" value="320" /> <parameter name="h" value="240" /> <parameter name="format" value="full" /> </preview> </activityAction> </activity> </openServiceDescription> Accelerator – OpenService 포맷 Accelerator의 XML 네임 스페이스 <openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0"> homepageUrl:Accelerator에 의해 액세스하는 Web 서비스의 URL <homepageUrl>http://maps.live.com</homepageUrl> diaplay:Accelerator의 메뉴에 표시되는 항목 <display> <name>Live Maps의 지도</name> <icon>http://maps.live.com/favicon.ico</icon> </display> activity:Accelerator의 동작 설정 - category :Accelerator가 제공하는 기능별로 그룹화 Map: Windows Live Map, Google Maps Blog: Windows Live Spaces, Blogger Define: Encarta, Wikipedia Add: Del.icio.us ··· <activity category="Map“> Accelerator – OpenService 포맷 context : Accelerator가 동작할 때 데이터 형식 설정 - 디폴트 「selection」 - 「selection」. 「document」, 「Link」지정 가능 <activityAction context=“selection”> Accelerator – OpenService 포맷 preview:사용자가 Accelerator를 선택했을 때에 표시되는 작은 창 (마우스커서 켜져있을 때의 동작) method는 「get」or 「post」(기본 「get」) action로 지정하는 URI에 대해서 인라인 매개 변수 (이 경우, where1={selection})으로 변수를 송싞 또는 폼 기반 매개 변수로 지정한 변수 (name와 value로 지정)를 송싞 <preview method="get" action="http://maps.live.com/geotager.aspx"> <parameter name="b" value="{selection}" /> <parameter name="clean" value="true" /> <parameter name="w" value="320" /> <parameter name="h" value="240" /> <parameter name="format" value="full" /> </preview> Accelerator – 배포 방안 1. Accelerator를 제공하는 측은 OpenService 포맷의 XML 파일을 준비 2. 브라우저가 IE8인지 User-Agent String등에서 체크 3. 제공하는 Accelerator가 이미 설치되어 있는지 체크 (코딩 예제) window.external.IsServiceInstalled(http://maps.live.com/livemaps.xml, „map'); 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 포맷의 조합을 사용하여 구현 <html> 아이콘 표시영역 업데이트 데이터 동기 영역 <body> ... <div class=”hslice” id=”1” > <p class=”entry-title”>Amazon Kindle, Unopened</p> <div class=”entry-content”> <img src=”pic.jpg”> <p>Current bid: US $282.11</p> <p>This clip updates every <span class="ttl">15</span> minutes </p> </div> </div> ... </body> </html> Web Slice – Developer hAtom 는 정적인 콘텐츠를 표시 가능 Web Slices 는 dynamic 콘텐츠를 표시한다 hAtom 속성의 재사용과 Subscribing 용의 속성 추가 hAtom 속성(기본 속성) entry-title feed 아이템의 제목 이름 <p class="entry-title">Item - $66.00</p> entry-content feed 아이템의 내용 <div class="entry-content">high bidder: buyer1 … </div> Web Slice – Developer Web Slices에 추가한 속성(옵션) ttl (옵션) 페이지 업데이트 주기(분단위 – 최소 단위 15분) <div>Updates every <span class=”ttl”>60</span>mins</div> feedurl (옵션) 업데이트 정보를 취득하기 위한 대체 URL <a rel="feedurl" href="auction.microsoft.com/item.xml">Subscribe to WebSlice</a> endtime (옵션) 종료시각 <p>End time:<abbr class="endtime" title="2008-02-28T17:00:00">1 day 18 hours</abbr></p> Web Slice – 배포방안 AddToFavoritesBar API 사용자가 이 method를 호출하면, WebSlice 의 구독을 허가하는 대화상자가 표시 window.external.addToFavoritesBar(string URL, string Title, [optional] string Type) URL : WebSlice의 URL(필수) Title : WebSlice 의 이름(필수) Type : 링크의 유형(Slice)(옵션) (코딩 예제) <button onclick="javascript:window.external.addToFavoritesBar('http://auction.microsoft.com/item# 1', 'Item - $66.00', 'slice')">Add WebSlice</button> Web Slice –참조 사항 피드의 다운로드 엔짂은 디폴트에서 1일 1회 업데이트 확인 - 업데이트 간격의 최소단위는 15 분 - 「도구」->「인터넷 옵션」 >「컨텐츠」 >「피드」 > 「설정」에서 변경가능 최소 업데이트 갂격 (time-to-live) 지정 - ttl 설정 값은 사용자 설정 값보다 우선 - <div>Updates every <span class=”ttl”>60</span>mins</div> 대체 피드의 제공 - 업데이트를 다른 소스(Feed URL) 에서 가져오기 설정도 가능 - <a rel=”feedurl” href=”www.foo.com/feed.xml”>Subscribe</a> 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 포맷 <?xml version="1.0"?> <Item> <SearchSuggestion version="2.0" <Text>Suggestion2</Text> xmlns="http://opensearch.org/searchsugg <Description>Description2 est2"> </Description> <Query>movies</Query> <Url>Url2</Url> <Section> <Image>image2</Image> <Item> </Item> <Text>Suggestion1</Text> <Item> <Description>Description1 <Text>Suggestion3</Text> </Description> <Description>Description3 <Url>Url1</Url> </Description> <Image>image1</Image> <Url>Url3</Url> </Item> <Image>image3</Image> </Item> </Section> </SearchSuggestion> Visual Search – Query String JSON Format XML Format [ “seattle”, <Item> <Text>space needle</Text> [“space needle”, “seahawks”, </Item> “mariners”] <Item> ] <Text>seahawks</Text> </Item> <Item> <Text>mariners</Text> </Item> Visual Search – Description JSON Format XML Format [“seattle”, <Item> [“space needle”, “seahawks”, “mariners”], <Text>space needle</Text> [“seattle icon”, “football team”, “baseball <Description>seattle icon</Description> team”] </Item> ] <Item> <Text>seahawks</Text> <Description>football team</Description> </Item> <Item> <Text>mariners</Text> <Description>baseball team</Description> </Item> Visual Search – URL JSON Format XML Format [“seattle”, <Item> [“space needle”, “seahawks”, “mariners”], <Text>space needle</Text> [], [“http://www.spaceneedle.com”, <Url>http://www.spaceneedle.com</Url> “http://www.seahawks.com”, </Item> “http://www.mariners.com”] <Item> ] <Text>seahawks</Text> <Url>http://www.seahawks.com</Url> </Item> <Item> <Text>mariners</Text> <Url>http://www.mariners.com</Url> </Item> Visual Search – Visual Suggestion <Item> <Text>space needle</Text> <Image source=“spaceneedle.jpg" alt="Seattle Space Needle“ width="67" height="70“ align=“center” /> </Item> Visual Search – Section Title <Section title="The Best suggestions ever!"> <Item></Item> <Separator title="This is a new section"/> <Item></Item> <Separator /> <Item></Item> </Section> Visual Search – 설치 및 설정 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? 감사합니다.