Développement web

Utiliser GIT : les bases

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 :

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 :

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

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->nombre_roues = 3;
$tricyle->couleur = 'rouge';
$tricyle->nom = 'velo_toto';

// execution d'une fonction
$tricyle->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->nom = $recup_nom;
   }
}

$tricyle = new Vehicule("Mon_Super_Tricycle");
echo "le nom de mon tricyle = ".$tricycle->$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->nom = $recup_nom;
   }

   public fonction getNom(){
       return $this->nom;
   }
}

$tricyle = new Vehicule("Mon_Super_Tricycle");
echo $tricycle->nom; // Error, $nom => private
echo $tricylce->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->nom = $recup_nom;
   }

   public fonction getRoues(){
       return $this->roues;
   }

   public function setRoues($nombre_roues){
       if(is_int($nombre_roues) && $nombre_roues > 0 && $nombre_roues < 10){
           $this->roues = $nombre_roues;
       }
       else {
           trigger_error('Le nombre de roue est invalide', E_USER_WARNING);
       }
   }
}

$tricycle = new Vehicule("Mon_Super_Tricycle");
$tricycle->setRoues(3);
echo $tricycle->getRoues; // affiche 3

$tricycle->setRoues(11);
echo $tricycle->getRoues; // Warning : le nombre de roues est invalide

Exemple complet

- fichier Class
- 
Fichier PHP à executer

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

Pré-processeur CSS : SCSS

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

Diaporama de présentation du pré-processeur SCSS


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

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

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 :

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

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

/