Construire un site web : quelques informations - Séminaire Infomath
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Construire un site web : quelques informations Séminaire Infomath https://infomath.pages.math.cnrs.fr/tutorial/website/ Bertrand Thierry 4 Décembre 2020
Le web
Bref Historique
1989 Tim Berners-Lee (Ingénieur au CERN) propose le World
Wide Web1
Crédit : CERN
1 https://home.cern/fr/science/computing/birth-web/short-history-web
1
Bref Historique
1989 Tim Berners-Lee (Ingénieur au CERN) propose le World
Wide Web1
1990 Avec Robert Cailliau (ingénieur système) : projet
hypertexte + web + navigateur
Crédit : Wikipédia
1 https://home.cern/fr/science/computing/birth-web/short-history-web
1
Bref Historique
1989 Tim Berners-Lee (Ingénieur au CERN) propose le World
Wide Web1
1990 Avec Robert Cailliau (ingénieur système) : projet
hypertexte + web + navigateur
Fin 1990 Premier serveur et navigateur : info.cern.ch
1 https://home.cern/fr/science/computing/birth-web/short-history-web
1
Bref Historique
1989 Tim Berners-Lee (Ingénieur au CERN) propose le World
Wide Web1
1990 Avec Robert Cailliau (ingénieur système) : projet
hypertexte + web + navigateur
Fin 1990 Premier serveur et navigateur : info.cern.ch
30 April 1993 CERN rend le logiciel World Wide Web public
1 https://home.cern/fr/science/computing/birth-web/short-history-web
1
Bref Historique
1989 Tim Berners-Lee (Ingénieur au CERN) propose le World
Wide Web1
1990 Avec Robert Cailliau (ingénieur système) : projet
hypertexte + web + navigateur
Fin 1990 Premier serveur et navigateur : info.cern.ch
30 April 1993 CERN rend le logiciel World Wide Web public
1994 10 000 serveurs, 10M utilisateurs. Formation du W3C
(avec Tim Berners-Lee)
1 https://home.cern/fr/science/computing/birth-web/short-history-web
1
Bref Historique
1989 Tim Berners-Lee (Ingénieur au CERN) propose le World
Wide Web1
1990 Avec Robert Cailliau (ingénieur système) : projet
hypertexte + web + navigateur
Fin 1990 Premier serveur et navigateur : info.cern.ch
30 April 1993 CERN rend le logiciel World Wide Web public
1994 10 000 serveurs, 10M utilisateurs. Formation du W3C
(avec Tim Berners-Lee)
1994-2005 Yahoo! (1994), Amazon (1995), Google (1998), Wikipédia
(2001), Facebook (2004), Youtube (2005)
1 https://home.cern/fr/science/computing/birth-web/short-history-web
2 https://websitesetup.org/news/how-many-websites-are-there/ 1
Bref Historique
1989 Tim Berners-Lee (Ingénieur au CERN) propose le World
Wide Web1
1990 Avec Robert Cailliau (ingénieur système) : projet
hypertexte + web + navigateur
Fin 1990 Premier serveur et navigateur : info.cern.ch
30 April 1993 CERN rend le logiciel World Wide Web public
1994 10 000 serveurs, 10M utilisateurs. Formation du W3C
(avec Tim Berners-Lee)
1994-2005 Yahoo! (1994), Amazon (1995), Google (1998), Wikipédia
(2001), Facebook (2004), Youtube (2005)
2008 Sortie de l’iPhone
1 https://home.cern/fr/science/computing/birth-web/short-history-web
2 https://websitesetup.org/news/how-many-websites-are-there/ 1
Bref Historique
1989 Tim Berners-Lee (Ingénieur au CERN) propose le World
Wide Web1
1990 Avec Robert Cailliau (ingénieur système) : projet
hypertexte + web + navigateur
Fin 1990 Premier serveur et navigateur : info.cern.ch
30 April 1993 CERN rend le logiciel World Wide Web public
1994 10 000 serveurs, 10M utilisateurs. Formation du W3C
(avec Tim Berners-Lee)
1994-2005 Yahoo! (1994), Amazon (1995), Google (1998), Wikipédia
(2001), Facebook (2004), Youtube (2005)
2008 Sortie de l’iPhone
2020 4 Milliards d’internautes, 576000 nouveau site par jour,
100M d’années pour télécharger internet à 1Go/s2 .
434 Entreprises dans le W3C.
1 https://home.cern/fr/science/computing/birth-web/short-history-web
2 https://websitesetup.org/news/how-many-websites-are-there/ 1Bref Historique : techno et langages
1990 HTML5 HTML : HyperText Markup Language
URI : Uniform Resource Identifier
HTTP : Hypertext Transfer Protocol
1
2
3
4
5
6 Bienvenue !
7 Je suis un paragraphe !
8
9
2Bref Historique : techno et langages
1990 HTML5 HTML : HyperText Markup Language
URI : Uniform Resource Identifier
HTTP : Hypertext Transfer Protocol
1994 Php PHP: Hypertext Preprocessor (Rasmus Lerdorf)
1
2
3
4
5
6 Bienvenue !
7 Je suis un paragraphe !
8
9
2Bref Historique : techno et langages
1990 HTML5 HTML : HyperText Markup Language
URI : Uniform Resource Identifier
HTTP : Hypertext Transfer Protocol
1994 Php PHP: Hypertext Preprocessor (Rasmus Lerdorf)
1995 Js JavaScript (Brendan Eich - Oracle)
1 window.console.log('Hello world');
2Bref Historique : techno et langages
1990 HTML5 HTML : HyperText Markup Language
URI : Uniform Resource Identifier
HTTP : Hypertext Transfer Protocol
1994 Php PHP: Hypertext Preprocessor (Rasmus Lerdorf)
1995 Js JavaScript (Brendan Eich - Oracle)
1996 CSS3 CSS (Cascading Style Sheets) :
séparation contenu et de la forme
2
Avec et sans fichier CSSBref Historique : Navigateurs (populaires)
1994 Netscape Navigator
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
1996 OPERA Opera
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
1996 OPERA Opera
1997 INTERNET-EXPLORER Microsoft Internet Explorer v43
3 Medium
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
1996 OPERA Opera
1997 INTERNET-EXPLORER Microsoft Internet Explorer v43
2003 SAFARI Safari
3 Medium
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
1996 OPERA Opera
1997 INTERNET-EXPLORER Microsoft Internet Explorer v43
2003 SAFARI Safari
2004 龜 Firefox (remplace Netscape)
3 Medium
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
1996 OPERA Opera
1997 INTERNET-EXPLORER Microsoft Internet Explorer v43
2003 SAFARI Safari
2004 龜 Firefox (remplace Netscape)
2007 Safari iOS
3 Medium
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
1996 OPERA Opera
1997 INTERNET-EXPLORER Microsoft Internet Explorer v43
2003 SAFARI Safari
2004 龜 Firefox (remplace Netscape)
2007 Safari iOS
2008 CHROME Google Chrome
3 Medium
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
1996 OPERA Opera
1997 INTERNET-EXPLORER Microsoft Internet Explorer v43
2003 SAFARI Safari
2004 龜 Firefox (remplace Netscape)
2007 Safari iOS
2008 CHROME Google Chrome
2011 Firefox Mobile
3 Medium
3Bref Historique : Navigateurs (populaires)
1994 Netscape Navigator
1995 Microsoft Internet Explorer
1996 OPERA Opera
1997 INTERNET-EXPLORER Microsoft Internet Explorer v43
2003 SAFARI Safari
2004 龜 Firefox (remplace Netscape)
2007 Safari iOS
2008 CHROME Google Chrome
2011 Firefox Mobile
2015 EDGE Microsoft Edge
3 Medium
3Bref Historique : Terminal1
1 Rapport ARCEP 2018
4Bref Historique : Terminal1
1 Rapport ARCEP 2018
4Bref Historique : Terminal1
=⇒ Un site internet doit s’adapter à l’écran (et non l’inverse) !
1 Rapport ARCEP 2018
4Static vs. Dynamic
Requête
Ordinateur Serveur
.html
• Même réponse, peu importe qui émet la requête et ce qu’elle
contient
• Fichier .html codé en dure
5Static vs. Dynamic
Requête + Arg. Arg.
Ordinateur Serveur BDD
.html personnalisé Réponse
1 https://monsite.com?nom=bertrand 1 Bonjour
• Envoie d’arguments
• Traitement des arguments, possiblement avec une base de
données
6Un mot sur la cyber-sécurité1
Dynamique ( =⇒ BDD) =⇒ Attaque serveur (vol, destr., …) :
Nom #Données Année
Dockerhub 190 000 2019
1 On en reparlera dans un prochain infomath !
7Un mot sur la cyber-sécurité1
Dynamique ( =⇒ BDD) =⇒ Attaque serveur (vol, destr., …) :
Nom #Données Année
Dockerhub 190 000 2019
L’Express 700 000 2018
1 On en reparlera dans un prochain infomath !
7Un mot sur la cyber-sécurité1
Dynamique ( =⇒ BDD) =⇒ Attaque serveur (vol, destr., …) :
Nom #Données Année
Dockerhub 190 000 2019
L’Express 700 000 2018
Uber 57 Millions 2017
1 On en reparlera dans un prochain infomath !
7Un mot sur la cyber-sécurité1
Dynamique ( =⇒ BDD) =⇒ Attaque serveur (vol, destr., …) :
Nom #Données Année
Dockerhub 190 000 2019
L’Express 700 000 2018
Uber 57 Millions 2017
Facebook 87 Millions 2014
1 On en reparlera dans un prochain infomath !
7Un mot sur la cyber-sécurité1
Dynamique ( =⇒ BDD) =⇒ Attaque serveur (vol, destr., …) :
Nom #Données Année
Dockerhub 190 000 2019
L’Express 700 000 2018
Uber 57 Millions 2017
Facebook 87 Millions 2014
Marriott 500 Millions 2018
1 On en reparlera dans un prochain infomath !
7Un mot sur la cyber-sécurité1
Dynamique ( =⇒ BDD) =⇒ Attaque serveur (vol, destr., …) :
Nom #Données Année
Dockerhub 190 000 2019
L’Express 700 000 2018
Uber 57 Millions 2017
Facebook 87 Millions 2014
Marriott 500 Millions 2018
Yahoo! 3 Milliards 2013 (admis en 2017)
1 On en reparlera dans un prochain infomath !
7Un mot sur la cyber-sécurité1
Dynamique ( =⇒ BDD) =⇒ Attaque serveur (vol, destr., …) :
Nom #Données Année
Dockerhub 190 000 2019
L’Express 700 000 2018
Uber 57 Millions 2017
Facebook 87 Millions 2014
Marriott 500 Millions 2018
Yahoo! 3 Milliards 2013 (admis en 2017)
Static = Sûr ? Non : attaque du client possible
(ex. bibliothèque JS qui mine en cachette)
1 On en reparlera dans un prochain infomath !
7Un mot sur la cyber-sécurité1
Dynamique ( =⇒ BDD) =⇒ Attaque serveur (vol, destr., …) :
Nom #Données Année
Dockerhub 190 000 2019
L’Express 700 000 2018
Uber 57 Millions 2017
Facebook 87 Millions 2014
Marriott 500 Millions 2018
Yahoo! 3 Milliards 2013 (admis en 2017)
Static = Sûr ? Non : attaque du client possible
(ex. bibliothèque JS qui mine en cachette)
Rappel : L’hébergeur est responsable de la sécurité des données !
1 On en reparlera dans un prochain infomath !
7Un dernier mot sur le handicap et l’accessibilité
EYE-SLASHLes non-voyants
• Navigateur spécialisé (lit/transcrit uniquement le contenu)
• Séparation du contenu de la forme
• Texte alternatif pour les images, problème de capcha, …
8Un dernier mot sur le handicap et l’accessibilité
EYE-SLASHLes non-voyants
• Navigateur spécialisé (lit/transcrit uniquement le contenu)
• Séparation du contenu de la forme
• Texte alternatif pour les images, problème de capcha, …
Pensons aussi aux personnes…
LOW-VISION Daltoniennes : pensez à vos figures (Veridis plutôt que Jet) !45
4 Sélecteur de couleurs : ColorBrewer
5 Test de sites web pour personnes daltoniennes : Toptal
8Un dernier mot sur le handicap et l’accessibilité
EYE-SLASHLes non-voyants
• Navigateur spécialisé (lit/transcrit uniquement le contenu)
• Séparation du contenu de la forme
• Texte alternatif pour les images, problème de capcha, …
Pensons aussi aux personnes…
LOW-VISION Daltoniennes : pensez à vos figures (Veridis plutôt que Jet) !45
DEAF Sourdes : sous-titres de vidéos, …
4 Sélecteur de couleurs : ColorBrewer
5 Test de sites web pour personnes daltoniennes : Toptal
8Un dernier mot sur le handicap et l’accessibilité
EYE-SLASHLes non-voyants
• Navigateur spécialisé (lit/transcrit uniquement le contenu)
• Séparation du contenu de la forme
• Texte alternatif pour les images, problème de capcha, …
Pensons aussi aux personnes…
LOW-VISION Daltoniennes : pensez à vos figures (Veridis plutôt que Jet) !45
DEAF Sourdes : sous-titres de vidéos, …
Wheelchair Handicapées moteur : navigation possible sans souris
4 Sélecteur de couleurs : ColorBrewer
5 Test de sites web pour personnes daltoniennes : Toptal
8Un dernier mot sur le handicap et l’accessibilité
EYE-SLASHLes non-voyants
• Navigateur spécialisé (lit/transcrit uniquement le contenu)
• Séparation du contenu de la forme
• Texte alternatif pour les images, problème de capcha, …
Pensons aussi aux personnes…
LOW-VISION Daltoniennes : pensez à vos figures (Veridis plutôt que Jet) !45
DEAF Sourdes : sous-titres de vidéos, …
Wheelchair Handicapées moteur : navigation possible sans souris
=⇒ Un site doit être accessible et ne doit jamais dépendre d’un
navigateur6 !
4 Sélecteur de couleurs : ColorBrewer
5 Test de sites web pour personnes daltoniennes : Toptal
6 Plus jamais de : “Ce site est optimisé pour Chrome/Firefox/Internet Explorer” 8Conclusion intermédiaire
Le web
• Développement (très) rapide
9Conclusion intermédiaire
Le web
• Développement (très) rapide
• Devenu (presque) indispensable dans nos métiers (et nos vies)
en moins de 30 ans
9Conclusion intermédiaire
Le web
• Développement (très) rapide
• Devenu (presque) indispensable dans nos métiers (et nos vies)
en moins de 30 ans
• L’accès au web change : smartphone > ordinateur
9Conclusion intermédiaire
Le web
• Développement (très) rapide
• Devenu (presque) indispensable dans nos métiers (et nos vies)
en moins de 30 ans
• L’accès au web change : smartphone > ordinateur
Développer un site web en 2020
Plusieurs métiers Programmation, design, contenu, …
9Conclusion intermédiaire
Le web
• Développement (très) rapide
• Devenu (presque) indispensable dans nos métiers (et nos vies)
en moins de 30 ans
• L’accès au web change : smartphone > ordinateur
Développer un site web en 2020
Plusieurs métiers Programmation, design, contenu, …
Cybersécurité Ne soyons pas naïf
9Conclusion intermédiaire
Le web
• Développement (très) rapide
• Devenu (presque) indispensable dans nos métiers (et nos vies)
en moins de 30 ans
• L’accès au web change : smartphone > ordinateur
Développer un site web en 2020
Plusieurs métiers Programmation, design, contenu, …
Cybersécurité Ne soyons pas naïf
Accessibilité Ne les oublions pas (y compris dans nos publis !)
9En pratique : quelques outils
Quelques outils
MEH Par copier/coller du site d’un(e) collègue
Tu peux copier/coller mon site, je n’y comprends rien, je l’ai moi
même copier/coller d’un collègue maintenant à la retraite. Un
peu comme mes préambules LaTeX...
10Quelques outils
MEH Par copier/coller du site d’un(e) collègue
SMILE Static from scratch : simple mais (très) efficace !
La page web de Richard Stallman en est un bel exemple !
10Quelques outils
MEH Par copier/coller du site d’un(e) collègue
SMILE Static from scratch : simple mais (très) efficace !
MEH Dynamic from scratch : Haut risque de faille (critique) !
10Quelques outils
MEH Par copier/coller du site d’un(e) collègue
SMILE Static from scratch : simple mais (très) efficace !
MEH Dynamic from scratch : Haut risque de faille (critique) !
CODE Dynamic avec Framework : Minimise le risque de faille sous
réserve de maintenance !
10Quelques outils
MEH Par copier/coller du site d’un(e) collègue
SMILE Static from scratch : simple mais (très) efficace !
MEH Dynamic from scratch : Haut risque de faille (critique) !
CODE Dynamic avec Framework : Minimise le risque de faille sous
réserve de maintenance !
Php Symfony, Laravel, …
10Quelques outils
MEH Par copier/coller du site d’un(e) collègue
SMILE Static from scratch : simple mais (très) efficace !
MEH Dynamic from scratch : Haut risque de faille (critique) !
CODE Dynamic avec Framework : Minimise le risque de faille sous
réserve de maintenance !
Php Symfony, Laravel, …
Python Flask, Bottle, Django, …
10Quelques outils
MEH Par copier/coller du site d’un(e) collègue
SMILE Static from scratch : simple mais (très) efficace !
MEH Dynamic from scratch : Haut risque de faille (critique) !
CODE Dynamic avec Framework : Minimise le risque de faille sous
réserve de maintenance !
Php Symfony, Laravel, …
Python Flask, Bottle, Django, …
Layer-Group All Inclusive : Wordpress.com, Google Site, …
10Quelques outils
MEH Par copier/coller du site d’un(e) collègue
SMILE Static from scratch : simple mais (très) efficace !
MEH Dynamic from scratch : Haut risque de faille (critique) !
CODE Dynamic avec Framework : Minimise le risque de faille sous
réserve de maintenance !
Php Symfony, Laravel, …
Python Flask, Bottle, Django, …
Layer-Group All Inclusive : Wordpress.com, Google Site, …
Database Content Management System (CMS) (nécessite une BDD (SQL)),
minimise le risque de faille sous réserve de maintenance :
Spip, Drupal, Joomla, Wordpress, …
10Quelques outils
MEH Par copier/coller du site d’un(e) collègue
SMILE Static from scratch : simple mais (très) efficace !
MEH Dynamic from scratch : Haut risque de faille (critique) !
CODE Dynamic avec Framework : Minimise le risque de faille sous
réserve de maintenance !
Php Symfony, Laravel, …
Python Flask, Bottle, Django, …
Layer-Group All Inclusive : Wordpress.com, Google Site, …
Database Content Management System (CMS) (nécessite une BDD (SQL)),
minimise le risque de faille sous réserve de maintenance :
Spip, Drupal, Joomla, Wordpress, …
Markdown Générateurs de Sites Statics (opt. + git):
Hugo (Go), Jekyll (Ruby), Pelican (Python), …
10JAMStack
JAMStack ?
J : Javascript (pour dynamiser)
A : API (réutilisation et scalabilité)
M : MarkUp (facilité d’écriture de page)
Stack : …Pile MEH …
Principe
Markdown Contenu écrit en Markdown (' LATEX simplifié)
HTML5 HTMLisation via un Générateur de Sites Statics (GSS)
COLUMNS Utilisation d’un thème pour le design
Exclamation-Triangle Pas de base de données SQL. Non modifiable en ligne. Que des
fichiers texte. Site web static.
11Markdown
12Quelques Générateurs de Sites Statics
Généraliste
Nom Langage Type USERS Vitesse
Jekyll Ruby (on Rails) interprété +++ Lent
Pelican Python interprété ++ ?
Hugo Go Compilé ++ Rapide
Spécialement conçu pour une documentation
Nom Langage/Framework
Docusaurus ReactJS
Docsify JS
Docz Gatsby
Sphinx Python
13Hugo : schéma de fonctionnement
CSS
HTML JS
Thème(s)
Hugo rsync
Markdown HTML, JS, CSS Site Web
Meta-Données Code Source
• Le code source user est écrit markdown
• Hugo “compile” le code source en HTML en suivant les règles
établies par un thème
• Code source et code généré ont la même arborescence
• Génération de fichiers de (méta-)données : sitemap, …
• Déploiement sur le serveur (rsync)
• Travailler localement : hugo server
14Déploiement automatique avec git et Gitlab page1
git clone
Gitlab Runner Thème(s)
git push
Hugo
git rsync
Code source HTML, JS, CSS Site Web
commit
Automatique
+ Déploiement automatique, sauvegarde de votre code source,
versionning
− Apprendre git (mais est-ce un désavantage SMILE-WINK?)
1 Voir https://infomath.pages.math.cnrs.fr/tutorial/website/
15Hugo en pratique
Code source Code généré
/ /public/
config/default/ index.html
config.toml
post
content article-de-blog
home index.html
index.md
talk
post infomath
article-de-blog index.html
index.md SuperConf
talk index.html
infomath assets
index.md css
SuperConf style.css
index.md
js
themes fichier.js
wowchemy
academic-tools 16Hugo en pratique : exemple de fichier markdown
1 +++
2 t i t l e = ” C o n s t r u i r e un S i t e I n t e r n e t ”
3 p u b l i s h D a t e = 2019 −09 −08 T16 : 0 0 : 0 0 + 0 1 : 0 0 # Schedule page p u b l i s h p u b l i s h D a t e .
4 date = 2020 −12 −03 T14 : 0 0 : 0 0 + 0 1 : 0 0
5 date_end = 2020 −12 −03 T 1 5 : 0 0 : 0 0 + 0 1 : 0 0
6 authors = [ ” Bertrand T h i e r r y ” ]
7 t a g s = [ ” website ” , ” hugo ” , ” wowchemy ” ]
8 c a t e g o r i e s = [ ” Grand P u b l i c ” ]
9
10 # Links ( optional ) .
11 url_pdf = ””
12 url_slides = ””
13 url_video = ””
14 url_code = ” ”
15 l i n k s = [ { name = ” T u t o r i e l ” , u r l = ” / t u t o r i a l / website ” } ]
16 # Does the content use math f o r m a t t i n g ?
17 math = f a l s e
18 +++
19
20 Dans notre communauté , i l e s t courant de d i s p o s e r de son propre s i t e web
21 p r o f e s s i o n n e l a f i n d ’ a m é l i o r e r sa v i s i b i l i t é en l i s t a n t , par exemple , ses
22 t r a v a u x : p u b l i c a t i o n s e t exposés ( avec l e u r s documents ) , CV , codes source
23 de l o g i c i e l , e t c . D e r r i è r e un s i t e i n t e r n e t se cache cependant p l u s i e u r s
24 coeurs de m é t i e r s : programmation , conception d ’ un v i s u e l , cyber − s é c u r i t é ,
25 e t c . Nous n ’ avons n i l e s compétences n i l e temps de s u i v r e ces é v o l u t i o n s . 17Hugo en pratique : résultat
18Choix du thème : Wowchemy7
+ Un des thèmes Hugo les plus avancés pour les academics
+ Différents contenus types : publi, exposés, projets,
enseignement, documentation, …
+ MÀJ régulière (parfois cassante…)
+ Documentation exhaustive et communauté active (Discord)
+ Personnalisation relativement facile (inhérent à Hugo)
+ Page de garde par “widget” (personnalisable, …)
− Porté par une personne (dictateur bienveillant): arrêt brutal
possible, choix parfois contestables, …
Exemple : https://infomath.pages.math.cnrs.fr
D’autres thèmes sont disponibles. N’oublions pas qu’au bout de 3-4
ans, on se lasse de son propre thème : on peut en changer !
7 https://wowchemy.com
19Résumé
• Télécharger Hugo8 :
• Cloner (ou télécharger) le dépôt starter academic:
https://github.com/wowchemy/starter-academic
• Lancer le serveur local : hugo server
• Ouvrir localhost:1313/ dans firefox
• Remplir les méta-données de configuration
• Ajouter ce qu’on veut (enseignement, blog, ...)
• Ajouter ses publications (script Python mais reste laborieux)
• Déployer le site à chaque modification
• Opt. : Déploiement auto. via Gitlab/Github page, Netlify,…
La documentation du thème est très fournie. Un tutoriel est aussi
proposé sur infomath.
8 warning Linux: pas d’install via apt-get ni snap !
20Preuve par l’image
https://www.dropbox.com/s/d829laqbin3gwx6/hugo.mp4?dl=0
21Petite Pub : academic-tools10
Programme Pour un petit workshop sur plusieurs jours9
9 Indico du portail math fait super bien le job sinon !)
10 https://github.com/Bertbk/academic-tools 22Petite Pub : academic-tools10
Programme Pour un petit workshop sur plusieurs jours9
Next Talk Pour un séminaire (comme infomath)
9 Indico du portail math fait super bien le job sinon !)
10 https://github.com/Bertbk/academic-tools 22Petite Pub : academic-tools10
Programme Pour un petit workshop sur plusieurs jours9
Next Talk Pour un séminaire (comme infomath)
Théorème à la amsthm (berthm ?)
9 Indico du portail math fait super bien le job sinon !)
10 https://github.com/Bertbk/academic-tools 22Page web pour l’enseignement : Retour d’expérience
Depuis 2 ans mes cours sont en page web (et non pdf)
1. Éléments Finis : Cours (poly), TPs
2. Calcul Scientifique : TPs
“Cours Magistral”
+ Adapté aux écrans (smartphone (dans le métro))
Énoncés de “TP sur machine”
23Page web pour l’enseignement : Retour d’expérience
Depuis 2 ans mes cours sont en page web (et non pdf)
1. Éléments Finis : Cours (poly), TPs
2. Calcul Scientifique : TPs
“Cours Magistral”
+ Adapté aux écrans (smartphone (dans le métro))
+ Interactivité : vidéos, gifs, liens, applications JS, …
Énoncés de “TP sur machine”
23Page web pour l’enseignement : Retour d’expérience
Depuis 2 ans mes cours sont en page web (et non pdf)
1. Éléments Finis : Cours (poly), TPs
2. Calcul Scientifique : TPs
“Cours Magistral”
+ Adapté aux écrans (smartphone (dans le métro))
+ Interactivité : vidéos, gifs, liens, applications JS, …
+ Correction d’erreur via github issue
Énoncés de “TP sur machine”
23Page web pour l’enseignement : Retour d’expérience
Depuis 2 ans mes cours sont en page web (et non pdf)
1. Éléments Finis : Cours (poly), TPs
2. Calcul Scientifique : TPs
“Cours Magistral”
+ Adapté aux écrans (smartphone (dans le métro))
+ Interactivité : vidéos, gifs, liens, applications JS, …
+ Correction d’erreur via github issue
− Amener son ordi en cours (craie, électricité, …)
Énoncés de “TP sur machine”
23Page web pour l’enseignement : Retour d’expérience
Depuis 2 ans mes cours sont en page web (et non pdf)
1. Éléments Finis : Cours (poly), TPs
2. Calcul Scientifique : TPs
“Cours Magistral”
+ Adapté aux écrans (smartphone (dans le métro))
+ Interactivité : vidéos, gifs, liens, applications JS, …
+ Correction d’erreur via github issue
− Amener son ordi en cours (craie, électricité, …)
− Confort de lecture (export PDF pas efficace)
Énoncés de “TP sur machine”
23Page web pour l’enseignement : Retour d’expérience
Depuis 2 ans mes cours sont en page web (et non pdf)
1. Éléments Finis : Cours (poly), TPs
2. Calcul Scientifique : TPs
“Cours Magistral”
+ Adapté aux écrans (smartphone (dans le métro))
+ Interactivité : vidéos, gifs, liens, applications JS, …
+ Correction d’erreur via github issue
− Amener son ordi en cours (craie, électricité, …)
− Confort de lecture (export PDF pas efficace)
− Étudiant(e) sur son téléphone en cours : pipo ou boulot ? SMILE-WINK
Énoncés de “TP sur machine”
23Page web pour l’enseignement : Retour d’expérience
Depuis 2 ans mes cours sont en page web (et non pdf)
1. Éléments Finis : Cours (poly), TPs
2. Calcul Scientifique : TPs
“Cours Magistral”
+ Adapté aux écrans (smartphone (dans le métro))
+ Interactivité : vidéos, gifs, liens, applications JS, …
+ Correction d’erreur via github issue
− Amener son ordi en cours (craie, électricité, …)
− Confort de lecture (export PDF pas efficace)
− Étudiant(e) sur son téléphone en cours : pipo ou boulot ? SMILE-WINK
Énoncés de “TP sur machine”
+ Copier/Coller possible
23Page web pour l’enseignement : Retour d’expérience
Depuis 2 ans mes cours sont en page web (et non pdf)
1. Éléments Finis : Cours (poly), TPs
2. Calcul Scientifique : TPs
“Cours Magistral”
+ Adapté aux écrans (smartphone (dans le métro))
+ Interactivité : vidéos, gifs, liens, applications JS, …
+ Correction d’erreur via github issue
− Amener son ordi en cours (craie, électricité, …)
− Confort de lecture (export PDF pas efficace)
− Étudiant(e) sur son téléphone en cours : pipo ou boulot ? SMILE-WINK
Énoncés de “TP sur machine”
+ Copier/Coller possible
23
+ Que du bonheurConclusion
Construire un site web
• C’est compliqué mais il existe (plein) d’outils (open-source)
• N’oubliez pas la cybersécurité et l’accessibilité
• Ne perdez pas trop de temps…
• …Mais ça permet de mieux comprendre internet !
Web > LaTeX ?
• Oui pour les TPs
• Pas forcément pour les poly
• Pas trouvé de Saint Graal “latex2html” vraiment efficace
24Thank you for your attention!
24Vous pouvez aussi lire
