웹서비스의한계를넘어 - 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"?> <SearchSuggestion version="2.0" xmlns="http://opensearch.org/searchsugg est2"> <Query>movies</Query> <Section> <Item> </Item> <Text>Suggestion1</Text> <Description>Description1 </Description> <Url>Url1</Url> <Image>image1</Image> <Item> <Text>Suggestion2</Text> <Description>Description2 </Description> <Url>Url2</Url> <Image>image2</Image> </Item> <Item> <Text>Suggestion3</Text> <Description>Description3 </Description> <Url>Url3</Url> <Image>image3</Image> </Item> </Section> </SearchSuggestion>
Visual Search Query String JSON Format XML Format [ seattle, ] [ space needle, seahawks, mariners ] <Item> <Text>space needle</text> </Item> <Item> <Text>seahawks</Text> </Item> <Item> <Text>mariners</Text> </Item>
Visual Search Description JSON Format [ seattle, [ space needle, seahawks, mariners ], [ seattle icon, football team, baseball team ] ] XML Format <Item> <Text>space needle</text> <Description>seattle icon</description> </Item> <Item> </Item> <Item> </Item> <Text>seahawks</Text> <Description>football team</description> <Text>mariners</Text> <Description>baseball team</description>
Visual Search URL [ seattle, ] JSON Format [ space needle, seahawks, mariners ], [], [ http://www.spaceneedle.com, http://www.seahawks.com, http://www.mariners.com ] XML Format <Item> <Text>space needle</text> <Url>http://www.spaceneedle.com</Url> </Item> <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> </Item> <Text>space needle</text> <Image source= spaceneedle.jpg" alt="seattle Space Needle width="67" height="70 align= center />
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?
감사합니다