SlideShare a Scribd company logo
Web
Components
por João Paulo Seregatte
@seregatte
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?
Desenvolvedores Front / Back
● Apresentar.
● Exemplos.
● Desenvolver.
● Estimular o estudo.
Level 1 > Sub itemObjetivos
Level 1 > Sub itemObjetivos
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
NetScape
● November 1994 - Netscape
● January 1997 - Especificação HTML 3.2
Level 1 > Sub itemHTML > NetScape
Level 1 > Sub itemHTML > NetScape
Level 1 > Sub itemHTML > Realidade HTML 4
Level 1 > Sub itemHTML > Tags maravilhosas
Level 1 > Sub itemHTML > Tags maravilhosas
Level 1 > Sub itemHTML > IE
Internet Explorer Version 4.0
1. Release date: September 1997
2. 60 % market share with IE 4.
Level 1 > Sub itemHTML > IE 5
Level 1 > Sub itemHTML > IE 6
Level 1 > Sub itemItem 1 > Subitem 1Plugins > Necessidade
Suprir a necessidade
1. Animações.
2. Dados.
3. Mídia
Level 1 > Sub itemItem 1 > Subitem 1Plugins > E vem todos navegadores
Item 1 > Subitem 1HTML5 > Morte aos plugins
HTML 5
1. Independencia de plugins.
2. Novos elementos.
3. CSS3
Level 1 > Sub itemItem 1 > Subitem 1Web Components
Iniciativa / Padrão
● Custom Elements.
● Templates.
● Shadow DOM
● HTML Imports
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
<x-camera>
https://github.com/casarock/camera/
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
Show me the code!
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
http://w3c.github.
io/webcomponents/spec/custom/
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Templates
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Templates
Level 1 > Sub itemItem 1 > Subitem 1
Show me the code!
Web Components > Templates
Level 1 > Sub itemItem 1 > Subitem 1
http://w3c.github.
io/webcomponents/spec/template/
Web Components > Templates
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Shadow DOM
Level 1 > Sub itemItem 1 > Subitem 1
Show me the code!
Web Components > Shadow DOM
Level 1 > Sub itemItem 1 > Subitem 1
homer-button
Web Components > Demo
Level 1 > Sub itemItem 1 > Subitem 1
http://w3c.github.
io/webcomponents/spec/shadow/
Web Components > Shadow DOM
Level 1 > Sub itemItem 1 > Subitem 1
Compatibilidade
● Custom Elements.
● Templates.
● Shadow DOM
Web Components > Polyfill
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Polyfill
Item 1 > Subitem 1Polymer
Google
● https://polymer-topeka.appspot.com/
● http://cds-polymer.appspot.com/
● https://polymer-designer.appspot.com/
Level 1 > Sub itemItem 1 > Subitem 1Web Components > HTML imports
Level 1 > Sub itemItem 1 > Subitem 1
Show me the code!
Web Components > HTML imports
Item 1 > Subitem 1Drupal
Item 1 > Subitem 1Drupal > Futuro
Item 1 > Subitem 1Drupal > Futuro
Item 1 > Subitem 1Drupal > Futuro
Item 1 > Subitem 1Drupal > Futuro
Item 1 > Subitem 1Conclusão > Objetivo
Item 1 > Subitem 1Conclusão > Fim
Fim
Item 1 > Subitem 1Conclusão > Perguntas
Perguntas?
@seregatte
https://github.com/seregatte/Palestra_WebComponents

More Related Content

Viewers also liked

18 mar14webinarslides [compatibility mode]
18 mar14webinarslides [compatibility mode]18 mar14webinarslides [compatibility mode]
18 mar14webinarslides [compatibility mode]
kvanduyse
 
My Eboard Basics
My Eboard BasicsMy Eboard Basics
My Eboard Basics
pstackhouse
 
Many Voices: Online Book Clubs
Many Voices: Online Book ClubsMany Voices: Online Book Clubs
Many Voices: Online Book Clubs
cescamilla
 
Tt511 iot letter-1.0
Tt511 iot letter-1.0Tt511 iot letter-1.0
Tt511 iot letter-1.0
Thomas O'Malley
 
Netglobers 2nd Chance15maggio09
Netglobers 2nd Chance15maggio09Netglobers 2nd Chance15maggio09
Netglobers 2nd Chance15maggio09
europassistanceblog
 
Turismo Accessibile
Turismo AccessibileTurismo Accessibile
Turismo Accessibile
europassistanceblog
 
Dkn0809 Smt1 Fisika
Dkn0809 Smt1 FisikaDkn0809 Smt1 Fisika
Dkn0809 Smt1 Fisikarofiul
 

Viewers also liked (7)

18 mar14webinarslides [compatibility mode]
18 mar14webinarslides [compatibility mode]18 mar14webinarslides [compatibility mode]
18 mar14webinarslides [compatibility mode]
 
My Eboard Basics
My Eboard BasicsMy Eboard Basics
My Eboard Basics
 
Many Voices: Online Book Clubs
Many Voices: Online Book ClubsMany Voices: Online Book Clubs
Many Voices: Online Book Clubs
 
Tt511 iot letter-1.0
Tt511 iot letter-1.0Tt511 iot letter-1.0
Tt511 iot letter-1.0
 
Netglobers 2nd Chance15maggio09
Netglobers 2nd Chance15maggio09Netglobers 2nd Chance15maggio09
Netglobers 2nd Chance15maggio09
 
Turismo Accessibile
Turismo AccessibileTurismo Accessibile
Turismo Accessibile
 
Dkn0809 Smt1 Fisika
Dkn0809 Smt1 FisikaDkn0809 Smt1 Fisika
Dkn0809 Smt1 Fisika
 

Similar to Web Components, O Drupal está preparado?

Joomla 3 Component programmeren met RAD - Joomladagen 2014
Joomla 3 Component programmeren met RAD - Joomladagen 2014Joomla 3 Component programmeren met RAD - Joomladagen 2014
Joomla 3 Component programmeren met RAD - Joomladagen 2014
Peter Martin
 
Selenium 2 for PHP(Unit)
Selenium 2 for PHP(Unit)Selenium 2 for PHP(Unit)
Selenium 2 for PHP(Unit)
AOE
 
Intro to Web Components, Polymer & Vaadin Elements
Intro to Web Components, Polymer & Vaadin ElementsIntro to Web Components, Polymer & Vaadin Elements
Intro to Web Components, Polymer & Vaadin Elements
Manuel Carrasco Moñino
 
Web components Introduction
Web components IntroductionWeb components Introduction
Web components Introduction
Eugenio Romano
 
Madison PHP - Getting Started with Magento 2
Madison PHP - Getting Started with Magento 2Madison PHP - Getting Started with Magento 2
Madison PHP - Getting Started with Magento 2
Mathew Beane
 
Magento 2 Modules are Easy!
Magento 2 Modules are Easy!Magento 2 Modules are Easy!
Magento 2 Modules are Easy!
Ben Marks
 
Run Fast, Try Not to Break S**t
Run Fast, Try Not to Break S**tRun Fast, Try Not to Break S**t
Run Fast, Try Not to Break S**t
Michael Schmidt
 
Make implementation of third party elements in magento 2 in 5-times easier
Make implementation of third party elements in magento 2 in 5-times easierMake implementation of third party elements in magento 2 in 5-times easier
Make implementation of third party elements in magento 2 in 5-times easier
Elena Kulbich
 
Selenium 2 for PHP(Unit)
Selenium 2 for PHP(Unit)Selenium 2 for PHP(Unit)
Selenium 2 for PHP(Unit)
AOE
 
An introduction to the Symfony CMF - creating a CMS on top of Symfony
An introduction to the Symfony CMF - creating a CMS on top of Symfony An introduction to the Symfony CMF - creating a CMS on top of Symfony
An introduction to the Symfony CMF - creating a CMS on top of Symfony
Roel Sint
 
Joomla! Framework + Issue Management + GitHub = Fun Code
Joomla! Framework + Issue Management + GitHub = Fun CodeJoomla! Framework + Issue Management + GitHub = Fun Code
Joomla! Framework + Issue Management + GitHub = Fun Code
Michael Babker
 
The Dog Ate My Deployment - PHP Uncoference September 2013
The Dog Ate My Deployment - PHP Uncoference September 2013The Dog Ate My Deployment - PHP Uncoference September 2013
The Dog Ate My Deployment - PHP Uncoference September 2013
D
 
Establish reliable builds and deployments with Magento
Establish reliable builds and deployments with MagentoEstablish reliable builds and deployments with Magento
Establish reliable builds and deployments with Magento
Unic
 
Hack Rio/OS
Hack Rio/OSHack Rio/OS
Hack Rio/OS
Kishore Neelamegam
 
Stanislav Khorunzhyi, "Front-end it like a PRO"
Stanislav Khorunzhyi, "Front-end it like a PRO"Stanislav Khorunzhyi, "Front-end it like a PRO"
Stanislav Khorunzhyi, "Front-end it like a PRO"
Sigma Software
 
Workshop: Introduction to Web Components & Polymer
Workshop: Introduction to Web Components & Polymer Workshop: Introduction to Web Components & Polymer
Workshop: Introduction to Web Components & Polymer
John Riviello
 
Drupal 7 Development: Beginning Module Development
Drupal 7 Development: Beginning Module DevelopmentDrupal 7 Development: Beginning Module Development
Drupal 7 Development: Beginning Module Development
Joe Crespo
 
Manila MuleSoft Meetup - September 2018
Manila MuleSoft Meetup - September 2018Manila MuleSoft Meetup - September 2018
Manila MuleSoft Meetup - September 2018
Ryan Anthony Andal
 
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
Will Huang
 
M2ModuleDevelopmenteBook
M2ModuleDevelopmenteBookM2ModuleDevelopmenteBook
M2ModuleDevelopmenteBook
Trọng Huỳnh
 

Similar to Web Components, O Drupal está preparado? (20)

Joomla 3 Component programmeren met RAD - Joomladagen 2014
Joomla 3 Component programmeren met RAD - Joomladagen 2014Joomla 3 Component programmeren met RAD - Joomladagen 2014
Joomla 3 Component programmeren met RAD - Joomladagen 2014
 
Selenium 2 for PHP(Unit)
Selenium 2 for PHP(Unit)Selenium 2 for PHP(Unit)
Selenium 2 for PHP(Unit)
 
Intro to Web Components, Polymer & Vaadin Elements
Intro to Web Components, Polymer & Vaadin ElementsIntro to Web Components, Polymer & Vaadin Elements
Intro to Web Components, Polymer & Vaadin Elements
 
Web components Introduction
Web components IntroductionWeb components Introduction
Web components Introduction
 
Madison PHP - Getting Started with Magento 2
Madison PHP - Getting Started with Magento 2Madison PHP - Getting Started with Magento 2
Madison PHP - Getting Started with Magento 2
 
Magento 2 Modules are Easy!
Magento 2 Modules are Easy!Magento 2 Modules are Easy!
Magento 2 Modules are Easy!
 
Run Fast, Try Not to Break S**t
Run Fast, Try Not to Break S**tRun Fast, Try Not to Break S**t
Run Fast, Try Not to Break S**t
 
Make implementation of third party elements in magento 2 in 5-times easier
Make implementation of third party elements in magento 2 in 5-times easierMake implementation of third party elements in magento 2 in 5-times easier
Make implementation of third party elements in magento 2 in 5-times easier
 
Selenium 2 for PHP(Unit)
Selenium 2 for PHP(Unit)Selenium 2 for PHP(Unit)
Selenium 2 for PHP(Unit)
 
An introduction to the Symfony CMF - creating a CMS on top of Symfony
An introduction to the Symfony CMF - creating a CMS on top of Symfony An introduction to the Symfony CMF - creating a CMS on top of Symfony
An introduction to the Symfony CMF - creating a CMS on top of Symfony
 
Joomla! Framework + Issue Management + GitHub = Fun Code
Joomla! Framework + Issue Management + GitHub = Fun CodeJoomla! Framework + Issue Management + GitHub = Fun Code
Joomla! Framework + Issue Management + GitHub = Fun Code
 
The Dog Ate My Deployment - PHP Uncoference September 2013
The Dog Ate My Deployment - PHP Uncoference September 2013The Dog Ate My Deployment - PHP Uncoference September 2013
The Dog Ate My Deployment - PHP Uncoference September 2013
 
Establish reliable builds and deployments with Magento
Establish reliable builds and deployments with MagentoEstablish reliable builds and deployments with Magento
Establish reliable builds and deployments with Magento
 
Hack Rio/OS
Hack Rio/OSHack Rio/OS
Hack Rio/OS
 
Stanislav Khorunzhyi, "Front-end it like a PRO"
Stanislav Khorunzhyi, "Front-end it like a PRO"Stanislav Khorunzhyi, "Front-end it like a PRO"
Stanislav Khorunzhyi, "Front-end it like a PRO"
 
Workshop: Introduction to Web Components & Polymer
Workshop: Introduction to Web Components & Polymer Workshop: Introduction to Web Components & Polymer
Workshop: Introduction to Web Components & Polymer
 
Drupal 7 Development: Beginning Module Development
Drupal 7 Development: Beginning Module DevelopmentDrupal 7 Development: Beginning Module Development
Drupal 7 Development: Beginning Module Development
 
Manila MuleSoft Meetup - September 2018
Manila MuleSoft Meetup - September 2018Manila MuleSoft Meetup - September 2018
Manila MuleSoft Meetup - September 2018
 
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
 
M2ModuleDevelopmenteBook
M2ModuleDevelopmenteBookM2ModuleDevelopmenteBook
M2ModuleDevelopmenteBook
 

Recently uploaded

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website
Pixlogix Infotech
 

Recently uploaded (20)

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website
 

Web Components, O Drupal está preparado?

  • 1. Web Components por João Paulo Seregatte @seregatte O Drupal está preparado?
  • 2. 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?
  • 3. Desenvolvedores Front / Back ● Apresentar. ● Exemplos. ● Desenvolver. ● Estimular o estudo. Level 1 > Sub itemObjetivos
  • 4. Level 1 > Sub itemObjetivos
  • 5. 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
  • 6. NetScape ● November 1994 - Netscape ● January 1997 - Especificação HTML 3.2 Level 1 > Sub itemHTML > NetScape
  • 7. Level 1 > Sub itemHTML > NetScape
  • 8. Level 1 > Sub itemHTML > Realidade HTML 4
  • 9. Level 1 > Sub itemHTML > Tags maravilhosas
  • 10. Level 1 > Sub itemHTML > Tags maravilhosas
  • 11. Level 1 > Sub itemHTML > IE Internet Explorer Version 4.0 1. Release date: September 1997 2. 60 % market share with IE 4.
  • 12. Level 1 > Sub itemHTML > IE 5
  • 13. Level 1 > Sub itemHTML > IE 6
  • 14. Level 1 > Sub itemItem 1 > Subitem 1Plugins > Necessidade Suprir a necessidade 1. Animações. 2. Dados. 3. Mídia
  • 15. Level 1 > Sub itemItem 1 > Subitem 1Plugins > E vem todos navegadores
  • 16. Item 1 > Subitem 1HTML5 > Morte aos plugins HTML 5 1. Independencia de plugins. 2. Novos elementos. 3. CSS3
  • 17. Level 1 > Sub itemItem 1 > Subitem 1Web Components Iniciativa / Padrão ● Custom Elements. ● Templates. ● Shadow DOM ● HTML Imports
  • 18. Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements <x-camera> https://github.com/casarock/camera/
  • 19. Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements Show me the code!
  • 20. Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
  • 21. Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements http://w3c.github. io/webcomponents/spec/custom/
  • 22. Level 1 > Sub itemItem 1 > Subitem 1Web Components > Templates
  • 23. Level 1 > Sub itemItem 1 > Subitem 1Web Components > Templates
  • 24. Level 1 > Sub itemItem 1 > Subitem 1 Show me the code! Web Components > Templates
  • 25. Level 1 > Sub itemItem 1 > Subitem 1 http://w3c.github. io/webcomponents/spec/template/ Web Components > Templates
  • 26. Level 1 > Sub itemItem 1 > Subitem 1Web Components > Shadow DOM
  • 27. Level 1 > Sub itemItem 1 > Subitem 1 Show me the code! Web Components > Shadow DOM
  • 28. Level 1 > Sub itemItem 1 > Subitem 1 homer-button Web Components > Demo
  • 29. Level 1 > Sub itemItem 1 > Subitem 1 http://w3c.github. io/webcomponents/spec/shadow/ Web Components > Shadow DOM
  • 30. Level 1 > Sub itemItem 1 > Subitem 1 Compatibilidade ● Custom Elements. ● Templates. ● Shadow DOM Web Components > Polyfill
  • 31. Level 1 > Sub itemItem 1 > Subitem 1Web Components > Polyfill
  • 32. Item 1 > Subitem 1Polymer Google ● https://polymer-topeka.appspot.com/ ● http://cds-polymer.appspot.com/ ● https://polymer-designer.appspot.com/
  • 33. Level 1 > Sub itemItem 1 > Subitem 1Web Components > HTML imports
  • 34. Level 1 > Sub itemItem 1 > Subitem 1 Show me the code! Web Components > HTML imports
  • 35. Item 1 > Subitem 1Drupal
  • 36. Item 1 > Subitem 1Drupal > Futuro
  • 37. Item 1 > Subitem 1Drupal > Futuro
  • 38. Item 1 > Subitem 1Drupal > Futuro
  • 39. Item 1 > Subitem 1Drupal > Futuro
  • 40. Item 1 > Subitem 1Conclusão > Objetivo
  • 41. Item 1 > Subitem 1Conclusão > Fim Fim
  • 42. Item 1 > Subitem 1Conclusão > Perguntas Perguntas? @seregatte https://github.com/seregatte/Palestra_WebComponents