Web Components, O Drupal está preparado?

42
Web Components por João Paulo Seregatte @seregatte O Drupal está preparado?

Transcript of Web Components, O Drupal está preparado?

Page 1: Web Components, O Drupal está preparado?

Web Components

por João Paulo Seregatte@seregatte

O Drupal está preparado?

Page 2: Web Components, O Drupal está preparado?

João Paulo Seregatte

● Informática Redes de comunicação.● Análise e des. de Sistemas.● Desenvolvedor à 8 anos.● Desenvolvedor Drupal à 5 anos.● @seregatte

Quem sou eu?

Page 3: Web Components, O Drupal está preparado?

Desenvolvedores Front / Back

● Apresentar.● Exemplos.● Desenvolver.● Estimular o estudo.

Level 1 > Sub itemObjetivos

Page 4: Web Components, O Drupal está preparado?

Level 1 > Sub itemObjetivos

Page 5: Web Components, O Drupal está preparado?

Início● 1989: Tim Berners-Lee inventa o HTML.● Março 1993: Lou Montulli entrega o Lynx browser ● Em 1994: The World Wide Web Consortium.● Julho 1994: Especificação HTML 2 ● Novembro 1994: Netscape.

Level 1 > Sub itemHTML > Início

Page 6: Web Components, O Drupal está preparado?

NetScape● November 1994 - Netscape

● January 1997 - Especificação HTML 3.2

Level 1 > Sub itemHTML > NetScape

Page 7: Web Components, O Drupal está preparado?

Level 1 > Sub itemHTML > NetScape

Page 8: Web Components, O Drupal está preparado?

Level 1 > Sub itemHTML > Realidade HTML 4

Page 9: Web Components, O Drupal está preparado?

Level 1 > Sub itemHTML > Tags maravilhosas

Page 10: Web Components, O Drupal está preparado?

Level 1 > Sub itemHTML > Tags maravilhosas

Page 11: Web Components, O Drupal está preparado?

Level 1 > Sub itemHTML > IE

Internet Explorer Version 4.0

1. Release date: September 19972. 60 % market share with IE 4.

Page 12: Web Components, O Drupal está preparado?

Level 1 > Sub itemHTML > IE 5

Page 13: Web Components, O Drupal está preparado?

Level 1 > Sub itemHTML > IE 6

Page 14: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Plugins > Necessidade

Suprir a necessidade

1. Animações.2. Dados.3. Mídia

Page 15: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Plugins > E vem todos navegadores

Page 16: Web Components, O Drupal está preparado?

Item 1 > Subitem 1HTML5 > Morte aos plugins

HTML 5

1. Independencia de plugins.2. Novos elementos.3. CSS3

Page 17: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components

Iniciativa / Padrão

● Custom Elements.● Templates.● Shadow DOM● HTML Imports

Page 18: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements

<x-camera>

https://github.com/casarock/camera/

Page 19: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements

Show me the code!

Page 20: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements

Page 21: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements

http://w3c.github.io/webcomponents/spec/custom/

Page 22: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > Templates

Page 23: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > Templates

Page 24: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1

Show me the code!

Web Components > Templates

Page 25: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1

http://w3c.github.io/webcomponents/spec/template/

Web Components > Templates

Page 26: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > Shadow DOM

Page 27: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1

Show me the code!

Web Components > Shadow DOM

Page 28: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1

homer-button

Web Components > Demo

Page 29: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1

http://w3c.github.io/webcomponents/spec/shadow/

Web Components > Shadow DOM

Page 30: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1

Compatibilidade

● Custom Elements.● Templates.● Shadow DOM

Web Components > Polyfill

Page 31: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > Polyfill

Page 32: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Polymer

Google

● https://polymer-topeka.appspot.com/● http://cds-polymer.appspot.com/● https://polymer-designer.appspot.com/

Page 33: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1Web Components > HTML imports

Page 34: Web Components, O Drupal está preparado?

Level 1 > Sub itemItem 1 > Subitem 1

Show me the code!

Web Components > HTML imports

Page 35: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Drupal

Page 36: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Drupal > Futuro

Page 37: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Drupal > Futuro

Page 38: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Drupal > Futuro

Page 39: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Drupal > Futuro

Page 40: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Conclusão > Objetivo

Page 41: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Conclusão > Fim

Fim

Page 42: Web Components, O Drupal está preparado?

Item 1 > Subitem 1Conclusão > Perguntas

Perguntas?

@seregatte

https://github.com/seregatte/Palestra_WebComponents