PRETTY MATTERS
Web Components, Material Design and
Polymer
<about-us>
</about-us>
Maria Clara Santana
- Computer Engineering Student
- Artificial Intelligence Researcher
- Web developer
Carla Nicole Calheiros
- Computer Science Student
- Web Developer
Web Components ?
Web Components
● Templates
● Shadow DOM
● HTML Imports
● Custom Elements
Material Design
Goals
- Create a visual language that
synthesizes classic principles
of good design with innovation
and possibiity of technology
and science
Goals
- Develop a single underlying system that
alows for a unified experience across
plataforms and devices sizes. Mobile
precepts are fundamental, but touch,
voice, mouse and keyboard are all first-
class input methods.
Principles
Material is the
metaphor
Bold, graphic,
intentional
Motion provides
meaning
Now we know about
Web Components and
Material Design
How do we use them
together?
polymer
WHAAAAAAAT???
“Web components usher in a new era of web development
based on encapsulated and interoperable custom
elements that extend HTML itself. Built atop these new
standarts, Polymer makes it easier and faster to create
anything from a buttom to a complete application across
desktop, mobile and beyond.”
Description
One more thing
Polymer was born to die
So why should
I care?
Why use Polymer?
Do you wanna sit and wait?
Only watch the world moving
around you? Don’t wait.
Join the revolution!
POLYMER 0.8
Easier. Faster. Better.
ALPHA
(Available on https://www.polymer-project.org/0.8/#benchmarks)
Polyfill library
Element registration
Local DOM template
Declared properties
Join the revolution: Learn!
polymer-project.org
Join the revolution: Build!
yeoman.io
polymer-designer.appspot.com/
CHROME DEV
EDITOR
Join the revolution: Share!
customelements.io
<contact-us>
</contact-us>
Carla Nicole Calheiros
+CarlaNicoleCalheirosP
nicole.calheiros@gmail.com
Maria Clara Santana
+MariaClaraSantana1
claarasantana@gmail.com
<thank-you>

Pretty Matters: Web Components, Material Design and Polymer