Développement web

ZZZ : URL canonique

Je demandais hier sur #spip si quelqu’un connaissait un standard pour signaler l’URL canonique d’une page Web. S’koi ? Si on est en train de lire une page sur un site, on peut l’avoir abordée par plusieurs adresses :

Tout ça, ce sont des URLs valables, qui affichent bien le même article. Mais si je veux mettre des gens (ou des robots) d’accord sur ce qu’est la « vraie » adresse de cet article, il faut que je l’annonce, d’une manière ou d’une autre.

Cette problématique concerne au premier chef les moteurs de recherche et d’indexation (mais pas seulement). Or il se trouve que pas plus tard que la semaine dernière les trois poids lourds Google, Yahoo et Live (Microsoft) annonçaient que leurs algorithmes allaient accepter qu’on leur parle de l’URL canonique d’une page.

- https://developers.google.com/search/blog/2009/02/specify-your-canonical
- https://moz.com/blog/canonical-url-tag-the-most-important-advancement-in-seo-practices-since-sitemaps

C’est bien fait, et c’est simple à mettre en œuvre. En gros, pour toute page HTML qui peut avoir plusieurs adresses, on va indiquer laquelle est la principale, en insérant dans son <head>...</head> une balise :

Les algorithmes qui le souhaitent sauront donc que la page http://www.monsite.tld/article12 qui mentionne ce lien doit en fait être considérée comme étant à l’adresse canonique http://www.monsite.tld/URL-canonique. Et feront leurs calculs (PageRank...) et affichages (résultats de recherche...) en tenant compte de cette information.
* * *

Autre exemple d’usage (qui était celui qui avait suscité ma question) : lorsqu’on veut participer aux sites de partage de bookmarks type delicious.com, il importe que les différents partageurs se mettent d’accord sur une adresse unique, de manière à pouvoir discuter de la même chose, même s’ils l’ont vue dans un contexte différent. Le plugin SPIP Social Tags en tient compte.

Dans le squelette SPIP article.html, il suffit d’indiquer dans la partie <head>..</head> le code suivant [1] :

Pour que Google considère qu’un (vieux) lien vers http://monsite.tld/a1.html pointe en fait vers http://www.monsite.tld/Titre-article (URL canonique de l’article si on a activé les URLs « propres »). Ou que SocialTags indique le nouvel URL dans delicious quand on clique sur l’icone, même si le navigateur indique http://www.monsite.tld/Titre-article?PHPSESSID=12345.

Tests de nom de classe CSS

Code :

Résultat :

test.123
test#123
test@123
test<123
test`123
test 123
_test123
-test123
123test

Réaliser un webdocumentaire : les modes de navigation

1. Conception d’un webdoc : scénarisation, navigation et narration

Rappel : un webdocumentaire peut être caractérisé par :

Son attractivité va donc être particulièrement dépendante de la "manière de raconter les choses", laquelle est la résultante de 3 "éléments" du webdoc qu’il va falloir envisager explicitement lors de sa conception :

Cet article propose d’explorer les modes de navigation utilisés à l’heure actuelle pour permettre "d’ouvrir" la réflexion lors de la conception de la (les) narration(s) d’un webdoc.

2. Modes de navigation : les grands types

Chaque webdoc ou partie de webdoc propose une ou plusieurs façon de parcourir ses contenus : on parlera de "mode de navigation". Il s’agit de la manière dont sont proposés, organisés les liens et tous les éléments qui permettent de consulter les contenus.
En fonction de l’importance et de la diversité de ses contenus, un webdoc peut proposer un ou plusieurs modes de navigation : soit exclusif (par exemple pour une partie) soit en parallèle.
Une typologie rapide et illustrée d’exemples des modes de navigation les plus répandus est proposée ci-dessous. Pour chaque type est proposé un exemple "court" et un exemple "long".

Chapitrage
Parcours du webdoc selon des "chapitres" cad des parties nettement séparées entre elles. Chaque chapitre peut lui même être subdivisé en sous-parties. En général l’organisation interne des chapitres (présentation des capsules, types de pages disponibles, menus de navigation...) est identique. Habituellement un menu des chapitres est à disposition dans toutes les pages
Exemples :

Cartographie
Navigation sur une (plusieurs) carte(s), les contenus sont accessibles via leur marqueur sur la carte. Peut offrir l’accès aux contenus en fonction de la géolocalisation de l’internaute.
Exemples :

Immersion
Le parcours du webdoc se fait en mettant l’internaute "dans la peau" d’un(e) personnage afin de donner son point de vue (au sens propre du terme). L’immersion se fait de plus plus en mode panoramique 360°. Parfois associé avec un aspect ludique ("game-doc" : concept de "l’histoire dont vous êtes le héros")
Exemples :

Data visualisation
Ce type de navigation est basé sur la présentation sous diverses formes d’ensembles de données (statistiques, cartographiques, analytiques...) pour permettre leur visualisation de façon pédagogique et/ou percutante.
Exemples :

Articles long format ("stories")
Très utilisé par les webdocs journalistiques, la navigation se fait de façon linéaire en déroulant ("scrollant") une page qui présente des faits, médias ou événements successifs. En fonction de la quantité d’informations, le webdoc peut être constitué d’une ou plusieurs page(s)/story(ies) successives.
Exemples :

Timeline / Frise chronologique
La navigation est basée sur la chronologie d’une période sur laquelle sont placés les diffférentes capsules/contenus. En général une "timeline" (frise chronologique) permet de visualiser l’ensemble de la période d’étude.
Exemples :

Déstructurée
Une navigation atypique faite pour désorienter le visiteur et le mettre dans l’esprit du sujet : "Hommage aux 100 ans de Dada"
Exemple :

3. Annexe : un ensemble de webdocs pour explorer ce qu’il existe / ce qu’il est possible de faire

(les modes de navigations principaux sont précisés en dernière info)

Références HTML, CSS, Javascript et jQuery

Cours et tutoriels

références HTML

Références CSS

Références pré-processeurs CSS

Références framework CSS

Références Javascript

"old-school" : http://statique.i-climb.com/selfhtml/navigation/syntaxe.htm#javascript —>

Références jQuery

Outils pour développement web

Astuces pour mémoire :

Adapter la CSS en fonction du terminal : les Media Queries

Présentation Media Queries (PDF - 46.5 ko)
Présentation Media Queries

Diaporama medias queries : adapter les propriétés CSS aux paramètres du terminal utilisé


Brancher un dossier existant sur un repo Git nouvellement créé

pour les SPIPeurs : cette situation est typiquement celle que vous rencontrez lorsque vous sortez un nouvel embryon de plugin de la Fabrique et que vous souhaitez le passer sur votre serveur Gitlab :

  1. cd le-dossier-existant
  2. git init
  3. git remote add origin ssh ://user@url.mon-gitlab.tld :22/groupe-du-repo/dossier-du-repo.git
  4. git add .
  5. git commit -m "sortie de la fabrique"
  6. git push -u origin master

Télécharger

Cahier des charges : Git

I. Présentation

II. Github / Gitlab

1. Créer son compte sur :

2. Creer son premier Repository (dépot)

III. Installer un client

Voici une listesur la doc officielle

IV. Liste des commandes à tester

Niveau 1

1. Cloner son dépot :

2. Modifier le fichier Readme.md

3. Ajouter les modifications à l’index de Git :

4. Commiter :

5. Envoyer ce commit sur GitHub :

6. Lister toutes les branches

7. Créer une branche

7 bis. Lister de nouveau toutes les branches

8. basculer sur cette branche

8 bis. Lister de nouveau toutes les branches

9. Connaître l’état des modifications locales

Niveau 2 : Merge

1. Creer une branche : tester_merge

2. Travailler sur cette nouvelle branche (plusieurs commits)

3. Merge cette branche

Niveau 3 : Rebase

1. Creer une nouvelle branche : tester_rebase

2. Travailler sur cette nouvelle branche (plusieurs commits)

3. Rebase cette branche

Niveau 4 : Cherry Pick

1. Creer une nouvelle branche : tester_cherry_pick

2. Travailler sur cette nouvelle branche (plusieurs commits)

3. Sur la branche master, récupérer le dernier commit de la branche tester_cherry_pick

4. Sur la branche master, récupérer un commit de votre choix de la branche tester_cherry_pick

Niveau 5 : expert

Références

Cahier des charges : PHP - Mysql

Objectif : Réaliser une liste de courses

Présentation :

Vous devez réaliser une application web monopage permettant la création et l’utilisation d’une liste de courses.
Cette page devra avoir un header, une barrenav, un content, (aside si besoin) et un footer. Vous pouvez utiliser un framework css. Attention, cette page devra être responsive.

Fonctionnalités attendues :

Etape 1 : affichage
Le tableau d’affichage doit comporter :

Etape 2 : insertion

Etape 3 : modification

Etape 4 : trier

Etape 5 : ajax

Bonus 1 : autocomplétion
Ajouter l’autocomplétion sur le nom du produit dans le formulaire de création.
Pour cela, vous devez utiliser une bdd.

Bonus 2 : mode hors ligne
Vous devez pouvoir utiliser sur votre téléphone votre liste de course sans connexion internet. Il faut que le bouton : cocher fonctionne (enregistre) pour pouvoir synchroniser à votre retour chez vous.

Bonus 3 : enregistrer ses listes
Pouvoir enregistrer ses listes (avec un nom) et pouvoir les recharger.

Bonus 4 : libre !!

Cahier des charges HTML/CSS/Javascript/jQuery

HTML :

CSS :

Bootstrap :

Javascript / jQuery :

jQuery UI et autres plugins / widgets

Utiliser les jQuery UI et widgets pour réaliser les éléments suivants :

Elements pour l’exercice de prise en main HTML et CSS

Le B.A. BA de la POO en PHP

Définitions :

Un objet :

Un « objet » est une représentation d’une chose matérielle ou immatérielle du réel à laquelle on associe des propriétés et des actions.
exemple : un véhicule , une personne, un animal, un compte bancaire, ...

Une Classe :

contient la définition de l’objet que l’on va creer = c’est le plan de fabrication d’un objet

class Vehicule // Présence du mot-clé class suivi du nom de la classe.

{

  // Déclaration des attributs et méthodes ici.

}

Les Attributs (variables) :

caractéristiques propres à un objet.
exemple : nom, prénom, couleur, ...

class Vehicule

{

    private $nombre_roues = 4; // nombre de roues du véhicule, par défaut = 4

    private $couleur = 'vert'; // couleur du véhicule;

    private $nom;

}

Les Methodes (fonctions) :

Des actions que l’on peut appliquer à un objet

class Vehicule

{

    private $nombre_roues = 4; // nombre de roues du véhicule, par défaut = 4

    private $couleur = 'vert'; // couleur du véhicule;

    private $nom;

    private $niveau_carburant = 100



    public fonction klaxonner() // une méthode pour faire du bruit

    {

        echo "tut tut";

    }

}

Instance de classe = résultat d’une instanciation = création d’un objet

exemple : un tricyle est crée à partir de l’objet véhicule

$tricyle = new Vehicule();



// initialisation des variables

$tricyle-&gt;nombre_roues = 3;

$tricyle-&gt;couleur = 'rouge';

$tricyle-&gt;nom = 'velo_toto';



// execution d'une fonction

$tricyle-&gt;klaxonner(); // faire du bruit

function __construct()

Permet de sauvegarder les variables passées en argument lors de l’instanciation

class Vehicule {

    public nom;



    public function __construct($recup_nom = 'pas encore de nom'){

        $this-&gt;nom = $recup_nom;

    }

}



$tricyle = new Vehicule("Mon_Super_Tricycle");

echo "le nom de mon tricyle = ".$tricycle-&gt;$nom; // donnera la valeur : Mon_Super_Tricycle;

Visibilite public / private / protected

Quelques petites précisions :

Accéder à un attribut : l’accesseur ou getter

création de methodes qui ont comme seul role d’afficher un attribut private

class Vehicule {

    private nom;



    public function __construct($recup_nom = 'pas encore de nom'){

        $this-&gt;nom = $recup_nom;

    }



    public fonction getNom(){

        return $this-&gt;nom;

    }

}



$tricyle = new Vehicule("Mon_Super_Tricycle");

echo $tricycle-&gt;nom; // Error, $nom =&gt; private

echo $tricylce-&gt;getNom(); // affiche : Mon_Super_Tricycle;

Modifier un attribut : mutateur ou setter

création de methode qui ont comme seul role de modifier un attribut private d’un objet

class Vehicule {

    private nom;

    private roues = 4;



    public function __construct($recup_nom = 'pas encore de nom'){

        $this-&gt;nom = $recup_nom;

    }



    public fonction getRoues(){

        return $this-&gt;roues;

    }



    public function setRoues($nombre_roues){

        if(is_int($nombre_roues) &amp;&amp; $nombre_roues &gt; 0 &amp;&amp; $nombre_roues &lt; 10){

            $this-&gt;roues = $nombre_roues;

        }

        else {

            trigger_error('Le nombre de roue est invalide', E_USER_WARNING);

        }

    }

}



$tricycle = new Vehicule("Mon_Super_Tricycle");

$tricycle-&gt;setRoues(3);

echo $tricycle-&gt;getRoues; // affiche 3



$tricycle-&gt;setRoues(11);

echo $tricycle-&gt;getRoues; // Warning : le nombre de roues est invalide

Exemple complet

- fichier Class
-  Fichier PHP à executer

Mise en page des blocs avec CSS3 : Flexbox

Presentation (PDF - 135.8 ko)
Presentation

Diaporama de présentation de flexbox


cheatsheet (PDF - 955.8 ko)
cheatsheet

Aide-mémoire des principales propriétés flexbox (en anglais)


Résumé des propriétés des containers "parents" / "enfants" flexbox : télécharger le résumé


cheatsheet

Polices à télécharger : @font-face

Utliser une police de caractères servie depuis une URL :
la propriété CSS @font-face

  1. /*
  2.  * téléchargement des polices
  3.  */
  4. @font-face {
  5.     font-family : ’Vegur’ ;
  6.     src : url(’fonts/Vegur-Regular-webfont.woff’) format(’woff’) ;
  7.     font-style : normal ;
  8. }
  9. @font-face {
  10.     font-family : ’VegurBold’ ;
  11.     url(’fonts/Vegur-Bold-webfont.woff’) ;
  12.     font-weight : bold ;
  13. }
  14.  
  15. @font-face {
  16.     font-family : ’merriweather’ ;
  17.     src : url(’merriweather-bold.woff2 ?#iefix’) format(’woff2’),
  18.          url(’merriweather-bold.woff’) format(’woff’),
  19.          url(’merriweather-bold.ttf’) format(’truetype’) ;
  20.      font-weight : bold ;
  21.      font-style : normal ;
  22. }
  23.  
  24. /*
  25.  * Utiliser des polices définies en @font-face
  26.  */
  27. body {
  28.     font-family : Vegur ;
  29. }
  30. h1 {
  31.     font-family : merriweather, georgia, serif ;
  32. }

Télécharger

Pré-processeur CSS : SCSS

Présentation SCSS (PDF - 61 ko)
Présentation SCSS

Diaporama de présentation du pré-processeur SCSS


Réaliser un webdocumentaire scientifique : concepts et éléments techniques

Le concept de webdoc
et plus spécifiquement en tant que support de vulgarisation scientifique

**A l’heure du lait** :

Webdocu du lait | CNIEL — Accueil
par cniel-adm-webdoc
https://www.ferme-laitiere-france.c...

 : un webdoc à propos d’agriculture mais pas vraiment "scientifique", réalisé pour le Centre National Interprofessionnel de l’Économie Laitière
_un exemple techniquement très abouti d’intégration des médias et de navigation interactive_

— >

Eléments technique d’un webdoc
avantage et contraintes du média "web"

Réalisation d’un webdoc
étapes et éléments pour une gestion collaborative

Références

SCSS - creer les média queries avec la bonne largeur background-image()

Quand on veut sélectionner une image background pour chaque breakpoint, on peut utiliser tout le potentiel de SCSS

  1. $image_bg : 480, 576, 768, 992, 1200 ;
  2. @each $bp in $image_bg {
  3.     @media screen and (min-width : #{$bp}px) {
  4.         .maDiv {
  5.             background-image : url(’img/bg_#$bp.jpg’) ;
  6.         }
  7.     }
  8. }

Télécharger

Si on veut utiliser des variables de breakpoint :

  1. $tiny : 480px !default ; // or ’em’ if you prefer, of course
  2. $smal : 576px !default ;
  3. $medium : 768px !default ;
  4. $large : 992px !default ;
  5. $extra-large : 1200px !default ;
  6.  
  7. $list : $tiny, $small, $medium, $large, $extra-large ;
  8.  
  9. // fonction qui supprime les unités sans connaitre à l’avance l’unité
  10. @function supprimer_uniter($nbr) {
  11.     @if type-of($nbr) == ’nbr’ and not unitless($nbr) {
  12.         @return $nbr / ($nbr * 0 + 1) ;
  13.     }
  14.     @return $nbr ;
  15. }
  16.  
  17. @each $l in $list {
  18.     /* Si on connait à l’avance l’unité*/
  19.     $bp : $l / 1px ;
  20.     /* Si on ne connait pas à l’avance l’unité*/
  21.     $bp : supprimer_uniter($l) ;
  22.  
  23.     @media screen and (min-width : #{$bp}px) {
  24.         .maDiv {
  25.             background-image : url(’img/bg_#$bp.jpg’) ;
  26.         }
  27.     }
  28. }

Télécharger

Le code généré sera :

  1. @media screen and (min-width : 480px) {
  2.     .maDiv {
  3.         background-image : url("img/bg_480.jpg") ;
  4.     }
  5. }
  6.  
  7. @media screen and (min-width : 576px) {
  8.     .maDiv {
  9.         background-image : url("img/bg_576.jpg") ;
  10.     }
  11. }
  12.  
  13. @media screen and (min-width : 768px) {
  14.     .maDiv {
  15.         background-image : url("img/bg_768.jpg") ;
  16.     }
  17. }
  18.  
  19. @media screen and (min-width : 992px) {
  20.     .maDiv {
  21.         background-image : url("img/bg_992.jpg") ;
  22.     }
  23. }
  24.  
  25. @media screen and (min-width : 1200px) {
  26.     .maDiv {
  27.         background-image : url("img/bg_1200.jpg") ;
  28.     }
  29. }

Télécharger

Tester Xdebug sur un serveur local

Références :

Utiliser GIT : les bases

Utiliser REGEXP_REPLACE pour faire des remplacements en MYSQL

Syntaxe de base de REGEXP_REPLACE

  1. REGEXP_REPLACE("la chaine sur laquelle on veut faire le remplacement", "expression régulière", "la chaine de remplacement")

Pour la syntaxe complète (paramètres supplémentaires position, nbre d’occurrences, type de remplacement) voir https://dev.mysql.com/doc/refman/8.0/en/regexp.html#function_regexp-replace

Utiliser REGEXP_REPLACE dans un UPDATE

Dans cet exemple on souhaite supprimer (= remplacer par une chaine vide) les numéros qui précèdent le texte dans le champ titre de la table spip_articles. Ces numéros sont tous en début de titre et suivi par un point et un espace : l’expression régulière pour les "attraper" sera donc : ^[0-9]*\. , ce qui donne comme syntaxe de l’UPDATE :

  1. UPDATE spip_articles SET titre = REGEXP_REPLACE(titre, "^[0-9]*\. ", "") ;
← →

/