usage-counts/src/app/home/home.component.html

165 lines
7.4 KiB
HTML

<ng-template #first let-small="small">
<div class="uk-container uk-section first">
<div class="uk-grid uk-flex uk-flex-top" uk-grid>
<div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-bottom">
<img src="assets/usage-statistics-assets/home/1-static.svg"/>
</div>
<div class="uk-width-3-5@m">
<h1><span class="portal-color uk-text-bold">UsageCounts Service</span><br>
by OpenAIRE</h1>
<div [class.uk-margin-xlarge-right]="!small">
<div class="uk-margin-medium-bottom">
UsageCounts service collects usage data from Open Science content providers repositories, journals, and
other scientific data sources. Then, it aggregates them, delivering standardized activity reports about
research usage and uptake. It complements existing citation mechanisms and assists institutional repository
managers, research communities, research organizations, funders, and policy makers to track and evaluate
research from an early stage.
</div>
<a routerLink="/about" class="uk-button uk-button-primary">Learn More</a>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #second let-small="small">
<div class="second uk-container uk-container-large">
<div class="uk-container">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-flex uk-flex-last@m uk-width-expand">
<h2 class="uk-text-bold portal-color uk-text-right@m">Why OpenAIRE UsageCounts?</h2>
</div>
<div class="uk-width-1-1 uk-width-2-5@m">
<p>
OpenAIRE <span class="portal-color uk-text-bold">UsageCounts applies</span> the Open Metrics framework which
standardizes the sharing and exchange of usage
data and develops trusted metrics to promote open science.
</p>
<p>
<span class="portal-color uk-text-bold">UsageCounts is valuable for</span> various stakeholders that either
provide or consume open science data metrics.
The value for both user groups, briefly are;
</p>
</div>
</div>
<div [class.uk-padding]="!small" class="uk-grid uk-child-width-1-2@m uk-margin-top" uk-grid uk-height-match="target: li">
<div>
<h4 class="uk-text-bold">Providers</h4>
<ul class="light-blue-triangle uk-margin-top">
<li>Accurate and objective performance measures monitoring of repository content.</li>
<li>Evidence based analytical metrics of views and downloads, aggregated from all over the world.
</li>
<li>Activity and trends of open science topics.</li>
</ul>
</div>
<div>
<h4 class="uk-text-bold">Consumers</h4>
<ul class="light-blue-triangle uk-margin-top">
<li>Overview of research outcomes per country or domain.</li>
<li>Trustable, accurate statistics of open science research.</li>
<li>Evaluate the result of invested funds, policies, measures and view impact.</li>
</ul>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #third>
<div class="uk-container uk-container-large third">
<div class="uk-grid uk-child-width-1-3@m" uk-grid>
<div class="uk-flex-last@m" >
<div class="third-column">
<h2 class="portal-color uk-text-bold">Who and why is it for?</h2>
<div>
UsageCounts <span class="portal-color uk-text-bold">offers</span> standardized and comparable reports that measure the uptake of research outcomes.
</div>
</div>
</div>
<div>
<div class="first-column">
<h5 class="uk-text-primary">For Open Science repository managers and Publishers</h5>
<div class="uk-margin-top">
Perform the prerequisites - register your content in OpenAIRE
<a href="http://provide.openaire.eu" target="_blank">PROVIDE</a>,
then share usage activity from your repository - and receive standardized statistics from aggregated usage
data from sources around the world.
</div>
<div class="uk-margin-medium-top uk-text-center learn-more">
<a class="uk-button uk-button-primary" routerLink="/resources">Learn More</a>
</div>
</div>
</div>
<div>
<div class="second-column">
<h5 class="uk-text-primary">For Research performing & funding organizations, research infrastructures and
policy makers</h5>
<div class="uk-margin-top">
Retrieve easily, fast and dynamically view research uptake, identify science trends based on user activity,
examine the engagement, and evolution or research popularity.
</div>
<div class="uk-margin-medium-top uk-text-center">
<a class="uk-button uk-button-primary" routerLink="/resources" fragment="apis">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #fourth>
<div class="uk-container">
<div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-flex-center" uk-grid>
<div class="uk-width-expand@m uk-flex uk-flex-right uk-flex-last@m">
<div class="features uk-width-4-5 uk-margin-auto">
<h1 class="uk-text-bold portal-color">Features</h1>
</div>
</div>
<div class="uk-width-2-3@m">
<ul class="light-blue-circle large">
<li>Provides standards for usage data exchange
(<a href="https://openaire.github.io/usage-statistics-guidelines/" target="_blank">OpenAIRE Usage Statistics Guidelines
<span class="custom-icon custom-external"></span></a>)
</li>
<li>Complies to <a href="https://www.projectcounter.org/" target="_blank">COUNTER <span
class="custom-icon custom-external"></span></a> Code of Practice for reliable and comparable reports
</li>
<li>Follows GDPR for trusted</li>
<li>Offers global coverage with partners in</li>
<li>Supports analysis via advanced visualizations</li>
<li>Exports different types of reports via standard APIs (Sushi-Lite)</li>
</ul>
</div>
</div>
</div>
</ng-template>
<fp-slider #slider class="uk-visible@l" [hasFooter]="true" [initSlide]="initSlide"
footerClass="footer" topBar="top-bar-background" logoURL="/assets/common-assets/logo-small-usage-counts.png">
<slide>
<ng-container *ngTemplateOutlet="first; context: {small: false}"></ng-container>
</slide>
<slide>
<ng-container *ngTemplateOutlet="second"></ng-container>
</slide>
<slide>
<ng-container *ngTemplateOutlet="third"></ng-container>
</slide>
<slide>
<ng-container *ngTemplateOutlet="fourth"></ng-container>
</slide>
</fp-slider>
<div class="uk-hidden@l">
<div class="uk-section uk-margin-left uk-margin-right">
<ng-container *ngTemplateOutlet="first; context: {small: true}"></ng-container>
</div>
<hr>
<div class="uk-section uk-margin-left uk-margin-right">
<ng-container *ngTemplateOutlet="second; context: {small: true}"></ng-container>
</div>
<hr>
<div class="uk-section">
<ng-container *ngTemplateOutlet="third"></ng-container>
</div>
<hr>
<div class="uk-section uk-margin-left uk-margin-right">
<ng-container *ngTemplateOutlet="fourth"></ng-container>
</div>
</div>