Projets « Sites Web » – Evolution sur quatre ans

Projets sites web année 2016 – 2017 (6°TT) :

Projet TFE « Portfolio »

http://www.fullcycle.be/tfebrice – Brice Scheppers
http://www.fullcycle.be/tferomain – Romain Stommen
http://www.fullcycle.be/tfemaxime – Maxime Lelièvre
http://www.fullcycle.be/tfegobs – Thiebault Gobeaux
http://www.fullcycle.be/tfemick – Mickaël Vanstraelen
http://www.fullcycle.be/tferemy – Rémy Demollin
http://www.fullcycle.be/tfesebastienk – Sébastien Klein

Projet H2O

http://www.fullcycle.be/romainh2o

http://www.fullcycle.be/remyh2o

http://www.fullcycle.be/briceh2o

http://www.fullcycle.be/gobsh2o

http://www.fullcycle.be/maxh2o

http://www.fullcycle.be/mikeh2o

http://www.fullcycle.be/sebah2o

——————————————————————————–

Projets sites web année 2015 – 2016 (5° – 6°TT) :

http://www.fullcycle.be/fullromain

http://www.fullcycle.be/fullremy

http://www.fullcycle.be/fullbrice

http://www.fullcycle.be/fullhamza

http://www.fullcycle.be/fullgobs

http://www.fullcycle.be/fullsylvain

http://www.fullcycle.be/fullmaxime

http://www.fullcycle.be/fullmike

http://www.fullcycle.be/fullseba

http://www.fullcycle.be/fullmartin

——————————————————————————–

Projets sites web année 2014 – 2015 (4° – 5°TT) :

http://www.fullcycle.be/romainwebpro/ –> Stommen Romain

http://www.fullcycle.be/mikewebpro/ –> Vanstraelen Mickaël

Advertisements

Seven deadly sins

Liones, royaume de Britannia. Le Grand Maître des Chevaliers Sacrés Zaratras a été sauvagement assassiné, et les fautifs seraient un ordre de chevaliers légendaires au nombre de sept au service du roi qui voulaient renverser le trône. Dix ans plus tard, une jeune fille nommée Elizabeth Liones part à la recherche de ces mystérieux chevaliers qui faisaient autrefois la fierté de Liones : les Seven Deadly Sins, un groupe regroupant sept grands criminels choisis par le roi en personne, pour déjouer un complot manigancé par les chevaliers sacrés contre la royauté. C’est alors qu’elle échoue au Boar Hat, une taverne dont le propriétaire est un petit garçon accompagné de son cochon Hawk. Mais quelle ne fut pas sa surprise lorsqu’elle découvre que l’enfant à la tête de la taverne n’est autre que le Péché du Dragon de la Colère, chef des Seven Deadly Sins, Meliodas ! C’est alors que débutent leurs aventures à la recherche des six autres Deadly Sins, afin de sauver Liones !

By Adam Naurbiev Posted in Animés

Cours sur Git

Dès lors que l’on souhaite maintenir un projet et y travailler en groupe, on entend souvent parlé d’un outil appelé Git. C’est un logiciel de versioning permettant de travailler sur tout type de projet.

Pourquoi l’utiliser ?

On pourrait très bien se dire d’utiliser un simple serveur distant et y mettre nos fichiers modifiés mais cette pratique comporte plusieurs inconvénients tels que :

  • Un fichier modifié sur votre ordinateur ne l’est pas sur celui d’un autre. Par conséquent si l’autre envoie son fichier, il écrasera le vôtre.
  • Impossible de déterminer qui a fait quoi.
  • Savoir l’origine de certaines modifications et de résolutions de bug.

Comment l’installer ?

macOS:
Via homebrew : brew install git
Via git-scm : https://git-scm.com

Windows:
Via git-scm : https://git-scm.com

Linux:
Suivre l’article suivant : https://git-scm.com/book/fr/v1/Démarrage-rapide-Installation-de-Git

Comment l’utiliser ?

Maintenant que Git est installé il faut le configurer à présent.
Veuillez utiliser la même adresse mail pour Git et le service que vous utiliserez par la suite. Maintenant ce point clarifié, on peut indiquer le mail à l’outil Git via le logiciel Git Bash en y exécutant la commande :

git config --global user.email "johndoe@gmail.com"

On peut désormais définir notre nom en exécutant la commande :

git config --global user.name "John Doe"

À noter que le drapeau –global définit le mail ci-dessus pour tout vos projets hormis si vous en définissez une localement en enlevant le drapeau.

Il faut désormais s’inscrire à un service Git. Le plus connu et utilisé étant GitHub mais nous utiliserons GitLab dans notre cas. Une fois que vous êtes inscrit nous allons utiliser un système bien plus « utile » que la simple authentification avec identifiant et mot de passe.

Configurer une clé SSH

Qu’est-ce que c’est ?

C’est un protocole de transfert sécurisé. Lequel impose un échange de clés de chiffrement en début de connexion.

Comment en générer une ?

Il faut savoir qu’une clé SSH est propre à votre ordinateur, cela présente un avantage considérable que l’on définira plus tard. Elle peut être chiffrée avec un mot de passe que vous aurez définit.
Pour générer une clé SSH, il suffit d’exécuter la commande suivante :

ssh-keygen -t rsa -b 4096 -C "johndoe@gmail.com"

Il vous demandera où vous souhaitez l’enregistrer. Il est préférable dans notre cas de laisser le chemin par défaut afin de ne pas à devoir le re-définir par la suite pour chaque projet. (il suffit de presser ENTRÉE/ENTRER/ENTER)
Pour finir il vous demandera un mot de passe que vous pouvez définir.

Comment la récupérer ?

On a notre clé mais pour l’ajouter à notre compte GitHub/GitLab il nous faut la récupérer.
Dans le cas de
Windows : clip < ~/.ssh/id_rsa.pub
macOS : pbcopy < ~/.ssh/id_rsa.pub
Linux : cat ~/.ssh/id_rsa.pub
Si le Git Bash ne vous indique rien c’est que la clé c’est bien copiée dans votre presse papier.

Comment l’ajouter à mon compte GitHub/GitLab ?

Dans le cas de :
GitHub : https://github.com/settings/ssh/new
GitLab : https://gitlab.com/profile/keys
Définissez un titre à votre clé comme « Ordinateur de l’école » puis collez dans le grand champs de texte votre clé en pressant CTRL + V.

Comment la tester ?

Si votre clé a bien été ajoutée à votre compte vous devriez pouvoir exécuter la commande suivante sans problème :

ssh -T git@gitlab.com

Si une question concernant l’authenticité du serveur vous est demandée, répondez yes.
Il vous sera alors demandé d’entrer le mot de passe que vous aviez défini pour la clé SSH.
Si tout fonctionne correctement vous devriez voir apparaître : Welcome to GitLab, @lionelbovy!

Réaliser un projet Git

Il reste encore une petite étape à réaliser pour que notre service Git soit entièrement configuré, la création d’un repo (https://gitlab.com/projects/new).
Donnez lui un nom (« Mon Super Site » par exemple) et initialisez un README en cochant la case qui lui est dédiée, ce sera la fiche descriptive de votre projet Git.
Tout est bon du côté service Git, il nous reste plus qu’à configurer notre projet et le lier à notre repo Git.
Il faut se rendre dans le dossier de notre projet via le logiciel Git Bash en exécutant la commande « cd CHEMIN/DE/VOTRE/DOSSIER »

Astuce : Commencez par « cd  » puis faites glisser votre dossier dans le Git Bash, ça complètera le chemin d’accès de ce dernier.

Puis exécutez la commande : « git init »
Maintenant il nous faut lier le dossier à notre repo via la commande : « git remote add origin git@gitlab.com:NOM_D_UTILISATEUR/NOM_DU_REPO.git »
Précédemment on a créé le repo avec un fichier nommé README.md, lequel n’est pas présent dans notre dossier. Il nous faut donc le « télécharger » via la commande : git pull origin master
Il vous sera demandé d’entrer le mot de passe de la clé SSH. Une fois que cela est fait, vous de devriez voir apparaître le fichier dans votre dossier de projet.
Maintenant nous allons créer un fichier index.html par exemple.
Si vous exécutez la commande « git status », vous devriez voir notre fichier index.html indiqué en rouge. Cela signifie qu’il n’est pas encore ajouté à la « file d’attente » (commit) pour être envoyé sur le repo (push).
Pour ajouter tout les fichiers du dossier, on peut exécuter la commande : git add .
Si vous ré-exécutez la commande « git status », notre fichier devrait être passé au vert. Il nous faut donc maintenant confirmer notre file d’attente en créant un commit via : git commit -m « Mon premier commit »
Puis l’envoyer sur notre repo en effectuant un push via : git push origin master
Félicitations, vous venez de créer votre premier commit!

Parlons organisation

C’est bien beau de commit sur une branche master tout le temps mais cette pratique n’est pas optimale. En effet, il est préférable de créer plusieurs branches selon vos besoins.
Par exemple, on peut suivre un système de branche modulaire, etc… D’autres qui servirait à faire des tests puis pour finir celle qui est la branche finale, celle de production, la master.
Nous allons donc créer notre première branche en exécutant : git checkout -b NOM_DE_LA_BRANCHE
Vous êtes désormais sur la branche que vous avez désignée, correctifs par exemple. Vous pouvez ajouter, modifier, supprimer des fichiers sans toucher à la branche master. Une fois que vous êtes satisfait de vos modifications et que vous souhaitez les fusionner avec la branche master, il d’ajouter les fichiers et de commit : git add . && git commit -a -m « Correctifs »
Si && ne fonctionne pas, il faut exécuter les commandes séparément.
Une fois que vous avez commit, nous pouvons revenir à notre branche master en exécutant : git checkout master
Puis fusionner les 2 branches en exécutant : git merge NOM_DE_LA_BRANCHE
Vous pouvez désormais push vos changements sur le repo.

Projet Crossfit La Vesdre

– Crossfit LaVesdre –

Message de notre nouveau client :

Bonjour,

Suite a l’ouverture d’une salle de Crossfit prévue début 2019, mon collègue et moi sommes à la recherche d’un logo.

Après avoir discuté avec Monsieur Bonjean, je vous communique les infos nécessaires :

– le mot « Crossfit La Vesdre » doit apparaître
– couleurs blanche et verte
– rappel d’eau pour la Vesdre
– logo épuré
– disque d’haltérophilie de 20kg présent sur le logo de la marque ELEIKO

Je vous remercier d’avance.

Christophe Orban.

5 TT Info : les tables de vérité

Une table de vérité définit les relations entrée(s)/sortie(s) en faisant la liste de toutes les possibilités, 1 ligne à la fois dans la table.
« La table de vérité est une compilation sous la forme d’un tableau de tous les états logiques de la sortie en
fonction des états logiques des entrées ».

Les étapes à suivre pour construire une table de vérité sont les suivantes :

  • Écrire sur une première ligne le nom des variables d’entrée et de la variable de sorie ;
  • Diviser le tableau en un nombre de colonnes égal au total des entrées et de la sorie. Ainsi, la table de
    vérité d’une foncion logique à deux entrées aura trois colonnes (deux pour les entrées et une pour la
    sorie) ;
  • Déterminer le nombre de combinaisons possibles à l’aide des variables d’entrées. Ce nombre est égal à
    deux exposant le nombre d’entrées. Par exemple, avec trois entrées, il y aura 23 = 8 combinaisons
    possibles ;
  • Tracer des lignes horizontales dont le nombre est égal au nombre de combinaisons possibles. Chaque ligne
    correspond alors à une combinaison et à une seule des variables d’entrée ;
  • Complétez chaque ligne par une combinaison possible des variables d’entrée. La meilleure manière
    d’énumérer toutes les combinaisons sans se tromper est de compter en binaire ;
  • Inscrire dans la colonne « sorie » la valeur de la foncion pour chaque combinaison. Les exemples suivants
    vous aideront à mieux maîtriser cete méthode.

Table de vérité d’une fonction à deux variables d’entrée
Soit une fonction logique F de deux variables booléennes a et b. La sortie est à l’état logique 1 quand une et uniquement une seule variable d’entrée est à l’état logique 1.
La figure suivante présente la table de vérité de cette fonction.


Table de vérité d’une fonction F à deux variables d’entrée :
Vous remarquez que cette table de vérité est composée de trois colonnes (deux pour les entrées et une
pour la sortie) et de cinq lignes.
Sur la première ligne sont inscrits les noms des variables d’entrées a et b et la sortie.
Les quatre combinaisons possibles des entrées a et b sont inscrites sur les quatre lignes suivantes. Ces
combinaisons sont inscrites dans l’ordre de comptage en binaire soit (00), (01), (10) et (11).
L’état logique de la sortie est inscrit dans la colonne « sortie » en face de chaque combinaison possible.
Quand a et b sont toutes les deux à l’état logique 0 ou à l’état logique 1, la fonction vaut 0 alors qu’elle est à
l’état logique 1 quand a = 0 et b = 1 ou quand a = 1 et b = 0.
Table de vérité d’une fonction à trois variables d’entrée
Soit une fonction logique F à trois variables d’entrée a, b et c. La sortie de cette fonction logique est à l’état
logique 1 si uniquement deux variables d’entrées sont à l’état logique 1. La table de vérité de cette fonction
est donnée à la figure suivante.
Table de vérité d’une fonction F à trois variables d’entrée :


Dans cette figure, vous remarquez qu’avec trois variables d’entrées, il y a 23 = 8 combinaisons possibles. Ces
combinaisons sont énumérées selon la manière de compter en binaire avec 3 bits. On obtient dans l’ordre :
(000), (001), (010), (011), (100), (101), (110) et (111).
Les variables d’entrée sont représentées sous la forme de trios où le poids le plus fort correspond à a alors
que c a le poids le plus faible. La sortie est à l’état logique 1 quand seulement deux entrées sont à l’état
logique 1. Elle est à l’état logique 0 pour toutes les autres possibilités.
Sur l’ensemble des combinaisons possibles, trois possibilités donnent lieu à des cas où uniquement deux
variables sont à l’état logique 1, ces possibilités sont les suivantes :

  • b = 1 et c = 1 avec a = 0, séquence (011),
  • a = 1 et c = 1 avec b = 0, séquence (101),
  • a = 1 et b = 1 avec c = 0, séquence (110). »
    Source: htps://www.maxicours.com/souien-scolaire/mathemaiques-appliquees/bep-meiers-de-lelectrotechnique/
    188959.html

Une table de vérité est une table mathématique utilisée en logique.

Ces outils sont couramment utilisés en électronique (porte logique) et en informatique (tests) selon un code d’entrée binaire (0 / 1, faux / vrai, éteint / allumé, etc.) Une sortie, également représentée sous forme de colonne, est la résultante des états d’entrée, elle-même exprimée sous forme d’état binaire. En d’autres termes, lorsque les entrées remplissent les conditions du circuit, la (les) sortie est activée.

Exemple de Base

Table de vérité de ET a b a ET b 0 0 0 0 1 0 1 0 0 1 1 1

Table de vérité de OU

a b a OU b 0 0 0 0 1 1 1 0 1 1 1 1

Table de vérité de XOR (OU exclusif)

a b

Table de vérité de l’implication

a b a ⇒ b 0 0 1 0 1 1 1 0 0 1 1 1

Exemple composé

Table de vérité de a.(b + c)

a b c a.(b + c) 0 0 0 0 0 0 1 0 0 1 0 0 0 1 1 0 1 0 0 0 1 0 1 1 1 1 0 1 1 1 1 1

Opérations unaires

Il existe 4 opérations unaires

– Faux logique

– Vrai logique

– Identité logique

– Négation logique

a XOR b 0 0 0 0 1 1 1 0 1 1 1 0

Opérations binaires

Une opération binaire est une opération à deux arguments (p et q par exemple), chacun pouvant être vrai ou faux (p {V, F} ; q {V, F}) : leur combinaison (p x q) donne ainsi 22 = 4 manières de combiner leur valeur de vérité.

Conjonction logique (ET)

Une conjonction logique est une opération logique sur deux valeurs de vérité, typiquement les valeurs de deux propositions, qui produit une valeur vraie si ses deux opérandes sont vrais.

Disjonction logique (OU)

Une disjonction logique est une opération logique sur deux valeurs de vérité, typiquement les valeurs de deux propositions, qui produit une valeur vraie si au moins un des opérandes est vrai.

Implication logique

Une implication logique est une opération logique sur deux valeurs de vérité, typiquement les valeurs de deux propositions, qui produit une valeur fausse seulement dans le cas où le premier opérande est vrai, et le second est faux.

Équivalence logique

Une équivalence logique (également connu sous le nom de biconditionelle) est une opération logique sur deux valeurs de vérité, typiquement les valeurs de deux propositions, qui produit une valeur vraie si les deux opérandes sont faux ou vrais.

Disjonction exclusive

Une disjonction exclusive est une opération logique sur deux valeurs de vérité, typiquement les valeurs de deux propositions, qui produit une valeur vraie si une et une seule des deux des opérandes est une valeur vraie.

NON-ET logique

Le NON-ET est une opération logique sur deux valeurs de vérité, typiquement les valeurs de deux propositions, qui produit une valeur fausse si les deux opérandes sont vrais.

NON-OU logique

Le NON-OU logique est une opération logique sur deux valeurs de vérité, typiquement les valeurs de deux propositions, qui produit une valeur vraie si ses deux opérandes sont fausses.

5TT info : Binaire/décimal/hexadécimal

Décimal

Définition : Le système décimal est un système de numération utilisant la base dix. Dans ce système, les puissances de dix et leurs multiples bénéficient d’une représentation privilégiée.

Application

Nous utilisons le système décimal dans nos activités quotidiennes. Ce système est basé sur une logique à dix symboles, de 0 à 9, avec une unité supérieure (dizaine, centaine, etc.) à chaque fois que dix unités sont comptabilisées. C’est un système positionnel, c’est-à-dire que l’endroit où se trouve le symbole définit sa valeur. Ainsi, le 2 de 523 n’a pas la même valeur que le 2 de 132. En fait 523 est l’abréviation de 5·100+2·10+3. On peut selon ce principe imaginer une infinité de systèmes numériques fondés sur des bases différentes.

Binaire

Définition : Le système binaire est le système de numération utilisant la base 2. On nomme couramment bit (de l’anglais binary digit, soit « chiffre binaire ») les chiffres de la numération binaire positionnelle. Un bit peut prendre deux valeurs, notées par convention 0 et 1.

Application

En informatique, outre la base 10, on utilise très fréquemment le système binaire (base 2) puisque la logique booléenne est à la base de l’électronique numérique. Deux symboles suffisent: 0 et 1. Cette unité élémentaire ne pouvant prendre que les valeurs 0 et 1 s’appelle un bit (de l’anglais binary digit). Une suite de huit bits s’appelle un octet.

Hexadécimal

Définition : Le système hexadécimal est un système de numération positionnel en base 16. Il utilise ainsi 16 symboles, en général les chiffres arabes pour les dix premiers chiffres et les lettres A à F pour les six suivants.

Application

On utilise aussi très souvent le système hexadécimal (base 16) du fait de sa simplicité d’utilisation et de représentation pour les mots machines (il est bien plus simple d’utilisation que le binaire). Il faut alors six symboles supplémentaires: A, B, C, D, E et F.
Le tableau ci-dessous montre la représentation des nombres de 0 à 15 dans les bases 10, 2 et 16:

Tableau regroupant quelques premiers nombres

Conversion décimal – binaire

Division par 2 :

je prend ton exemple de 42 :
R= reste, on ne divise qu’en entier, donc reste 1, soit rien : 0

42/2=21 R->0*
21/2=10 R->1
10/2=5 R->0
5/2=2 R->1
2/2=1 R->0
1/2=0 R->1*


pour obtenir le nombre binaire a partir de ça : suffit de prendre les Restes et de les mettre dans l’ordre « de bas en haut »(de * a **) ce qui donne : 101010 
a ça il faut ajouter les 0 pour obtenir un octet (8 bits) et on obtient donc : 00101010.


Voici un exemple avec le nombre 77

Conversion binaire – hexadécimal

Pour commencer nous allons prendre un chiffre en binaire exemple :

00101010

Ensuite nous allons les regroupés par 4 chiffres.

0010

1010

En binaire nous savons que

0010 est égale à 2 décimal soit 2 hexadécimal

1010 est égale à 10 décimal soit A hexadécimal

Etdonc cela nous donnera comme résultat 2A en hexadécimal

5TT Info : Les couleurs

Les couleurs

Le RVB et le CMJN sont deux standards colorimétriques utilisés lors de créations graphiques, cependant, il faut bien comprendre leurs différences pour pouvoir les utiliser en adéquation avec la situation, car chacun de ces standards à ses spécificités que je vais détailler ci-dessous.

RVB :

Le RVB (rouge vert bleu) correspond au RGB anglais (red green blue). Créé en 1931 par la commission internationale de l’éclairage, ce standard regroupe les trois couleurs primaires monochromatiques soit : le rouge, le vert et bleu. Le code couleur de ce standard s’exprime ainsi : R : 0 V : 0 B : 0 (le 0 correspondant au noir) cette couleur donnera un noir. Remarque : la valeur du RVB peut soit s’écrire en pourcentage de 0 à 100% soit en numéraire de 0 à 255.


Voici un exemple avec RVB et sans RVB

Sans rentrer dans des détails techniques qui ne serviront de toute manière à rien le RVB est utilisé pour l’affichage de vos écrans. Vous pourrez donc constater aisément qu’un même code couleur RVB aura un rendu différent sur deux écrans si bien que leur configuration diffère !

CMJN :

Le CMJN appelé plus techniquement quadrichromie est un standard colorimétrique pour l’imprimerie permettant de reproduire un large spectre de couleurs. Ces couleurs sont créées en mélangeant trois encres de bases : le cyan, le magenta et le jaune auxquels on ajoute le noir.

On peut considérer le CMJN comme un standard physique, il ne peut être exprimé qu’en pourcentage: C 86 : M 85 : J 79 : N : 100, sur un écran une couleur CMJN pourra être affichée de façons différentes mais ce ne sera pas le cas pour une impression, ainsi, une couleur CMJN sera rigoureusement identique sur chaque impression et sur chaque imprimante et c’est là son point fort.

Nous utilisons également le CMJN pour palier à certains problèmes de couleurs inconnues, en effet, certaines couleurs RVB trop saturées sont inconnues par les encres d’impression et ne pourront être parfaitement restituées sur un Print!

Conclusion

Pour tout ce qui est WEB on utilisera le RVB et dès que l’on passera sur des affiches, des prospectus,… Tout ce qui est destiné a être imprimé on passera au mode CMJN pour éviter de mauvaises surprises lors de l’impression.