Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
WPIECE. Cloud maintenance.

Cloud Web Components


Here are some examples of how to streamline your developments thanks to wpiece. Using web components you can modularize the frontend of your projects. And with wpiece store them in the cloud so you do not have to deploy your main application every time you have to change them.

Thanks to this you can also reuse those same components in other projects. Let's call them Cloud Web Components.

See the complete list

Circle Loader

With this Cloud Web Component you no longer need to create load icons for each website. Set the size, color and effect of the icon for any website where you need it.

See Circle Loader in action and how to use it

<circle-loader>
</circle-loader>

Site Notifier

Add a lightweight notification system to your website. With it you can present messages and warnings to your users when you need.

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

See Site Notifier in action and how to use it

Background Video

Include a video with autoplay as your website background to have impactful landing pages.

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

See Background Video in action and how to use it


Device View

Control the elements of your web to decide which to present to the user based on the device and the width of the screen from which it accesses.

<device-view type="phone" min-width="300" max-width="900">
	Content that will be displayed if the device is a mobile
	with screen width between 300 and 900 pixels.
</device-view>

See Device View in action and how to use it

Sticky Note

Present messages to your users with the appearance of sticky notes. You can configure their position, their color or how much time should be visible before hiding it.

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

See Sticky Note in action and how to use it


Shadow Wrapper

Allows any element to be inserted as Shadow DOM on your page. In this way it remains encapsulated. Use it and adapt it to different websites by modifying their appearance (css) and actions (javascript).

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

See Shadow Wrapper in action and how to use it

Floating Banner

A simple way to make any web element always visible to the user. We can indicate where we want it (top/bottom and left/right).

<floating-banner>
	banner content (html, text,...)
</floating-banner>

See Floating Banner in action and how to use it