Programando extensões para Internet Explorer (Webslices e Aceleradores)

1. Internet Explorer 8Programando extensões para Internet Explorer (Webslices e Aceleradores) Rogerio Cordeiro Developer Evangelist Microsoft Brasil Blog: http://blogs.msdn.com/rogerioc Twitter: @rogerioc 30/01/2010

2. IntroduçãoRevisãosobre as novidades do IE8 … Mutable DOM Prototypes Protected Mode Improvements RSS Features Search Suggestions Security and Privacy Selectors API Web Slices Zoom Enhancements Related Topics 64-Bit Downloads Accelerators Accessibility and ARIA ActiveX Improvements AJAX Enhancements CSS Compliance Developer Tools Document Compatibility Mode DOM Storage HTML and DHTML Improvements

3. AgendaFocadaem 2 NovosRecursos Aceleradores Forneceseusserviços de qualquerlugarpela web Web Slices Traga “pedaços” do seu site diretamentepara o usuário Crieumaconexão com o seuusuário

4. AgendaDesafio de Interoperabilidade Anúncio e premiação do vencedor!

5. Princípios de design Simples como um padrão de usuário Fácilparaosdesenvolvedores web Nãonecessáriocódigo do lado do cliente Funciona com sites e serviçosexistentes

6. Aceleradores

7. Aceleradores Seus serviços favoritos em qualquer página Web

8. Fluxo dos Aceleradores Preview Accelerator Results in Site Execute Accelerator Navigate to Service Install Accelerator Select Content Select Accelerator Serialize Content Navigate URL HTML OpenService XML Description

9. DemoComo criar um Acelerador

10. <?xml version="1.0" encoding="utf-8" ?> <openServiceDescriptionxmlns="http://www.microsoft.com/schemas/openservicedescription/1.0"> <homepageUrl>http://maps.live.com</homepageUrl> <display> <name>Map with Live Maps</name> <icon>http://maps.live.com/favicon.ico</icon> </display> <accelerator category="Map"> <acceleratorAction 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> </acceleratorAction> </accelerator> </openServiceDescription> FormatoOpenService

11. //checar a string do user agent se é MSIE 8.0 //paramaisinformações: http://msdn2.microsoft.com/en-us/library/ms537509.aspx //checar se o serviçojáestáinstalado window.external.IsServiceInstalled (‘http://example.com/Service.xml’, ‘category’); //casonegativo, mostrarbotãoparainstalar o serviço window.external.AddService (‘http://example.com/Service.xml’) ; Deployment do Acelerador

12. Resumo Aceleradoressão um jeitomaisfácil de osusuáriosteremacessofácilaosseusserviçosfavoritos a partir de qualquerpágina web Penseem um jeito de trazerpessoasparaseu site a partir de outros sites: - Procura de informações (classificação de conteúdo, informações, etc.) - Creinovosconteúdos - Compartilhe links Crie um aceleradorutilizando o formatoOpenService Os aceleradoresforamfeitosparafuncionar com osservicosdisponíveishoje Divulgue o seuacelerador no seu website Para instalá-lo, não é necessáriocódigo

13. Web Slices

14. Web Slices Estejaciente do queacontece com osseus “pedaços” da Web

15. <div class=”hslice” id=”1” > <p class=”entry-title”>Amazon Kindle, Unopened</p> <div class=”entry-content”> <imgsrc=”pic.jpg”> <p>Current bid: <b>US $282.11</b></p> </div> </div> Exemplobásico

16. Parâmetros hslice entry-title – o título do Web Slice entry-content – descrição ttl – valor do time-to-leave para updates maisfrequentes feedurl – destinoalternativoparabuscar updates endtime – a data emque o item nãoestarámaisdisponível

17. Gerenciamento Verificapor updates umavezpordiaporpadrão (15 minutos no máximo) Set time-to-live value <div>Updates every <span class=”ttl”>60</span>mins</div> Fornecer um feed alternativo – outrafonteparaobter updates <a rel=”feedurl” href=”www.foo.com/feed.xml”>Subscribe</a>

18. DemoComo criar um Webslice

19. Resumo Web Slices são um ótimorecursoparaqueosseususuáriosfiquematentosàsmudanças de conteúdo do seu site Comecem agora! Não é necessáriocódigo do lado do cliente! Os usuáriossãonotificadosquandotemos updates Atraia click rates para o seu site através de previews

20. Recursos MSDN Brasil http://msdn.com.br IE8 Developer Center do MSDN Brasilhttp://msdn.microsoft.com/pt-br/ie/default.aspx

21. Muito Obrigado!Dúvidas? Rogerio Cordeiro Developer Evangelist Microsoft Brasil Blog: http://blogs.msdn.com/rogerioc Twitter: @rogerioc

22. Dasafiode Interoperabilidade Anúncio e premiação do vencedor! http://www.premiointeropbrasil.com.br

23. © 2009 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24. Search Providers

25. Search Providers: Sua engine de buscafavorita com sugestões

26. <?xml version="1.0" encoding="UTF-8"?> <OpenSearchDescriptionxmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>My Custom Search</ShortName> <Url type="text/html” template="http://example.com/?q={searchTerms}&amp;source=IE"/> <Image height="16" width="16“ type="image/icon"> http://example.com/mycustom.ico </Image> <Url type="application/x-suggestions+json” template="http://suggestions.example.com/?q={searchTerms}"/> <Url type="application/x-suggestions+xml” template="http://suggestions.example.com/?q={searchTerms}"/> <ie:PreviewUrl type="text/html” template="http://example.com/search?q={searchTerms}&ei=utf-8"/> </OpenSearchDescription> Descritivo do Open Search

27. //checar a string do user agent se é MSIE 8.0 //paramaisinformações: http://msdn2.microsoft.com/en-us/library/ms537509.aspx //checa se o serviçojáestáinstalado window.external.IsSearchProviderInstalled (‘http://example.com/SearchProvider.xml’); //se falso, mostrarbotãoparainstalar o serviço window.external.AddSearchProvider (‘http://example.com/SearchProvider.xml’) ; Adicionando o seu Provider

28. DemoSearch Providers

29. Maisrecursos Crieseupróprio Search Provider http://www.microsoft.com/windows/ie/searchguide/en-en/default.mspx Maisinformaçõessobrearquivosdescritivos http://www.opensearch.org Extensibilidadepara Search Provider no Internet Explorer 8 Search http://msdn.microsoft.com/en-us/library/cc848862(VS.85).aspx