Aller au contenu

Template HTML statique simple✯

Template simple✯

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://perso.isima.fr/~wiltestor/template_simple/index.html

Téléchargez le 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://perso.isima.fr/~wiltestor/template_bootstrap/index.html

Téléchargez le 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✯

______________________________________
|                                     |
|               HEADER                |
|_____________________________________|
|     |                               |
|  M  |         CONTENU               |
|  E  |                               |
|  N  |                               |
|  U  |                               |
|     |                               |
|     |                               |
|     |                               |
|_____|_______________________________|
|              FOOTER                 |
|_____ _______________________________|

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>
    ...

Template Bootstrap français-anglais✯

Un autre template a été défini avec une possibilité de changer de langues (FR / EN). Il est plus lourd à manager en raison des pages HTML dédoublées.

Un exemple se trouve ici https://perso.limos.fr/~basdorea/

Son principe réside dans un autre menu navigation_en.html accessible par le drapeau anglais et dirigeant vers des pages en anglais.

Ainsi, on aura dans ce template les fichiers index.html, index_en.html, recherche.html, recherche_en.html, projets.html, projets_en.html, peda.html, peda_en.html, infosup.html, infosup_en.html

Téléchargez le template Bootstrap_en

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 :

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

Authors: Bastien, Vincent Mazenod