Ejemplo de Web Components en la nube


Os presentamos algunos ejemplos de como agilizar vuestros desarrollos gracias a wpiece. Utilizando web components podréis modularizar el frontend de vuestros proyectos. Y con wpiece almacenarlos en la nube para no tener que desplegar vuestra aplicación principal cada vez que tengáis que cambiarlos.

Gracias a esto podréis además reutilizar esos mismos componentes en otros proyectos. Llamémosles Cloud Web Components.

<ascii-image
	src="http://your.image.com/name.jpg">
</ascii-image>

Ascii Image

Os traemos algo de arte (Ascii Art) con este web component que transformará cualquier imagen en caracteres. Configura el tamaño, el color y el color de fondo para realizar hermosas creaciones.

Ver Ascii Image en acción y como utilizarlo


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

Contact Card

Un ejemplo de como encapsular en un custom element estructuras html complejas para hacer más legible, mantenible y reutilizable nuestro código html. Sobre todo cuando estas estructuras se usan de forma repetitiva.

Ver Contact Card en acción y como utilizarlo


<circle-loader>
</circle-loader>

Circle Loader

Con este Cloud Web Component ya no necesitas crear iconos de carga para cada sitio web. Configura el tamaño, color y efecto del icono para cualquier web donde lo necesites.

Ver Circle Loader en acción y como utilizarlo


<site-notifier
	href="http://url.notification.list">
</site-notifier>

Site Notifier

Añade un sistema ligero de notificaciones a tu sitio web. Con el podrás presentar mensajes y avisos a tus usuarios cuando lo necesites.

Ver Site Notifier en acción y como utilizarlo


<background-video>
	<source src="video.mp4" type="mp4">
</background-video>

Background Video

Incluye un video autoreproducido como fondo de tu sitio web para tener páginas de entrada impactantes.

Ver Background Video en acción y como utilizarlo


<device-view type="phone" min-width="300" max-width="900">
	contenido que se visualizará si el dispositivo es un móvil
	con ancho de pantalla entre 300 y 900 píxeles.
</device-view>

Device View

Controla los elementos de tu web para decidir cuales presentar al usuario en base al dispositivo y el ancho de pantalla desde el que accede.

Ver Device View en acción y como utilizarlo


<sticky-note
	data-title="title #1" data-text="Description #1" data-link="http://www.foo.com">
</sticky-note>

Nota Adhesiva

Presenta avisos a tus usuario con el formato de notas adhesivas. Podrás configurar su posición, su color o cuanto tiempo debe ser visible antes de ocultarla.

Ver Nota Adhesiva en acción y como utilizarlo


<shadow-wrapper
	url-content="http://www.foo.com/component/your-html-component.html">
</shadow-wrapper>

Shadow Wrapper

Permite que cualquier elemento sea insertado como Shadow DOM en tu página. De esta forma queda encapsulado. Úsalo y adaptalo a diferentes sitios web modificando su apariencia (css) y comportamiento (javascript).

Ver Shadow Wrapper en acción y como utilizarlo


<floating-banner>
	contenido (html, texto,...) de tu banner
</floating-banner>

Banner Flotante

Una forma sencilla de hacer que cualquier elemento web esté siempre visible al usuario. Podemos indicar donde lo queremos (arriba/abajo e izquierda/derecha).

Ver Banner Flotante en acción y como utilizarlo