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

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

Rogerio CordeiroDeveloper EvangelistMicrosoft BrasilBlog: http://blogs.msdn.com/rogeriocTwitter: @rogerioc

30/01/2010

Introdução Revisão sobre as novidades do IE8 …

− 64-Bit Downloads− Accelerators− Accessibility and ARIA− ActiveX Improvements− AJAX Enhancements− CSS Compliance− Developer Tools− Document Compatibility

Mode− DOM Storage− HTML and DHTML

Improvements

− Mutable DOM Prototypes− Protected Mode

Improvements− RSS Features− Search Suggestions− Security and Privacy− Selectors API− Web Slices− Zoom Enhancements− Related Topics

AgendaFocada em 2 Novos Recursos− Aceleradores

− Fornece seus serviços de qualquer lugar pela web

− Web Slices− Traga “pedaços” do seu site diretamente

para o usuário

Crie uma conexão com o seu usuário

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

Princípios de design

− Simples como um padrão de usuário

− Fácil para os desenvolvedores web− Não necessário código do lado do cliente

− Funciona com sites e serviços existentes

Aceleradores

Aceleradores

− Seus serviços favoritos em qualquer página Web

Fluxo dos Aceleradores

OpenService XML Description

Serialize Content

Navigate URL

HTML

Preview Accelerato

r

Results in Site

Install Accelerato

r

Select Content

Select Accelerato

r

Execute Accelerato

r

Navigate to Service

Demo Como criar um Acelerador

<?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>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>

Formato OpenService

//checar a string do user agent se é MSIE 8.0//para mais informações:http://msdn2.microsoft.com/en-us/library/ms537509.aspx

//checar se o serviço já está instaladowindow.external.IsServiceInstalled

(‘http://example.com/Service.xml’, ‘category’);

//caso negativo, mostrar botão para instalar o serviçowindow.external.AddService

(‘http://example.com/Service.xml’) ;

Deployment do Acelerador

Resumo

Aceleradores são um jeito mais fácil de os usuários terem acesso fácil aos seus serviços favoritos a partir de qualquer página web

1. Pense em um jeito de trazer pessoas para seu site a partir de outros sites: - Procura de informações (classificação de conteúdo, informações,

etc.)- Crei novos conteúdos- Compartilhe links

2. Crie um acelerador utilizando o formato OpenServiceOs aceleradores foram feitos para funcionar com os servicos disponíveis hoje

3. Divulgue o seu acelerador no seu websitePara instalá-lo, não é necessário código

Web Slices

Web Slices

− Esteja ciente do que acontece com os seus “pedaços” da Web

<div class=”hslice” id=”1” ><p class=”entry-title”>Amazon Kindle,

Unopened</p><div class=”entry-content”>

<img src=”pic.jpg”><p>Current bid: <b>US $282.11</b></p>

</div></div>

Exemplo básico

Parâmetros

− hslice− entry-title – o título do Web Slice− entry-content – descrição− ttl – valor do time-to-leave para updates

mais frequentes− feedurl – destino alternativo para buscar

updates− endtime – a data em que o item não

estará mais disponível

Gerenciamento

− Verifica por updates uma vez por dia por padrã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 – outra fonte para obter updates<a rel=”feedurl” href=”www.foo.com/feed.xml”>Subscribe</a>

Demo Como criar um Webslice

Resumo

− Web Slices são um ótimo recurso para que os seus usuários fiquem atentos às mudanças de conteúdo do seu site

− Comecem agora!− Não é necessário código do lado do

cliente!− Os usuários são notificados quando

temos updates− Atraia click rates para o seu site através

de previews

Recursos

− MSDN Brasil http://msdn.com.br

− IE8 Developer Center do MSDN Brasilhttp://msdn.microsoft.com/pt-br/ie/default.aspx

Muito Obrigado!

Dúvidas?

Rogerio CordeiroDeveloper EvangelistMicrosoft BrasilBlog: http://blogs.msdn.com/rogeriocTwitter: @rogerioc

Dasafio de Interoperabilidade

− Anúncio e premiação do vencedor!

− http://www.premiointeropbrasil.com.br

© 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.