< base de données >

Cette première partie du quadrimestre porte sur la récupération, l'archivage, l'analyse de données numériques. Il s'agira pour chacun.e de développer une ou plusieurs méthodologie(s) permettant de mener un travail d'enquête et de mise(s) en forme(s) à partir d'un corpus choisi. Nous nous intéresserons à ce qui délimite un corpus et ce qui le transforme en document.

Seance 1

Définir une structure de données:

  • Quelles entités?
  • Quels champs?
  • Pour chaque champ, quels types de valeurs?
  • Quelles relations entre les entités?
    • Types de relations possibles: 1:1, 1:n, n:n
  • Dessiner la structure (par exemple avec https://textik.com/)

Définir la liste des champs

Exemple de champs de base de données de fleurs. 

+----------------------------+                                        
|  FLEUR                     |                                        
|-----------------------------                                        
|                            |                                        
|  ID_REFERENCE              |                                        
|  NOM_COMMUN                |                                        
|  NOM_SCIENTIFIQUE          |                                        
|  NOM_VERNACULAI E          |                                        
|  NOM_ANGLAIS               |                                        
|  FIRST_PUBLICATION         |                                        
|  N_INDIVIDUS               |                                        
|  COULEUR                   |                                        
|  DESCRIPTION_GENERALE      |                                        
|  USAGES                    |                                        
|  CHRONOBIOLOGIE            |                                        
|  FAMILLE                   |                                        
|  GENRE                     |                                        
|  SEXUALITE                 |                                        
|  POLLINISATION             |                                        
|  DESSIMINATION             |                                        
|  IMAGE_CREDITS             |                                        
|  HERBORISATION_CREDITS     |                                        
|                            |                                        
+----------------------------+

Exemple sous forme de tableur

Outil

Un simple tableur, libreoffice, framacal ou autre.

Étapes du projet

  • choisir une source de données.
    • les données peuvent être de n'importe quel type de média (texte, vidéo, image, son, objet, lieu)
    • exemples: http://wikileaks.org, https://www.gutenberg.org/, https://freesound.org/, http://youtube.com, http://maps.google.com, http://patents.google.com
  • définir un corpus. Il s'agit d'appliquer des limites à la source choisie pour ne s'intéresser qu'à une partie des données diffusées.
    • types de limites: temporelles, géographiques, thématiques, liées à un groupe, liées à une personne, liées à un type de média, etc.
    • exemples: une fuite de wikileaks, une rubrique d'un site, un auteur sur le projet Gutenberg, une recherche Youtube, le rayoon d'une bibliothèque etc.
  • pour chaque spécimen, créer une fiche descriptive. Quelles propriétés des spécimens peuvent être intéressantes?
    • exemples: dates, occurrences de mots, couleur, dimensions, fréquence sonore, position d'un objet dans une image, etc.
  • choisir un type de base de données et définir une structure permettant d'encoder les fiches définies à l'étape précédente
    • exemples: tableur, base de données mysql, dossier contenant des fichiers
    • cela implique de créer une schéma de la base de données (type de relations, type de requêtes) signifiant sa structure (et donc sa cohérence et sa faisabilité, son niveau de complexité).
  • encoder tout ou une partie du corpus
  • mise en forme d'un ou plusieurs template en html et css
  • expérimenter des requêtes à envoyer à la base de données
    • exemples: sélectionner tous les chapitres qui contiennent le mot "guerre", sélectionner tous les auteurs qui ont répondu par un smiley à un message, sélectionner tous les éléments ordonnés selon un certain champs, etc.

Les templates

Un template (en) (ou « gabarit »), code informatique dont une partie est destinée à être transformée lors de la livraison en fonction de données d’entrée, par exemple pour générer une page web dynamique (entre autres, Django utilise de tels gabarits, et Haml est un langage de gabarits) ;

Nous allons utiliser le langage de templating Handlebarsjs
Ici la documentation de Handlebarjs -> documentation

Dossier de base à télécharger pour commencer votre site -> csv-to-website

Exemple d'une utilisation simple:

Le template

<p>{{prenom}} {{nom}}</p>

Les données

{
  prenom: "Louise",
  nom: "Michel",
}

Le resultat


<p>Louise Michel</p>

Les boucles

Le template

<ul>
    {{#each personnes}}
          <li>
              {{ this.prenom }} {{ this.nom }}
          </li>
    {{/each}}
</ul>

Les données

{
  personnes: [
    { prenom: "Louise", nom: "Michel" },
    { prenom: "Ada", nom: "Lovelace" },
    { prenom: "Aaron", nom: "Swartz" },
  ],
}

Le resultat

<ul>
    <li>Louise Michel </li>
    <li>Ada Lovelace </li>
    <li>Aaron Swartz </li>
</ul>

lookup

Le helper lookup permet d’accéder dynamiquement à une propriété d’un objet ou à un élément d’un tableau dans un template Handlebars. Il est particulièrement utile pour récupérer une valeur via un index ou une clé variable, ce qui n’est pas possible avec la syntaxe standard des expressions Handlebars.

    <ul>
        {{#each OISEAUX }}
        <li>
            {{this.NOM_COMMUN}} fait partie de
            {{lookup ../FAMILLES this.FAMILLE_ID 'NOM_FAMILLE' }}
        </li>
        {{/each }}
    </ul>

Les conditions

Les conditions en code permettent d’exécuter différentes actions selon si une expression est vraie ou fausse. Elles sont utilisées pour prendre des décisions et changer le comportement d’un programme en fonction des valeurs des variables. Un site de e-commerce peut afficher "En stock" si un produit est disponible (stock > 0), et "Rupture de stock" sinon.

==  Égalité faible (ex: "5" == 5 ✅)
=== Égalité stricte (ex: "5" === 5 ❌)
!=  Différent (ex: 10 != 5 ✅)
!== Différent strict (ex: "10" !== 10 ✅)
<   Inférieur
<=  Inférieur ou égal
>   Supérieur
>=  Supérieur ou égal
&&  ET logique (ex: true && false ❌)

Utilisation des coditions dans Handlebarsjs.

Exemple avec if

{{#if age ">=" 18}}
    <p>Tu es majeur.</p>
{{else}}
    <p>Tu es mineur.</p>
{{/if}}

Exemple avec if et else

{{#if age ">=" 18}}
    <p>tu es majeur.</p>
{{else}}
    <p>tu es mineur.</p>
{{/if}}

Exemple avec if, else if et else

{{#if score "==" 100}}
    <p>Score parfait !</p>
{{else if score ">=" 50}}
    <p>Bon score !</p>
{{else}}
    <p>Tu peux mieux faire.</p>
{{/if}}

Split

    {{splitAssign tags "," "mots"}}

    <ul>
      {{#each mots}}
        <li>{{this}}</li>
      {{/each}}
    </ul>

Query String

La query string est la partie d'une URL qui contient des paramètres dynamiques, permettant de transmettre des informations à un serveur. Elle commence par un ? et contient des paires clé=valeur séparées par &.

Exemple d'une Url avec des query String.

https://example.com/page?nom=Michel&prenom=Louise&age=25

Décomposition : ? → Indique le début de la query string. nom=Michel → Paramètre avec clé nom et valeur Alice. & → Sépare plusieurs paramètres. prenom=Louise → Deuxième paramètre avec clé age et valeur 25.

Exemple d'utilisation des query string avec Handlebarsjs:

<p>Bonjour {{prenom}} {{nom}}.</p>

Resultat:

<p>Bonjour Louise Michel.</p>

Afficher qu'un item

Si vous voulez faire une page avec uniquement les contenues d'un seul item.

Exemple d'url:

index.html?db=OISEAUXid=3

Maintenant dans handlebarsjs la variable id resortira uniquement les valeurs de la troisième colonne de votre tableau.

<h1>{{PAGE.NOM}}</h1>
<p>{{PAGE.DESCRIPTION}}</p>