Skip to content

Pages perso

Chaque enseignant-chercheur, doctorant ou autre membre du personnel dispose d'un espace sur le serveur de fichiers Glouglou pour héberger des pages perso.

Ces pages perso doivent se situer à la racine de votre espace Glouglou dans un dossier nommé public_html

Un serveur web (serveur Apache) parcourt les différents espaces des utilisateurs qui sont accessibles en lecture pour tous et à l'intérieur les dossiers public_html qui sont aussi accessibles en lecture.

Lorsque c'est le cas, il va chercher le fichier index.html, point de départ de vos pages perso.

Votre site sera alors visible à partir de l'adresse https://isima.fr/~votrelogin

Configuration de votre espace

Téléchargez le template souhaité (identifiants Windows) et décompressez le à la racine de votre espace Glouglou

Téléchargez template simple

ou

Téléchargez template Bootstrap

Vous devez maintenant autoriser que votre espace Glouglou soit visible en lecture par tous pour que le serveur Apache puisse accéder à vos pages perso

Attention : Tout le contenu de votre espace Glouglou sera visible, il faut restreindre les droits sur les autres fichiers.

Si vous ne partagez aucun élément de votre espace Glouglou avec quiconque, vous pouvez suivre les manipulations suivantes.

  • Connectez vous sur un serveur Linux pour accéder au contenu de votre espace
ssh votrelogin@fc
  • Remontez d'un niveau pour accéder à votre espace
cd ..
  • Bloquez les droits en lecture/écriture/éxecution à tous sauf vous pour tous les éléments contenus dans votre espace (commande récursive)
chmod -R 700 votrelogin
  • Autorisez les droits en lecture pour votre répertoire, mais pas à son contenu (commande non récursive)
chmod 755 votrelogin

La commande suivante vous montre les droits accordés

ll | grep votrelogin 

Vous devez obtenir un résultat comme ci-dessous(droits : drwxr-xr-x)

commande ll

  • Descendez d'un niveau pour accéder au contenu
cd votrelogin
  • Autorisez les droits en lecture pour le répertoire public_html seulement ainsi qu'à son contenu (commande récursive)
chmod -R 755 public_html

La commande suivante vous montre les droits accordés

ll

Vous devez obtenir un résultat comme ci-dessous (droits drwxr-xr-x uniquement pour votre répertoire public_html)

commande ll

Template simple

Présentation

Pour ceux qui souhaitent éviter de faire du HTML, un template très simple a été construit avec :

  • 6 pages HTML
  • du CSS
  • quelques images
  • 5 fichiers texte (contenant les informations que vous souhaitez afficher)
  • quelques scripts en JQuery

Un exemple de ce template est visible à l'adresse suivante https://fc.isima.fr/~wiltest/template_simple/

Quelques infos sur ces pages :

  • l'email est obfusqué pour éviter les spams
  • L'onglet "Publications" ouvre une Iframe sur le site de HAL présentant vos publications, si votre compte HAL est à jour, votre page perso aussi.
  • Les couleurs utilisées sur ces pages correspondent à celles de la charte graphique du LIMOS

Il est possible de paramètrer rapidement ces pages en éditant les fichiers textes et en ajoutant des modifications à des endroits précis

Modification des informations

  • Modifiez le contenu des fichiers texte pour afficher les informations souhaitées (nomprenom.txt, pedagogie.txt, ...). Tous les fichiers texte sont à la racine de public_html Ne touchez pas aux balises.

  • Enregistrez votre photo à la place de celle existante dans le répertoire public_html/img

respectez le nom et le format du fichier : photo.png

  • Enregistrez votre CV à la place de celle existante dans le répertoire public_html/img

respectez le nom et le format du fichier : cv.pdf

  • Modifiez votre mail, éditez le fichier index.html A la ligne 37, remplacez les quatre champs nom et prénom par votre adresse mail href="mailto:bastien.doreau(at)isima.fr">bastien.doreau (at) isima.fr devient href="mailto:prenom.nom(at)isima.fr">prenom.nom (at) isima.fr

  • Modifiez le lien à vos publications, éditez le fichier publications.html A la ligne 36, remplacez les deux champs nom et prénom par les votres <iframe ... hal.archives-ouvertes.fr/search/index/?q=Bastien+Doreau" devient <iframe ... hal.archives-ouvertes.fr/search/index/?q=Prenom+Nom"

Template Bootstrap

Présentation

Un template un peu plus complexe a été construit en HTML, JS et CSS, il permet :

  • un rendu proche du site web du Limos
  • la gestion du responsive par Bootstrap
  • l'affichage automatique des publications déposées dans HAL à partir du idHal du chercheur

Un exemple de ce template est visible à l'adresse suivante https://fc.isima.fr/~wiltest/template_bootstrap/

Il est possible de paramètrer rapidement ces pages en éditant les fichiers textes et en ajoutant des modifications à des endroits précis

Architecture des pages

Les pages HTML "Accueil", "Recherche", "Enseignement" et "Infos supplémentaires" se construisent sur le même modèle.

On intègre à chacune de ces pages :

  • une balise <div id="header"> pour le logo et le nom
  • une balise <div id="navigation"> pour le menu à gauche
  • une balise <div id="footer"> pour le bloc violet en fin de page.

Un script en fin de page va remplacer ces balises par des pages HTML contenues dans le dossier template, soit "header.html", "navigation.html" et "footer.html"

Ainsi, une modification d'une de ces 3 pages se répercutera sur toutes les pages de contenu.

Le contenu que vous voulez faire apparaître doit s'intégrer entre les parties <!-- CONTENT --> et <!-- FIN CONTENT --> (PS: Ces éléments ne sont pas des balises HTML mais des commentaires)

Ce template intègre un fichier CSS (main.min.css) et un fichier JavaScript (main.min.js) contenus respectivement dans les dossiers « css » et « js »

Intégrer un bloc titre-menu

Ce type de bloc est un élément généré par Bootstrap. En HTML, il se présente de la forme :

Bloc titre menu

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Des infos ...</h3>
    </div>

    <div class="panel-body">
        ... supplémentaires
    </div>
</div>

Pour modifier le titre, éditer celui-ci entre les balises <h3 class="panel-title"> et </h3>

Pour le contenu, éditer celui-ci entre les balises suivantes <div class="panel-body"> et </div>

Pour rajouter un bloc, copier et coller le contenu du bloc HTML ci-dessus et modifier titre et contenu.

Modifier nom et prénom dans le Header

Editer le fichier « template/header.html » et remplacer ligne 32 <b>Pascal LAFOURCADE</b> par <b>Prénom NOM</b>

Modifier la page d’accueil

La page d’accueil contient :

  • un titre entre des balises de titre <h2> et </h2>
  • un texte avec des liens
  • un bloc titre-contenu
  • un ensemble de photos (livres)
  • un bloc titre-contenu en 3 colonnes
  • du texte avec des puces

Toutes ces informations se retrouvent entre <!-- CONTENT --> et <!-- FIN CONTENT -->

Modifier les publications de la page Recherche

Un script va récupérer dans HAL toutes les publis liées à un identifiant auteur HAL nommé idHal

Ce script utilise un web-service sur HAL et récupère un résultat en JSON qui est traité et dont des éléments sont mis en forme et affichés.

Pour info, la requête envoyée est:

https://api.archives-ouvertes.fr/search/?q=authIdHal_s:"+idHalUser+"&start=0&rows=500&fl=uri_s,authFullName_s,title_s,docType_s,keyword_s,producedDate_s,journalTitle_s,conferenceTitle_s&sort=producedDate_s%20desc&wt=json

Pour modifier cet idHal, changer l 109 le contenu de la variable idHalUser avec votre idHal

var idHalUser = "pascalafourcade";var idHalUser = "bdoreau";

Pas encore d'idHal ? Créez en un ici

Editer du contenu responsive

Pour avoir un contenu responsive, Bootstrap a imaginé un système de blocs avec 12 unités par lignes

Lorsque le média est plus petit, les blocs qui sont normalement les uns à côté des autres se mettent les uns en dessous des autres.

Il est donc déconseillé d'utiliser des tables mais plutôt ce système de blocs pour ce template afin qu'il soit pleinement responsive

Le principe est qu'une ligne peut se décomposer en 12 unités, soit 6 unités + 6 unités OU 4 unités + 4 unités + 4 unités OU 1 unité + 10 unités + 1 unité OU ...

L'idée étant que le nombre total d'unité par ligne soit de 12.

Dans le code, cela se traduit ainsi :

<div class="row">

    <div class="col-lg-3 col-md-3 col-sm-3">
        Contenu 1er Bloc de 3 unités
    </div>

    <div class="col-lg-5 col-md-5 col-sm-5">
        Contenu 2e Bloc de 5 unités
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
        Contenu 3e Bloc de 4 unités
    </div>

</div>

On crée d'abord une balise pour définir la ligne avec <div class="row"> qu'on ferme à la fin avec </div>

Puis à l'intérieur, une balise indiquant le nombre d'unités du bloc si il est grand (large), moyen (middle) ou petit (small) <div class="col-lg-3 col-md-3 col-sm-3">

Il est possible d'avoir des lignes imbriquées dans d'autres soit :

<div class="row">

    <div class="col-lg-3 col-md-3 col-sm-3">
        Contenu 1er Bloc de 3 unités qui contiendra lui aussi une ligne de 12 blocs
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
                BLABLA
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                BLOBLO
            </div>
        </div>
    </div>
    ...

Mon site perso complet avec Pelican

Pour un site personnel permettant de générer des pages en statiques en utilisant du markdown avec Pelican :

Blog pages perso au Limos

Cette solution permet notamment la gestion de l'internationalisation, l'écriture d'équations mathématiques, un moteur de recherche, ...