-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (220 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="fr">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Favicon -->
<link rel="icon" type="image/jpg" href="dist/images/favicon/punchy-logo-icon.jpg" />
<link rel="icon" href="dist/images/favicon/punchy-logo-icon.ico" />
<!-- All CSS Plugins -->
<link rel="stylesheet" type="text/css" href="js/plugin.css">
<!-- Main CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="dist/css/style.css">
<link rel="stylesheet" type="text/css" href="dist/css/reset.css">
<link rel="stylesheet" type="text/css" href="dist/css/plugin.css">
<!-- Google Web Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700">
<!-- SEO -->
<meta name="description" content="H5P guide auteur mediatisation">
<meta name="author" content="UNIT">
<meta name="url" content="http://www.unit.eu">
<meta name="copyright" content="Fondation UNIT">
<title>H5P, créons ensemble</title>
</head>
<body>
<!-- Menu Start-->
<header id="home" class="home-section header-top-area">
<div class="container container-nav">
<div class="row">
<div class="col-sm-3 nav">
<div class="slogan">
<a href="index.html">- H5P, créons ensemble -</a>
</div>
</div>
<div class="col-sm-8 nav">
<div class="navigation-menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li><a class="smoth-scroll" href="src/listing/listing.html">listing</a></li>
<li><a class="smoth-scroll" href="src/kitdev/kitdev.html">Cas d'utilisation</a></li>
<li><a class="smoth-scroll" href="#lien">En savoir +</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Introduction Start -->
<section id="banner" class="banner-section bg1">
<div class="container">
<div class="row margin-top-70">
<div class="col-sm-6">
<div id="banner-title">
<h2>- H5P, créons ensemble -</h2>
<p>Bienvenue dans ce guide d’aide à la création de vos ressources numériques sous H5P.
Dans ce site vous retrouverez des fiches sur toutes les activités H5P,
des exemples de cas concrets ainsi que des liens d’aide.</p>
</div>
</div>
<div class="col-sm-6">
<div id="banner-img">
</div>
</div>
</div>
</div>
</section>
<!-- choix Start -->
<section id="choix" class="choix-section bg2">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>- Vous souhaitez -</h2>
<p>Ce guide a pour but de présenter, sous deux angles, les possibilités que vous offre H5P.
Tout d’abord, vous trouverez un listing de l’ensemble des activités H5P.
Vous pouvez les trier en fonction de vos besoins (texte, audio, quiz...).
Si vous connaissez peu H5P, commencez par cette partie pour vous familiariser avec cet outil.
Une autre partie vous propose plusieurs cas concrets d’utilisation d’H5P.</p>
<div class="choix-navigation">
<div class="col-md-4 mix-choix">
<div class="col-inner-choix">
<a href="src/listing/listing.html" class="portfolio-popup" title="Project Title">
<img src="dist/images/illustration/listing.png" alt="">
<h3>Listing</h3>
<p>Voici la liste de toutes les activités présentes sur H5P. Triez-les en fonction de vos besoins.</p>
</a>
</div>
</div>
<div class="col-md-4 mix-choix">
<div class="col-inner-choix">
<a href="src/kitdev/kitdev.html" class="portfolio-popup" title="Project Title">
<img src="dist/images/illustration/kitdev.png" alt="">
<h3>Cas d'utilisation</h3>
<p>Dans cette partie, nous vous proposons quelques exemples précis d’utilisation d’H5P.</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- lien Start -->
<section id="lien" class="lien-section bg1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2>- En savoir plus -</h2>
<div class="lien-navigation container">
<div class="col-sm-6 col-md-4 mix-lien">
<div class="col-inner-lien">
<a href="https://h5p.org/" class="portfolio-popup" title="Project Title">
<img src="dist/images/savoir/h5p-logo.svg" alt="">
<h3>Site officiel d'H5P</h3>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mix-lien">
<div class="col-inner-lien">
<a href="https://unit.eu/actualites/webinaire-h5p-consultez-le-replay" class="portfolio-popup" title="Project Title">
<img src="dist/images/savoir/webinaire.png" alt="">
<h3>Replay et FAQ autour du Webinaire organisé par la fondation UNIT</h3>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mix-lien">
<div class="col-inner-lien">
<a href="https://moodle.luniversitenumerique.fr/course/index.php?categoryid=45" class="portfolio-popup" title="Project Title">
<img src="dist/images/savoir/logo-PUNCHY.png" alt="">
<h3>Projet de production de ressources numériques à large potentiel de réutilisation sous H5P</h3>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mix-lien">
<div class="col-inner-lien">
<a href="https://lumi.education/fr/" class="portfolio-popup" title="Project Title">
<img src="dist/images/savoir/logo-lumi.svg" alt="">
<h3>Application de bureau qui vous permet de manipuler H5P</h3>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mix-lien">
<div class="col-inner-lien">
<a href="https://h5p.org/documentation/for-authors/tutorials" class="portfolio-popup" title="Project Title">
<img src="dist/images/savoir/H5P-tutoriel.png" alt="">
<h3>Tutoriel pour les auteurs (documentation officielle d'H5P)</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Point vocabulaire -->
<section id="vocabulaire" class="vocabulaire-section bg2">
<div class="container">
<div class="row margin-top-bottom-50">
<div class="col-sm-5">
<div class="vocabulaire-img">
</div>
</div>
<div class="col-sm-7">
<h2>- Point d'information -</h2>
<p>Ce guide est produit par la fondation UNIT.
L'Université Numérique Ingénierie et Technologie, est l'une des Universités Numériques Thématiques (UNT)
créées à l'initiative de Grandes Écoles, d’Universités et du Ministère de l’Enseignement Supérieur et de la Recherche.
Créé en juin 2009, la Fondation UNIT a pour objet d’accompagner la transformation numérique de la société.
Cette ambition se traduit par la promotion de ressources éducatives libres validées scientifiquement et de logiciel associé.
</p>
</div>
</div>
</div>
</section>
<!-- Footer Start -->
<footer class="footer-section">
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col col-lg-3">
<a href="https://unit.eu/" title="Site Unit">
<img src="dist/images/logo/unit-blanc.svg" alt="L'université Numérique">
</a>
</div>
<div class="col col-lg-3">
<a href="https://luniversitenumerique.fr/" title="Site de l'université Numérique">
<img src="dist/images/logo/UN-blanc.svg" alt="L'université Numérique">
</a>
</div>
<div class="col col-lg-12">
<p>Version du site : 2.0</p>
</div>
</div>
</div>
</footer>
<!-- Footer End -->
<script type="text/javascript" src="dist/js/jquery.min.js"></script>
<script src="dist/js/mixitup.min.js"></script>
<script type="text/javascript" src="dist/js/plugin.js"></script>
<script type="text/javascript" src="dist/js/scripts.js"></script>
<script>
var containerEl = document.querySelector('.container');
var mixer = mixitup(containerEl, {
controls: {
toggleLogic: 'and'
}
});
</script>
</body>
</html>