Cloud Web Components


Os presentamos algunas ideas 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.

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

<circle-loader>
</circle-loader>

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.

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

Ver Site Notifier en acción y como utilizarlo

Background Video

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

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

Ver Background Video en acción y como utilizarlo


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.

<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>

Ver Device View en acción y como utilizarlo

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.

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

Ver Nota Adhesiva en acción y como utilizarlo


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).

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

Ver Shadow Wrapper en acción y como utilizarlo

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).

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

Ver Banner Flotante en acción y como utilizarlo