[Trunk | Connect]:

1. Create Learn in Depth Page (learn-how/learnInDepth/learn-in-depth.component - module - routing.module).
2. Add in assets: sketch_line_arrow.svg & sketch_line_arrow_large.svg & OpenAIRE-RCD_howtos.png (used in 'learn-in-depth' page).
3. communities.component.html: Use class 'font-41' instead of style property.
4. connect-custom.css: Add classes 'cloud1-background', font-41.
5. app-routing.module.ts: Add route '/learn-in-depth' and remove duplicate old route '/about' of old html About Page.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56222 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-06-27 11:07:00 +00:00
parent 6ee80a8d0d
commit ab005b9df5
9 changed files with 308 additions and 2 deletions

View File

@ -9,9 +9,10 @@ import { OpenaireErrorPageComponent } from './error/errorPage.component';
const routes: Routes = [
{ path: '', loadChildren: './communitywrapper/communityWrapper.module#CommunityWrapperModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'about', loadChildren: './learn-how/learn-how.module#LearnHowModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'learn-in-depth', loadChildren: './learn-how/learnInDepth/learn-in-depth.module#LearnInDepthModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'contact-us', loadChildren: './contact/contact.module#ContactModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'invite', loadChildren: './utils/subscribe/invite/invite.module#InviteModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'about', loadChildren: './htmlPages/about/aboutPage.module#AboutPageModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
// { path: 'about', loadChildren: './htmlPages/about/aboutPage.module#AboutPageModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'content', loadChildren: './content/contentPage.module#ContentPageModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'organizations', loadChildren: './htmlPages/organizations/organizationsPage.module#OrganizationsPageModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'curators', loadChildren: './curators/curators.module#CuratorsModule', resolve: { envSpecific: EnvironmentSpecificResolver }},

View File

@ -64,7 +64,7 @@
</div>
<div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0" uk-grid>
<div class="uk-width-2-5@m uk-width-1-1@s">
<h1 style="font-size: 41px">A <b>Gateway</b> to the future of your <b>Community</b></h1>
<h1 class="font-41">A <b>Gateway</b> to the future of your <b>Community</b></h1>
<div class="uk-text-large">Turn Open Science into Practice. It takes your open and linked research outcomes. A service customized to your needs.</div>
</div>
<div class="uk-width-1-1 uk-inline uk-margin-large-top uk-margin-large-bottom">

View File

@ -0,0 +1,16 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {LearnInDepthComponent} from "./learn-in-depth.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: LearnInDepthComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
])
]
})
export class LearnInDepthRoutingModule { }

View File

@ -0,0 +1,228 @@
import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {PiwikService} from '../../openaireLibrary/utils/piwik/piwik.service';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
@Component({
selector: 'learn-in-depth',
template: `
<div class="image-front-topbar uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div class="cloud1-background uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
<div class="uk-container uk-container-large uk-section">
<div uk-grid>
<div class="uk-margin-large-top uk-width-3-4">
<h1 class="uk-width-3-4 font-41">Lets set up a Science Gateway for your Community <b>Together</b></h1>
<h5 class="uk-width-4-5@m uk-width-1-1@s">
<div class="uk-margin-bottom">You dont have to go alone.</div>
<div>
We work with you in <b>4 collaborative steps</b> to identify your needs, putting in practice our expertise on open science so you get the most out of OpenAIREs operational services.
</div>
</h5>
</div>
<!-- <div class="uk-position-relative banner-img-box uk-width-1-4">-->
<!-- <img src="../../assets/banner/together.png" class="uk-padding uk-position-center">-->
<!-- </div>-->
<div class="uk-margin-large-top uk-position-relative uk-width-1-4">
<div class="uk-align-center uk-position-center">
<img width="308" height="285" src="../../assets/banner/together.png">
</div>
</div>
</div>
</div>
</div>
<div style=" min-height: calc(7.89999px + 60vh);" class="uk-section uk-padding-remove" >
<div>
<div class="uk-container uk-container-large uk-section">
<ul class="uk-breadcrumb">
<li><a routerLinkActive="router-link-active" routerLink="/about">About</a></li>
<li><span>Learn in-depth</span></li>
</ul>
<div uk-grid>
<div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column">
<!-- <svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">-->
<!-- <circle cx="50" cy="50" r="50" fill="#E5E5E5"/>-->
<!-- </svg>-->
<!-- <img src="../../assets/ask-connect.svg" class="uk-align-center img-sketch">-->
<!-- <img src="../../assets/sketch_line_arrow.svg" class="uk-align-center sketch-line">-->
<img src="../../assets/about/1.png" class="uk-align-center" width="100px" height="100px">
<!-- uk-height-1-1-->
<img src="../../assets/sketch_line_arrow.svg" class="uk-align-center">
<!-- <svg class="uk-align-center" xmlns="http://www.w3.org/2000/svg" width="33.534" height="182.701" viewBox="0 0 33.534 182.701">-->
<!-- <g id="Group_755" data-name="Group 755" transform="translate(-4.701 -13.326)">-->
<!-- <g id="Group_342" data-name="Group 342" transform="translate(686.122 -100.639) rotate(90)">-->
<!-- <path id="Path_235" data-name="Path 235" d="M1783.518,676.418s45.7-15.767,85.456-2.516c20.573,6.859,63.031,6.3,95.334,0" transform="translate(-1669.227 -11.527)" fill="none" stroke="#94b2e2" stroke-width="2"/>-->
<!-- </g>-->
<!-- <path id="Path_309" data-name="Path 309" d="M6823.193,2688.6c14.274,8.08,17.506,17.843,17.506,17.843s12.12-8.416,14.544-26.394" transform="translate(-6818 -2512)" fill="none" stroke="#94b2e2" stroke-width="2"/>-->
<!-- </g>-->
<!-- </svg>-->
<!-- <img src="../../assets/sketch_line.svg" class="uk-align-center sketch-line">-->
<!-- <img src="../../assets/sketch_arrow.svg" class="uk-align-center uk-position-absolute sketch-arrow" width="auto" height="auto">-->
</div>
<div class="uk-width-expand">
<h1 class="uk-margin-small">1. Analyse your needs</h1>
<i>Identify the scope and goals. Understand open science practices within EOSC and the OpenAIRE services</i>
<p>
In this stage, you get to talk to the OpenAIRE team.
Share your expectations with us and let us give you all the details about the operational OpenAIRE services, which will be integrated into the Science Gateway for your community.
</p>
<p>
Here are the most important questions that the OpenAIRE team will ask you, in order to understand your scope and goals:
</p>
<ul class="uk-list uk-list-bullet">
<li>
Do you want a gateway, where researchers can have access to all research products of a discipline?
Do you want a gateway that gathers any research outcome, produced thanks to the funding and services of a given research infrastructure?
</li>
<li>
Is your community (in)formally organized in sub-communities?
Would you like to browse research products and get statistics also for these sub-communities?
For example, the European Grid Infrastructure (EGI) features virtual organizations that represent discipline-specific communities and/or specific research projects.
The research infrastructure DARIAH, on the other hand, is organised in national nodes (e.g. DARIAH-IT, DARIAH-DE).
</li>
<li>
How can the OpenAIRE team identify the research products of your community, among all those available in the OpenAIRE Graph?
Through a series of steps: set of keywords, acknowledgment statements, set of projects, set of repositories, etc.
This can be partial and provisional information that will serve as a starting point to the OpenAIRE team.
You will be able to refine and update this information, in the second phase Develop a pilot.
</li>
</ul>
</div>
</div>
<div uk-grid uk-height-match>
<div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column">
<img src="../../assets/about/2.png" class="uk-align-center" width="100px" height="100px">
<img src="../../assets/sketch_line_arrow.svg" class="uk-align-center">
</div>
<div class="uk-width-expand">
<h1 class="uk-margin-small">2. Develop a pilot</h1>
<i>We tranlate your needs into rules and processes and we configure operational OpenAIRE services.</i>
<p>
Based on the information gathered in phase 1 Analyse your needs, the OpenAIRE team will set up a pilot Science Gateway.
We will configure the OpenAIRE mining algorithms to identify research products of the OpenAIRE Graph that are relevant to your community.
Those, together with some basic statistics, will be available in the pilot version of the Science Gateway that will be deployed on the OpenAIRE BETA infrastructure.
</p>
<p>
The OpenAIRE team will give you a demo of the Science Gateway, with details on how to refine and update the configuration of the Science Gateway, both in terms of criteria for including research products and in terms of logo and visible portal pages.
</p>
<!-- <p>-->
<!-- You can find more details about the configuration options at <a>NAME OF PAGE???</a>-->
<!-- </p>-->
</div>
</div>
<div uk-grid uk-height-match>
<div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column">
<img src="../../assets/about/3.png" class="uk-align-center" width="100px" height="100px">
<img src="../../assets/sketch_line_arrow_large.svg" class="uk-align-center">
</div>
<div class="uk-width-expand">
<h1 class="uk-margin-small">3. Test and Validate</h1>
<i>You validate and test your new Science Gateway (portal). If needed, we further refine and adapt to your needs</i>
<p>
Upon the completion of phase 2, take the time you need to test all its features, from search and browse for research products, to addition/removal of statistics from the portal.
You can report any issue you might find and ask questions directly to the dedicated OpenAIRE team, via a specially designed collaboration tool.
</p>
<p>
Typically, this phase takes some months, as you will have to go through certain procedures.
Change the configuration of the criteria to include research products, wait for the new configuration to be applied on the OpenAIRE graph and validate the results, before you actually decide that the coverage of research products for your community is adequate.
</p>
<p>
For some communities, the OpenAIRE team may also be able to implement dedicated mining algorithms (e.g. to find acknowledgement statements to your community/infrastructure in the full-texts of research articles) that may require several rounds of application, validation, and fine-tuning, before it reaches a high precision and recall.
Your feedback is very important to minimize the effort and time needed for this process to complete.
</p>
<div class="uk-width-1-1 uk-text-center">
<img src="../../assets/OpenAIRE-RCD_howtos.png" width="auto" height="auto">
</div>
</div>
</div>
<div uk-grid uk-height-match>
<div class="uk-width-1-6 uk-position-relative">
<img src="../../assets/about/4.png" class="uk-align-center" width="100px" height="100px">
</div>
<div class="uk-width-expand">
<h1 class="uk-margin-small">4. Roll out the service</h1>
<i>We jointly roll out your new portal. You take over the business operations and start engaging your researchers</i>
<p>
Here we are: the coverage of research product is good, interesting statistics and charts have been selected, and the portal pages available for end-users are ready.
We can roll out the Science Gateway and make it available to all the researchers of the community!
</p>
<p>
You, as a Science Gateway manager, become the main promoter of the Science Gateway.
Engage the researchers of your community and, when applicable, inform the managers of the research infrastructure about the availability of tools for impact monitoring.
</p>
<p>
Remember that you will still be able to change the configuration of the Science Gateway in order to address any issue that may arise and to follow the evolution of the community (e.g. a new project or a new content provider that was not previously available in OpenAIRE).
</p>
<p>
Remember that you dont have to go alone: the dedicated issue tracker you used in the Test and Validate phase is always available for you to contact the OpenAIRE team and ask for support.
</p>
</div>
</div>
</div>
</div>
<div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-1@s" uk-grid>
<div class="uk-width-1-3@m">
<div class="uk-margin-left">
<img width="330" height="250" src="../../assets/contact/3.png">
</div>
</div>
<div class="uk-padding-remove-vertical uk-padding-large uk-margin-large-left uk-width-3-5@m">
<h1>
<div>Let us Help you Develop a Collaborative Science Gateway.</div>
<div>It is fast. It is reliable.</div>
</h1>
<div>Get in touch with our team to find out how.</div>
<div class="uk-inline uk-margin-large-top uk-margin-bottom">
<a class="uk-button portal-button" routerLink="/contact-us" routerLinkActive="router-link-active"> CONTACT
US</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`
})
export class LearnInDepthComponent {
public piwiksub: any;
private pageTitle = "OpenAIRE - Connect | Learn In Depth";
properties:EnvProperties;
constructor (
private route: ActivatedRoute,
private _router: Router,
private _title: Title,
private _piwikService: PiwikService) {
var description = "OpenAIRE - Connect, Community Dashboard, research community";
this._title.setTitle(this.pageTitle);
}
public ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page - learn in depth", this.properties.piwikSiteId).subscribe();
}
});
}
public ngOnDestroy() {
if(this.piwiksub){
this.piwiksub.unsubscribe();
}
}
}

View File

@ -0,0 +1,26 @@
import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {PiwikService} from '../../openaireLibrary/utils/piwik/piwik.service';
import {LearnInDepthComponent} from "./learn-in-depth.component";
import {LearnInDepthRoutingModule} from "./learn-in-depth-routing.module";
@NgModule({
imports: [
CommonModule, RouterModule, LearnInDepthRoutingModule
],
declarations: [
LearnInDepthComponent
],
exports: [
LearnInDepthComponent
],
providers:[
FreeGuard, PreviousRouteRecorder, PiwikService
]
})
export class LearnInDepthModule { }

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@ -65,6 +65,11 @@
background-color: rgb(255, 255, 255);
}
.cloud1-background {
background-image: url("./cloud/1.png") !important;
background-color: rgb(255, 255, 255);
}
.home-background {
background-image: url("home/background.jpg") !important;
background-color: rgb(255, 255, 255);
@ -221,3 +226,17 @@ div:not(.connect_App) bottom .uk-totop{
} .communityRecentResults .search-results > li:last-child {
border-bottom: none !important;
}
.font-41 {
font-size: 41px;
}
/* NOT USED
.sketch-line {
height:80%;
}
.img-sketch {
height:20%;
}
*/

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.534" height="182.701" viewBox="0 0 33.534 182.701">
<g id="Group_755" data-name="Group 755" transform="translate(-4.701 -13.326)">
<g id="Group_342" data-name="Group 342" transform="translate(686.122 -100.639) rotate(90)">
<path id="Path_235" data-name="Path 235" d="M1783.518,676.418s45.7-15.767,85.456-2.516c20.573,6.859,63.031,6.3,95.334,0" transform="translate(-1669.227 -11.527)" fill="none" stroke="#94b2e2" stroke-width="2"/>
</g>
<path id="Path_309" data-name="Path 309" d="M6823.193,2688.6c14.274,8.08,17.506,17.843,17.506,17.843s12.12-8.416,14.544-26.394" transform="translate(-6818 -2512)" fill="none" stroke="#94b2e2" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 741 B

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.534" height="519.494" viewBox="0 0 33.534 519.494">
<g id="Group_755" data-name="Group 755" transform="translate(-4.701 -13.532)">
<g id="Group_342" data-name="Group 342" transform="translate(686.122 -100.639) rotate(90)">
<path id="Path_235" data-name="Path 235" d="M1783.519,676.418s130.88-15.767,244.75-2.516c58.923,6.859,180.524,6.3,273.04,0" transform="translate(-1669.228 -11.527)" fill="none" stroke="#94b2e2" stroke-width="2"/>
</g>
<path id="Path_309" data-name="Path 309" d="M6823.193,2688.6c14.274,8.08,17.506,17.843,17.506,17.843s12.12-8.416,14.544-26.394" transform="translate(-6818 -2175)" fill="none" stroke="#94b2e2" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 744 B