Crie um Aplicativo Yahoo! SearchMonkey

Otimize as Listagens de Resultados de Procuras Utilizando RDF, XSLT e PHP

SearchMonkey é uma das primeiras tentativas de um grande mecanismo de procura de fazer uso de tecnologias Semantic Web para melhorar os resultados de procuras. Neste tutorial, você vai implementar um aplicativo Yahoo! SearchMonkey que otimiza as listagens de procuras em blogger.com para incluir outras informações sobre o blog e o proprietário do blog. Primeiro você vai implementar um aplicativo básico utilizando os dados padrão disponíveis do Yahoo!. Depois você vai criar um serviço de dados customizado para fornecer seus próprios dados estruturados para o SearchMonkey antes de desenvolver um aplicativo mais avançado que seja beneficiado por este novo serviço de dados customizado.

Rob Crowther, Web developer, 自由职业者

Photo of Rob CrowtherRob Crowther é um desenvolvedor da Web de Londres e atualmente é moderador do fórum Explorando Tecnologias da Semantic Web no developerWorks. Ele tem bastante interesse em Normas da Web e participa esporadicamente de blogs em http://www.boogdesign.com/b2evo/.



14/Out/2008

Antes de Iniciar

Este tutorial destina-se a desenvolvedores de aplicativo da Web prontos para criar seu primeiro aplicativo SearchMonkey. Após concluir este tutorial, você terá um bom entendimento do valor que o SearchMonkey agrega para usuários e proprietários de sites. Você deve estar familiarizado com a sintaxe básica de PHP, e sua familiaridade com DOM, XSLT e XPath também será benéfica. Para conhecer alguns links introdutórios, consulte Recursos.

Sobre Este Tutorial

Acrônimos Usados Frequentemente

  • DOM: Document Object Model
  • HTML: Linguagem de Marcação de Hipertexto
  • PHP: PHP Hypertext Preprocessor
  • RDF: Resource Description Framework
  • URL: Localizador Uniforme de Recursos
  • W3C: World Wide Web Consortium
  • XHTML: Extensible Hypertext Markup Language
  • XML: Linguagem de Marcação Extensível
  • XSL: Extensible Stylesheet Language Transformations

SearchMonkey é o primeiro produto de um provedor de mecanismo de procura principal que aproveita as vantagens das tecnologias da Semantic Web para permitir que você produza resultados de procura mais relevantes e direcione mais tráfego ao seu Web site. Com tecnologias de desenvolvimento da Web comuns, como PHP, XSLT e XPath, forneça uma experiência melhor para pesquisadores conforme você utiliza um dado estruturado codificado em páginas da Web através das normas da Semantic Web, como Microformats, eRDF e RDFa. Neste tutorial, você irá:

  • Aprender como o SearchMonkey permite que você alavanque conteúdo existente da Semantic Web através de aplicativos de apresentação
  • Criar um aplicativo de apresentação que otimize os resultados da procura do blogspot.com utilizando o assistente on-line e PHP básico
  • Construir seu próprio serviço de dados customizado para extrair mais dados estruturados das páginas blogspot.com através de XSLT, XPath e XPather Firefox Extension
  • Criar um segundo aplicativo de apresentação que inclua os dados de seu serviço de dados customizado

Pré-requisitos

Você vai precisar das seguintes ferramentas para prosseguir com este tutorial:


Introduzindo o Yahoo! SearchMonkey

Você pode fornecer resultados da procura do SearchMonkey como um feed XML tradicional ou integrá-los nas páginas em si com Microformats, eRDF ou RDFa. O SearchMonkey não tenta fazer uso desses dados diretamente para melhorar os resultados da procura, mas autoriza pessoas a melhorarem suas próprias listagens de resultado da procura utilizando um conjunto de ferramentas. Yahoo! espera construir um ciclo eficiente com base em tecnologias da Semantic Web:

  • Desenvolvedores podem construir aplicativos que fornecem resultados da procura otimizados, com base em dados semânticos e estruturados disponíveis a partir de Web sites.
  • Usuários podem customizar sua experiência de procura com os aplicativos para obter resultados de procura mais relevantes e úteis de sites que fornecem dados estruturados úteis.
  • Proprietários de sites são incentivados a disponibilizarem mais dados do site em formatos semânticos e estruturados, pois o resultado é um aumento no número de visitantes.

SearchMonkey possui dois componentes principais:

  • Aplicativos de apresentação são pequenos bits de código PHP que geram resultados de procura customizados.
  • Serviços de dados são dados estruturados extraídos da Web. Yahoo! fornece vários serviços padrão, mas você também pode construir os seus.

Aplicativos de Apresentação

Aplicativos de apresentação são fornecidos em duas variedades:

  • Resultados de procura aprimorados aplicam-se diretamente a resultados de procura sem nenhuma interação com o usuário. Dessa forma, eles são totalmente limitados. Eles se restringem a um modelo predefinido e não podem utilizar nenhum outro dado que já esteja disponível a partir dos serviços de dados padrão do Yahoo!. A pesquisa mostra que a permissão de variedades nos modelos leva os usuários a acreditarem que eles são propagandas, e não resultados de procura, pois eles têm que ser exibidos rapidamente, não havendo tempo para se buscar dados externos. Você vai construir um aplicativo de resultado de procura otimizado na primeira parte deste tutorial.
  • Infobars aparecem na linha abaixo de cada resultado da procura e são carregados dinamicamente em segundo plano após a página de resultados ser carregada. O usuário pode então clicar para expandi-los e ver informações adicionais. Infobars permitem origens de dados externas e HTML arbitrário. Você vai construir um aplicativo Infobar na parte final deste tutorial.

Serviços de Dados Customizados

Um serviço de dados customizado é uma maneira de se extrair dados estruturados de um Web site, mesmo quando nenhum dado semântico está disponível nas páginas do site ou dados estruturados estão disponíveis através de um feed. Se você não for proprietário do site do qual quer obter dados, talvez esta seja sua única opção. Entretanto, serviços de dados customizados também são úteis se você quiser criar um protótipo de um aplicativo SearchMonkey antes de decidir qual é a melhor maneira de expor os próprios dados do seu site. Você vai construir um serviço de dados customizado na segunda parte deste tutorial.


O Aplicativo SearchMonkey de Exemplo

Neste tutorial, você vai criar um aplicativo SearchMonkey simples para melhorar os resultados da procura para blogs blogspot.com. O aplicativo inicial utiliza apenas os serviços de dados padrão do Yahoo! para você poder fazer dele um resultado aprimorado. Você vai ver como fornecer dados estruturados através de uma alimentação de dados customizada e reconstruir o aplicativo como um Infobar. Para começar, crie um aplicativo simples utilizando os serviços de dados padrão do Yahoo!.

Criando o Aplicativo de Apresentação (Utilizando PHP)

A Figura 1 mostra como resultados de procura do blogspot.com existentes aparecem nos resultados da procura do Yahoo!.

Figura 1. Resultados da Procura Existentes do blogspot.com
Existing blogspot.com search results

Aplicativos de apresentação são muito simples. Eles consistem em uma função PHP, getOutput, que retorna uma array associativa com uma estrutura específica. Para começar a criar seu primeiro aplicativo, acesse Painel do Aplicativo na página inicial do Yahoo! Developer Network SearchMonkey (consulte Recursos para obter um link), clique em Construir um Aplicativo e clique em Criar um Novo Aplicativo. A primeira tela pede algumas informações básicas sobre seu aplicativo. A Figura 2 mostra o primeiro campo obrigatório, o nome do aplicativo.

Figura 2. Nomeando o Aplicativo
Naming your application

A próxima etapa, na Figura 3, é escolher o tipo de aplicativo. Você só vai utilizar as origens de dados integradas do Yahoo! nesta versão inicial, portanto, é possível selecionar Resultado Otimizado.

Figura 3. Selecionar o Tipo de Aplicativo
Select the application type

Na Figura 4, você pode ver os campos para a descrição e a categoria. A descrição é algo apropriado para seu aplicativo; a categoria determina em qual parte do Application Gallery ele vai aparecer se você enviá-lo para inclusão.

Figura 4. Inserir a Descrição e Selecionar a Categoria
Enter the description and select the category

Finalmente, como na Figura 5, você tem a opção de fazer o upload de um ícone e de aceitar os termos do serviço. O ícone será necessário se você pretende enviar seu aplicativo para o Application Gallery, mas sempre é possível retornar e incluir outro depois.

Figura 5. Fazer Upload de um Ícone e Aceitar os Termos de Serviço
Upload an icon and accept the terms of service

Após preencher as informações básicas para seus requisitos, clique em Próxima Etapa na parte inferior da página.

Páginas de URLs do Aplicativo

Agora você vai ver a tela de URLs. O primeiro item, na Figura 6, é para especificar o padrão de URL do Acionador. Esta URL define a quais resultados da procura seu aplicativo SearchMonkey se aplicará. Você pode utilizar o caractere asterisco (*) como curinga no início ou no final. O Blogger entrega blogs em URLs que têm o formato http://blogname.blogspot.com, portanto, insira uma URL de acionador de *.blogspot.com (consulte Figura 6). Ignore a parte http://; uma tentativa de incluí-la levará o SearchMonkey a responder com um erro de que os curingas só podem ocorrer no início ou no final da URL do acionador.

Figura 6. Inserir Padrão de URL do Acionador
Enter Trigger URL pattern

A próxima etapa é inserir algumas URLs de teste. Você pode simplesmente clicar em Localizar URLs Automaticamente e o SearchMonkey selecionará automaticamente dez URLs correspondentes do índice da procura Entretanto, observe que a primeira URL de teste é aquela que exibe um exemplo de seu aplicativo em ação quando compartilhado, portanto, certifique-se de selecionar uma que exiba seu aplicativo para aproveitar suas vantagens. É claro que você pode sempre voltar atrás e mudar isso. Escolhi os links na Figura 7 porque eles demonstram alguns recursos específicos que você encontrará em seguida.

Figura 7. Inserir URLs de Teste
Enter test URLs

Após inserir o padrão de URL do acionador e suas URLs de teste, clique em Próxima Etapa para mover para a próxima página, Serviços de Dados.

Página Serviços de Dados do Aplicativo

Nesta tela, você deverá ver uma lista de quatro serviços de dados—os padrões fornecidos pelo Yahoo! como na Figura 8. Conforme você utiliza os serviços padrão, certifique-se de selecionar todos os eles e de clicar em Próxima Etapa.

Figura 8. Serviços de Dados Padrão
Default data services

Página Aparência do Aplicativo

Agora você vê a tela de apresentação. Esta é a parte da ferramenta SearchMonkey onde você define como os resultados da procura serão modificados. A Listagem 1 mostra o modelo getOutput de função que você deve ver agora.

Listagem 1. O Modelo getOutput de Função
public static function getOutput() {
    $ret = array();
    define("SMDEFAULT", "");

    /* If you leave these blank, the default title and summary will be shown */
    $ret['title'] = SMDEFAULT;
    $ret['summary'] = SMDEFAULT;

    /* Now you fill in the rest. Use Data::get and Data::xpath to get data  */

    // Image
    $ret['image']['src'] = SMDEFAULT;
    $ret['image']['alt'] = SMDEFAULT;
    $ret['image']['title'] = SMDEFAULT;
    $ret['image']['allowResize'] = true;

    // Deep links - up to 4
    $ret['links'][0]['text'] = SMDEFAULT;
    $ret['links'][0]['href'] = SMDEFAULT;
    $ret['links'][1]['text'] = SMDEFAULT;
    $ret['links'][1]['href'] = SMDEFAULT;
    $ret['links'][2]['text'] = SMDEFAULT;
    $ret['links'][2]['href'] = SMDEFAULT;

    // Key Value pairs - up to 4
    $ret['dict'][0]['key'] = SMDEFAULT;
    $ret['dict'][0]['value'] = SMDEFAULT;
    $ret['dict'][1]['key'] = SMDEFAULT;
    $ret['dict'][1]['value'] = SMDEFAULT;
    $ret['dict'][2]['key'] = SMDEFAULT;
    $ret['dict'][2]['value'] = SMDEFAULT;
    $ret['dict'][3]['key'] = SMDEFAULT;
    $ret['dict'][3]['value'] = SMDEFAULT;

    /* This is for infobar apps
       You can put a subset of HTML in here
       See the docs for more details */
    $ret['infobar']['summary'] = SMDEFAULT;
    $ret['infobar']['blob'] = SMDEFAULT;

    return $ret;
}

Vale a pena examinar esse arquivo antes de continuar para entender a estrutura geral dos aplicativos Enhanced Result SearchMonkey. O valor de retorno, $ret, é simplesmente uma array associativa com seis componentes principais:

  • $ret['title'] é o título do resultado da procura, o mesmo que normalmente aparece como texto do link na parte superior da listagem de resultados da procura.
  • $ret['summary'] é a descrição, novamente uma parte padrão de uma listagem de resultados de procura normal.
  • $ret['image'] é a primeira extensão de propriedade do SearchMonkey e possui diversos subvalores, além de permitir que você especifique uma imagem para exibir junto com a listagem de resultados da procura.
  • $ret['links'] permite especificar até quatro pares de valores para links e texto de link; esses links aparecem em uma linha abaixo do título e acima do resumo.
  • $ret['dict'] é uma array de pares de valor da chave que permite exibir informações estruturadas em uma lista com marcadores abaixo do resumo.
  • $ret['infobar'] é para aplicativos Infobar SearchMonkey, que você verá mais tarde no tutorial.

Todos os resultados da Procura Otimizada estão em conformidade com um modelo e não permitem o uso de marcação HTML customizada, portanto, seu aplicativo de apresentação deve utilizar as cinco primeiras partes do valor de retorno listado acima. Se rolar para a parte inferior da página, você verá a área de visualização. Inicialmente, ela mostrará o resultado da procura padrão para a primeira de suas URLs de este, semelhante à Figura 9. Cada vez que fizer uma mudança no código do aplicativo, você pode clicar em Salvar & Atualizar para ver como isso funciona. Clique nas setas grandes em cada lado para rolar pelas URLs de exemplo. Finalmente, os dois links na parte inferior, Entrada e Saída, são muito úteis. Clique em Entrada agora.

Figura 9. Listagem de Procura Padrão na Página de Aparência
Default search listing on the appearance page

O link Entrada ativa uma nova janela que mostra os dados disponíveis para seu aplicativo SearchMonkey a partir da URL de exemplo atualmente selecionada. Na Figura 10, você pode ver um exemplo. Note como você pode utilizar qualquer um dos dados mostrados em seu aplicativo. O link Saída mostrará os dados na array associativa que seu aplicativo retornar; juntos, esses dois links fornecem a maior parte de sua funcionalidade de depuração.

Figura 10. Dados de Entrada de Exemplo para o Aplicativo SearchMonkey
Example Input data for your SearchMonkey application

Retorne à página principal e, ao lado do campo de entrada do código, você verá uma hierarquia de links. Esses links são atalhos para a inserção de valores de dados no código PHP. Clique no cursor no local correto no código (ou selecione o texto para substituir) e clique em um desses links e o código para acessar os dados serão inseridos automaticamente.

Figura 11. Atalhos de Entrada de Dados
Data input shortcuts

Após se familiarizar com o ambiente, é hora de começar sua codificação. Um local óbvio para se começar é a imagem; infelizmente, qualquer imagem a ser mostrada em um Resultado Otimizado deve vir do mesmo domínio que a listagem de procura, e, por padrão, o blogspot.com entrega suas imagens a partir do domínio blogger.com. Os dados de Entrada para nossa primeira URL de exemplo também não possuem alguns links úteis, portanto, você vai começar com itens dict. Substitua as entradas padrão para dict pelo código da Listagem 2. Você pode colá-lo diretamente ou selecionar seus próprios itens da lista vista na Figura 11—realce o SMDEFAULT existente no código e clique no atalho relevante.

Listagem 2. Incluindo Alguns Dados Estruturados
    // Pares de valor da chave - até 4
    $ret['dict'][0]['key'] = "Category";
    $ret['dict'][0]['value'] = Data::get('yahoo:index/rel:Listing/dc:title')."
(".Data::get('yahoo:index/rel:Listing/dc:type').")";
    $ret['dict'][1]['key'] = "Language";
    $ret['dict'][1]['value'] = Data::get('yahoo:index/dc:language');
    $ret['dict'][2]['key'] = "MIME Type";
    $ret['dict'][2]['value'] = Data::get('yahoo:index/dc:format');

Se agora você clicar em Salvar & Atualizar você verá algo semelhante à Figura 12. Parabéns, agora você tem um resultado de procura otimizado, se não útil.

Figura 12. Incluindo Alguns Dados Estruturados
Adding some structured data

Como você pode ver na Figura 12, a descrição padrão desapareceu. Você pode retorná-la facilmente substituindo $ret['summary'] = SMDEFAULT; por $ret['summary'] = Data::get('yahoo:index/rel:Posting/dc:description'); perto da parte superior do código. Agora veja um das outras URLs de teste. Clique em uma das grandes setas e você verá algo semelhante à Figura 13.

Figura 13. Uma URL de Teste Diferente
A different test URL

Na Figura 13, o item Categoria é exibido, mesmo que nenhuma categoria exista de fato. Isso acontece porque no código anterior você incluiu algumas constantes da string para deixar as coisas um pouco mais legíveis. Mas agora que você possui essas constantes, o valor não é mais vazio, mesmo quando não existem dados. Em um aplicativo SearchMonkey, itens vazios não serão exibidos, já que o código trata de dados vazios e incompletos automaticamente. Você tem acesso à sintaxe integral do PHP em seu aplicativo, portanto, é um procedimento direto utilizar uma condição if simples para incluir $ret['dict'][0]['value'] se houver um valor em yahoo:index/rel:Listing/dc:title (consulte Listagem 3). Faça a mudança agora, mas consulte a Listagem 2 caso você ainda não esteja familiarizado com a sintaxe do PHP e clique em Salvar & Atualizar. Observe que desta vez, Categoria não possui nenhuma entrada; ela não é exibida porque o valor está vazio.

Listagem 3. Incluindo Alguns Dados Estruturados
    // Pares de valor da chave - até 4
    $ret['dict'][0]['key'] = "Category";
    if (Data::get('yahoo:index/rel:Listing/dc:title')) {
        $ret['dict'][0]['value'] = Data::get('yahoo:index/rel:Listing/dc:title')."
(".Data::get('yahoo:index/rel:Listing/dc:type').")";
    }
    $ret['dict'][1]['key'] = "Language";
    $ret['dict'][1]['value'] = Data::get('yahoo:index/dc:language');
    $ret['dict'][2]['key'] = "MIME Type";
    $ret['dict'][2]['value'] = Data::get('yahoo:index/dc:format');
    $ret['dict'][3]['key'] = "Author";
    $ret['dict'][3]['value'] = Data::get('com.yahoo.uf.hcard/rel:Card/vcard:fn');

Observe os dados de Entrada para este novo exemplo e você verá que esta URL, ao contrário do primeiro exemplo, possui dados sob a estrutura adjunta com.yahoo.uf.hcard porque a página nesta URL possui marcação de microformatos. Você pode utilizar isso para incluir outra chave na array dict. Altere $ret['dict'][3]['key'] para ser "Author" e configure o valor correspondente para a propriedade de nome completo de vcard (vcard:fn) utilizando a lista de atalhos à direita. Você pode consultar Listagem 3 para conhecer a sintaxe exata. Clique em Salvar & Atualizar novamente para incluir o valor author no resultado da procura. Observe que se você voltar para a URL de exemplo original, que não possui marcação hCard, esse item não será listado.

Retorne para a outra URL de exemplo para ver que esses não são os únicos dados de microformato integrados à página, já que hAtom também está disponível. Eu removi a parte relevante do XML na Listagem 4. Você pode ver que estão disponíveis um título de postagem e um link direto para a postagem, e você tem um item para cada postagem que aparece na página. É possível utilizar estas informações para preencher os links na array $ret.

Listagem 4. Trecho de Código dos Dados de Entrada Mostrando hAtom
<adjunct id="com.yahoo.uf.hatom"
         updated="2008-09-26T10:58:22Z" version="1.1">
    <item rel="dc:subject rel:Feed">
        <type typeof="feed:Feed">
        <item rel="feed:entry rel:Posting"
              resource="http://steve-yegge.blogspot.com/
              2008/09/programmings-dirtiest-little-secret.html">
            <type typeof="feed:Entry">
                <meta property="dc:title">
                    Programming's Dirtiest Little Secret
                </meta>
                <meta property="dc:date" datatype="xsd:date">
                    2008-09-10T16:59:00-07:00
                </meta>
            </type>
        </item>

Retone à página principal e expanda a entrada com.yahoo.uf.hatom na lista de atalhos à direita. Você deverá ver agora algo semelhante à Figura 14. Para incluir o link, selecione SMDEFAULT na linha $ret['links'][0]['text'] = SMDEFAULT;. Em seguida, clique no link dc:title em rel:Posting e selecione SMDEFAULT na linha $ret['links'][0]['href'] = SMDEFAULT; e clique no link @resource correspondente. Repita o processo para o segundo link no código, mas utilize os links em rel:Posting.2 (a segunda postagem).

Figura 14. Expandindo a Entrada com.yahoo.uf.hatom
Expanding the com.yahoo.uf.hatom entry

Neste ponto, observe que você ficou sem atalhos para postagens, mesmo que os dados de Entrada incluíam mais de dois. O SearchMonkey mostra apenas os dois primeiros itens nos atalhos, mesmo quando mais de um pode estar nos dados de entrada. Portanto, para incluir os quatro links, você terá que fazer algumas edições manuais. A entrada para $ret['links'][2]['text'] será a mesma que para $ret['links'][1]['text'], exceto que em vez Posting.2 será Posting.3. Inclua o terceiro e o quatro links e você terminará com o código na Listagem 5.

Listagem 5. Incluindo Links no Aplicativo SearchMonkey
    // Deep links - até 4
    $ret['links'][0]['text'] =
Data::get('com.yahoo.uf.hatom/rel:Feed/rel:Posting/dc:title');
    $ret['links'][0]['href'] =
Data::get('com.yahoo.uf.hatom/rel:Feed/rel:Posting/@resource');
    $ret['links'][1]['text'] =
Data::get('com.yahoo.uf.hatom/rel:Feed/rel:Posting.2/dc:title');
    $ret['links'][1]['href'] =
Data::get('com.yahoo.uf.hatom/rel:Feed/rel:Posting.2/@resource');
    $ret['links'][2]['text'] =
Data::get('com.yahoo.uf.hatom/rel:Feed/rel:Posting.3/dc:title');
    $ret['links'][2]['href'] =
Data::get('com.yahoo.uf.hatom/rel:Feed/rel:Posting.3/@resource');
    $ret['links'][3]['text'] =
Data::get('com.yahoo.uf.hatom/rel:Feed/rel:Posting.4/dc:title');
    $ret['links'][3]['href'] =
Data::get('com.yahoo.uf.hatom/rel:Feed/rel:Posting.4/@resource');

Quando você clicar em Salvar & Atualizar dessa vez, você verá todos os links exibidos abaixo do título como na Figura 15. Se tentar uma das outras URLs de exemplo, você verá que esses links só aparecem quando o modelo de blog possui o microformato hAtom na marcação.

Figura 15. Visualização do Aplicativo com Links Incluídos
Preview of your application with links added

Confirmação de Aplicativo

Clique em Próxima Etapa para visualizar a tela de confirmação. Agora você tem duas opções:

  • Experimente seu novo aplicativo SearchMonkey nos resultados da procura.
  • Torne-o compartilhável para que outras pessoas possam utilizá-lo. Ainda é muito cedo para se preocupar com compartilhamento, portanto, por enquanto, você vai apenas experimentar seu aplicativo.

Clique nesse link. Você verá a página de preferências de procura com o novo aplicativo incluído na parte superior na Figura 16.

Figura 16. Seu Novo Aplicativo na Página de Preferências de Procura
Your new app in your search preferences page

O Aplicativo em Ação

Clique em Salvar. Quando for perguntado se você quer retornar à ferramenta de desenvolvimento ou experimentá-la na procura do Yahoo!, escolha experimentá-la. A coisa mais fácil é restringir sua procura ao domínio blogspot.com (a URL do acionador do aplicativo) e incluir algumas palavras-chave para impedir que o Yahoo! leve você para a ferramenta Site Explorer. Procurei o blog do desenvolvedor da Web site:blogspot.com para obter os resultados na Figura 17.

Figura 17. Seu Novo Aplicativo em Ação
Your new app in action

Tente suas próprias palavras-chave e veja os diferentes resultados. Como os links dependem da marcação hAtom na página retornada pelo resultado da procura, isso pode levar a resultados menos úteis para uma postagem individual em comparação à página inicial do blog. Páginas para postagens individuais, por definição, possuem uma única postagem de blog, e essa postagem única de blog é a única disponível através de hAtom nessa página. Portanto, o único link que você pode extrair do hAtom é idêntico ao link já retornado no resultado da procura. Se esse era um aplicativo real, ele será inferior ao ideal. Certamente, você pode incluir algum código para exibir somente os links se o resultado foi uma página inicial de blog, mas para obter links mais úteis, agora você precisa aprender como incluir seus próprios feeds de dados estruturados no SearchMonkey, que é o que será descrito na próxima seção.


Fornecendo Dados Estruturados

Os dados de entrada para aplicativos SearchMonkey estão em um formato chamado DataRSS. Apesar do nome, os proprietários de sites podem fornecer DataRSS ao SearchMonkey integrado em um Atom feed válido. Além disso, o Yahoo! pode gerar DataRSS automaticamente a partir de dados semânticos integrados como Microformats ou eRDF/RDFa, ou você pode fornecer sua própria transformação XML para uma página da Web em um serviço de dados customizado. A primeira opção não é prática se você não possuir o Web site em questão, como no exemplo do blogspot.com. Você já aproveitou as vantagens do segundo método, dados semânticos integrados, no aplicativo SearchMonkey na primeira parte deste tutorial, embora ele também apresente a dificuldade de que você tem que controlar a marcação do site para incluir uma sua, o que nem sempre é possível. O método final, transformação com XSLT, permite extrair DataRSS de qualquer Web site, mas questões de desempenho também podem limitar o tipo de aplicativo SearchMonkey que você pode produzir. Nesta seção, você dará primeiro uma rápida olhada em como obter a segunda opção, dados semânticos integrados, para situações em que você está no controle da marcação; depois daremos uma olhada no fornecimento de um serviço de dados customizado e em como utilizá-lo para produzir uma nova versão do aplicativo blogspot.com.

Integrando Informações de RDF Estruturado em Páginas da Web

Como vimos na primeira parte deste tutorial, o Yahoo! fornece origens de dados padrão para inúmeros microformatos, bem como as normais de eRDF e RDFa mais gerais para se incluir metadados semânticos em páginas da Web.

Microformatos utilizam marcação HTML existente em padrões para codificar dados semânticos sobre, para dar alguns exemplos, informações de contato (hCard), eventos (hCalendar), revisões (hReview) e redes de relacionamentos (XFN). O padrão usual é incluir certos nomes de classes em seus elementos HTML existentes, enquanto você fornece definição de escopo através da estrutura em árvore natural de HTML.

RDFa e eRDF são maneiras de se codificar RDF integral (Resource Description Framework—o formato subjacente por trás da maioria das normas da Semantic Web da W3C) em HTML. RDF tem propósito mais general do que os microformatos, já que está pronto para representar qualquer dado estruturado. Como Microformats, eRDF aproveita as vantagens de elementos e atributos existentes para codificar as estruturas de RDF, enquanto RDFa introduz um novo tipo de documento com atributos adicionais.

As três abordagens têm forças diferentes. Se seus dados corresponderem exatamente aos microformatos disponíveis, eles serão os mais diretos na implementação e, como utilizam apenas marcação existente, podem ser utilizados em HTML 4.0 ou XHTML 1.0, além de manterem a validade. Microformatos têm alguns problemas em aberto relacionados à acessibilidade, e você vai precisar incluir suporte à análise para determinados microformatos em aplicativos e serviços, como SearchMonkey, caso a caso. Os dois formatos baseados em RDF podem ser mais genéricos, mas se você quiser representar um conjunto de dados exclusivo de maneira estruturada, eles incluem um nível inteiro de complexidade na definição de seu vocabulário próprio. Como o RDFa introduz seus próprios atributos, é menos provável que ele interfira na marcação existente. Entretanto, pela mesma razão, se a capacidade de validação de um documento for importante para você, você será forçado a utilizar a variante XHTML específica que inclui o RDFa.

Qual dos três você vai escolher para o seu próprio site dependerá de sua atual situação e dos dados estruturados que você quer expor em suas páginas. Você não vai implementar um exemplo neste tutorial, pois para ver quaisquer resultados, você terá que esperar o Yahoo! se mover lentamente pelas páginas e atualizar o índice, o que pode levar semanas. Para saber mais sobre qualquer uma dessas três tecnologias, consulte Recursos.

Sobrepondo Dados Estruturados em Sites Existentes

Nesta seção, você vai criar um serviço de dados customizado para blogspot.com utilizando uma transformação XSLT. Primeiro, você vai configurar um serviço de dados, depois vai utilizar a extensão XPather Firefox para descobrir as expressões XPath para extrair dados úteis de páginas típicas do blogspot.com. Você vai utilizar essas expressões XPath em XSLT para seu serviço de dados customizado antes de criar um novo aplicativo Apresentação do SearchMonkey para exibir os resultados em uma Infobar.

Retorne ao Painel do Aplicativo e role até a parte inferior da página. Para abrir a página de informações básicas, clique no link Criar uma Nova Alimentação de Dados. Isso é semelhante à página que você preencheu para o apresentação de apresentação anteriormente. A principal diferença é que agora o tipo é Página ou Serviço da Web. Você vai utilizar apenas Página neste tutorial. Preencha os outros detalhes (utilize a Figura 18 para obter orientações), aceite os termos e condições e clique em Próxima Etapa.

Figura 18. Informações Básicas para o Serviço de Dados Customizado
Basic info for your Custom Data Service

Agora você pode incluir suas URLs. Utilize as mesmas URLs que você utilizou para seu aplicativo de apresentação anterior (consulte Figura 6 e Figura 7). Clique em Próxima Etapa mais uma vez e você verá a página de extração de dados. Na caixa de código, você verá o modelo de XSLT na Listagem 6. Não se preocupe se você não estiver totalmente familiarizado com XSLT, pois o foco mais importante neste ponto é nas expressões XPath. Elas são as partes que começam com /. A expressão //div[@class='picture']/img/@src está procurando o atributo de origem, @src, de um elemento img que é descendente de um div com classe de atributos igual a uma figura em qualquer lugar no documento, indicado por // no início (ou raiz) da expressão. Se isso fizer sentido para você, você já tem conhecimento suficiente para continuar na próxima seção: extraindo elementos da página com a extensão XPather.

Listagem 6. XSLT Modelo para um Serviço de Dados Customizado
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<adjunctcontainer>
<adjunct id="smid:{$smid}" version="1.0">

  <!-- este é um exemplo simples de extração de dados -->
  <!-- modifique-o ou substitua-o por seu próprio código -->

  <item rel="rel:Photo" resource="{//div[@class='picture']/img/@src}">
    <meta property="media:width"><xsl:value-of
select="//div[@class='picture']/img/@width"/></meta>
    <meta property="media:height"><xsl:value-of
select="//div[@class='picture']/img/@height"/></meta>
    <item rel="rel:Thumbnail" resource="{//div[@class='thumb']/img/@src}">
      <meta property="media:width"><xsl:value-of
select="//div[@class='thumb']/img/@width"/></meta>
      <meta property="media:height"><xsl:value-of
select="//div[@class='thumb']/img/@height"/></meta>
    </item>
  </item>

<!--
     muitos outros tipos de recursos <item> e propriedades <meta>
     estão disponíveis; consulte a documentação e os exemplos em
     http://developer.yahoo.com/searchmonkey/smguide/datarss.html
-->

</adjunct>
</adjunctcontainer>

</xsl:template>
</xsl:stylesheet>

Utilizando a Extensão XPather Firefox para Descobrir Consultas XPath

A extensão XPather facilita muito para você descobrir o XPath para qualquer elemento, bem como experimentar expressões XPath e saber exatamente quais nós em um documento são selecionados. Se ainda não fez isso, consulte os links na seção Recursos para conhecer a extensão instalada no Firefox. Depois de concluir todas as configurações, navegue para uma das URLs de exemplo que você selecionou para o Serviço de Dados Customizado acima. Selecione algum texto na página e clique com o botão direito do mouse para ver 'Mostrar em XPather' no menu de contexto mostrado na Figura 19.

Figura 19. Selecionando um Elemento com XPather
Selecting an element with XPather

A seleção do item Mostrar em XPather ativa uma nova janela, mostrada na Figura 20.

Figura 20. A Janela XPather
The XPather window

O XPath para o elemento que você selecionou é mostrado na caixa de texto na parte superior da janela na Figura 20. Os nós que correspondem à expressão XPath estão na caixa de listagem no meio da janela. Quando você seleciona os nós na lista, é possível visualizar alguns detalhes do nó selecionado. Você pode editar a expressão XPath na caixa de texto e clicar em Avaliar para ver os resultados na caixa do meio. Se você editar o campo XPath e sua expressão ficar vermelha, ela será inválida (consulte Figura 21).

Figura 21. XPather Mostra uma Expressão XPath Inválida
XPather shows an invalid XPath expression

Para explorar o documento, edite o XPath e clique em Avaliar até ver os nós desejados na caixa de listagem Nós Correspondentes abaixo. Uma dica para explorar seu XPath é que você pode simplificá-lo para o último atributo de ID na expressão se substituir a barra única de abertura (descendente direto da raiz do documento) por uma barra dupla (qualquer filho da raiz do documento) como na Figura 22. Você pode ver a partir dos resultados que a expressão mais simples na Figura 22 seleciona os mesmos nós que aqueles com os quais você começou na Figura 20.

Figura 22. Simplificar Expressão XPath com o Último ID
Simplify the XPath expression to the last ID

Utilizando XSLT para Remover uma Página de Site Existente para Criar Dados Estruturados

Quando construiu seu aplicativo de apresentação anterior, você não podia exibir uma imagem porque, em Resultado Otimizado, você só pode exibir imagens do mesmo domínio que o resultado da procura. Em um aplicativo Infobar, você pode listar imagens de exibição de qualquer domínio especificado antecipadamente. Obter uma imagem é relativamente simples. O XPath /img/@src entregará a você as URLs de todas as imagens no documento, que agora você deve experimentar no XPather.

A segunda coisa que você vai melhorar em relação ao aplicativo Resultado Otimizado original é o fornecimento de um link mais útil para resultados de procura que não são a página inicial do blog. Um dos elementos comuns da maioria das páginas blogspot.com é a seção Archive na barra lateral, que possui uma lista de links, sendo que um deles é para as postagens mais recentes. Como o blogspot.com é configurável, é provável que você se depare com diversos blogs que não possuem a seção archive, mas você pode resolver cobrir algumas dessas possibilidades neste exemplo simples. Veja diferentes páginas blogspot.com e você vai notar dois tipos principais e widgets de archive. Um deles é uma caixa de seleção com uma lista links nos valores dos elementos da opção, e o outro é uma lista desordenada com elementos âncora nos itens da lista.

A lista desordenada é muito fácil; ressalte o link desejado (o superior) na página, clique com o botão direito do mouse e selecione Mostrar no XPather e você terá uma expressão XPath (complexa). Simplifique-a para o último ID na expressão e capture explicitamente o atributo href para terminar com algo como:

    //div[@id='BlogArchive1_ArchiveList']/ul[1]/li/ul[1]/li/a[2]/@href

A próxima etapa é testá-la em algumas URLs diferentes para garantir resultados consistentes.

A versão do elemento da seleção é um pouco mais difícil. Você não pode selecionar e clicar com o botão direito do mouse nos elementos da opção e selecionar Mostrar no XPather, por isso você terá que ser um pouco mais criativo. Para se aproximar razoavelmente do caminho necessário, selecione algo próximo, por exemplo, o título mostrado acima na Figura 20. Depois disso, você terá que utilizar o DOM Inspector ou visualizar a origem diretamente para determinar quais mudanças precisam ser feitas na expressão XPath para poder obter o elemento desejado. Agora a natureza interativa do XPather vai realmente ajudar você, já que você pode experimentar as coisas rapidamente e ver o que funciona bem. Você deve terminar com uma expressão semelhante à:

//div[@id='BlogArchive1_ArchiveList']/select/option[2]/@value

Agora que você tem expressões para as duas situações diferentes, mais a anterior para obter links de imagem, você está pronto para editar a folha de estilo XSLT no serviço de dados customizado.

A Folha de Estilo XSLT

Retorne à tela Extração de Dados na ferramenta do desenvolvedor SearchMonkey. Na saída de DataRSS, seus dados aparecerão como elementos de item com elementos filhos meta opcionais. O XSLT reflete diretamente esse formato de saída e é fácil de se trabalhar, mesmo quando não se tem muita experiência com ele. Nesta seção, você vai remover (ou editar) os itens padrão e incluir dois dos seus. O primeiro vai capturar as imagens e o segundo vai capturar o link para as postagens recentes utilizando as expressões XPath desenvolvidas na seção anterior.

Um elemento de item possui um atributo rel, que descreve o item de dados, e um atributo de recurso, que é uma URL. Para sua imagem, isso é tudo que você precisa. Utilize um valor descritivo no atributo rel, como rel:Photo, e coloque a expressão XPath no atributo de recurso. Para o segundo item, você vai utilizar novamente os atributos rel e de recurso, embora o atributo de recurso utilize ambas as expressões XPath que você desenvolveu acima separadas pelo símbolo | (barra em pé), o que significa uma união de dois conjuntos de resultados. Como uma das expressões sempre retornará um conjunto de resultados vazio, você ainda obterá apenas um elemento retornado. Para esse item, também é possível incluir um elemento filho meta que extrai o título dos links de postagens recentes. É o mesmo que sua expressão XPath capturar a URL, mas sem /@href no final. Listagem 7 mostra o resultado final.

Listagem 7. Utilizando Suas Expressões XPath no XSLT para o Serviço de Dados Customizado
  <item rel="rel:Photo" resource="{//img/@src}">
  </item>
  <item rel="rel:RecentPosts"
resource="{//div[@id='BlogArchive1_ArchiveList']/ul[1]/li/ul[1]/li/a[2]/@href|
//div[@id='BlogArchive1_ArchiveList']/select/option[2]/@value}">
    <meta property="dc:title">
      <xsl:value-of
select="//div[@id='BlogArchive1_ArchiveList']/ul[1]/li/ul[1]/li/a[2]"/>
    </meta>
  </item>

Para revisar como o XSLT funciona na seção de visualização, clique em Salvar & Atualizar. Mais uma vez, não se preocupe se você não retornar dados em todos os seus links; sempre é possível voltar atrás após a conclusão do tutorial e resolver como estender o XSLT para discutir mais sobre as páginas blogspot.com. Se tiver uma seção de visualização semelhante à da Figura 23, você está pronto para começar a utilizar o serviço de dados customizado. Clique em Próxima Etapa e continue com a próxima parte do tutorial.

Figura 23. Visualização de um Serviço de Dados Customizado Funcional
Preview of a working Custom Data Service

Utilizando Seu Serviço de Dados Customizado em um Aplicativo de Apresentação

Para utilizar o Serviço de Dados Customizado, você vai criar um novo aplicativo de apresentação. Retorne para o Painel do Aplicativo e siga o mesmo processo como você fez na primeira parte deste tutorial com as três mudanças na Figura 24. Na página de informações básica, selecione Infobar como o tipo de aplicativo.

Figura 24. Selecionar Infobar como o Tipo de Aplicativo
Select Infobar as the application type

Na página de URLs, inclua blogger.com como um dos domínios de link e imagens permitidos (consulte Figura 25).

Figura 25. Incluir blogger.com na Lista de Domínios de Link e Imagem Permitidos
Add blogger.com to the list of allowed image and link domains

Na página de serviço de dados, certifique-se de selecionar o serviço de dados customizado que você preparou na última seção (consulte Figura 26).

Figura 26. Selecionar o Serviço de Dados Customizado
Select your Custom Data Service

Quando atingir a página de aparência, você verá o mesmo código visto na Listagem 1. Dessa vez, você vai se concentrar na seção no final que especifica dois valores para $ret['infobar']. O interessante aqui é $ret['infobar']['blob']. Ele permite que você especifique um HTML arbitrário para ser exibido (com algumas exceções, como iframes, para segurança). Você vai observar que agora sua origem de dados aparece nos links de atalho à direita da área de código, começando com smid: e terminando com um identificador aleatório (neste exemplo, era gqE; se você copiar e colar código, será necessário alterá-lo para corresponder ao seu). Crie um HTML básico que mostre os itens do serviço de dados customizado.

Também é possível utilizar alguns dos itens de dados que você tinha antes que não funcionavam, pois faziam referência a URLs diferentes do domínio do resultado da procura. Por exemplo, utilize o item foaf:homepage em xfn, que contém um link para o domínio blogger.com. Você deve terminar com um código como o mostrado na Listagem 8. Clique em Salvar & Atualizar para ver como isso funciona na área de visualização. Quando estiver satisfeito com tudo, prossiga na página de confirmação.

Listagem 8. Código HTML para Infobar
    $ret['infobar']['blob'] = "<div>
      <a href=\"".Data::get('com.yahoo.uf.xfn/xfn:me/foaf:homepage/@resource')."\">
	About the author</a><br/>
      <a href=\"".Data::get('smid:gqE/rel:RecentPosts/@resource')."\">
	Recent Posts</a><br/>
      <img
 	src=\"".Data::get('smid:gqE/rel:Photo/@resource')."\"></div>";

O Aplicativo em Ação

Após atingir a tela de confirmação, você obterá novamente um link para ver o novo aplicativo de apresentação em ação. Siga as mesmas etapas seguidas na parte anterior deste tutorial para incluir o aplicativo e faça uma procura restrita ao domínio blogspot.com. Um Infobar se difere de um resultado de procura otimizado porque não é exibido imediatamente; ele é carregado dinamicamente em segundo plano após os resultados principais serem carregados. Quando ele estiver pronto, você verá uma pequena seta para baixo que pode ser utilizada para expandir o infobar. A Figura 27 mostra um exemplo do infobar expandido.

Figura 27. Infobars Mostrando um Resultado da Procura
Infobars showing in a search result

Como você pode ver, os links para uma página de postagem, e não apenas para a página inicial, agora são mais úteis, no entanto, a estratégia para se selecionar a primeira imagem na página não funcionou neste caso. Além disso, o infobar não inclui muita informação para incentivar o usuário a expandi-lo. Você pode incluir informações aqui utilizando itens $ret['dict'] no código do aplicativo.

Próximas Etapas

Embora o aplicativo de amostra tenha mostrado efetivamente quão útil um aplicativo SearchMonkey pode ser, você pode considerar a extensão de seu aplicativo Infobar. Raramente, o aplicativo básico construído aqui é esteticamente atraente ou convidativo para o usuário. Talvez você observe que as informações fornecidas no aplicativo não eram sensíveis ao contexto. A URL completa está disponível nos serviços de dados padrão do Yahoo!, que fornecem a você a oportunidade de customizar sua saída com base na página que aparece no resultado da procura.


Resumo

Conclusão

Neste tutorial, primeiro você construiu um aplicativo SearchMonkey de resultado de procura otimizado. Você viu como ele é direto enquanto conheceu algumas das limitações envolvidas. Depois, você construiu uma origem de dados customizada para páginas blogspot.com utilizando XPath para extrair dados pertinentes da marcação. Por fim, você utilizou sua origem de dados customizada para construir um novo aplicativo Infobar SearchMonkey que exibiu links arbitrários abaixo de um resultado da procura.

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre, Software livre
ArticleID=387073
ArticleTitle=Crie um Aplicativo Yahoo! SearchMonkey
publish-date=10142008