Web Component Contact Card


Con Contact Card vamos a ver un ejemplo práctico de como encapsular en un Cloud Web Component una estructura html y utilizarla para generar elementos complejos a partir de elementos html básicos.

Pero, si el resultado final que ve el usuario es el mismo y no añadimos funcionalidad adicional a esa estructura html, ¿qué ventajas tiene utilizar un custom element?

  • Para estructuras que van a ser usadas de forma repetitiva (los elementos de diseño web como "Card" es un ejemplo claro) el html generado es mucho más legible para los desarrolladores y también más mantenible. Veamos la diferencia.
    HTML plano
    <div class="contact-card">
    	<a href="http://www.yoururl.com">
    	  <img src="your_avatar.png" alt="Your name">
    	  <div class="cccontainer">
    		<h4>
    			<b>Your name</b>
    		</h4>
    		<p>Your position</p>
    	  </div>
    	</a>
    </div>
    
    <div class="contact-card">
    	<a href="http://www.yoururl.com">
    	  <img src="your_avatar.png" alt="Your name">
    	  <div class="cccontainer">
    		<h4>
    			<b>Your name</b>
    		</h4>
    		<p>Your position</p>
    	  </div>
    	</a>
    </div>
    Custom element
    <contact-card avatar="your_avatar.png" name="Your name"
    	position="Your position" url="http://www.yoururl.com">
    </contact-card>
    
    <contact-card avatar="your_avatar.png" name="Your name"
    	position="Your position" url="http://www.yoururl.com">
    </contact-card>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  • Si necesitas modificar tu estructura HTML ¿Qué es más sencillo? ¿Modificarla una a una en todos los sitios donde la estés utilizando o solo en el custom element donde se genera? Mediante un análisis previo se pueden identificar estructuras equivalentes en cualquier aplicación web que difieran poco entre ellas (el color de texto, un elemento html,...). Si para todas ellas se genera un custom element parametrizable (colores, valores de cada elemento,..) que las abarque a todas permite encapsular y reutilizar de forma sencilla.
  • Y si alojas tu componente en la nube gracias a wpiece tu agilidad para modificarlo y reutilizarlo será mucho mayor.

Uso del componente

La url de este cloud web component es http://www.wpiece.com/p/18_41

No olvides incluir antes de la importación del componente el polyfill para web components.

Para usarlo con su configuración básica no necesitas más que incluirlo e indicar los datos de contacto.

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://www.wpiece.com/p/18_41" />
</head>

<body>
	<contact-card
		avatar="img_avatar2.png"
		name="Alvaro Morala"
		position="Rey del mundo"
		url="http://www.wpiece.com">
      	</contact-card>
</body>
</html>

Veamos un ejemplo

Tarjeta vacía

<contact-card>
</contact-card>




Tarjeta rellena

<contact-card
	avatar="img_avatar2.png"
	name="Contact name"
	position="Contact position"
	url="http://www.wpiece.com">
</contact-card>