1

Estava olhando uns sites e reparei um site que montou esse exemplo aqui: http://html5-demos.appspot.com/hangouts. A principio eu não liguei mas depois quando vi o html dessa page vi que tem uma tag

<hangout-module></hangout-module>

que funciona como um 'canvas' só que para html. Queria saber se alguém sabe a respeito ou como criar elas...

OBS: não me refiro a canvas de gráficos, falei canvas como exemplo!

1
  • 2
    Se possível, pense em um título melhor, pois a pergunta não tem nada a ver com o elemento canvas (infelizmente, eu não tenho nada a sugerir nesse sentido).
    – mgibsonbr
    8/02/2014 às 5:18

2 Respostas 2

3

Isso não me parece nada "nativo" ao HTML5, mas sim uma biblioteca externa chamada Polymer (Edit: como apontado pelo OP nos comentários, se trada de um polyfill). Repare nas primeiras linhas do código-fonte da página citada:

<script src="/static/webcomponents-bdconf/js/polymer-all/polymer.min.js"></script>
<link rel="import" href="/static/webcomponents-bdconf/demos/components/hangouts/elements/hangouts.html">

Ou seja, primeiro ele coloca o script da biblioteca acima, depois ele importa um arquivo hangouts.html que contém, entre outras coisas:

<polymer-element name="hangout-module" attributes="from messages profile" on-close="close" on-minimize="minimize">

Assim, o arquivo acima define novas tags, e a biblioteca acima faz alguma "mágica" para permitir sua inclusão no HTML normal (i.e. para obter tais tags do documento HTML e transformá-la em algo de útil). Se você observar o código da definição, verá que ele usa outras definições feitas no próprio arquivo, que por sua vez usam apenas elementos HTML ordinários. Ou seja: no final das contas, vai tudo virar HTML simples.

O projeto Polymer se define como "um conjunto de polyfills para características emergentes em plataformas para a web" ("A set of polyfills for emerging web platform features"). Nesse caso em particular, ele está agindo como polyfill para a funcionalidade Shadow DOM / Custom Elements, no momento somente suportada pelo Chrome e Opera segundo o caniuse.com (porém não consistentemente - ver resposta e comentário do @Gabriel Gartz).

A especificação para essa funcionalide ainda está em estado de "rascuho" - podendo mudar bastante antes de ser publicado - de modo que é difícil encontrar exemplos práticos do mesmo. Sugiro então ler o que diz a especificação e/ou a documentação sobre o mesmo no próprio projeto Polymer (também contribuição do OP nos comentários).

Observação: não confundir a funcionalidade acima com o elemento canvas - outro elemento previsto no HTML5, com objetivo de criar uma "área de desenho" em 2D ou mesmo 3D.

7
  • 1
    @IagoBruno blz, não estava me referindo a você em particular, falei pra qualquer um que ler minha resposta. E sim, é perfeitamente possível que um desses "templates" tenha gerado um canvas...
    – mgibsonbr
    8/02/2014 às 5:20
  • 1
    acho que achei o que é, se não estiver errado isso é ShadowDOM. github.com/polymer/ShadowDOM
    – Iago Bruno
    8/02/2014 às 5:35
  • 1
    @IagoBruno Acho que você tem razão, isso é algo que existe no [rascunho do] HTML5. Vou atualizar a resposta
    – mgibsonbr
    8/02/2014 às 5:56
  • 1
    @mgibsonbr o ShadowDOM é suportado nativamente pelo Opera, porém está diferente da especificação da W3C e não é suportado pelo platform do Polymer. Na realidade o polymer como um todo não é suportado pelo Opera, foi abandonado pela equipe por causa das diferenças de API, apesar de ter os recursos disponíveis. 8/02/2014 às 6:47
  • 1
    @GabrielGartz Obrigado pela informação, eu estava apenas citando (e linkando para) o caniuse.com - mas não sei quase nada dessa funcionalidade, exceto que está em estado de rascunho, então me parece até natural haverem divergências. Li sua resposta, e de fato ela explica [a funcionalidade em si] melhor que a minha.
    – mgibsonbr
    8/02/2014 às 6:57
3

Isso se trata de um Custom Element, previsto na API do HTML5 para Web Components.

Hoje a maioria dos browsers ainda não suportam nativamente, até porque muitas das partes as APIs que compõem o Web Components ainda estão sendo escritas.

Esse componente que você achou utiliza do Polymer Project, desenvolvido pela Google, que funciona na maioria dos browser modernos (menos no Opera 12), além dos recursos de polyfill fornecidos pela platform.js que compõe o Polymer, ele contém outros recursos muito interessantes que o tornam muito similar ao AngularJS e ainda mais fácil de desenvolver, recursos como TemplateBinding e outros, fazendo uso de [Object.observer][5], template element dentre vários recursos das próximas gerações de APIs do HTML5.

Você também pode incluir em qualquer site os Custom Elements, utilizando HTMLImports, claro que pra funcionar no seu browser vai precisar de polyfill pra isso, também disponível no platform.

Esses elementos ainda podem ter seus recursos, css e outras coisas isolados do seu DOM, utilizando o recurso de ShadowDOM, que basicamente gera um documento dentro do elemento, de forma tornar isolados seus elementos internos.

No HTML já existe um elemento canvas, que é focado em desenho/processamento de imagens com contexto 2D e 3D. Mas talvez sua citação tenha relação com alguma outro tipo de interface que refere-se a canvas como componente. Mas no caso do HTML5 é como eu expliquei anteriormente são elementos personalizados.

Para saber mais sobre o assunto, recomendo essa palestra do Zeno Rocha que é além de tudo inspiradora.

E a caráter de curiosidade a Mozilla também fez um projeto baseado no código fonte do Polymer, porém só com o básico dos Custom Elements, chamado de X-Tags, tem compatibilidade com um número maior de browsers, mas não da suporte ao HTMLImports, apenas ao custom elements de uma forma um pouco modificada da API oficial.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .