Commit fa6aa6ad authored by gick's avatar gick
Browse files

add seo

parent c0b23e7a
let express=require('express')
let app=express()
app.get('/*',express.static('./dist'))
app.listen(8000)
\ No newline at end of file
......@@ -2,7 +2,7 @@
<div>
<div>
<b-navbar toggleable="lg" type="dark" variant="dark">
<b-navbar-brand href="#">Albiziapp</b-navbar-brand>
<b-navbar-brand href="/">Albiziapp</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
......@@ -10,6 +10,8 @@
<b-navbar-nav>
<b-nav-item to="/usecases">Use cases</b-nav-item>
<b-nav-item href="/technology">Features</b-nav-item>
<b-nav-item href="/access">Accessing Albiziapp</b-nav-item>
<b-nav-item href="/cont">Contact us</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
......
......@@ -11,9 +11,10 @@
"generate": "nuxt generate"
},
"dependencies": {
"nuxt": "^2.0.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"bootstrap": "^4.1.3"
"express": "^4.17.1",
"nuxt": "^2.0.0"
},
"devDependencies": {}
}
<template>
<b-container fluid>
<b-row>
<b-col cols="3">
<b-navbar sticky class="flex-column">
<b-nav pills class="flex-column">
<b-nav-item href="#france">From France</b-nav-item>
<b-nav-item href="#outside">Outside France</b-nav-item>
<b-nav-item href="#tailor">Tailored to your needs</b-nav-item>
</b-nav>
</b-navbar>
</b-col>
<b-col cols="9">
<section id="content" class="mt-2 custom">
<h2>Features</h2>
<h4 id="france">Accessing Albiziapp from France</h4>
<p>
The main Albiziapp instance is freely accessible for everyone. All you need is a
(free) <b-link target="_blank" href="https://openstreetmap.org">Open Street Map</b-link> account to start recording trees.
If you don't have an OpenStreetMap account and don't want to open one, you can still have a feeling of the
interactions but you won't be able to perform new records.
</p>
<p>
The French instance is accessible <b-link target="_blank" href="https://albiziapp.reveries-project.fr">here</b-link>
</p>
<h4 id="outside">Outside France</h4>
<p>
The French instance uses a very detailed satelite map provided by the <b-link target="_blank" href="http://ign.fr">French Geographic
Institute</b-link>. Unfortunately, this map covers only France area. If you want to use Albiziapp outside
France, you can use the <b-link target="_blank" href="https://pre-prod.albiziapp.reveries-project.fr">internationalized version</b-link>.
</p>
<h4 id="tailor">Tailored to your needs</h4>
<p>
If you're either a teacher, a botanic parc manager, a responsible in communication, you may need an Albiziapp
version tailored for your specific needs. In this case, <b-link to='/contact'>contact us</b-link> with your project idea to have a specific
instance deployed for you.
</p>
<p>
Albiziapp being part of a research project, we will provide free instances given that the user data can be
analysed anonymously for research purpose.
</p>
</section>
</b-col>
</b-row>
</b-container>
</template>
<style>
.custom .card img {
height: 400px !important;
width: auto !important;
margin: auto;
}
</style>
<script>
export default {
head () {
return {
title: 'Albiziapp Access',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Albiziapp information' },
{ hid: 'keywords', name: 'keywords', content: 'botanic, serious-games, collaborative, web-application, gamification' }
]
}
}
};
</script>
\ No newline at end of file
<template>
<b-container fluid class="text-center mt-4">
Pierre-Yves Gicquel : <code>pierre-yves.gicquel[@]univ.lemans.fr</code>
</b-container>
</template>
<style>
.custom .card img {
height: 400px !important;
width: auto !important;
margin: auto;
}
</style>
<script>
export default {};
</script>
\ No newline at end of file
......@@ -41,5 +41,17 @@
<script>
export default {
head () {
return {
title: 'Albiziapp',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Albiziapp information' },
{ hid: 'keywords', name: 'keywords', content: 'botanic, serious-games, collaborative, web-application, gamification' }
]
}
}
};
</script>
\ No newline at end of file
<template>
<b-container fluid>
<b-row>
<b-col cols="3">
<b-row>
<b-col cols="3">
<b-navbar sticky class="flex-column">
<b-nav pills class="flex-column">
<b-nav-item href="#web">Full web</b-nav-item>
......@@ -9,48 +9,49 @@
<b-nav-item href="#item-3">Notifications</b-nav-item>
</b-nav>
</b-navbar>
</b-col>
<b-col cols="9">
</b-col>
<b-col cols="9">
<section id="content" class="mt-2 custom">
<h2>Features</h2>
<h4 id="web">Full web and PWA</h4>
<p>
Existing tree mapping applications are, to our best knowledge, only <strong>native applications</strong>.
This means that they require the user to install an application on his smartphone. This creates various
issues : device compatibility (e.g application needs a specific Android version), trust issue (e.g user
can be reluctant to install an application), complex update process...
</p>
<p>
To overcome these issues, Albiziapp is only based on fully standard web technologies. Practically, it means
that it <strong>is accessed through a browser</strong>, without installation required and it runs on any mobile
device.
</p>
<p>
In case the user wish it, Albiziapp support PWA installation. Practically, the user can add Albiziapp to
his desktop and enjoy a fullscreen experience.
</p>
<h4 id="plant">Plant recognition</h4>
<p>
Albiziapp integrate a plant recognition feature. The user can upload a leaf photo to obtain the most likely
species of the leaf. This feature is based on Folia, an application built by the <b-link href="https://liris.cnrs.fr/en/news/liris-diffuse-un-premier-prototype-reconnaissance-feuilles-sur-lappstore">LIRIS</b-link>
</p>
<h4 id="web">Full web and PWA</h4>
<p>
Existing tree mapping applications are, to our best knowledge, only
<strong>native applications</strong>.
This means that they require the user to install an application on his smartphone. This creates various
issues : device compatibility (e.g application needs a specific Android version), trust issue (e.g user
can be reluctant to install an application), complex update process...
</p>
<p>
To overcome these issues, Albiziapp is only based on fully standard web technologies. Practically, it means
that it
<strong>is accessed through a browser</strong>, without installation required and it runs on any mobile
device.
</p>
<p>
In case the user wish it, Albiziapp support PWA installation. Practically, the user can add Albiziapp to
his desktop and enjoy a fullscreen experience.
</p>
<h4 id="plant">Plant recognition</h4>
<p>
Albiziapp integrate a plant recognition feature. The user can upload a leaf photo to obtain the most likely
species of the leaf. This feature is based on Folia, an application built by the
<b-link target="_blank"
href="https://liris.cnrs.fr/en/news/liris-diffuse-un-premier-prototype-reconnaissance-feuilles-sur-lappstore"
>LIRIS</b-link>
</p>
<b-card
border-variant="light"
title="Folia"
img-src="/folia.png"
img-alt="Image"
img-left
>
<b-card-text>
An example of using Folia, the plant recognition feature.
</b-card-text>
</b-card>
<b-card
border-variant="light"
title="Folia"
img-src="/folia.png"
img-alt="Image"
img-left
>
<b-card-text>An example of using Folia, the plant recognition feature.</b-card-text>
</b-card>
</section>
</b-col> </b-row>
</b-col>
</b-row>
</b-container>
</template>
<style>
......@@ -61,5 +62,18 @@
}
</style>
<script>
export default {};
export default {
head () {
return {
title: 'Albiziapp',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Albiziapp technology and features' },
{ hid: 'keywords', name: 'keywords', content: 'botanic, serious-games, plant, recognition, full-web, native' }
]
}
}
};
</script>
\ No newline at end of file
<template>
<b-container fluid>
<b-row>
<b-col cols="3">
<b-row>
<b-col cols="3">
<b-navbar sticky class="flex-column">
<b-nav pills class="flex-column">
<b-nav-item href="#tour">Botanic Tour</b-nav-item>
......@@ -9,46 +9,96 @@
<b-nav-item href="#class">Botanic class</b-nav-item>
</b-nav>
</b-navbar>
</b-col>
<b-col cols="9">
</b-col>
<b-col cols="9">
<section id="content" class="mt-2 custom">
<h2>Use cases</h2>
<h4 id="tour">Botanic tour</h4>
<p>
Botanic tour are a way to promote
<strong>biodiversity heritage</strong> in a given area.
Such area can be natural parc, cities, botanic garden, campus... Botanic tour also permits
to acquire botanical knowledge in an easier context than a botanic class.
</p>
<p>
In Albiziapp, botanic tours can be defined through
<strong>custom missions</strong>.
These missions are described through a simple format describing a serie of activities
that the user should perform.
</p>
<b-card
border-variant="light"
title="Example of missions"
img-src="/mission.png"
img-alt="Image"
img-left
>
<b-card-text>
This is an example of mission consisting of a serie of activities.
The current activitie is to perform three new records with distinct genus.
A progress bar indicate the user progression in the current activitie.
</b-card-text>
<b-card-text>When the activitie is completed, the user will acquire new score points and a badge.</b-card-text>
</b-card>
<h4 id="citizen">Citizen science</h4>
TO BE COMPLETED
<h4 id="class">Botanic class</h4>
TO BE COMPLETED
<h4 id="tour">Botanic tour</h4>
<p>
Botanic tour are a way to promote
<strong>biodiversity heritage</strong> in a given area.
Such area can be natural parc, cities, botanic garden, campus... Botanic tour also permits
to acquire botanical knowledge in an easier context than a botanic class.
</p>
<p>
In Albiziapp, botanic tours can be defined through
<strong>custom missions</strong>.
These missions are described through a simple format describing a serie of activities
that the user should perform.
</p>
<b-card
border-variant="light"
title="Example of missions"
img-src="/mission.png"
img-alt="Image"
img-left
>
<b-card-text>
This is an example of mission consisting of a serie of activities.
The current activitie is to perform three new records with distinct genus.
A progress bar indicate the user progression in the current activitie.
</b-card-text>
</section>
<b-card-text>When the activitie is completed, the user will acquire new score points and a badge.</b-card-text>
</b-card>
<h4 id="citizen">Citizen science</h4>
<p>
Outside of the missions, Albiziapp can be used to freely map trees for amateur botanist.
In the free mapping mode, users can either perform new records or
<strong>verify other users observations</strong>.
</p>
<b-card
border-variant="light"
title="Observations from multiple users"
img-src="/map2.png"
img-alt="Image"
img-left
>
<b-card-text>
In Albiziapp map, user observations are represented by red circles, other people observations are
represented by green circles. When the user is near a green circle, he can verify the record by tapping
on the circle. He then access to the information provided by the other user.
</b-card-text>
<b-card-text>
If the user agrees with the information provided in the record (correct species and/or genus),
he can
<strong>validate</strong> the record. The number of validations is displayed together with the record informations.
The user can also modify the record, in that case the previous record is still accessible through an
<strong>history</strong> button.
</b-card-text>
</b-card>
<p>Albiziapp is based on the principle of open data. All records information can be accessed programmaticaly through an API.
Moreover, Albiziapp fully integrates with <b-link target="_blank" href="https://openstreetmap.org">Open Street Map</b-link> the reference in
Open Geographical Information.</p>
<h4 id="class">Botanic class</h4>
<p>
Albiziapp can be used in the context of a botanic class for outdoor learning. An expert mode allows the teacher to record trees that
will trigger an <strong>identification test</strong>. The students then have to give a correct identification in front of the trees and
are given immediate feedback (e.g did they identify the genus and/or species correctly?).
</p>
<p>
After the outdoor activity, the teacher can access the students answers to provide them feedback on their identification errors or success.
The records being associated with a photo, the teacher can point out botanical features specific to each trees.
</p>
<b-card
border-variant="light"
title="Identification test"
img-src="/identification.png"
img-alt="Image"
img-left
>
<b-card-text>
An identification exercise. The correct species, genus and common name must be identified by the student. Together with the correct
answer, the teacher can associate gamification mechanisms (e.g score, badge) for correct identifications. This is optional since the
use of gamification mechanisms depends on the teaching style.
</b-card-text>
</b-card>
</b-col> </b-row>
</section>
</b-col>
</b-row>
</b-container>
</template>
<style>
......@@ -59,5 +109,17 @@
}
</style>
<script>
export default {};
export default {
head () {
return {
title: 'Albiziapp Use Cases',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Albiziapp technology and features' },
{ hid: 'keywords', name: 'keywords', content: 'botanic, identification, exercise, openstreetmap, osm, score' }
]
}
}};
</script>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment