SlideShare una empresa de Scribd logo
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
Componentes	Web	y	El	Framework	Polymer	
Programación	Orientada	a	
Componentes	Web	
Junio	2014
@javiervelezreye	2		
Presentación	
Componentes	Web	y	El	Framework	Polymer	
Licenciado	 en	 informá2ca	 por	 la	 Universidad	 Politécnica	 de	
Madrid	(UPM)	desde	el	año	2001	y	doctor	en	informá2ca	por	la	
Universidad	 Nacional	 de	 Educación	 a	 Distancia	 (UNED)	 desde	 el	
año	2009,	Javier	es	inves2gador	y	está	especializado	en	el	diseño	
y	 análisis	 de	 la	 colaboración.	 Esta	 labor	 la	 compagina	 con	
ac2vidades	de	evangelización,	consultoría,	mentoring	y	formación	
especializada	para	empresas	dentro	del	sector	IT.	Inquieto,	ávido	
lector	y	seguidor	cercano	de	las	innovaciones	en	tecnología.	
I.	¿Quién	Soy?	
	
II.	¿A	Qué	Me	Dedico?	
	 Desarrollado	Front/Back	
Evangelización	Web	
Arquitectura	SoVware	
Formación	&	Consultoría	IT	
E-learning	
Diseño	de	Sistemas	de	Colaboración	
Learning	Analy2cs	
Gamificación	Colabora2va	
	
javier.velez.reyes@gmail.com	
@javiervelezreye	
linkedin.com/in/javiervelezreyes	
gplus.to/javiervelezreyes	
jvelez77	
javiervelezreyes	
youtube.com/user/javiervelezreyes
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.veler.reyes@gmail.com	
1	Introducción	
§  El	Camino	hacia	los	Componentes	Web	
§  Qué	es	un	Componente	Web	
§  La	Web	como	Plataforma	Orientada	a	Componentes	
§  Un	nuevos	modelo	de	roles	
Introducción	
Componentes	Web	y	El	Framework	Polymer
@javiervelezreye	4		
Introducción	
Componentes	Web	y	El	Framework	Polymer	
I.	El	Camino	hacia	los	Componentes	Web		
	 En	los	úl2mos	años	se	ha	venido	observando	un	claro	movimiento	hacia	la	modularización	de	
la	Web.	Sin	el	ánimo	de	ser	exhaus2vos	ni	rigurosos	podemos	citar	las	principales	aportaciones	
que	han	promovido	este	cambio	y	que,	en	suma,	han	contribuido	a	la	aparición	de	un	nuevo	
estándar	para	la	construcción	de	sistemas	Web	basados	en	Componentes.	
Se	 promueve	 el	 uso	 de	 librerías	
JavaScript	 que	 encapsulan	 funciona-
lidades	 básicas	 para	 problemas	
recurrentes	en	la	Web.		
Librerías	JavaScript	
Se	 construyen	 frameworks	 de	 front-
end	 para	 asisEr	 al	 proceso	 de	
desarrollo	 de	 aplicaciones	 Web	
basadas	 en	 arquitecturas	 MVC	 o	
MVVM.	
Frameworks	MV*	
Desde	 el	 mundo	 del	 diseño	 se	
construyen	 frameworks	 presenta-
cionales	 que	 fomentan	 el	 uso	 de	
prácEcas	de	CSS	orientado	a	objetos	
Frameworks	CSS
@javiervelezreye	5		
Introducción	
Componentes	Web	y	El	Framework	Polymer	
II.	Qué	es	un	Componente	Web	
	 Como	consecuencia	de	los	esfuerzos	de	modularización	y	reu2lización	anteriores	surge,	de	la	
mano	de	la	W3C,	el	estándar	de	Componentes	Web	que	pretende	recoger	estas	inquietudes	y	
resolver	 algunos	 de	 los	 problemas	 que	 presentan	 las	 soluciones	 propuestas	 hasta	 la	 fecha.	
Aunque,	 como	 veremos	 más	 adelante	 son	 muchas	 las	 tecnologías	 que	 circundan	 esta	
especificación,	un	Componente	Web	puede	definirse	como	sigue.	
Se	 pretende	 proporcionar	 capacidades	 a	 los	
desarrolladores	 para	 que	 creen	 sus	 propias	
eEquetas.	 Éstas	 se	 caracterizan,	 a	 diferencia	
de	 los	 elementos	 del	 estándar	 DOM,	 por	
presentar	 un	 modelo	 de	 comportamiento	 no	
inerte	
Principio	I.	Extensibilidad	
La	 extensibilidad	 de	 la	 Web	 alcanzada	 por	
estos	medios	debe	desarrollarse	de	manera	
que	 se	 asegure	 que	 ésta	 se	 mantenga	 en	
consonancia	 con	 la	 forma	 en	 que	 la	 Web	
opera	actualmente	
Principio	II.	Racionalidad		
Un	Componente	Web	proporciona	un	mecanismo	para	construir	
nuevos	elementos	DOM	personalizados	que	incluyen	semánEca	
funcional	 nueva	 además	 de	 una	 estructura	 sintácEca	
potencialmente	diferente.
@javiervelezreye	6		
Introducción	
Componentes	Web	y	El	Framework	Polymer	
II.	Qué	es	un	Componente	Web	
	 Es	conveniente	destacar	algunas	caracterís2cas	que	ya	sabemos	acerca	del	funcionamiento	de	
la	Web	en	general	y	del	conjunto	de	sus	elementos	cons2tuyentes	en	par2cular.	En	virtud	del	
principio	de	Racionalidad,	los	nuevos	componentes	Web	también	deberán	ajustarse	a	estas		
caracterís2cas.	
Todos	 los	 elementos	 pueden	 ser	 instanciados	 a	 través	 del	
lenguaje	de	marcado	o	JavaScript.	
<input type=“text”/>
HTML	
var e = document.createElement (‘input’);
e instanceof HTMLInputElement === true;
JS	
Todas	 las	 eEquetas	 que	 aparecen	 en	 una	 página	
corresponden	 a	 instancias	 diferentes	 de	 una	 clase	 o	
protoEpo	de	eEqueta.	
Las	eYquetas	son	instancias	
var e = document.createElement(‘input’);
document.body.appendChild(e);
JS	
Todos	 los	 elementos	 Eenen	 su	 lógica	 de	 inicialización	
que	desarrollan	a	medida	que	el	navegador	renderiza	la	
página	
Los	elementos	Yenen	un	ciclo	de	vida	
<input value=“foo”/>;
...
<script>
querySelector(‘input’).value === ‘foo’;
</script>
HTML/JS	
Las	eEquetas	Eenen	un	estado	caracterizado	por	el	valor	en	
curso	de	cada	uno	de	sus	atributos	
Las	eYquetas	Yenen	estado	
input.setAttribute (‘value’, ‘foo’);
...
input.value === ‘foo’;
JS	
Correspondencia	entre	HTML	y	JS
@javiervelezreye	7		
Introducción	
Componentes	Web	y	El	Framework	Polymer	
II.	Qué	es	un	Componente	Web	
	 Es	conveniente	destacar	algunas	caracterís2cas	que	ya	sabemos	acerca	del	funcionamiento	de	
la	Web	en	general	y	del	conjunto	de	sus	elementos	cons2tuyentes	en	par2cular.	En	virtud	del	
principio	de	Racionalidad,	los	nuevos	componentes	Web	también	deberán	ajustarse	a	estas		
caracterís2cas.	
Las	 eEquetas	 Eenen	 métodos	 JavaScript	 que	 pueden	
invocarse	para	operar	sobre	ellas	
Las	eYquetas	Yenen	capacidades	
<form id=“f”/>
HTML	
var f = document.querySelector(‘#f’);
f.submit();
JS	
Las	 eEquetas	 con	 estructura	 de	 bloque	 pueden	
presentarse	en	contextos	que	aniden	a	otras	eEquetas	
hijas	y	a	su	vez	sean	anidadas	por	eEquetas	padre	
Las	eYquetas	pueden	anidarse	
<select>
<option>1</option>
<option>2</option>
<select>
HTML	
Los	 elementos	 pueden	 definir	 ganchos	 para	 definir	
comportamientos	 reacEvos	 al	 cambio	 de	 estado	 desde	
las	eEquetas	de	esElo	
Los	elementos	Yenen	hooks	de	esYlo	
a:hover {
...
}
CSS	
Las	eEquetas	pueden	tener	una	estructura	de	objetos	interna	
potencialmente	compleja	pese	a	que	sean	eEquetas	sencillas	
desde	la	perspecEva	del	diseñador	web	
Las	eYquetas	pueden	tener	un	modelo	DOM	complejo	
<input id=“d” type=“date” />
<script>
var date = document.querySelector(‘#d’);
date.children.length === 0;
</script>
JS
@javiervelezreye	8		
Introducción	
Componentes	Web	y	El	Framework	Polymer	
III.	La	Web	como	Plataforma	Orientada	a	Componentes	
	 De	esta	manera	asis2mos	a	un	proceso	de	transformación	conceptual	de	la	Web,	en	la	que	
ésta	se	presenta	como	una	plataforma	de	hospedaje	para	una	colección	de	componentes	con	
un	comportamiento	funcional	subyacente	que	se	comunican	y	coordinan	entre	si,	de	acuerdo	a	
diferentes	 esquemas	 para	 ofrecer	 servicios	 de	 valor	 en	 el	 contexto	 de	 la	 página	 donde	 se	
inscriben.	
Incluye	todas	las	nuevas	capacidades	
que	 exEenden	 la	 Web	 como	
plataforma	 de	 orientación	 a	 compo-
nentes	
Plataforma	
Capacidades	funcionales	sobre	la	
plataforma	 que	 simplifican	 el	
proceso	 de	 desarrollo	 de	
Componentes	Web	
Core	
Aplicaciones	 orientadas	 a	 compo-
nentes	al	servicio	de	los	usuarios	de	la	
Web	
Aplicaciones	
Componentes	 estándar	 dedicados	 a	
dar	 respuesta	 a	 necesidades	
recurrentes	 de	 control	 o	 UI	 que	
surgen	 en	 el	 desarrollo	 orientado	 a	
Componentes	Web	
Elementos
@javiervelezreye	9		
Introducción	
Componentes	Web	y	El	Framework	Polymer	
IV.	Un	Nuevo	Modelo	de	Roles		
	 Conviene	señalar	que,	en	el	marco	de	este	nuevo	proceso	de	construcción	de	soluciones	para	
la	Web	basadas	en	componentes,	se	requieren	nuevos	roles	de	especialización	técnica	y	flujos	
de	trabajo	establecidos.	A	con2nuación	bosquejamos	los	mismos.	
Diseñador	Web	
EsEliza	los	contenidos	de	
acuerdo	a	directrices	
presentacionales	
Maquetador	Web	
Establece	la	estructura	de	los	
contenidos	de	acuerdo	a	
directrices	semánEcas	
Establece	el	modelo	de	
comportamiento	en	reacción	a	los	
eventos	de	interacción	del	usuario	
CSS	
JS	
En	la	Web	Clásica…	
.className	
HTML	
Programador	Web
@javiervelezreye	10		
Introducción	
Componentes	Web	y	El	Framework	Polymer	
IV.	Un	Nuevo	Modelo	de	Roles		
	 Conviene	señalar	que,	en	el	marco	de	este	nuevo	proceso	de	construcción	de	soluciones	para	
la	Web	basadas	en	componentes,	se	requieren	nuevos	roles	de	especialización	técnica	y	flujos	
de	trabajo	establecidos.	A	con2nuación	bosquejamos	los	mismos.	
Diseñador	de	Componentes	
Define	el	modelo	de	rendering	
del	componente	de	acuerdo	a	
directrices	de	esElo	
Establece	la	estructura	de	los	
contenidos	internos	que	presenta	el	
componente	cuando	se	renderiza	
Programador	de	Componentes	
Establece	el	modelo	de	
comportamiento	subyacente	que	
se	acEva	cuando	se	renderiza	el	
componente		
CSS	
JS	
En	la	Web	Orientada	
a	Componentes…	
<content>	
.className	
HTML	
Maquetador	de	Componentes
@javiervelezreye	11		
Introducción	
Componentes	Web	y	El	Framework	Polymer	
IV.	Un	Nuevo	Modelo	de	Roles		
	 Conviene	señalar	que,	en	el	marco	de	este	nuevo	proceso	de	construcción	de	soluciones	para	
la	Web	basadas	en	componentes,	se	requieren	nuevos	roles	de	especialización	técnica	y	flujos	
de	trabajo	establecidos.	A	con2nuación	bosquejamos	los	mismos.	
CSS	
JS	
En	la	Web	Orientada	
a	Componentes…	
css	binding	
HTML	
.className	
Diseñador	de	Componentes	
Define	el	modelo	de	rendering	
del	componente	de	acuerdo	a	
directrices	de	esElo	
Establece	la	estructura	de	los	
contenidos	internos	que	presenta	el	
componente	cuando	se	renderiza	
Programador	de	Componentes	
Establece	el	modelo	de	
comportamiento	subyacente	que	
se	acEva	cuando	se	renderiza	el	
componente		
Maquetador	de	Componentes
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.veler.reyes@gmail.com	
2	La	Plataforma	
Web	Orientada	
a	Componentes	
§  Modelo	de	Encapsulamiento.	Shadow	DOM	
§  Modelo	de	Renderizado.	Templates	
§  Modelo	de	Extensión.	Custom	Elements	
§  Modelo	de	Modularización.	HTML	Imports	
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer
@javiervelezreye	13		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
I.	Introducción	
	 El	 modelo	 de	 componentes	 para	 la	 Web	 definido	 por	 la	 W3C	 consiste	 en	 cuatro	
especificaciones	tecnológicamente	independientes	que	cubren	dis2ntos	aspectos	del	proceso	
construc2vo.	A	lo	largo	de	este	capítulo	revisaremos	los	conceptos	esenciales	que	se	manejan	
en	relación	a	tales	especificaciones	
Shadow	DOM	
Ofrece	un	modelo	de	encapsulamiento	
que	permite	aislar	el	contenido	interno	
del	componente	de	aquél	en	la	página	
donde	éste	es	renderizado	
Templates	
Ofrece	 un	 modelo	 de	 construcción	
basado	en	planEllas	inertes	de	código	
HTML	 que	 sólo	 son	 acEvadas	 cuando	
se	renderiza	el	componente	
HTML	Imports	
Ofrece	 un	 modelo	 de	 modularización	
basado	 en	 la	 posibilidad	 de	 incluir	
ficheros	 de	 código	 HTML	 dentro	 de	
otros	ficheros	HTML	
Custom	Elements	
Ofrece	 un	 modelo	 de	 extensibilidad	
que	 permite	 a	 los	 desarrolladores	
definir	sus	propias	eEquetas	o	redefinir	
semánEcamente	 las	 eEquetas	 del	
estándar	DOM
@javiervelezreye	14		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
Sin	más	infraestructura	de	soporte,	los	iden2ficadores	JS	y	CSS	u2lizados	internamente	dentro	
de	cada	componente	podrían	colisionar	con	los	usados	dentro	de	la	página	huésped	o	en	otros	
componentes	residentes.	Es	necesario	proporcionar	un	mecanismo	de	encapsulamiento	que	
aísle	cada	instancia	de	componente	del	resto	de	instancias	y	de	la	propia	página.	
Página	Huésped	
A	
B	
A	
B	
#baz
.bar
.foo #baz
.bar
.foo
#js-a
#js-b
#baz #js-a
#js-b
#baz
.foo
#baz
.bar
Aislamiento	entre	instancias	
Se	debe	garanEzar	que	los	idenEficadores	dentro	de	
una	instancia	de	componente	no	entren	en	conflicto	
con	 aquéllos	 homónimos	 que,	 de	 forma	 natural,	
aparecerán	 en	 el	 resto	 de	 instancias	 de	 compo-
nentes	del	mismo	Epo	dentro	la	página	huésped	
Aislamiento	entre	componentes	
Debe	 asegurarse	 también	 el	 aislamiento	 entre	
idenEficadores	 homónimos	 usados	 entre	 compo-
nentes	de	disEntos	Epos	
Aislamiento	con	la	página	huésped	
El	 modelo	 de	 encapsulamiento	 garanEza	 la	
ausencia	de	colisión	con	los	elementos	de	la	página	
incluso	aunque	ésta	sea	a	su	vez	la	de	otro	compo-
nente	
Shadow	Host,	Shadow	Root	&	Shadow	DOM	
#baz
.bar
.foo
@javiervelezreye	15		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
Definiremos	una	nueva	variante	de	nodo	DOM	llamado	Shadow	Host.	Un	Shadow	Host	es	un	
nodo	DOM	que	con2ene	un	atributo	hacia	un	nuevo	nodo	DOM	llamado	Shadow	Root.	De	él	
se	puede	hacer	depender	un	subárbol	DOM	que	transcurre	en	paralelo	al	documento	llamado	
Shadow	DOM.	Esto	establece	una	variante	de	contenidos	que	al	ser	paralela	es	ignorada	por	el	
algoritmo	de	rendering	del	navegador	y	establece	así	un	espacio	de	nombres	propio.	
Shadow	Host,	Shadow	Root	&	Shadow	DOM	
Nodo	DOM	normal	 Nodo	Shadow	Host	 Nodo	Shadow	Root	
Light	DOM	
.shadowRoot
Shadow	DOM	
1
2
1
2
En	los	navegadores	sin	soporte	a	componentes	web	se	
aplica	 el	 algoritmo	 de	 renderizado	 habitual.	 Como	 el	
shadow	 DOM	 no	 es	 accesible	 por	 este	 algoritmo,	 el	
componente	 no	 se	 renderiza	 y	 se	 conEnúa	 por	 el	
recorrido	habitual	
Renderizado	normal	
Cuando	 el	 soporte	 a	 componentes	 web	 está	 acEvo,	 el	
algoritmo	 de	 renderizado	 discrimina	 entre	 nodos	
normales	y	nodos	shadow	host.	En	éstos	úlEmos,	deriva	
el	proceso	de	renderizado	para	mostrar	el	contenido	del	
shadow	DOM	mientras	el	Light	DOM	no	se	muestra	
Renderizado	shadow	
Página	Huésped	
Componente	
this
@javiervelezreye	16		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
Para	conver2r	un	nodo	normal	en	un	shadow	host	es	necesario	incluir	un	atributo	hacia	un	
shadow	root.	Esto	se	hace	por	medio	del	método	createShadowRoot	incluido	como	extensión	
en	el	interfaz	del	la	clase	nodo.	
	Shadow	Host,	Shadow	Root	&	Shadow	DOM	
<div id=“myHost”>
contenido del light dom
</div>
HTML	
<script>
var host = document.querySelector(‘#myHost’);
var root = host.createShadowRoot();
root.innerHTML = “contenido del shadow dom”;
</script>
HTML/JS	
Cualquier	 Epo	 de	 nodo	 DOM	 puede	 ser	
converEdo	 en	 Shadow	 Host.	 A	 parEr	 de	 aquí	 el	
esquema	de	rendering	ignora	el	contenido	y	pasa	
a	procesar	el	Shadow	DOM		
Shadow	Host	
Primero	 se	 localiza	 el	 nodo	 que	 hará	 de	 anfitrión	 y	 se	
convierte	en	shadow	host	creando	en	el	un	nodo	shadow	
root.	Después	sólo	queda	inyectar	contenido	HTML	en	el	
shadow	DOM	por	cualquier	mecanismo	estándar			
Shadow	Host
@javiervelezreye	17		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
var host = this;
host.querySelector(‘.foo’);
...
JS	
El	componente	es	una	eEqueta	accesible	desde	
el	DOM.	Para	navegar	el	light	DOM	se	usan	los	
mecanismos	convencionales	
A.	Acceso	a	Light	DOM	
Shadow	DOM	Light	DOM	
this
.shadowRoot
var root = this.shadowRoot;
root.querySelector(‘.foo’);
...
JS	
El	componente	es	una	eEqueta	accesible	desde	
el	DOM.	Para	acceder	al	root	se	navega	por	la	
propiedad	shadowRoot	
B.	Acceso	a	Shadow	DOM	
Shadow	DOM	Light	DOM	
this
.shadowRoot
En	resumen,	el	modelo	de	encapsulación	no	oculta	nada	truculento.	Cada	nodo	host	dispone	
de	un	enlace	a	un	árbol	DOM	paralelo	que	puede	ser	recorrido	de	forma	habitual	siempre	que	
se	recuerde	que	su	punto	de	acceso	es	el	shadow	root.	
	Shadow	Host,	Shadow	Root	&	Shadow	DOM	 Shadow.1.html
@javiervelezreye	18		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
En	los	navegadores	sin	soporte	a	componentes,	el	light	DOM	permite	hacer	un	renderizado	
clásico	de	la	información	mientras	que	en	aquéllos	con	soporte	el	light	DOM	no	es	mostrado.	
Tiene	sen2do	reservar	siempre	el	light	DOM	para	que	albergue	el	contenido	exclusivamente	
semán2co	de	la	página	mientras	que	el	shadow	DOM	se	encarga	del	renderizado	y	la	lógica	
presentacional.	 Pero,	 ¿cómo	 puede	 accederse	 desde	 el	 shadow	 DOM	 al	 contenido	 del	 light	
DOM?	
Puntos	de	Inserción	&	EYqueta	Content	
Light	DOM	
.shadowRoot
Shadow	DOM	
Página	Huésped	
Componente	
?
Si	el	light	DOM	conEene	el	contenido	semánEco	
sobre	 la	 configuración	 del	 componente	 es	 muy	
probable	 que	 el	 shadow	 DOM	 requieran	
discrecionalmente	 partes	 de	 esa	 información	
para	 arEcular	 su	 renderizado.	 Necesitamos	 un	
mecanismo	 de	 trasvase	 de	 información	 entre	
ambos	árboles	
Referencia	de	información	
this
@javiervelezreye	19		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
En	los	navegadores	sin	soporte	a	componentes	el	light	DOM	permite	hacer	un	renderizado	
clásico	de	la	información.	Pero,	y	aquéllos	con	soporte	el	light	DOM	no	es	mostrado.	Tiene	
sen2do	reservar	el	light	DOM	para	que	albergue	el	contenido	exclusivamente	semán2co	de	la	
página	 mientras	 que	 el	 shadow	 DOM	 se	 encarga	 del	 renderizado.	 Pero,	 ¿cómo	 puede	
accederse	desde	el	shadow	DOM	al	contenido	del	light	DOM?	
Puntos	de	Inserción	&	EYqueta	Content	
Light	DOM	
.shadowRoot
Shadow	DOM	
Página	Huésped	
Componente	
Nodo	con	contenido	SemánEco	 Punto	de	inserción	
<content select=‘…’>
<div id=“myHost”>
<div class=“name”>Javier Vélez</div>
<div class=“twitter”>javiervelezreye</div>
</div>
HTML	
<script>
var host = document.querySelector(‘#myHost’);
var root = host.createShadowRoot();
root.innerHTML =
‘D. <content select=“.name”></content>’ +
‘<hr>’ +
‘@<content select=“.twitter”></content>’;
</script>
HTML/JS	
this
@javiervelezreye	20		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
var ip = root.querySelector(‘#i’);
var dNodes = ip.getDistributedNodes ();
dNodes...
JS	
Seleccionado	 un	 punto	 de	 inserción	 se	 pueden	
localizar	 los	 nodos	 del	 Light	 DOM	 que	 son	
distribuidos	en	el	shadow	DOM	
A.	Acceso	a	Nodos	Distribuidos	
var e = host.querySelector (‘#i’);
var ips = e.getDestinationInsertionPoints();
ips...
JS	
Para	saber	los	puntos	de	inserción	desde	donde	
un	determinado	nodo	del	Light	DOM	es	referido	
se	accede	a	los	puntos	de	inserción	de	desEno		
B.	Acceso	a	Puntos	de	Inserción	de	DesSno	
Shadow	DOM	Light	DOM	
this
.shadowRoot
<div id=‘i’>
Es	posible	consultar	programá2camente	la	colección	de	nodos	del	light	DOM	que	son	referidos	
desde	 un	 punto	 de	 inserción	 así	 como	 saber	 en	 qué	 puntos	 de	 inserción	 se	 distribuye	 un	
determinado	nodo	del	light	DOM.	
Puntos	de	Inserción	&	EYqueta	Content	
Shadow	DOM	Light	DOM	
this
.shadowRoot
<content id=‘i’>
Shadow.2.html
@javiervelezreye	21		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
Para	dar	mayor	flexibilidad	en	el	proceso	de	diseño	es	posible	incluir	dentro	de	un	shadow	host	
varios	shadow	roots.	Éstos	son	ges2onados	por	el	nodo	anfitrión	de	acuerdo	a	una	pila	LIFO	
para	emular	los	mecanismos	de	diseño	por	capas.	Ya	sabemos	como	referir	información	del	
light	DOM	desde	el	shadow	DOM.	Sin	embargo,	¿cómo	hacer	lo	mismo	desde	un	shadow	DOM	
hacia	el	resto	de	shadow	DOM	que	éste	2ene	por	debajo	en	la	pila?	
Puntos	de	Inserción	en	la	Sombra	&	EYqueta	Shadow	
Light	DOM	
root1
Shadow	DOMs	
Página	Huésped	
Capas	
this
<script>
var host = document.querySelector(‘#myHost’);
var root1 = host.createShadowRoot();
var root2 = host.createShadowRoot();
var root3 = host.createShadowRoot();
root1.innerHTML = ...
root2.innerHTML = ...
root3.innerHTML = ...
</script>
HTML/JS	
root2
root3
? De	 igual	 manera,	 para	 arEcular	 un	 mecanismo	 de	
diseño	flexible	y	ponente,	es	conveniente	disponer	de	
una	manera	de	recuperar	información	de	los	shadow	
DOM	por	debajo	dentro	de	la	pila	
Trasvase		de	información	entre	capas	cima	
base
@javiervelezreye	22		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelo	de	Encapsulamiento.	Shadow	DOM	
	
Para	dar	mayor	flexibilidad	en	el	proceso	de	diseño	es	posible	incluir	dentro	de	un	shadow	host	
varios	shadow	roots.	Éstos	son	ges2onados	por	el	nodo	anfitrión	de	acuerdo	a	una	pila	LIFO	
para	emular	los	mecanismos	de	diseño	por	capas.	Ya	sabemos	como	referir	información	del	
light	DOM	desde	el	shadow	DOM.	Sin	embargo,	¿cómo	hacer	lo	mismo	desde	un	shadow	DOM	
hacia	el	resto	de	shadow	DOM	que	éste	2ene	por	debajo	en	la	pila?	
Puntos	de	Inserción	en	la	Sombra	&	EYqueta	Shadow	
Light	DOM	
root1
Shadow	DOMs	
Página	Huésped	
Capas	
this
<script>
...
root1.innerHTML = ‘Esta capa está oculta’;
root2.innerHTML = ‘D. <content select...’;
root3.innerHTML =
‘<div class=“.box”>’ +
‘ <shadow></shadow>’ +
‘</div>’;
</script>
HTML/JS	
root2
root3
Nodo	de	contenido	en	capa	 Punto	de	inserción	en	la	sombra	
<shadow> Las	capas	que	no	tuvieran	una	referencia	<shadow>	
desde	 capas	 superiores	 no	 serían	 incluidas	 en	 el	
proceso	de	renderizado	
Capas	ocultas	cima	
base	
Shadow.3.html
@javiervelezreye	23		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
III.	Modelo	de	Renderizado.	Templates	
	
No	es	poco	frecuente	encontrar	situaciones	en	las	que	es	necesario	instanciar	dos	ocurrencias	
diferentes	 de	 un	 mismo	 componente	 sobre	 la	 misma	 página,	 aunque	 sea	 con	 light	 DOM	
diferentes.	¿Pomo	podemos	evitar	el	trabajo	de	reescribir	el	shadow	DOM	entero	para	cada	
instancia	de	forma	eficaz	y	segura?	
PlanYllas	Inertes	y	AcYvación	de	Código	por	Clonación	
Página	Huésped	
<div id=‘A-1’>
</div>
<div id=‘A-2’>
</div>
El	 contenido	 de	 los	 dos	 subárboles	 shadow	 es	 el	
mismo	 puesto	 que	 ambas	 eEquetas	 responden	 a	
instancias	disEntas	(-1	y	-2)	del	mismo	componente	A		
Shadow	DOM	idénScos	
Cada	instancia	sin	embargo	conEene	
unos	contenidos	semánEcos	disEntos	
dentro	 del	 subárbol	 light	 que	 sirven	
para	 configurar	 la	 misma	 de	 forma	
parEcular	
Light	DOM	diferentes
@javiervelezreye	24		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
III.	Modelo	de	Renderizado.	Templates	
	
Una	plan2lla	<template>	es	un	nuevo	2po	de	e2queta	que	puede	incluir	cualquier	contenido	
HTML	y	puede	ubicarse	en	cualquier	parte	del	documento.	Este	contenido	es	inerte	en	tanto	
que	no	ejecuta	los	scripts,	no	carga	las	imágenes	y	no	reproduce	videos	o	audios.	Desde	JS	
puede	accederse	este	contenido	inerte	y	copiarse	para	formar	el	shadow	DOM	momento	en	el	
cual	será	procesado	por	el	algoritmo	de	rendering	y	convenientemente	ac2vado.			
PlanYllas	Inertes	y	AcYvación	de	Código	por	Clonación	
<template id=“news”>
<img src=“”>
<div class=“body”></div>
</template>
<div id=“new-1”></div> <div id=“new-2”></div>
HTML	
<script>
function createNew(container, image, body) {
var root = document.querySelector(container).createShadowRoot();
var template = document.querySelection("#news").content;
template.querySelector("img").scr = image;
template.querySelector(".body").textContent = body;
root.appendChild(template.content.cloneNode(true));
}
createNew('#new-1', ’imagen1.png', ’noticia 1’);
createNew('#new-2', ’imagen2.png', ’noticia 2’);
</script>
HTML/JS	
Template.1.html
@javiervelezreye	25		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
III.	Modelo	de	Renderizado.	Templates	
	
Resulta	muy	potente	disponer	de	un	mecanismo	de	observación	que	permita	a	los	nodos	DOM	
del	árbol	shadow	mantener	su	contenido	sincronizado	dinámicamente	con	ciertas	partes	del	
modelo	interno	de	JS	que	2ene	el	componente.	En	este	sen2do	podemos	dis2nguir	dos	2pos	
de	situaciones.	
PlanYllas	de	Enlace	de	Datos	
Shadow	DOM	
Shadow	Root	 Shadow	Host	
this
var foo;
Nodo	de	enlace	de	datos	
var bar;
var baz;
...
// Código JS del componente
Los	datos	de	la	vista	se	sincronizan	con	
los	 cambios	 en	 el	 modelo	 pero	 no	 al	
revés.	 Es	 jpico	 de	 nodos	 de	 texto	 y	
atributos		
Enlace	de	Datos	Unidireccional	
Los	datos	de	la	vista	se	sincronizan	con	
los	cambios	programáEcos	del	modelo	y	
recíprocamente,	 las	 acciones	 del	
usuario	 sobre	 la	 vista	 propagan	
cambios	 	 en	 el	 modelo.	 Es	 jpico	 de	
nodos	 de	 entrada	 de	 datos,	 o	 de	
aquéllos	manejados	por	un	escuchador	
de	evento	que	cambie	su	valor	en	JS	
Enlace	de	Datos	Bidireccional
@javiervelezreye	26		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
III.	Modelo	de	Renderizado.	Templates	
	
Polymer	ex2ende	el	concepto	de	plan2lla	estándar	con	plan2llas	para	el	enlace	de	datos.	Estas	
plan2llas	incluyen	en	el	atributo	bind	una	referencia	al	la	parte	de	modelo	JS	con	que	van	a	
enlazarse.	 También	 se	 proporcionan	 plan2llas	 para	 control	 de	 flujo	 condicional,	 itera2vo,	
recursivo	y	anidado,	atributos	condicionales,	controladores	de	eventos,	etc.	
PlanYllas	de	Enlace	de	Datos	
PlanSlla	de	Enlace	de	Datos	
<template bind=“{{person as me}}”>
{{me.name}} – {{me.twitter}}
</template>
PlanSlla	Condicional	
<template bind=“...” if=“truthy”>
{{me.name}} – {{me.twitter}}
</template>
PlanSlla	IteraSva	
<template repeat=“{{item in items}}”>
<li>{{item}}</li>
</template>
PlanSllas	Referidas	&	Anidadas	
<template repeat=“i in items” id=“t”>
<li>{{i}}
<ul>
<template repeat=“{{i.hijos}}” ref=“t”>
</template>
</ul>
</template>
...
<template bind ref=“t”>
</template>
PlanSllas	Anidada	
<template repeat=“{{u in users}}”>
<template repeat=“{{i in u.items}}”>
<li>{{i}}</li>
</template
</template>
HTML	
HTML	
HTML	
HTML	
HTML	
Template.2.html
@javiervelezreye	27		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
III.	Modelo	de	Renderizado.	Templates	
	
Polymer	ex2ende	el	concepto	de	plan2lla	estándar	con	plan2llas	para	el	enlace	de	datos.	Estas	
plan2llas	incluyen	en	el	atributo	bind	una	referencia	al	la	parte	de	modelo	JS	con	que	van	a	
enlazarse.	 También	 se	 proporcionan	 plan2llas	 para	 control	 de	 flujo	 condicional,	 itera2vo,	
recursivo	y	anidado,	atributos	condicionales,	controladores	de	eventos,	etc.	
PlanYllas	de	Enlace	de	Datos	
Enlace	a	Texto	
<p>{{user.name}}</p>
Enlace	a	Atributo	
<img src=“{{image}}” alt=“imagen”>
Manejador	de	Evento	Estándar	
<button on-click=“{{doClick}}”>
Ok
</button>
Enlace	a	Atributo	Condicional	
<div class=“card” hidden?=“{{show}}”
Manejador	de	Evento	de	Negocio	
<div id=“my-component”
on-done=“{{doAlarm}}”>
...
</div>
Enlace	con	Operador	Condicional	
<template repeat=“{{item, i in items}}”>
<div class=“{{(i%2==0)? ‘on’ : ‘off’}}”>
{{item}}
</div>
</template>
HTML	
HTML	
HTML	
HTML	
HTML	
HTML
@javiervelezreye	28		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
IV.	Modelo	de	Extensión.	Custom	Elements	
	
Ahora	que	tenemos	los	mecanismos	necesarios	para	definir	y	encapsular	comportamiento	y	
lógica	 de	 presentación	 personalizada	 necesitamos	 una	 manera	 de	 referirlo	 nominalmente	
dentro	de	nuestra	página	Web	en	forma	de	e2quetas	personalizadas.	Esto	permite	dis2nguir	
los	componentes	de	las	e2quetas	estándar	lo	que	aumenta	la	legibilidad	de	la	página.			
Creación	de	EYquetas	Personalizadas.	Custom	Tags	
Página	Huésped	
...
<wc-calendar>
<wc-calendar-day>12</wc-calendar-day>
<wc-calendar-month>06</wc-calendar-month>
<wc-calendar-year>2014</wc-calendar-year>
</wc-calendar>
...
Las	 eEquetas	 personalizadas	 son	 un	 Epo	 de	
elementos	personalizados	que	permite	uElizar	una	
referencia	nominal	para	instanciar	un	componente	
ya		construido	dentro	de	una	página.	No	obstante	
existen	dos	reglas	de	nombrado	
ESquetas	Personalizadas	
Los	 nombres	 de	 las	 eEquetas	 personalizadas	
deben	 tener	 al	 menos	 un	 guión	 en	 el	 nodeName	
para	diferenciarlas	de	las	eEquetas	estándar.	
Regla	1.	Nombres	con	al	menos	un	guión	
<wc-calendar> ... </wc-calendar>
No	pueden	uElizarse	como	nombres	de	eEquetas	
personalizadas	 cualquiera	 de	 las	 cadenas	 con	
guión	que	se	enumeran	a	conEnuación.	
Regla	2.	Nombres	reservados	
annotation-xml color-profile font-face
font-face-src font-face-uri font-face-format
font-face-name missing-glyph
@javiervelezreye	29		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
IV.	Modelo	de	Extensión.	Custom	Elements	
	
Debemos	preocuparnos,	por	un	lado,	de	registrar	cada	componente	construido	como	un	nuevo	
2po	 de	 e2queta	 dentro	 del	 sistema	 de	 e2quetas	 del	 navegador	 y	 después	 de	 instanciar	
componentes	tanto	desde	el	lenguaje	de	marcado	como	a	través	de	JS.	
Creación	de	EYquetas	Personalizadas.	Custom	Tags	
Registro	de	un	Componente	
<polymer-element name=“wc-foo”>
<template>...</template>
<script>
Polymer (‘wc-foo’, {
// prototipo del componente (foo, bar...)
});
</script>
</polymer-element>
HTML/JS	
var p = Object.create(HTMLElement.prototype);
p.foo = function (){...};
p.bar = 7;
var Foo = document.registerElement(
‘wc-foo’,
{prototype: p});
JS	
Tanto	 los	 snippets	 de	 código	 de	 registro	
como	 de	 instanciación	 son	 versiones	
equivalentes	y	mutuamente	excluyentes	
Instanciación	de	un	Componente	
<wc-foo id=“a”>
...
</wc-foo>
<wc-foo id=“b”>
...
</wc-foo>
HTML	
var a = new Foo ();
var b = document.createElement(‘wc-foo’);
document.body.appendChild (a);
document.body.appendChild (b);
JS	
Custom.html
@javiervelezreye	30		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
IV.	Modelo	de	Extensión.	Custom	Elements	
	
Por	 otro	 lado,	 resulta	 de	 interés	 extender	 las	 propias	 e2quetas	 del	 estándar	 HTML	 para	
generar	 variantes	 que	 incluyan	 nuevo	 comportamiento	 o	 lógica	 presentacional	 cuando	 se	
rendericen.	 Estas	 e2quetas	 man2enen,	 naturalmente,	 el	 nombre	 de	 la	 e2queta	 a	 la	 que	
ex2enden	 pero	 incluyen	 un	 calificador	 is	 para	 indicar	 al	 navegador	 de	 que	 se	 trata	 de	 una	
variante	dis2nta	
Extensión	de	EYquetas	Estándar.	Extended	Element	Types	
Página	Huésped	
...
<button id=“btn” is=“fancy-button”>
Ok
</button>
<p is=“lorem-ipsum”><p>
...
<script>
var btn = document.querySelector(‘#btn’);
btn.addEventListener(‘click’, function(e){
...
});
</script>
Las	 eEquetas	 del	 estándar	 se	 exEenden	 con	
variantes	 cualificadas	 nominalmente	 dentro	 del	
atributo	is.	Estas	eEquetas	manEenen	el	nombre,	
métodos	 y	 atributos	 de	 la	 eEqueta	 de	 la	 que	
derivan	pero	pueden	sobrescribir	o	agregar	nuevas	
capacidades	
Extensión	de	ESquetas	Estándar	
La	nueva	variante	de	botón	incluye,	por	herencia	
todos	los	atributos,	métodos	y	modelo	de	eventos	
que	Eene	la	eEqueta	base	de	la	que	deriva	
Herencia	de	Capacidades
@javiervelezreye	31		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
IV.	Modelo	de	Extensión.	Custom	Elements	
	
De	forma	similar	al	caso	anterior,	comenzaremos	por	registrar	cada	componente	construido	
como	 una	 variante	 que	 ex2ende	 una	 e2queta	 del	 estándar	 y	 después	 nos	 ocuparemos	 de	
instanciar	componentes	tanto	desde	el	lenguaje	de	marcado	como	a	través	de	JS.	
Extensión	de	EYquetas	Estándar.	Extended	Element	Types	
Extensión	de	una	ESqueta	
<polymer-element name=“fancy-button”
extends=“button”>
<template>...</template>
<script>
Polymer (‘fancy-button’, {
// prototipo de la etiqueta (foo, bar...)
});
</script>
</polymer-element>
HTML/JS	
var p = Object.create(HTMLButtonElement.prototype);
p.foo = function (){...};
p.bar = 7;
Var FancyButton = document.registerElement(
‘fancy-button’,
{extends: ‘button’,
prototype: p});
JS	
Tanto	 los	 snippets	 de	 código	 de	 registro	
como	 de	 instanciación	 son	 versiones	
equivalentes	y	mutuamente	excluyentes	
Instanciación	de	una	ESqueta	
<button is=“fancy-button”
id=“a”> Ok </button>
<button is=“fancy-button”
id=“b”> Ok </button>
HTML	
var a = new FancyButton ();
Var b = document.createElement
(‘fancy-button’);
document.body.appendChild (a);
document.body.appendChild (b);
JS
@javiervelezreye	32		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
IV.	Modelo	de	Extensión.	Custom	Elements	
	 Es	 importante	 recalcar	 que	 los	 Componentes	 Web,	 una	 vez	 establecidos	 como	 elementos	
personalizados	atraviesan	dis2ntas	fases	a	lo	largo	del	proceso	de	construcción,	inserción	y	
potencial	 borrado	 del	 árbol	 DOM	 de	 la	 página	 huésped.	 El	 estándar	 ofrece	 método	
manejadores	que	permiten	la	interposición	de	código	en	respuesta	a	cada	una	de	las	fases	que	
caracterizan	dicho	ciclo	de	vida.	A	con2nuación	describimos	someramente	las	mismas.	
CREATED	 READY	 ATTACHED	
DOM_READY	 DETACHED	 ATRIBUTE_CHANGED	
El	componente	se	ha	creado	y	ha	
sido	 registrado	 con	 éxito	 como	
una	nueva	eEqueta	o	extensión	
El	 componente	 está	 preparado.	
Shadow	 DOM	 creado.	 Observa-
dores	establecidos.	Manejadores	
de	eventos	vinculados	
Una	 nueva	 instancia	 de	 algún	
componente	creado	se	ha	inser-
tado	 dentro	 de	 la	 página	 hués-
ped	
Se	 garanEza	 que	 todos	 los	
componentes	 anidados	 dentro	
de	éste	están	preparados	
La	 instancia	 del	 componente	 se	
ha	 eliminado	 de	 la	 página	
huésped	
Un	 atributo	 de	 la	 instancia	 del	
componente	 fue	 añadido,	
borrado	o	actualizado	
registro
componente
Ok	
Ok	
X	
!
@javiervelezreye	33		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
V.	Modelo	de	Modularización.	HTML	Imports	
	
Página	Huésped	
<!doctype html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<script src=“platform.js”></script>
<script src=“polymer.js”></script>
<link rel=“import” href=“wc-foo.html”>
</head>
<body>
<wc-foo></wc-foo>
</body>
</html>
wc-foo.html	
<polymer-element name=“wc-foo”>
<template>...</template>
<script>
Polymer (‘wc-foo’, {
// prototipo del componente
});
</script>
</polymer>
La	 URL	 asociada	 a	 un	 import	 se	 llama	 import	
locaEon.	Para	acceder	a	un	documento	hospedado	
en	 otro	 dominio	 deben	 habilitarse	 los	 permisos	
CORS.	
Import	LocaSon	
Según	lo	expuesto,	la	implementación	de	un	componente	incluye	un	código	de	plan2lla	inerte,	
especificaciones	 de	 es2lo	 y	 no	 poca	 lógica	 de	 scrip2ng	 para	 especificar	 el	 modelo	 de	
comportamiento	del	mismo.	Parece	necesario	disponer	de	un	mecanismo	de	modularización	
que	 permita	 incluir	 todo	 ese	 contenido	 en	 un	 fichero	 de	 índice	 a	 parte	 HTML	 que	 pueda	
importarte	a	la	página	huésped.		
Importación	de	documentos	HTML
@javiervelezreye	34		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
V.	Modelo	de	Modularización.	HTML	Imports	
	
Página	Huésped	
<!doctype html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<script src=“platform.js”></script>
<script src=“polymer.js”></script>
<link rel="import" href=“my-lib.html”>
</head>
<body>
...
</body>
</html>
my-lib.html	
<!doctype html>
<html lang=“es”>
<head>
<link rel=“import” href=“tag-1.html”>
<link rel=“import” href=“tag-2.html”>
<link rel=“stylesheet” href=“style-1.html”>
<link rel="stylesheet" href=“style-2.html”>
<script src=“script-1.js”></script>
<script src=“script-2.js”></script>
</head>
<body>
<polymer-element>
...
</polymer-element>
</body>
</html>
Los	 mecanismos	 de	 modularización	 proporcionados	 por	 la	 direc2va	 import	 ofrecen	
oportunidades	 para	 el	 empaquetamiento	 de	 colecciones	 de	 recursos	 y	 manera	 que	 éstos	
puedan	ser	entregados	al	cliente	final	a	través	de	una	única	import	loca2on.	
Empaquetamiento	de	Recursos		
style-2.css	
	
style-1.css	
script-2.js	
	
script-1.js	
tag-2.html	
	
tag-1.html	
A	 través	 de	 la	 carga	 indirecta	 de	 un	 fichero	 de	
índice	 se	 cargan	 en	 la	 página	 huésped	 todos	 los	
recursos	a	los	que	éste	apunta	o	conEene	
Carga	Indirecta	
Import.html
@javiervelezreye	35		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
V.	Modelo	de	Modularización.	HTML	Imports	
	
Para	 controlar	 programá2camente	 desde	 JavaScript	 los	 procesos	 de	 carga	 de	 recursos	 de	
documentos	HTML	importados	mediante	la	clausula	import	la	plataforma	proporciona	sendos	
eventos	sobre	los	que	se	pueden	inyectar	manejadores.	
Eventos	de	Carga	y	Error	
Enlace	a	Texto	
<script async>
function handleLoad(e) {
console.log(‘Loaded import:’ + e.target.href);
}
function handleError(e) {
console.log(‘Error loading import:’ + e.target.href);
}
</script>
<link rel=“import” href=“file.html”
onload=“handleLoad(event)” onerror=“handleError(event)”>
Enlace	a	Atributo	
HTML/JS	
El	elemento	link	lanza	un	evento	load	cuando	
un	recurso	HTML	ha	terminado	su	proceso	de	
carga	de	forma	exitosa.	
Si	se	produce	algún	error	durante	el	proceso	
de	carga	del	recurso	HTML,	por	ejemplo	error	
404,	 recurso	 no	 encontrado,	 la	 eEqueta	 link	
lanzará	un	evento	error
@javiervelezreye	36		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
V.	Modelo	de	Modularización.	HTML	Imports	
	
Importar	 un	 recurso	 HTML	 mediante	 la	 cláusula	 import	 no	 supone	 un	 volcado	 tal	 cual	 del	
contenido	 sino	 que	 requiere	 de	 un	 procesamiento	 del	 mismo.	 Esto	 implica	 que	 es	
desarrollador	2ene	la	oportunidad	de	capturar	programá2camente	dicho	el	contenido	y	operar	
sobre	él	a	conveniencia.	
Manipulación	del	Contenido	de	los	Recursos	Importados	
<head>
<link id=“foo-link” rel=“import” href=“wc-foo.html”>
</head>
<body>
...
<script>
var link = document.querySelector(‘#foo-link’);
var content = link.import;
var el = content.querySelector(‘...’);
...
</script>
</body>
HTML/JS
@javiervelezreye	37		
Conceptos	Esenciales	
Componentes	Web	y	El	Framework	Polymer	
V.	Modelo	de	Modularización.	HTML	Imports	
	
Debemos	ser	conscientes	de	que	los	ficheros	importados,	en	tanto	que	son	documentos	HTML,	
pueden	 incluir	 fragmentos	 de	 scrip2ng.	 Dentro	 de	 estos	 scripts	 es	 posible	 referir	 tanto	 al	
documento	HTML	que	los	con2ene	como	al	documento	HTML	donde	son	hospedados	a	través	
de	la	direc2va	de	importación.	
Acceso	al	Recurso	Importado	y	a	la	Página	Huésped	
Página	Huésped	
<!doctype html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<script src=“platform.js”></script>
<script src=“polymer.js”></script>
<link rel="import" href=“file.html”>
</head>
<body>
...
</body>
</html>
file.html	
<!doctype html>
<html lang=“es”>
<head>
...
</head>
<body>
<script>
var f = document.currentScript.ownerDocument;
var h = document;
// f refiere a este documento HTML
// h refiere a la página huésped
</script>
</body>
</html>
Regla	de	importación	1.	
El	 contexto	 en	 el	 que	 se	 evalúan	 los	
script	 dentro	 de	 una	 página	
importada	es	el	de	la	página	huésped	
Regla	de	importación	2.	
Las	 importaciones	 son	 no	 bloqueantes.	
Sin	 embargo	 los	 script	 dentro	 de	 la	
página	importada	se	ejecutan	en	orden	
Regla	de	importación	3.	
Las	 importaciones	 desde	 una	 misma	
URL	son	procesadas	solo	una	vez	con	lo	
que	sus	script	sólo	se	ejecutan	una	vez
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.veler.reyes@gmail.com	
3	Aplicaciones	Web	
Basadas	en	
Componentes	
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
§  Coordinación	de	Componentes	Web	
§  Modelo	de	Localización	entre	Componentes	
§  Modelos	de	Comunicación	entre	Componentes	
§  Modelos	de	Coordinación	entre	Componentes	
§  Ejemplos
@javiervelezreye	39		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
I.	Introducción	
	 No	debemos	olvidar	que	nuestro	úl2mo	obje2vo	cuando	construimos	componentes	Web	es	
elaborar	sistemas	funcionales	complejos	que	puedan	operar	sobre	la	Web	como	plataforma.	
Para	 hacer	 frente	 este	 problema	 es	 necesario	 poner	 foco	 de	 atención	 en	 la	 relación	 de	
coordinación	 inherente	 que	 debe	 establecerse	 entre	 los	 servicios	 para	 dar	 lugar	 a	
componentes	que	ofrezcan	servicios	de	mayor	valor.	
	
El	 diseño	 orientado	 a	 componentes	 de	 esos	 sistemas	 ofrece	
grandes	 ventajas	 en	 relación	 a	 los	 principios	 fundacionales	
clásicos	 de	 reuElización,	 modularidad,	 carácter	 abierto,	
susEtución,	segregación	por	roles,	etc.		
Herencia	de	Capacidades	
Sistema	Orientado	a	Componentes	
convocatoria
anexos
tareas
El	poder	de	la	relación	
Cada	componente	ofrece	de	forma	aislada	un	servicio	
de	 valor	 al	 usuario.	 La	 composición	 coordinada	 de	
estos	componentes	ofrece	un	servicio	de	mayor	nivel.
@javiervelezreye	40		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
I.	Introducción	
	
Localización	
Coordinación	
Comunicación	
Implícita
Explícita
Indirecta
Directa
En	 relación	 a	 los	 procesos	 de	 coordinación	 necesarios	 para	 construir	 aplica2vos	 opera2vos	
sobre	la	Web	basados	en	componentes	es	necesario	prestar	atención	a	tres	ejes	dimensionales	
que	se	dibujan	como	cues2ones	independientes	que	hay	que	resolver.	Estos	ejes	caracterizan	
las	propiedades	de	lo	que	daremos	en	llamar	espacios	de	coordinación	entre	componentes.	
Espacios	de	Coordinación	
A	
C	 B	
Espacio	de	Coordinación	
Un	espacio	de	coordinación	es	un	ámbito	
que	 da	 soporte	 a	 la	 interacción	 entre	
componentes	 para	 ofrecer	 servicios	 de	
mayor	nivel
@javiervelezreye	41		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
II.	Modelos	de	Localización	entre	Componentes	Web	
	
Localización	Explícita	
Cada	 componente	 recibe	 una	 referencia	
explícita	 nominal	 de	 los	 componentes	 con	 los	
que	 Eene	 que	 establecer	 un	 ejercicio	 de	
coordinación	
Localización	Implícita	
Cada	 componente	 es	 responsable	 de	 localizar	
(por	 rol)	 dentro	 del	 entorno	 a	 los	 demás	
componentes	 con	 los	 que	 Eene	 que	 establecer	
un	ejercicio	de	coordinación	
A	
B	
Inyección
explícita
C	
A	
E	
D	
B	
A	
Localización
por búsqueda
de roles
El	modelo	de	localización	está	relacionado	con	la	selección	de	los	mecanismos	adecuados	para	
el	establecimiento	efec2vo	de	conexiones	semán2cas	o	funcionales	entre	componentes	que	
deben	 mantenerse	 en	 coordinación	 para	 ofrecer	 un	 servicio	 de	 valor	 añadido	 al	 contexto	
donde	habitan.
@javiervelezreye	42		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
III.	Modelos	de	Comunicación	entre	Componentes	Web	
	
Comunicación	Directa	
En	la	comunicación	directa	los	componentes	se	
relacionan	1:1	a	través	de	la	invocación	directa	
de	métodos	de	negocio	de	acuerdo	a	esquemas	
One-Way	o	Request-Response	
Comunicación	Indirecta	
En	 la	 comunicación	 indirecta,	 la	 relación	 entre	
componentes	 se	 produce	 por	 eventos,	
jpicamente	a	través	de	un	mediador	que	puede	
intervenir	discrecionalmente	en	el	proceso	
A	 B	 A	
Comunicación
desacoplada
indirecta
A	 B	
Request-Response
One-Way
B	
C	D	
M	
Por	otro	lado,	es	preciso	determinar	el	modelo	de	comunicación	que	se	establecerá	entre	los	
componentes	 implicados	 en	 una	 coordinación.	 A	 este	 respecto,	 podemos	 dis2nguir	 entre	
esquemas	de	comunicación	directa,	o	esquemas	de	comunicación	indirecta,	que	se	llevan	a	
cabo	a	través	de	un	tercer	componente	como	intermediario.
@javiervelezreye	43		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
IV.	Modelos	Coordinación	de	Componentes	Web	
	
Coordinación	Coreográfica	
La	 coordinación	 coreográfica	 responde	 a	
esquemas	 de	 parEcipación	 distribuida	 donde	
cada	componente	es	responsable	de	reaccionar	
de	manera	autónoma	de	acuerdo	a	un	consenso	
preestablecido	
Coordinación	Orquestal	
En	los	mecanismos	por	orquestación	la	lógica	de	
coordinación	 es	 ejecutada	 por	 un	 componente	
central	que	dispone	de	un	script	que	detalla	el	
proceso	coordinaEvo	que	es	necesario	efectuar	
entre	los	componentes	parEcipantes	
A	
Coordinación
distribuida
C	B	
O	A	
B	
C	
Coordinación
centralizada
Asimismo,	necesitamos	establecer	los	mecanismos	de	coordinación	que	serán	aplicados	entre	
los	 componentes	 implicados	 en	 aras	 a	 ofrecer	 servicios	 de	 valor	 añadido.	 En	 términos	
generales,	 es	 posible	 establecer	 dos	 grandes	 familias	 de	 esquemas	 coordina2vos,	 los	
coreográficos	y	los	de	orquestación	en	función	de	su	carácter	distribuido	o	centralizado.
@javiervelezreye	44		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
V.	Ejemplos	
	
Localización.	Explícita.	[Despliegue	Explícito	de	Variantes	según	parámetro]	
Comunicación.	Indirecta	Local.	[Arquitectura	de	Eventos	en	Bus]	
Coordinación.	Coreograpa.	[Desacoplamiento	nominal	por	eventos]	
Ejemplo	I.	Coordinación	de	Video	y	Transparencias	en	Local	
Parámetros de
configuración
wc-speech	(1)	
wc-bus	
<Timeline <zoom >next >previous >go
>zoom-in >zoom-out
zoom-in,
zoom-out,
go go
zoom-in,
zoom-out
wc-slides	wc-video	
wc-speech
@javiervelezreye	45		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
V.	Ejemplos	
	
Localización.	Explícita.	[Despliegue	Explícito	de	Variantes	según	parámetro]	
Comunicación.	Indirecta	Remota.	[Arquitectura	de	Eventos	en	Bus]	
Coordinación.	Coreograpa.	[Desacoplamiento	nominal	por	eventos]	
Ejemplo	II.	Coordinación	de	Video	y	Transparencias	en	Remoto	
wc-speech	(2)	
wc-bus	
<Timeline <zoom >next >previous >go
>zoom-in >zoom-out
zoom-in,
zoom-out,
go go
zoom-in,
zoom-out
wc-slides	wc-video	
wc-speech	
wc-bus	
wc-bus	
<Timeline <zoom >next >previous >go
>zoom-in >zoom-out
zoom-in,
zoom-out,
go go
zoom-in,
zoom-out
wc-slides	wc-video	
wc-speech	
video.# video.#
IN	 IN	
OUT
@javiervelezreye	46		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
V.	Ejemplos	
	
Localización.	Explícita.	[Despliegue	Explícito	de	Variantes	según	parámetro]	
Comunicación.	Indirecta	Remota.	[Arquitectura	de	Eventos	en	Bus]	
Coordinación.	Coreograpa.	[Desacoplamiento	nominal	por	eventos]	
Ejemplo	III.	Coordinación	de	Video	y	Transparencias	2	a	2	Cruzadas	
wc-speech	(2+2)	
video.#
wc-bus	
OUT	
wc-speech	
wc-speech	
wc-speech	
wc-speech	
ch#1
ch#2
video.#
video.#
video.#
@javiervelezreye	47		
Aplicaciones	Web	Basadas	en	Componentes	
Componentes	Web	y	El	Framework	Polymer	
V.	Ejemplos	
	
Localización.	Explícita.	[Inyección	explícita	de	componentes	controlados]	
Comunicación.	Directa	Local.	[Arquitectura	de	Eventos	en	Bus]	
Coordinación.	Orquestación.	[Centralización	de	la	lógica	de	coordinación]	
Ejemplo	IV.	Coordinación	de	Videos	en	Round	Robin	
wc-speech	(3)	
wc-video	A	
wc-controller	
wc-video	B	 wc-video	C	
Parámetros de
configuración
[A, B, C]
@javiervelezreye	48		
Preguntas	
Programación	Asíncrona	en	Node	JS	
Modelo	de	
Roles	
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
La	Plataforma	Web	
Orientada	a	Componentes	
Aplicaciones	basadas	
en	Componentes	Web
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
Componentes	Web	y	El	Framework	Polymer	
Programación	Orientada	a	
Componentes	Web	
Junio	2014

Más contenido relacionado

La actualidad más candente

Arquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes WebArquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes Web
Javier Vélez Reyes
 
El futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo WebEl futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo Web
Javier Vélez Reyes
 
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosArquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Javier Vélez Reyes
 
Estrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de DatosEstrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de Datos
Javier Vélez Reyes
 
Arquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la ExperienciaArquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la Experiencia
Javier Vélez Reyes
 
Modelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de ServiciosModelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de Servicios
Javier Vélez Reyes
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
David Arango
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
Juan Carlos Prieto
 
Lenguaje unificado
Lenguaje unificadoLenguaje unificado
Lenguaje unificado
universidad jose antonio paez
 
Planificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phonePlanificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phone
Sorey García
 
Metodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelosMetodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelos
Jose R. Hilera
 

La actualidad más candente (11)

Arquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes WebArquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes Web
 
El futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo WebEl futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo Web
 
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosArquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a Datos
 
Estrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de DatosEstrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de Datos
 
Arquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la ExperienciaArquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la Experiencia
 
Modelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de ServiciosModelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de Servicios
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
Lenguaje unificado
Lenguaje unificadoLenguaje unificado
Lenguaje unificado
 
Planificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phonePlanificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phone
 
Metodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelosMetodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelos
 

Destacado

Programación Asíncrona en Node JS
Programación Asíncrona en Node JSProgramación Asíncrona en Node JS
Programación Asíncrona en Node JS
Javier Vélez Reyes
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
Javier Vélez Reyes
 
Procesadores de Lenguajes I
Procesadores de Lenguajes IProcesadores de Lenguajes I
Procesadores de Lenguajes I
Javier Vélez Reyes
 
Procesadores de Lenguajes II
Procesadores de Lenguajes IIProcesadores de Lenguajes II
Procesadores de Lenguajes II
Javier Vélez Reyes
 
componentes web
componentes webcomponentes web
componentes web
moppy
 
POO: Clases
POO: ClasesPOO: Clases
POO: Clases
Actimel
 
POO: Herencia, Abstraccion y Polimorfismo
POO: Herencia, Abstraccion y PolimorfismoPOO: Herencia, Abstraccion y Polimorfismo
POO: Herencia, Abstraccion y Polimorfismo
Actimel
 
avanttic Webinar Oracle SOA 11g
avanttic Webinar Oracle SOA 11gavanttic Webinar Oracle SOA 11g
avanttic Webinar Oracle SOA 11g
avanttic Consultoría Tecnológica
 
avanttic Webinar Hoja de Ruta SOA
avanttic Webinar Hoja de Ruta SOA avanttic Webinar Hoja de Ruta SOA
avanttic Webinar Hoja de Ruta SOA
avanttic Consultoría Tecnológica
 
Ebe2013: productividad conherramientas en la nube
Ebe2013: productividad conherramientas en la nubeEbe2013: productividad conherramientas en la nube
Ebe2013: productividad conherramientas en la nube
Juan Carlos Rubio Pineda
 
4/9 Curso JEE5, Soa, Web Services, ESB y XML
4/9 Curso JEE5, Soa, Web Services, ESB y XML4/9 Curso JEE5, Soa, Web Services, ESB y XML
4/9 Curso JEE5, Soa, Web Services, ESB y XML
Juan Carlos Rubio Pineda
 
1/9 Curso JEE5, Soa, Web Services, ESB y XML
1/9 Curso JEE5, Soa, Web Services, ESB y XML1/9 Curso JEE5, Soa, Web Services, ESB y XML
1/9 Curso JEE5, Soa, Web Services, ESB y XML
Juan Carlos Rubio Pineda
 
Introduccion Servicios Web
Introduccion Servicios WebIntroduccion Servicios Web
Introduccion Servicios Web
Ricardo Alonso Hurtado Mosquera
 
8/9 Curso JEE5, Soa, Web Services, ESB y XML
8/9 Curso JEE5, Soa, Web Services, ESB y XML8/9 Curso JEE5, Soa, Web Services, ESB y XML
8/9 Curso JEE5, Soa, Web Services, ESB y XML
Juan Carlos Rubio Pineda
 
Servicios web xml
Servicios web xmlServicios web xml
Servicios web xml
Ingeniería Nica
 
SOA y Web Services
SOA y Web ServicesSOA y Web Services
SOA y Web Services
Jose Gutierrez
 
7/9 Curso JEE5, Soa, Web Services, ESB y XML
7/9 Curso JEE5, Soa, Web Services, ESB y XML7/9 Curso JEE5, Soa, Web Services, ESB y XML
7/9 Curso JEE5, Soa, Web Services, ESB y XML
Juan Carlos Rubio Pineda
 
3/9 soa y web services
3/9 soa y web services3/9 soa y web services
3/9 soa y web services
Juan Carlos Rubio Pineda
 
144 Rest Web Services
144 Rest Web Services144 Rest Web Services
144 Rest Web Services
GeneXus
 
Web services
Web servicesWeb services
Web services
Yesith Valencia
 

Destacado (20)

Programación Asíncrona en Node JS
Programación Asíncrona en Node JSProgramación Asíncrona en Node JS
Programación Asíncrona en Node JS
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
 
Procesadores de Lenguajes I
Procesadores de Lenguajes IProcesadores de Lenguajes I
Procesadores de Lenguajes I
 
Procesadores de Lenguajes II
Procesadores de Lenguajes IIProcesadores de Lenguajes II
Procesadores de Lenguajes II
 
componentes web
componentes webcomponentes web
componentes web
 
POO: Clases
POO: ClasesPOO: Clases
POO: Clases
 
POO: Herencia, Abstraccion y Polimorfismo
POO: Herencia, Abstraccion y PolimorfismoPOO: Herencia, Abstraccion y Polimorfismo
POO: Herencia, Abstraccion y Polimorfismo
 
avanttic Webinar Oracle SOA 11g
avanttic Webinar Oracle SOA 11gavanttic Webinar Oracle SOA 11g
avanttic Webinar Oracle SOA 11g
 
avanttic Webinar Hoja de Ruta SOA
avanttic Webinar Hoja de Ruta SOA avanttic Webinar Hoja de Ruta SOA
avanttic Webinar Hoja de Ruta SOA
 
Ebe2013: productividad conherramientas en la nube
Ebe2013: productividad conherramientas en la nubeEbe2013: productividad conherramientas en la nube
Ebe2013: productividad conherramientas en la nube
 
4/9 Curso JEE5, Soa, Web Services, ESB y XML
4/9 Curso JEE5, Soa, Web Services, ESB y XML4/9 Curso JEE5, Soa, Web Services, ESB y XML
4/9 Curso JEE5, Soa, Web Services, ESB y XML
 
1/9 Curso JEE5, Soa, Web Services, ESB y XML
1/9 Curso JEE5, Soa, Web Services, ESB y XML1/9 Curso JEE5, Soa, Web Services, ESB y XML
1/9 Curso JEE5, Soa, Web Services, ESB y XML
 
Introduccion Servicios Web
Introduccion Servicios WebIntroduccion Servicios Web
Introduccion Servicios Web
 
8/9 Curso JEE5, Soa, Web Services, ESB y XML
8/9 Curso JEE5, Soa, Web Services, ESB y XML8/9 Curso JEE5, Soa, Web Services, ESB y XML
8/9 Curso JEE5, Soa, Web Services, ESB y XML
 
Servicios web xml
Servicios web xmlServicios web xml
Servicios web xml
 
SOA y Web Services
SOA y Web ServicesSOA y Web Services
SOA y Web Services
 
7/9 Curso JEE5, Soa, Web Services, ESB y XML
7/9 Curso JEE5, Soa, Web Services, ESB y XML7/9 Curso JEE5, Soa, Web Services, ESB y XML
7/9 Curso JEE5, Soa, Web Services, ESB y XML
 
3/9 soa y web services
3/9 soa y web services3/9 soa y web services
3/9 soa y web services
 
144 Rest Web Services
144 Rest Web Services144 Rest Web Services
144 Rest Web Services
 
Web services
Web servicesWeb services
Web services
 

Similar a Componentes Web y El Framework Polymer

Extender Jquery para crear componentes web personalizados
Extender Jquery  para crear componentes web personalizadosExtender Jquery  para crear componentes web personalizados
Extender Jquery para crear componentes web personalizados
Héctor Curbelo Barrios
 
demoDAAW.ppt
demoDAAW.pptdemoDAAW.ppt
demoDAAW.ppt
ssuser73f459
 
Aplicacion mvc entity_framework_factura
Aplicacion mvc entity_framework_facturaAplicacion mvc entity_framework_factura
Aplicacion mvc entity_framework_factura
Edgar Jonathan Villegas
 
Presentacion portlets tools
Presentacion portlets toolsPresentacion portlets tools
Presentacion portlets tools
guest696b01
 
Presentacion portlets-tools
Presentacion portlets-toolsPresentacion portlets-tools
Presentacion portlets-tools
guest696b01
 
Presentacion portlets tools
Presentacion portlets toolsPresentacion portlets tools
Presentacion portlets tools
David Calvo
 
Aplicacion mvc entity_framework_login_membership
Aplicacion mvc entity_framework_login_membershipAplicacion mvc entity_framework_login_membership
Aplicacion mvc entity_framework_login_membership
Jose B Flores P
 
S1 ds2
S1 ds2S1 ds2
Spring framework
Spring frameworkSpring framework
Spring framework
Isabel Samaniego
 
Java Day Santiago RD 2015
Java Day Santiago RD 2015Java Day Santiago RD 2015
Java Day Santiago RD 2015
Eudris Cabrera
 
Presentación jornadas tic santiago chile 2010
Presentación jornadas tic santiago chile 2010Presentación jornadas tic santiago chile 2010
Presentación jornadas tic santiago chile 2010
Selin Carrasco
 
Presentación jornadas tic santiago chile 2010
Presentación jornadas tic santiago chile 2010Presentación jornadas tic santiago chile 2010
Presentación jornadas tic santiago chile 2010
Selin Carrasco
 
Exp. 8: “Potenciar el imaginario de estudiantes de ingeniería informática med...
Exp. 8: “Potenciar el imaginario de estudiantes de ingeniería informática med...Exp. 8: “Potenciar el imaginario de estudiantes de ingeniería informática med...
Exp. 8: “Potenciar el imaginario de estudiantes de ingeniería informática med...
Jornadas TIC
 
Documentacion ihm3
Documentacion ihm3Documentacion ihm3
Documentacion ihm3
coorie100
 
Presentación2
Presentación2Presentación2
Presentación2
andre_gamez
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías Web
Miguel Angel Macias
 
Web semántica y visiones de la web 3.0
Web semántica y visiones de la web 3.0 Web semántica y visiones de la web 3.0
Web semántica y visiones de la web 3.0
Miguel R. Artacho
 
Angular js
Angular jsAngular js
Angular js
Gabriel Chertok
 
Web Semántica
Web SemánticaWeb Semántica
Web Semántica
SemanticWebBuilder
 
CV_Pablo Marengo
CV_Pablo MarengoCV_Pablo Marengo
CV_Pablo Marengo
Pablo Marengo
 

Similar a Componentes Web y El Framework Polymer (20)

Extender Jquery para crear componentes web personalizados
Extender Jquery  para crear componentes web personalizadosExtender Jquery  para crear componentes web personalizados
Extender Jquery para crear componentes web personalizados
 
demoDAAW.ppt
demoDAAW.pptdemoDAAW.ppt
demoDAAW.ppt
 
Aplicacion mvc entity_framework_factura
Aplicacion mvc entity_framework_facturaAplicacion mvc entity_framework_factura
Aplicacion mvc entity_framework_factura
 
Presentacion portlets tools
Presentacion portlets toolsPresentacion portlets tools
Presentacion portlets tools
 
Presentacion portlets-tools
Presentacion portlets-toolsPresentacion portlets-tools
Presentacion portlets-tools
 
Presentacion portlets tools
Presentacion portlets toolsPresentacion portlets tools
Presentacion portlets tools
 
Aplicacion mvc entity_framework_login_membership
Aplicacion mvc entity_framework_login_membershipAplicacion mvc entity_framework_login_membership
Aplicacion mvc entity_framework_login_membership
 
S1 ds2
S1 ds2S1 ds2
S1 ds2
 
Spring framework
Spring frameworkSpring framework
Spring framework
 
Java Day Santiago RD 2015
Java Day Santiago RD 2015Java Day Santiago RD 2015
Java Day Santiago RD 2015
 
Presentación jornadas tic santiago chile 2010
Presentación jornadas tic santiago chile 2010Presentación jornadas tic santiago chile 2010
Presentación jornadas tic santiago chile 2010
 
Presentación jornadas tic santiago chile 2010
Presentación jornadas tic santiago chile 2010Presentación jornadas tic santiago chile 2010
Presentación jornadas tic santiago chile 2010
 
Exp. 8: “Potenciar el imaginario de estudiantes de ingeniería informática med...
Exp. 8: “Potenciar el imaginario de estudiantes de ingeniería informática med...Exp. 8: “Potenciar el imaginario de estudiantes de ingeniería informática med...
Exp. 8: “Potenciar el imaginario de estudiantes de ingeniería informática med...
 
Documentacion ihm3
Documentacion ihm3Documentacion ihm3
Documentacion ihm3
 
Presentación2
Presentación2Presentación2
Presentación2
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías Web
 
Web semántica y visiones de la web 3.0
Web semántica y visiones de la web 3.0 Web semántica y visiones de la web 3.0
Web semántica y visiones de la web 3.0
 
Angular js
Angular jsAngular js
Angular js
 
Web Semántica
Web SemánticaWeb Semántica
Web Semántica
 
CV_Pablo Marengo
CV_Pablo MarengoCV_Pablo Marengo
CV_Pablo Marengo
 

Último

software para ver la descripcion de nuestra computadora
software para ver la descripcion de nuestra computadorasoftware para ver la descripcion de nuestra computadora
software para ver la descripcion de nuestra computadora
ChristiamGiraldoAsce
 
Trabajo programacion primer semestre Telecomunicaciones
Trabajo programacion primer semestre TelecomunicacionesTrabajo programacion primer semestre Telecomunicaciones
Trabajo programacion primer semestre Telecomunicaciones
paulbosq
 
Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentac...
Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentac...Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentac...
Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentac...
Javier Martinez Seco
 
Aplicación de las sentencias de control en telecomunicaciones
Aplicación de las sentencias de control en telecomunicacionesAplicación de las sentencias de control en telecomunicaciones
Aplicación de las sentencias de control en telecomunicaciones
ambuludimateo2
 
PLUGIN (Mary Cielo Huañec Paz) .pdf
PLUGIN (Mary Cielo Huañec Paz)      .pdfPLUGIN (Mary Cielo Huañec Paz)      .pdf
PLUGIN (Mary Cielo Huañec Paz) .pdf
MaryCieloHuaecPaz
 
APLICACIONES EN INTERNET-GOOGLE.20240pdf
APLICACIONES EN INTERNET-GOOGLE.20240pdfAPLICACIONES EN INTERNET-GOOGLE.20240pdf
APLICACIONES EN INTERNET-GOOGLE.20240pdf
jordanovillacorta09
 
DuckDuckGo (Motor de Busqueda) - JRM - APSTI I A
DuckDuckGo (Motor de Busqueda) -  JRM - APSTI I ADuckDuckGo (Motor de Busqueda) -  JRM - APSTI I A
DuckDuckGo (Motor de Busqueda) - JRM - APSTI I A
DarnotOcxalFlorianoP
 
IF y SWITCH: Claves para una Lógica de Programación
IF y SWITCH: Claves para una Lógica de ProgramaciónIF y SWITCH: Claves para una Lógica de Programación
IF y SWITCH: Claves para una Lógica de Programación
bvaldivieso014
 

Último (8)

software para ver la descripcion de nuestra computadora
software para ver la descripcion de nuestra computadorasoftware para ver la descripcion de nuestra computadora
software para ver la descripcion de nuestra computadora
 
Trabajo programacion primer semestre Telecomunicaciones
Trabajo programacion primer semestre TelecomunicacionesTrabajo programacion primer semestre Telecomunicaciones
Trabajo programacion primer semestre Telecomunicaciones
 
Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentac...
Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentac...Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentac...
Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentac...
 
Aplicación de las sentencias de control en telecomunicaciones
Aplicación de las sentencias de control en telecomunicacionesAplicación de las sentencias de control en telecomunicaciones
Aplicación de las sentencias de control en telecomunicaciones
 
PLUGIN (Mary Cielo Huañec Paz) .pdf
PLUGIN (Mary Cielo Huañec Paz)      .pdfPLUGIN (Mary Cielo Huañec Paz)      .pdf
PLUGIN (Mary Cielo Huañec Paz) .pdf
 
APLICACIONES EN INTERNET-GOOGLE.20240pdf
APLICACIONES EN INTERNET-GOOGLE.20240pdfAPLICACIONES EN INTERNET-GOOGLE.20240pdf
APLICACIONES EN INTERNET-GOOGLE.20240pdf
 
DuckDuckGo (Motor de Busqueda) - JRM - APSTI I A
DuckDuckGo (Motor de Busqueda) -  JRM - APSTI I ADuckDuckGo (Motor de Busqueda) -  JRM - APSTI I A
DuckDuckGo (Motor de Busqueda) - JRM - APSTI I A
 
IF y SWITCH: Claves para una Lógica de Programación
IF y SWITCH: Claves para una Lógica de ProgramaciónIF y SWITCH: Claves para una Lógica de Programación
IF y SWITCH: Claves para una Lógica de Programación
 

Componentes Web y El Framework Polymer