Enseignant du Cours: DJAFER BADDOU (PhD)

Courriel: djafer.baddou@uqo.ca

Programmation 2D/3D

Préparation

OpenGL/WebGl

et Plan de

Projection

Introduction à

l’Infographie

Introduction à

OpenGL et

WebGL

Introduction

Contenu

Mathématiques

de l’infographie

Techniques

d'animation et

simulation 2D/3D

Effets Optiques et

Etat du Rendu

Rappel:

 Un système graphique doit comprendre toutes les composantes d’un système informatique.

 Dans ce système réside un environnement de développement intégré, IDE.

 Un IDE est un ensemble d'outils destinés à programmer dans un langage donné,

 Il permet au programmeur d’optimiser son temps de travail au développement de logiciels

ou d’applications.

Système d’entrée

(input devices)

Unité Central

de traitement

Unité de

traitement

Graphique

Une

tampon

de frames

Système de sortie

(output device)

Introduction

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

 Pour le langage C/C++ on a deux IDE a utiliser au choix soient:

1. Code::Blocks

2. Visual Studio

 Autre IDE

 Qt Creator: est gratuit, source ouvert mais utilise une bibliothèque haut

niveau QtGL pour que OpenGL fonctionne.

 Pour Javascript on a besoin seulement d’un browser qui support Javascript.

 webGL: bibliothèque OpenGL basée web ( web based )

 Pas besoin de compilateur ni IDE.

 Besoin:

1. une connaissance de javascript et

2. d’un navigateur qui support javascript.

Environnement de Développement Intégré

Introduction

Préparation OpenGL/WebGl et Plan de Projection

IDE: Code::Blocks

Code::Blocks : Téléchargement

 Rendez vous

sur http://www.codeblocks.org/downloads

 Télécharger le programme d’installation pour

Windows.

 Il y a 2 versions disponibles avec ou sans mingw.

 Mingw, Il s’agit d’un compilateur.

 Il est gratuit, source ouvert

 Pour les compilateurs C, C++, Java et Fortran

 Dans les plateformes Windows, MacOS, et

Linux.

C'est là que Code::Blocks se distingue des

autres EDI car il est portable, ce qui signifie

qu'il est disponible sur au moins les systèmes

les plus utilisés et plus connus soit Windows,

Linux et Mac OS X.

Code::Blocks :Téléchargement

 Si vous l’avez déjà installé, prenez la version sans

compilateur mingw.

 Si vous avez un doute prenez la version avec le

compilateur mingw.

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Code::Blocks : Installation

Après completer le téléchargement,

commencer l’installation.

Le fichier d’installation est localisé dans le

dossier “download” ou “Téléchargement”

Code::Blocks : Installation

lancez l’installation Voici les différentes étapes :

 Run the setup: Après le lancement du fichier

d’installation le setup Wizard s’affiche a l’écran.

 Pour continuer cliquer sur le bouton “next”.

Code::Blocks : Installation

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Code::Blocks : Installation

lancez l’installation Voici les différentes étapes :

1. Lire the Software Agreement. Lire la licence et cliquer “I Agree” si vous êtes d’accord aux

termes et vous voulez installer Code::Blocs.

2. Choix des composants: Être sure de sélectionner l’installation au complet. Laissez bien

MinGW sélectionné si vous ne l’avez pas sur votre PC.

cliquer "Next" pour continuez l’installation

3. Choix du chemin ou installer: Choisir le chemin d’installation. Par défaut, Code::Blocks

sera installer dans:

C:\Program Files (x86)\CodeBlocks\.

 Si accepter l’installation par défaut cliquer "Install",

 autrement cliquer le bouton "Browse" pour sélectionner un autre chemin.

4. Attendez pour Compléter l’installation: L’installation prend quelques minutes pour

completer et affiche son progress.

 Lors du lancement de Codeblocks vous devriez voir GCC ( en fait il s’agit de minGW)

détecté. Sinon je vous conseille de recommence l’installation en vérifiant que

MinGW est sélectionné.

5. Finir l’installation: When prompted, do not run Code::Blocks. First, complete install

wizard. This is done by clicking the "Next" button on the installer screen, then clicking

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Code::Blocks : Lancer Code::Blocks : Lancer

1. Lancer par un double click sur l’icone

Code::Blocks placer sur le bureau. S’il n’y a pas

une raccourcie sur le bureau, trouver

Code::Blocks dans

Start--> All Programs ---> Code::Blocks -->

CodeBlocks.exe

Code::Blocks : Completer Installation du Compilateur

Si demander, accept GNU GCC Compiler as the

default. Cliquer ou sélectionner le compilateur GNU

GCC, puis cliquer "Set as Default". Pour continuer,

cliquer "OK".

Code::Blocks : Associations des Fichiers

Si demander l’option de sélectionner , select the

option to associate Code::Blocks with C and C++ file

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Code::Blocks : Créer un Nouveau Projet

Dans la page principale,

sélectionner le lien et cliquer sur le

projet.

Code::Blocks : Choisir le Type de Projet

Sur le "New from Template" fenêtre, sélectionner le

"Files" heading a gauche de la fenêtre. puis,

sélectionner l’option "C/C++ Source". Cliquer "Go"

pour continuer.

Code::Blocks : Empty File Wizard

Utiliser le Wizard pour créer et

configurer le fichier C ou C++. Pour

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Code::Blocks : Choisir le Type Fichier

Sélectionner l’option de créer un fichier "C" ou

“C++”. Une fois sélectionnée, cliquer le bouton

"Next" pour continue.

Code::Blocks : Chemin du Fichier

Cliquer le bouton "..." sur le menu setup pour ouvrir

la fenêtre explorateur du fichier pour créer le fichier

source C ou C++.

Code::Blocks : Terminer Wizard du Fichier

Code::Blocks : Sélectionner Nom de Fichier

1. Naviguer a la location désirée pour enregistrer

le fichier source C ou C++. Choisir un nom de

fichier. Finalement, cliquer "Save" pour

enregistrer.

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Code::Blocks : Entrer le Code Source

Simple C Program

Entrer le code source du programme "Hello World“.

Copier le code dessous dans Code::Blocks.

#include <stdio.h>

#include <stdlib.h>

int main( ){

printf("Hello World.\n");

return 0;

}

Code::Blocks : Visualiser le Programme

Après l’exécution du programme une fenêtre DOS

s’affiche et montre a message "Hello World." le

Code::Blocks : Compiler et Executer le Programme

Cliquer le Icon "Build" pour compiler le programme

ou "Build and Run" Pour compiler et exécuter le

programme a la fois.

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

IDE: Visual Studio

Avant d’effectuer l’installation

Vérifiez que votre ordinateur est

prêt à installer Visual Studio 2017.

 Appliquez les dernières mises à

jour Windows

 Vérifiez que votre espace disque

est suffisant

 Visual C++ fournit un environnement de

développement puissant et flexible pour

la création d’applications basées sur

Microsoft Windows et Microsoft. NET.

 Visual C ++ se compose des éléments

suivants:

 Un compilateur C/C++.

 Les librairies standard de C/C++: ATL,

STL, MFC, etc .

 IDE de C++.

 Visual C++ offre aussi la possibilité de

développer des applications IDE; pour

Windows, iOS, Android web, and cloud.

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Visual Studio : Téléchargement

Visual Studio : Installation

 Choisissez les composants que vous

souhaitez installer ou « installation par

défaut » pour installer les outils les plus

courants.

 téléchargement de Visual Studio 2017.

✓ Téléchargez Visual Studio 2017

✓ Le fichier sera téléchargé et vous devriez

« Enregistrer sous... » si nécessaire

Visual Studio : Lancement

C’est prêt ! Créer une application.

✓ Redémarrez votre ordinateur, le cas

échéant

✓ Lancez Visual Studio 2017

✓ Identifiez-vous (en option)

✓ Bienvenue !

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Visual Studio : Projets

 Visual C++ permet de construire

différents types de projets:

 Ex: Console, MFC, ATL, etc.

Visual Studio : Projet Console Vide

 Un projet console par exemple

contiendra ce qui suit:

 Le nom du projet avec ses

fichiers de spécifications.

 Un répertoire Debug qui

contiendra les exécutables.

 Les fichiers sources (.h et

.cpp).

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Visual Studio : Projet Console Vide

 Au menu bar, choisir File, New, Project.

 Dans la catégorie Visual C++ choisir Empty

Project et donner un nom au projet

“HelloWorld”.

 dans Solution Explorer, cliquer droit

Source Files choisir Add, New Item.

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Visual Studio : Projet Console Vide

 Vous avez créée un projet console

vide pour C or C++ code.

 Copier le code dessous dans un

nouveau fichier C++,

“HelloWorld.cpp” file, entrer le code

#include <iostream>

int main()

{

std::cout << "Hello, World!" << std::endl;

return 0;

}

 Appuyer sur CTRL-F5 pour build and run.

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Visual Studio : Projet Console Vide

 Un projet doit être d’abord compilé

avant d’être exécuté.

 L’exécution d’un programme peut être

en 3 modes différents: 1- mode avec

debugger, 2- mode sans le debugger

ou 3- mode release.

 Exécuter le programme a partir de

ligne de command ( the command

line) .

 Taper helloworld.

 Cette capture d’écran montre les

fichiers avec Hello World.

 Félicitation, l’environnement est

configuré.

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

IDE : Debugger F5

 Lorsqu’on appuie sur la touche F5 (Start

Debugging), Visual studio lance

l’application et lui attache le débogueur.

 Le débogueur de Visual Studio est un outil

puissant qui permet d'observer le

comportement d'exécution d’un

programme et de localiser les erreurs

logiques.

 Le débogueur permet de rompre ou de

suspendre l'exécution d’un programme afin

d'examiner le code, d'évaluer et de

modifier des variables du programme, voir

les registres, voir les instructions créées à

partir du code source et d'afficher l'espace

mémoire utilisé par l’application.

IDE : Debugger F5

 Lorsqu’on appuie sur la touche CTRL F5

(Start without Debugging), Visual studio

lance l’application sans lui attacher le

débogueur.

 Sans le débogueur attaché, lorsque

l'application s'exécute, il ne sera pas

possible de faire des points d'arrêt

émettent des messages de débogage.

 Avec le mode release, les informations de

débogage ne seront pas affichées et

l'exécution du code est optimisée,

contrairement aux modes précédents.

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

Visual Studio Debugger F5

 Voici des liens utiles pour apprendre la

construction d’applications avec

Microsoft Visual C++:

 http://msdn.microsoft.com/en-

us/vstudio/cc136611

Visual Studio : Debugger F5

 Voir les rubriques à droite de la page:

1. Getting Started with Visual Studio

2. Projects and Solutions

3. Files and Folders

4. Finding your way around Visual

Studio

5. Finding your way around your code

6. Basic Debugging

7. Working with Designers

Environnement de Développement Intégré

Préparation OpenGL/WebGl et Plan de Projection

main.cpp

Fichier source de C/C++ programme

 #include <iostream> C/C++ préprocesseur, <….> le fichier est dans le

standard include.

 using namespace std permet d'éviter juste des collisions entre les

noms provenant de librairies extérieures et ton code.

 Il est donc nécessaire pour l'utiliser de placer l'injonction : « using

namespace std »; en début de programme, ou le préfixe : « std:: » à

chaque appel d'objet, classe ou fonction de celle-ci « std::cout »

 Tout programme de C++ doit avoir la fonction main() comme point

d’entré.

 La fonction main() retourne un entier, peut accepter des arguments

entre parenthèses ( ), le corps de main( ), aussi toute fonction, doit

être entre accolades { }.

 Le corps de chaque fonction() contient des instructions dont chacune

termine avec un point virgule ( ; )

 Je compile et link helloWorld.cpp à ligne de commande:

 g++ -o helloWorld helloWorld.cpp

 J’obtient le fichier exécutable et je l’exécute à la ligne de

commande:

 helloWorld

#include <iostream>

using namespace std;

int main( )

(

cout << " Hello World

!" << endl;

return 0 ;

}

 à la fin du programme

la fonction main() doit

retourner l’entier 0 au

système d’exploitation,

indication de son

succès et affiche:

 Si non une erreur

devrait être traiter.

Application Programme

Hello World !

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Abstraction

Permet la

distinction (oriente)

entre les objets par

leur classe

appartenance.

Les langages

informatiques

modernes créent

des Programmes

Orienté Objet

(POO) dont la

particularité on:

Classe

Abstraction

Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Programmation d’Applications

Class Point: ./header/point.h

Class Point:. /source/point.cpp

#include "point.h" /* instruction

au compilateur de trouver la

déclaration de la classe Point dans le

fichier point.h */

Point::Point ( ) { /* Point( ) est une

fonction spéciale appelée

constructeur qui a le nom du class */

/* constructeur sert à initialiser les

variables */

m_x = 0 ;

m_y = 0 ;

/* constructeur ne retourne aucun

type même void */

}

void Point::printMe ( ) {

cout << endl;

cout << "Le point d'origine O ( " <<

m_x << " , " << m_y << " ) " << endl;

}

#ifndef __POINT_HH // C

préprocesseur directive: on veut

définir

#define __POINT_HH //point.h une

seule fois

#include <iostream>

using namespace std;

class Point {

//class : unité de base d’un

programme C++, qui regroupe:

// 1- des données

private:

int m_x , m_y ;

// et

public:

//2- des fonctions

Point( ) ;

void printMe( ) ;

} ; //termine avec (;)

#endif // __POINT_HH

//dans une seule entité

Classe

une unité de base

d’un programme

C++, qui définit un

type de variable

qui consiste d’un

ensemble de

variables et

fonctions.

Cette variable

s’appelle objet (

ou instance ) de

class.

le symbole :: est un opérateur de résolution

de portée (scope)

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Les langages

informatiques

modernes créent des

Programmes Orienté

Objet (POO) dont la

particularité on:

 Classe

 Abstraction

 Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Programmation d’Applications

Encapsulation

est un mécanisme

consistant à

rassembler les

données et les

méthodes au sein

d'une classe ( ou

structure ) en cachant

l'implémentation de

l'objet. La classe est:

 Protégé en accès.

 Sécurisée.

 Facile au maintenance.

L'encapsulation

garantie l'intégrité du

contenu de la

structure.

Class Point: ./header/point.h

Class Point:. /source/point.h

private indique que

ces membres (

données ou

fonctions ) sont

accessible,

généralement, que

par des fonctions

membres de la

class

contrairement au

public.

Privatisation des

données privées (

private ) est

appelée

encapsulation des

données.

#ifndef __POINT_HH // C

préprocesseur directive: on veut

définir

#define __POINT_HH //point.h une

seule fois

#include <iostream>

using namespace std;

class Point { //class : unité de base

d’un programme C++, qui:

private:

int m_x , m_y ; //regroupe des

données et

public:

Point( ) ; //des fonctions

dans une seule entité

void printMe( ) ;

} ; //termine avec (;)

#endif // __POINT_HH

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Les langages

informatiques

modernes créent des

Programmes Orienté

Objet (POO) dont la

particularité on:

 Classe

 Abstraction

 Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Programmation d’Applications

Polymorphisme

Permettre de

redéfinir dans

une classe

dérivée les

méthodes dont

elle hérite de sa

classe mère.

une même

méthode

possède alors

plusieurs

formes..

Exemple:

overloading and

overriding.

Class Point: ./header/point.h

Class Point:. /source/point.cpp

#include "point.h"

Point::Point ( ) {

m_x = 0 ; m_y = 0 ; }

//overloading

Point::Point (int x, int y ) {

m_x = x ; m_y = y ;

}

void Point::printMe ( ) {

cout << endl;

cout << "Le point d'origine O ( "

<< m_x << " , " << m_y << " ) " <<

endl;

}

//overloading

void Point::printMe (int x,int y ) {

cout << "Le point d'origine O ( " <<

m_x = x << " , " << " ) " << endl; <<

m_y = y

}

#ifndef __POINT_HH // C préprocesseur

directive: on veut définir

#define __POINT_HH //point.h une seule

fois

#include <iostream>

using namespace std;

class Point { //class : unité de base d’un

programme C++, qui:

private:

int m_x , m_y ; //regroupe des

données et

public:

Point( ) ;

//overloading

Point(int m_x , int m_y ) ;

void printMe( ) ;

//overloading

void printMe(int m_x , int m_y ) ;

} ; //termine avec (;)

#endif // __POINT_HH

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Application

Une

application

est un

programme

dont la

fonction

main() est

point le

d’entré.

Les langages

informatiques

modernes créent des

Programmes Orienté

Objet (POO) dont la

particularité on:

 Classe

 Abstraction

 Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Programmation d’Applications

./source/main.cpp

une classe définit juste un

modèle de variable (une sorte

de type) qui regroupe un

ensemble de variables et

fonctions dans un nouveau

type. Cette variable s’appelle

objet ( ou instance ) de class.

Comme toute variable, il faut

déclarer et définir une variable

du type comme suit:

Point p ;

Une fois l’objet déclaré, toutes

les méthodes sous le mot clé

public de la classe peuvent être

invoquées. On invoque les

méthodes avec l'opérateur

point ( . )

p.printMe( );

#include "point.h"

#include <iostream>

using namespace std;

int main( ){

Point p ; // déclare

un objet p ( instance ) de

class Point

p.printMe( );

return 0 ; //retourne

la valeur 0

}

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Les langages

informatiques modernes

créent des Programmes

Orienté Objet (POO)

dont la particularité on:

 Classe

 Abstraction

 Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Programmation d’Applications

Réutilisation

On compile point.cpp pour obtenir

un fichier objet point.o

g++ -c point.cpp

De cette façon le fichier objet point.o peut

être réutiliser par autres programmeurs

sans sa modification.

C’est une façon de réutilisation de code.

L'importance des progiciels conçus à l'aide de

la programmation orientée-objet est dans sa

capacité de réutilisation.

Lorsque vous utilisez un ou plusieurs objets qui

existent déjà dans votre banque, vous ne

partez pas à zéro.

Toutes les particularités au dessus sont un

exemple de réutilisation de même que la

production d’un fichier objet ou l’héritage sont

que deux façons de réutilisation de code.

Class Point:

./source/point.cpp

#include "point.h" /*

instruction au compilateur de

trouver la déclaration de la

classe Point dans le fichier

point.h */

Point::Point ( ) { // Point( ) est

une fonction spéciale appelée

m_x = 0 ; //

constructeur qui a le nom du

class

m_y = 0 ; // ne

retourne aucun type même void

// constructeur sert à initialiser

les variables

}

void Point::printMe ( ) {

cout << endl;

cout << "Le point d'origine O (

" << m_x << " , " << m_y << " ) "

<< endl;

}

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Les langages

informatiques modernes

créent des Programmes

Orienté Objet (POO)

dont la particularité on:

 Classe

 Abstraction

 Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Programmation d’Applications

Application Exécutable de ./source/main.cpp

On link le fichier objet point.o avec le fichier

main.cpp pour obtenir le fichier exécutable Point.exe

du programme qui crée un objet Point:

g++ -o Point main.cpp point.o

On obtient le fichier exécutable et on l’exécute à la ligne

de commande:

./ Point

À l’exécution le programme affiche les coordonnées du

point.

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Les langages

informatiques

modernes créent

des Programmes

Orienté Objet (POO)

dont la particularité

on:

 Classe

 Abstraction

 Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Programmation d’Applications

Héritage

Permettre la création

d’une classe à partir

d’une classe existante.

 La classe dérivée (

fille ) contient sous

certaines conditions

les attributs et les

méthodes de la

classe origine (Mère

ou super-classe ).

 est une technique

très puissante et

plus pratique.

 il est très utile

qu’une classe soit

construite à partir

d'une autre classe,

en conservant les

propriétés de la

classe d'origine et en

acquérant de

nouvelles propriétés.

Fichier:

./header/shape.h

Fichier: ./source/ shape.cpp

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Les langages

informatiques

modernes créent

des Programmes

Orienté Objet

(POO) dont la

particularité on:

 Classe

 Abstraction

 Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Programmation d’Applications

Compile Link Build: ./source/shape.cpp

 On compile

et link shape.cpp

pour obtenir

une bibliotheque

libshape.a et libsh

ape.dll

 le fichier

objet libshape.a

peut être

réutiliser par

autres programm

eurs

sans sa modificati

on.

 C’est une façon

de réutilisation

de code.

Fichier: ./source/main.cpp

Préparation OpenGL/WebGl et Plan de Projection

Rappel

Une API est un

ensemble réutilisa

ble de:

 fonctions,

 structures,

 classes,

 constantes et

 autres objets,

Les langages

informatiques

modernes créent

des Programmes

Orienté Objet

(POO) dont la

particularité on:

 Classe

 Abstraction

 Encapsulation

 Polymorphisme

 Application

 Réutilisation

 Héritage

Interface de Programmation d’Applications (API)

Qu’est-ce qu’une API ?

Une API permet de fournir un

certain niveau:

 d’abstraction au dévelop

peur, le cas d’une API sous

forme de classe.

 d’encapsulation elle masqu

e la complexité de l’accès à

un système ou à

une application

en proposant de

connaitre seuls les

paramètres et les valeurs

retournées.

 il s'agit d'une certaine façon

de l'interface proposée à

l'utilisateur.

Grâce aux API, un développeur

n’a donc pas à se soucier de

la façon dont les fonctions ont

été implémentées

pour pouvoir l'utiliser dans un

programme.

Une API peut être

utiliser pour faciliter

le développement d’

une application :

 logiciels,

 jeux,

 etc…

API vs Application

Fonctionnalités

d’une API

 L’ API est un outil

puissant et simple pour

simplifier la tâche du

programmeur.

 Le programmeur pourra

donc se concentrer sur

des tâches plus

importantes.

Localiser une API

L’API en tant qu’un

certain nombre de

fonctions, classes et

autres objets sont

généralement localisés

au sein d’un même

fichier sous forme des

bibliothèques avec des

extension *.h *.dll *.a,

etc…

Caractéristiques

Préparation OpenGL/WebGl et Plan de Projection

Exemple: API et Application de Painting

 L’interface entre un programme d’application

(ex. painting) et un système graphique est

spécifiée à l’aide d’un ensemble de fonctions

dans une librairie.

 C’est ces spécifications qu’on appelle: API)

Interface de Programmation d’Applications (API)

 L’utilisateur agit sur l’application par la souris et reçoit le résultat a l’écran.

L’application fait appelle seulement aux fonctions de l’API. Tous les détails de l’API

et le modèle (hardware) du système graphique sont masqués.

 au dessous un modèle de système graphique est utilisé ou les pilotes ( drivers )

interprète l’introduction des données et l’affichage des résultats.

Préparation OpenGL/WebGl et Plan de Projection

Modèle Stylo Dessinateur (Pen Plotter)

 Historiquement, les systèmes graphiques étaient en 2D. Le principe

de base de ces systèmes est appelé: Pen plotter model (PP).

Exemple de Modèle du Système Graphique

Interface de Programmation d’Applications (API)

Un PP produit des images en déplaçant un stylo dans deux

directions (horizontale et verticales). Un tel système

graphique peut être décrit par deux fonctions

1. Moveto(x,y): déplace le stylo à la position (x, y).

2. Lineto(x,y): trace une ligne de la positon courante au point (x, y).

 On obtient le dessin a 2D suivant:

 On peut obtenir un dessin a 3D avec le modèle PP. Mais

l’extension a 3D n’est pas adéquate et très complexes quant

a l’utilisation des fonctions MoveTo(x , y) et LineTo(x , y).

 On a besoin de développer des API a 3D plus adéquatent

qui tient en considération de la trigonométrie et d’autres

sujets a détailler.

Préparation OpenGL/WebGl et Plan de Projection

Exemples de spécifications API 3D

 Le modèle de caméra synthétique est la base de plusieurs API

populaires (OpenGL, DirectX, etc.) . Les fonctions implantées dans

ces API incluent les spécifications suivantes:

 des objets: Un objet est défini à l’aide d’ensemble de sommets

(vertices). Les API peuvent aussi contenir des primitives rapide

pour l’affichage (ex. lignes, polygones, texte);

 de l’observateur (camera): Pour une bonne flexibilité de la

camera on a 4 types de spécifications:

1. Sa position donnée par le Centre de Projection (GOP) ;

2. Son orientation par rapport au system de coordonnées de

la camera dont l’origine est GOP;

3. Sa longueur focale pour déterminer la portion visible de la

scène projetée sur le plan de projection;

4. Son plan de projection donnée par son hauteur (h) et sa

largeur (w);

 des sources lumineuses définir pour chaque source sa position,

sa puissance, sa couleur et sa direction;

 de la propriété du matériel qui est une caractéristique des

objets en présence de la lumière.

Interface de Programmation d’Applications (API)

Triangle

Spécifications de la caméra

Préparation OpenGL/WebGl et Plan de Projection

Qu'est-ce qu'OpenGL?

OpenGL (Open Graphics Library ) est

une API standard:

 pour développer des applications

qui produisent des graphiques

2D/3D.

 pour produire des graphiques 2D/3D

indépendants du plateforme.

 Les APIs de graphiques utilisées

dans le cours sont: OpenGL et ses

extensions.

 Dans sa forme moderne, OpenGL est

une librairie multiplateforme qui

sert à communiquer avec les GPU

programmable, dans le but de

rendre des images 3D en temps réel.

OpenGL et ses Extensions

Ou se situe API OpenGL?

Ou est localiser OpenGL?

Préparation OpenGL/WebGl et Plan de Projection

Portabilité

Cross-Plateforme et Portabilité d’OpenGL

 L'une des grandes forces d'OpenGL -

et l'une de ses priorités - est sa

portabilité dans les divers systèmes

d'exploitation.

 Developing applications using OpenGL

is all about being portable.

 Comme les plateformes et leur

configurations de leurs dispositives

d’entrer, de sortie, etc. sont

différentes d’un système a un autre,

 OpenGL, pour assurer sa portabilité,

n’a pas introduit dans sa library des

fonctionnalités pour interagir avec des

dispositives d’entrée (sourie, clavier,

etc. ) ou de sortie ( moniteur)

OpenGL et ses Extensions

 Que doit OpenGL faire pour exploiter la

plateforme et ses dispositives?

 La library OpenGL n’a pas dans sa library des

spécifications .

 Ex.: The problem is that creating a window and

an OpenGL context is not part of the OpenGL

specification. That means it is done differently

on every platform out there!

 Luckily there are libraries out there that

abstract this process, so that you can maintain

the same codebase for all supported platforms.

 Ces libraries sont appelées extensions OpenGL.

Préparation OpenGL/WebGl et Plan de Projection

Portabilité

Les Extensions OpenGL

 Une extension OpenGL est une library

qui fournit une interface (API)

multiplateforme entre le système

d’exploitation et OpenGL.

 Comme, OpenGL est une librairie

multiplateforme.

 OpenGL permet d’utiliser ces extensions

ayant des interfaces qui ont des accès à

toutes les options du matériel (

hardware ) graphiques a travers les

pilotes ( drivers).

OpenGL et ses Extensions

Il y a plusieurs manières avec lesquelles

un utilisateur peut interagir avec un

système graphique par exemple par les

dispositifs d’entrée ( sourie, clavier, etc. )

En utilisant des API des librairies

Graphiques , un programmeur peut

construire des images en interagissant

avec le système grâce aux dispositifs

d’entrée: sourie, clavier, etc.

Dans ce cas OpenGL laisse le système de

fenêtrage, etc. aux extensions qui fournit

une interface multiplateforme entre le

système de fenêtrage et OpenGL.

Préparation OpenGL/WebGl et Plan de Projection

Les Extensions OpenGL
36
 There are many libraries des 
extensions OpenGL around 
that can create a window and 
an accompanying OpenGL 
context. 
 There is no best library out 
there, because everyone has 
different needs and ideals.
 Les 3 extensions OpenGL :
1. SFML,
2. SDL and
3. GLFW,
 Are the  most popular 
libraries as they are :
 superior in control,
 ease of use and
 more up-to-date
OpenGL et ses Extensions
SFML: is a cross-platform C++ multimedia library that provides 
access to graphics, input, audio, networking and the system. 
The downside of using this library is that it tries hard to be an 
all-in-one solution. You have little to no control over the 
creation of the OpenGL context, as it was designed to be used 
with its own set of drawing functions 
SDL: is also a cross-platform multimedia library, but targeted at 
C. That makes it a bit rougher to use for C++ programmers, but 
it's an excellent alternative to SFML. It supports more exotic 
platforms and most importantly, offers more control over the 
creation of the OpenGL context than SFML.
GLFW: as the name implies, is a C library specifically designed 
for use with OpenGL. Unlike SDL and SFML it only comes with 
the absolute necessities: window and context creation and 
input management. It offers the most control over the OpenGL context 
creation out of these three libraries.
GLUT : freeglut and OpenGLUT,.
Préparation OpenGL/WebGl et Plan de Projection 

Extension Utilisées

OpenGL entant que source

ouverte (open source) offre des

outils aux développeurs et les

encourage à faire évoluer la

bibliothèque graphique et à la

rendre utilisable sur un très

grand nombre de plateformes.

En plus d'OpenGL, je vais utiliser

trois librairies bien pratiques:

1. GLUT

2. GLEW

3. WebGL

OpenGL et ses Extensions

GLUT (GL Utility Toolkit), qui

fournit une interface multi-

plateforme entre le système

de fenêtrage et OpenGL.

GLUT fournit une interface

au système de fenêtrage

(window system) limité mais

simple et portable.

WebGL

GLUT

WebGL permet au contenu

web d'utiliser une API

basée sur OpenGL ES 2.0:

 pour effectuer des

rendus 3D dans un

<canvas> HTML

 dans les navigateurs qui

le supportent,

 sans avoir recours à des

modules

complémentaires.

 Les éléments WebGL

peuvent être mélangés

avec d'autres éléments

HTML et composés avec

d'autres parties de la

page.

GLEW

GLEW (GL Extensions

Wrangler), qui simplifie la

gestion des différentes

versions d'OpenGL et ses

extensions.

 While the available libraries all have advantages and disadvantages,

 they do all have a certain program flow in common.

 You start by specifying the properties of the window, such as the

title, the size and the properties of the OpenGL context..

Préparation OpenGL/WebGl et Plan de Projection

Les Extensions OpenGL et Utilisations

1. Before you can start drawing things, you need to

initialize OpenGL.

 This is done by creating an OpenGL Context.

 OpenGL Context is essentially a state machine that

stores all data related to the rendering of your

application.

 When your application closes, the OpenGL context

is destroyed and everything is cleaned up.

2. Your application will then initiate the event loop.

 the event loop contains an important set of tasks

that need to be completed over and over again

until the window closes.

 These tasks usually handle window events like

mouse clicks, updating the rendering state and

then drawing.

3. This program flow would look something like this in

pseudocode:

OpenGL et ses Extensions

#include <libraryheaders>

int main() {

createWindow(title, width, height);

createOpenGLContext(settings);

while (windowOpen) {

while ( event = newEvent() )

handleEvent(event);

updateScene();

drawGraphics();

presentGraphics();

}

return 0;

}

Préparation OpenGL/WebGl et Plan de Projection

Ou récupérer OpenGL, GLUT et GLEW?

4. Les drivers OpenGL nVidia et AMD supportent au

moins OpenGL 2.0 sur leurs cartes graphiques.

5. Les chipset intégré Intel ont moins de chance.

6. Pour les moins chanceux, Mesa fournit une

implémentation software multiplateforme et open-

source d'OpenGL 2.1 qui fonctionne sur Windows et

presque toute les plateformes Unix.

7. Mesa est également, l'implémentation OpenGL la

plus utilisé sous Linux, elle fonctionne également

avec X server pour interfacer OpenGL avec la carte

graphique en utilisant les pilotes "direct rendering

interface" (DRI).

9. Pour déterminer si votre pilote DRI supporte OpenGL

2.0 lancer la commande glxinfo depuis un xterm.

10.Si OpenGl 2.0 n'est pas supporté sur votre machine,

désactiver le driver pour vous replier vers Mesa et

son implémentation software.

OpenGL , GLUT et GLEW

1. OpenGL est livré en standard sur MacOS X,

Windows et la plupart des distributions Linux.

2. Il faut être sur que votre implémentation

d'OpenGL supporte au moins la version 2.0

 L'implémentation OpenGL de MacOS

X supporte toujours OpenGL 2.0, au

moins en software si le pilote de la

carte graphique ne la fournit pas.

 Sur Windows, cela dépend des

pilotes de votre carte graphique.

3. pour déterminer quelle version d'OpenGL

votre driver supporte utiliser:

1. OpenGL Extensions Viewer de

RealTech ou

2. GPU Caps Viewer, uniquement sous

Windows.

Préparation OpenGL/WebGl et Plan de Projection

Ou récupérer OpenGL, GLUT et GLEW?

OpenGL, GLUT et GLEW?

 OpenGL devrait déjà être présent

 ce sera probablement Freeglut / GLUT qui

manquera.

 GLUT est très daté maintenant ( Nov 2001 ) et

n'est pas activement supporté –

 donc vous devriez certainement utiliser Freeglut

à la place.

 Vous n'aurez pas à changer votre code du tout, et

quelques fonctionnalités supplémentaires seront

disponibles.

Les plateformes supportées:

1. Windows

2. Linux

3. Mac

OpenGL , GLUT et GLEW

9. nVidia fournit aussi une implémentation

OpenGL propriétaire pour Linux qui vise

uniquement leur GPU; Cette implémentation

devrait fournir OpenGL 2.0 ou plus sur

n'importe quel carte graphique nVidia

récente.

10. Pour installer GLUT et GLEW, allez chercher les

packages binaires sur leurs sites respectifs.

MacOS X est livré avec GLUT préinstallé.

11. La plupart des distribution linux ont GLUT et

GLEW disponible aux travers de leurs "system

package",

12. Il y a un clone de GLUT open source appelé

OpenGLUT.

13. Pour un développeur C chevronné, il peut

installer ses librairies et de les faire

fonctionner avec votre IDE sans problèmes.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL et GLUT

Télécharger GLUT:

OpenGL , GLUT et GLEW

IDE

Option

Code::Blocks

Windows

opengl32

glew32

Code::Blocks Linux

DevC

lopengl32

lglew32

Visual Studio

opengl32.lib

glew32.lib

Vous trouverez ici des ensembles de fichiers pré-packagés :

http://freeglut.sourceforge.net/index.php#download ou

http://www.xmission.com/~nate/glut.html

 Lorsque vous téléchargez ces fichiers, vous trouverez

que le dossier Freeglut (GLUT) a trois sous-dossiers:

1. bin: contient les fichiers dll pour l'exécution

2. include: les fichiers d'en-tête pour la compilation

3. lib: contient les fichiers de bibliothèque pour la

compilation

Installation GLUT

Les instruction d’installation suggèrent de:

1. Copier glut32.dll dans C:\windows\system

2. Copier glut32.lib dans C:\Program

Files\CodeBlocks\MinGW\lib

3. Copier glut.h dans C:\Program

Files\CodeBlocks\MinGW\include\GL

Préparation OpenGL/WebGl et Plan de Projection

Projet OpenGL avec GLUT

1. lancer Code::Blocks et choisir new

project.

2. Sélectionner new GLUT project and

appuyer Go pour continuer.

3. Appuyer Next a ce menu

4. Donner un nom au projet, et choisir sa

Location et appuyer sur Next

5. Indiquer a Code::Blocks ou les fichiers GL

sont places:

1. glut32.dll dans

C:\windows\system

3. glut32.lib dans

C:\Program Files\CodeBlocks\MinGW\lib

4. glut.h dans

C:\Program

Files\CodeBlocks\MinGW\include\G

Puis appuyer Next

OpenGL & Code::Blocks

Préparation OpenGL/WebGl et Plan de Projection

Projet OpenGL avec GLUT

6. Être sure que le compilateur est “GNU GCC

Compiler”, et appuyer sur Finish.

7. Ouvrir l’échantillon fichier source avec un

double click.

8. Dans le cas de Windows, ajouter

#include <windows.h>

Toute au debut.

Compile et build l'application

OpenGL & Code::Blocks

Préparation OpenGL/WebGl et Plan de Projection

OpenGL et GLUT

File

Location

glut32.dll

Windows XP | Server 2003:

\WINDOWS\system\

Windows 2000:

\WINNT\system\

glut32.lib

\Program Files\Microsoft Visual Studio NET

2003

\Vc7\PlatformSDK\Lib

glut.h

\Program Files\Microsoft Visual Studio NET

2003

\Vc7\PlatformSDK\Include\gl

Étape 1: Installation GLUT

Windows vient avec OpenGL, aussi Visual Studio

vient avec la bibliothèque OpenGL, mais ni

Windows ni Visual Studio vient avec GLUT.

http://freeglut.sourceforge.net/index.php#download

http://www.xmission.com/~nate/glut.html

OpenGL & Visual Studio

Mettre les fichiers suivants dans les locations

suivantes:

Préparation OpenGL/WebGl et Plan de Projection

OpenGL et GLUT

Étape 2: Créer un projet console vide:

1. File → New → Project...

2. La fenêtre New Project s’affiche.

3. Dans Project Types: choisir: Visual C++

Projects.

4. Puis dans Templates choisir: Win32 Console

Project

5. Nom le projet et le chemin et cliquer OK.

6. Le Wizard de l’application Win32 s’affiche.

7. Cliquer sur la tabulation Application

Settings a gauche,

8. Sélectionner Application Type: Console

Application et Additional Options: Empty

Project. Then

9. click Finish.

10. le projet est créé.

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL et GLUT

Étape 3: Ajouter le code source

When you include GLUT in a program, it

automatically includes the rest of the

OpenGL header files.

So explicitly having

#include <GL/gl.h>

#include <GL/glu.h>

in either Linux or Windows isn't necessary,

provided you include GLUT.

In short, you only need to do this:

#include <GL/glut.h>

Do not use a backslash in the

preprocessor #include.

#include <GL\glut.h> ← No!

Visual Studio will still compile your

program if you do this, but gcc/g++ in Linux

OpenGL & Visual Studio

Étape 4: Modifier les Propriétés du Project

Avant la compilation du projet, il faut configure le

Linker pour qu’il trouve la bibliothèque GLUT. Deux

façons pour ouvrir la fenêtre Property Pages :

1. Utiliser l’option menu.

2. Utiliser l’explorateur localiser dans le coin haut a

droite.

3. Utiliser l’option menu:

Menu Visual Studio: Project → Properties.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL et GLUT

Étape 4: Modifier les Propriétés

du Project

2. Utiliser l’explorateur

localiser dans le coin

haut a droite.

Cliquer droit sur le nom du

projet et sélectionner

Properties.

Utilisant l’une ou l’autre des

deux options, la fenêtre

Property Pages s’affiche et faire

le suivant:

1. A partir Configuration:

list box, sélectionner All

Configurations.

2- dans la fenêtre Property

Pages a gauche, sélectionner

l’arborescence Linker

sélectionner Input option.

OpenGL & Visual Studio

Copier et coller:

opengl32.lib glu32.lib glut32.lib

Dans le coté droite Additional Dependencies

Visual Studio peut trouver la bibliothèque GLUT.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 8

Utiliser OpenGL & freeglut in

Visual Studio 2008

On a besoin de trois:

1. Visual Studio 2008

2. OpenGL

3. freeglut

OpenGL & Visual Studio

Copier et coller:

opengl32.lib glu32.lib glut32.lib

Dans le coté droite Additional

Dependencies

Visual Studio peut trouver la

bibliothèque GLUT.

Visual Studio 2008

Assuming you have VS2008

installed, the first step then is to

download the Windows header

files.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 8

Utiliser OpenGL & freeglut in

Visual Studio 2008

On a besoin de trois:

1. Visual Studio 2008

2. OpenGL

3. freeglut

OpenGL & Visual Studio

La bibliotheque freeglut

Le site web officiel de freeglut a la derniere version code source

seuleument.

Il faut la compiler.

Put freeglut.h in: "C:\Program Files\Microsoft Visual Studio

9.0\VC\include\GL\" (note: you'll have to create the GL folder)

Put freeglut_ext.h in: "C:\Program Files\Microsoft Visual Studio

9.0\VC\include\GL\"

Put freeglut_std.h in: "C:\Program Files\Microsoft Visual Studio

9.0\VC\include\GL\"

Put freeglut.lib in: "C:\Program Files\Microsoft Visual Studio

9.0\VC\lib\"

Put freeglut.dll in: "C:\WINDOWS\system32\"

Put glut32.dll in: "C:\WINDOWS\system32\"

Put glut32.lib in: "C:\Program Files\Microsoft Visual Studio

9.0\VC\lib\"

Put glut.h in: "C:\Program Files\Microsoft Visual Studio

9.0\VC\include\GL\"

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio

Note: In previous versions of Visual Studio, you

were required to install the Platform SDK. That

isn't the case anymore in VS2008 since it already

includes the SDK.

Ok, now that you've "installed" freeglut, you need

to make the C++ project aware of freeglut.

1. Create a new C++ Console project in VS.

1a. In the Create Application Wizard, select Empty

Project.

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio

2. Add a new cpp file to the empty

project. Add a bit of template code in

there. For example:

#include

int main ()

{

return 0;

}

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio

3. If you try to compile, VS will fail to

compile. This is because it can't see the

freeglut header files.

3a. On the menu bar, go to Project ->

Properties (Alt+F7).

3b. Go to Linker -> Input and copy and

paste this line.

opengl32.lib glu32.lib glut32.lib

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio

4. If you try to compile now,

errors may still show up. You'll

probably need to add directories

for your header and lib files in

Project/Solutions directories.

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio

5. The program should now

compile. Try a simple freeglut

application.

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

Setting up OpenGL in Visual Studio 2013:

Telecharger,

 FreeGLUT

 Make sure you download FreeGLUT

2.8.1.

 GLEW (GL Extension Wrangler), which

adds support for the newest OpenGL

versions eg. OpenGL version 4.5.

 This means that we can access and

play with OpenGL’s newest

functions.

OpenGL & Visual Studio

Create New Project:

1. Now open Visual Studio and create a New

Project.

2. Pick Visual C++ and select Empty Project:

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

 Choose a good location and enter a

name for this project.

 Now click OK and we are ready to

create our main.cpp file which is our

entry point for our program.

 Press CTR+SHIFT+A to add a new file

and call it main.cpp

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

We can write down the main

function declaration and build

and run the program by

pressing F5 key:

int main(int argc, char **argv)

{

return 0;

}

OpenGL & Visual Studio

Now we are finally ready to set up FreeGLUT and GLEW in Visual

Studio 2013. There are two ways do to that:

From Visual Studio we set up paths to the lib/include folders where

we extracted FreeGLUT and GLEW.

 Copy those important files (.libs, .h) from FreeGLUT and GLEW in

our project in a folder called Dependencies or Libraries or

however you want to call it.

 After that we tell Visual Studio to reference this internal folder.

 This way, when you copy your project to another

PC you will still have these important files with

the project and you don’t have to set them up

again in Visual Studio.

 Also you have much more control over your

project.

I will go with the second option, even if it takes a little

more work to do.

First things, we create a folder called Dependencies.

Here we will put FreeGLUT’s and GLEW’s required files

(.libs and .h) in two subfolders called freeglut and glew.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

Let’s start with GLEW because it’s easier.

 Extract GLEW archive somewhere else.

Not in your project.

 Create a new folder called glew in

Dependencies folder from your project.

 Go where you extracted GLEW, there

should be an include folder with a GL

subfolder with only 3 files glew.h,

glxew.gl, wglew.h.

 Copy all of them in your glew directory

from your project.

OpenGL & Visual Studio

Go again where you extracted GLEW, there

should be an lib directory with a Release

directory inside,

choose Win32 directory and copy glew32.lib

in your glew directory from your project.

Glew Directory in Dependencies

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

Now let’s prepare FreeGLUT (version 2.8.1 or

later)

 Extract Freeglut archive somewhere else. Not

in you project.

 Create a new folder called freeglut in

Dependencies folder in your project.

 Unlike GLEW, we have to compile Freeglut,

because there are no dll or lib files.

 Go where you extracted Freeglut archive and

there should be a VisualStudio folder.

 For this version of Freeglut in VisualStudio

folder there is only 2008, 2010, 2012 versions

of Visual Studio.

OpenGL & Visual Studio

Open 2012 folder, and there should be a

freeglut.sln, open it and load all projects.

Now be sure that freeglut is your main

project in Solution Explorer.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

 Also select how you want to compile,

Win32 or x64. By default is Win32.

 Press F5 and compile.

 After you compile,

 a lib folder was created (root archive

directory)

 with a x86 folder and

 a Debug folder inside.

 There you can find the freeglut.lib.

 Copy it to your freeglut directory in your

project.

OpenGL & Visual Studio

Go again where you extracted Freeglut

and there should be:

 include folder with

 GL subfolder inside.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

 There are four .h files:

1. freeglut.h,

2. freeglut_ext.h,

3. freeglut_std.h and

4. glut.h.

OpenGL & Visual Studio

Copy them to your freeglut folder from

your project

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

 Now files are ready but they are still

not linked with Visual Studio project.

 To do this open your project again

and go to properties:

1. Here we select Linker > General.

2. Find Additional Library Directories

field and write freeglut and glew

directories that we just created

above. Copy-Paste text :

Dependencies\freeglut;Dependencies\glew

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

 Now under Linker go to

 Input and the first line is

Additional Dependencies.

 Here we have to provide our .lib file

names.

 Notice that opengl32.lib is part of

Windows SDK.

 Just add this .lib names near the existing

ones. Copy-Paste text :

opengl32.lib;freeglut.lib;glew32.lib;

 Click OK

 now we are ready to initialize OpenGL

and create a new project.

OpenGL & Visual Studio

Préparation OpenGL/WebGl et Plan de Projection

OpenGL with Visual Studio 2013

 If you want to build for a x64

architecture, go through above

steps but make sure you copy

from x64 folders and

 you build Freeglut with x64

selected.

 Also your project must be

compiled using x64.

OpenGL & Visual Studio

Common mistakes:

 Adding Dependency folder in

Solution Explorer. It’s not necessary

 Removing other libs from

Additional Dependencies

 Invalid paths

 Copying wrong libs. You will get

LNK errors.

 Using FreeGLUT for x64 and GLEW

for x86 or vice versa. LNK errors

Préparation OpenGL/WebGl et Plan de Projection

Code Blocks on Ubuntu 16.04/17.04

 Code Blocks is a free, open-source IDE

for C, C++ and Fortran. It can run on

Linux, Mac, Windows.

 The latest version, Code Blocks 16.01,

was released on January, 2016.

Code Blocks features:

 Supports multiple compilers including

GCC, Clang, Visual C++, MinGW and many

 Syntax highlighting

 C++ code completion, class browser, a hex

editor

 A debugger with full breakpoint support

 A plug-in system to support other

programming languages.

 And more

OpenGL & Linux Ubuntu

Installation:

 Code Blocks is in the default Ubuntu package

repository.

 Ouvrir un terminal et écrire la commande

 sudo apt install codeblocks

 Ubuntu 17.04 contains Code Blocks version 16.01.

However, the version is outdated in Ubuntu 16.04.

 To install the latest version, you can use PPA.

 Run the following 3 commands:

 sudo add-apt-repository ppa:damien-

moore/codeblocks-stable

 sudo apt update

 sudo apt install codeblocks codeblocks-contrib

 This to add Code Blocks PPA to system,

 update local package index and

 install the package

Préparation OpenGL/WebGl et Plan de Projection

Code Blocks on Ubuntu 16.04/17.04

Start CodeBlocks

Once installed, you can start

Code Blocks IDE from:

• Unity Dash or

• your preferred app launcher.

• Better from terminal:

 sudo codeblocks

OpenGL & Linux Ubuntu

Start CodeBlocks

 Upon first launch of Code Blocks, you will be

prompted with a Compilers auto-detection

window:

Préparation OpenGL/WebGl et Plan de Projection

Code Blocks on Ubuntu 16.04/17.04

Start CodeBlocks

Two popular open-source C compilers

available for Linux are:

1. GNU C Compiler: open-source C

compiler

2. Clang: much faster and uses far less

memory than GCC and it provides

extremely clear and concise

diagnostics (error and warning

messages).

OpenGL & Linux Ubuntu

Start CodeBlocks

To install gcc, run:

 sudo apt install gcc

To install the Clang compiler:

 sudo apt install clang

If you want to compile native Windows binaries

on Linux, then you can install the mingw-w*

package. ( * = 32 or 64 ):

 sudo apt install mingw-w64

 sudo apt install mingw-w32

Préparation OpenGL/WebGl et Plan de Projection

Code Blocks on Ubuntu 16.04/17.04

Start CodeBlocks

 After choosing your default C

compiler,

 you can start using Code Blocks to

write programs.

ubuntu code blocks setup

You can also choose your default

compiler by going to:

Settings > Compiler > Global Compiler

Settings.

OpenGL & Linux Ubuntu

Préparation OpenGL/WebGl et Plan de Projection

OpenGL (GLUT) on Linux (Ubuntu)

Start CodeBlocks

Install the following packages from the

ubuntu repository:

1. freeglut3-dev

2. mesa-common-dev

from terminal:

 sudo apt-get install freeglut3

freeglut3-dev mesa-common-dev

Check your /usr/include/GL folder to

verify the installation of the openGL

headers that you intend to use.

OpenGL & Linux Ubuntu

Compiling and Linking

• You will have to use the -lglut linker option

with gcc/g++ to compile a program with glut

library.

• For example, to compile the program cube.c

that uses GLUT type, use

 gcc -o cube cube.c -lglut –lGLU -lGL

to get the binary executable cube.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL GLUT GLEW

On a configuré la Library

OpenGL avec les autres

extensions:

1. GLUT (GL Utility Toolkit),

qui fournit une interface

multi-plateforme entre le

système de fenêtrage et

OpenGL.

2. GLEW (GL Extensions

Wrangler), qui simplifie la

gestion des différentes

versions d'OpenGL et ses

extensions.

Préparation des Applications OpenGL

INTRODUCTION

 While the available libraries all

have advantages and

disadvantages,

 they do all have a certain

program flow in common.

 You start by specifying the

properties of the window, such

as the title, the size and the

properties of the OpenGL

context..

on va implementer le modèle de la

camera synthétique selon les

hypotheses discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Canvas qui va

représenter le plan de

projection a deux dimension ou la

scène sera projetée.

 All code below will be

independent of your choice of

OpenGL extensions.

 Les spécifications des objets de la

scène sont indépendants des

spécifications de la camera.

 Implémenter les objets dans la

scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

Préparation OpenGL/WebGl et Plan de Projection

Les Extensions OpenGL et Utilisations

1. Before you can start drawing things, you

need to initialize OpenGL.

 This is done by creating an OpenGL

Context.

 OpenGL Context is essentially a state

machine that stores all data related to

the rendering of your application.

 When your application closes, the

OpenGL context is destroyed and

everything is cleaned up.

2. Your application will then initiate the

event loop.

 the event loop contains an important

set of tasks that need to be completed

over and over again until the window

closes.

 These tasks usually handle window

events like mouse clicks, updating the

rendering state and then drawing.

3. This program flow would look something

like this in pseudocode:

Préparation des Applications OpenGL

#include <libraryheaders>

int main() {

createWindow(title, width,

height);

createOpenGLContext(settings)

;

while (windowOpen) {

while ( event = newEvent() )

handleEvent(event);

updateScene();

drawGraphics();

presentGraphics();

}

return 0;

}

on va implementer le modèle

de la camera synthétique

selon les hypotheses

discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Canvas

qui va représenter le plan

de projection a deux

dimension ou la scène sera

projetée.

 All code below will be

independent of your choice of

OpenGL extensions.

 Les spécifications des objets de

la scène sont indépendants des

spécifications de la camera.

 Implémenter les objets dans la

scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

Préparation OpenGL/WebGl et Plan de Projection

Inclure les Librairies OpenGL et Extensions

Dans cette première partie, nous

allons ouvrir une fenêtre

avec GLUT.

Nous allons commencer par

configurer GLUT pour avoir une

fenêtre vide sur l'écran.

Chaque plateforme a ses headers

OpenGL à différents endroits.

GLUT, pour l'inclure, vous devez

passer par quelques tricks multi-

plateforme (les if def).

Son header est généralement

dans GL/glut.h, mais le

framework GLUT livré avec

MacOS X utilise les conventions

de header Apple. Ducoup, le

header de GLUT est dans

GLUT/glut.h.

Préparation des Applications OpenGL

En plus d'OpenGL, je

vais utiliser les

extensions:

1. GLEW (GL

Extensions

Wrangler), qui

simplifie la

gestion des

différentes

versions

d'OpenGL et ses

extensions

2. GLUT (GL Utility

Toolkit), qui

fournit une

interface

multiplateforme

entre le système

de fenêtrage et

OpenGL.

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

int main( int argc, char** argv)

{

Il y a également un bug

dans la façon dont les

versions récentes des

headers C standards de

Visual Studio

interagissent avec

glut.h, ce qui requière

que stdlib.h soit déclaré

avant glut.h.

on va implementer le modèle

de la camera synthétique

selon les hypotheses

discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Canvas

qui va représenter le plan

de projection a deux

dimension ou la scène sera

projetée.

 All code below will be

independent of your choice of

OpenGL extensions.

 Les spécifications des objets de

la scène sont indépendants des

spécifications de la camera.

 Implémenter les objets dans la

scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

Préparation OpenGL/WebGl et Plan de Projection

Implémenter un Contexte avec GLUT

1. GLUT fournit une interface au système

de fenêtrage (window system) limité

mais simple et portable.

2. GLUT (GL Utility Toolkit), fournit une

interface multiplateforme entre le

système de fenêtrage et OpenGL.

3. initialisé GLUT en appelant la fonction

glutInit,

4. nous utilisons glutInitDisplayMode

pour spécifier les buffers dont notre

framebuffer par défaut disposera.

Dans notre cas, un buffer de couleur

(GLUT_RGB) avec double buffering

(GLUT_DOUBLE) est suffisant.

Préparation des Applications OpenGL

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

int main( int argc, char** argv) {

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB |

GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello World");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

on va implementer le modèle

de la camera synthétique selon

les hypotheses discutées :

 Choisir les librairies:

soient OpenGL ou WebGL.

 Implémenter un Context

qui va représenter le

plan de projection a deux

dimension ou la scène

sera projetée.

 All code below will be

independent of your choice of

OpenGL extensions.

 Les spécifications des objets de

la scène sont indépendants des

spécifications de la camera.

 Implémenter les objets dans la

scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

La technique du double buffering permet de stocker deux couleur buffers

dans le framebuffer et d'alterner à chaque frame entre le buffer affiché sur

l'écran et celui qui est en court de rendu, pour avoir une animation fluide.

Au besoin d'un buffer de profondeur (depth buffer) ou d'un buffer de

masque (stencil buffer), nous pouvons l'appeler ici.

Préparation OpenGL/WebGl et Plan de Projection

Implémenter un Contexte avec GLUT

5. Appel a glutInitWindowSize pour

initialiser la taille de notre fenêtre du

plan de projection à 400x300 (la taille

du film) et

6. nous créons notre fenêtre avec

glutCreateWindow.

Pour finir, nous faisons appel à deux

fonctions qui "reçoivent" les events

(callbacks) de la fenêtre:

7. glutDisplayFunc qui calcul notre image

quand la fenêtre lui demande de

s'afficher.

8. glutIdleFunc qui met continuellement

à jour le "fade factor" entre les deux

images.

Préparation des Applications OpenGL

on va implementer le modèle

de la camera synthétique selon

les hypotheses discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Context qui

va représenter le plan de

projection a deux dimension

ou la scène sera projetée.

 All code below will be

independent of your

choice of OpenGL

extensions.

 Les spécifications des objets de

la scène sont indépendants des

spécifications de la camera.

 Implémenter les objets dans la

scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

int main( int argc, char** argv) {

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB |

GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello World");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

Une fois que GLUT a créé notre fenêtre, on prépare OpenGL pour

faire des appels. All code below will be independent of your choice

of OpenGL extensions.

Préparation OpenGL/WebGl et Plan de Projection

Choix de Version d’OpenGL avec GLEW

Une fois que GLUT a créé notre fenêtre,

on prépare OpenGL pour faire des appels.

1. inclure GL/glew.h permet de récupérer

tout les headers ( les versions)

OpenGL, sans les récupérer vous

même.

2. La première appelle est d'initialiser

GLEW.

3. Lorsque glewInit est appelé, il définit

des appels au fonctions OpenGL en se

basant sur la version ainsi que les

extensions supportées par votre

matériel.

4. vérifions que GLEW_VERSION_2_0 est

définit pour être certain que le

matériel qui exécuté le programme a

au moins OpenGL 2.0.

Une fois que la version est vérifié,

l'utilisation de GLEW devient quasiment

invisible, et nous n'aurons plus besoin

d'interagir avec lui.

Préparation des Applications OpenGL

on va implementer le modèle

de la camera synthétique selon

les hypotheses discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Context qui

va représenter le plan de

projection a deux dimension

ou la scène sera projetée.

 All code below will be

independent of your

choice of OpenGL

extensions.

 Les spécifications des objets de

la scène sont indépendants des

spécifications de la camera.

 Implémenter les objets dans la

scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

int main( int argc, char** argv) {

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB |

GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello World");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

glewInit();

if (!GLEW_VERSION_2_0) {

fprintf(stderr, "OpenGL 2.0 not

available\n");

return 1;

}

Préparation OpenGL/WebGl et Plan de Projection

Configurer les Resources

1. une fonction

make_resourc

es pour

configurer

nos

ressources

OpenGL.

Pour le moment

make_resourece

s est vide (

dummy).

On revient a

cette fonction

dans les

prochains

chapitres.

Préparation des Applications OpenGL

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

Int make_resources( ) {

return 1 ;

}

int main(int argc, char** argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB |

GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello World");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

glewInit();

if (!GLEW_VERSION_2_0) {

fprintf(stderr, "OpenGL 2.0 not

available\n");

return 1;}

if (!make_resources()) {

fprintf(stderr,

"Failed to load

resources\n");

return 1;

}

glutMainLoop();

return 0;

}

on va implementer le modèle

de la camera synthétique selon

les hypotheses discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Context qui

va représenter le plan de

projection a deux dimension

ou la scène sera projetée.

 All code below will be

independent of your

choice of OpenGL

extensions.

 Les spécifications des objets de

la scène sont indépendants des

spécifications de la camera.

 Implémenter les objets dans la

scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

Préparation OpenGL/WebGl et Plan de Projection

Affichage du Plan de Projection

Si nos ressources

sont correctement

chargé,

1. glutMainLoop

prend le relais.

 Il affiche la

fenêtre ( plan de

projection), et

commence par

recevoir les

events de l'UI, et

appel les

fonctions que l'on

a configuré en

réponse à ses

events (les

callbacks).

 glutMainLoop

fermera aussi le

programme

quand l'utilisateur

le quittera.

Préparation des Applications OpenGL

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

Int make_resources( ) {

return 1 ;

}

int main(int argc, char** argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB

| GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello

World");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_fact

or);

glewInit();

if (!GLEW_VERSION_2_0)

{

fprintf(stderr, "OpenGL

2.0 not available\n");

return 1;

}

if (!make_resources()) {

fprintf(stderr, "Failed to

load resources\n");

return 1;

}

glutMainLoop();

return 0;

}

on va implementer le modèle

de la camera synthétique selon

les hypotheses discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Context qui

va représenter le plan de

projection a deux dimension

ou la scène sera projetée.

 All code below will be

independent of your

choice of OpenGL

extensions.

 Les spécifications des objets de

la scène sont indépendants des

spécifications de la camera.

 Implémenter les objets dans la

scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

Le return 0 supprime les

avertissements du

compilateur et de toute

façon, jamais atteint.

Préparation OpenGL/WebGl et Plan de Projection

Affichage du Plan de Projection

static int

make_resources(void)

{

return 1;

}

static void

update_fade_factor(void)

{

}

static void render(void)

{

glClearColor(1.0f,

1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUF

FER_BIT);

glutSwapBuffers();

}

Préparation des Applications OpenGL

Arrivé ici, on écrit le

code:

1. de la fonction

make_resources,

2. des callbacks de

GLUT render, et

fonctionner le

dummy

programme.

3. glClearColor set

une couleur de

fond RGBA (ici

blanche) que

4. glClear utilise

pour remplir le

buffer de coulour

du framebuffer.

5. glutSwapBuffers

amène ensuite

notre coulour

buffer à l'écran.

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

Int make_resources( ) {return 1 ; }

int main(

int argc, char** argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello World");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

glewInit();

if (!GLEW_VERSION_2_0) {

fprintf(stderr, "OpenGL 2.0 not available\n");

return 1; }

if (!make_resources()) {

fprintf(stderr, "Failed to load resources\n");

return 1; }

glutMainLoop();

return 0;

}

on va implementer le modèle de la

camera synthétique selon les

hypotheses discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Contexte qui va

représenter le plan de

projection a deux dimension ou

la scène sera projetée.

 All code below will be

independent of your choice

of OpenGL extensions.

 Les spécifications des objets

de la scène sont

indépendants des

spécifications de la camera.

 Implémenter les objets dans

la scène.

 Définir le frustum.

 Définir la camera

synthétique

 Dessiner l’image sur le plan

de projection.

 Etc…

Plan

Avec tout ça en place, nous

pouvons maintenant compiler

et lancer notre programme.

Préparation OpenGL/WebGl et Plan de Projection

Compiler

sur MacOS

Sur Windows avec mingw:

gcc -o hello-gl-dummy.exe hello-gl-

dummy.c \ -lopengl32 -lglut32 -

lglew32

Sur Windows avec Visual C++:

cl /Fohello-gl-dummy.obj /c hello-gl-

dummy.c

link /out:hello-gl-dummy.exe hello-gl-

dummy.obj \opengl32.lib glut32.lib

glew32.lib

Compiler et Exécuter des Applications OpenGL

La commande qui compile

le programme et le link

aux libs OpenGL, GLUT et

GLEW peut varier suivant

les plateformes.

Sur la plupart des systèmes Unix, elle

devrait ressembler à ça:

gcc -o hello-gl-dummy hello-gl-dummy.c \

-I/usr/X11R6/include -L/usr/X11R6/lib \

-lGL -lGLEW -lglut

# Assuming GLEW was installed to

/opt/local

gcc -o hello-gl-dummy hello-gl-dummy.c \

-I/opt/local/include -L/opt/local/lib \

-framework OpenGL -framework GLUT -

lGLEW

Compiler sur Linux

sur Windows

Le reposit contient également les makefiles de chacune de ses plateformes.

make -f Makefile.MacOSX hello-gl-dummy # or Makefile.Unix or

Makefile.Mingw

nmake /f Nmakefile.Windows hello-gl-dummy.exe

makefile

Exécuter

Une fois que vous avez

compilé le programme, le

lancer le. Résultat, le plan

de projection une fenêtre

blanche.

Préparation OpenGL/WebGl et Plan de Projection

WebGL

 En 2006, Khronos Group a pris la gérance des

spécifications OpenGL.

 Ces spécifications sont:

 mises à jours pour supporter les

caractéristiques des GPU programmable

modernes.

 développées dans les domaines:

 de l'embarqué OpenGL ES ( OpenGL ES:

Embedded System ) et

 du web avec WebGL.

 Comme OpenGL est une API indépendante du

système d'exploitation et du matériel.

 Sa portabilité s'étend sur:

 les plateformes mobiles et sur les systèmes

embarqués grâce à l'API OpenGL ES et

 le web grâce à l'API WebGL.

WebGL Extension d’OpenGL pour le Web

 webGL est une API extension

d’OpenGL basée sur OpenGL ES 2.0.

 WebGL permet au contenu web

 d’effectuer des rendus 3D dans un

<canvas> HTML

 dans les navigateurs qui le

supportent,

 Les éléments WebGL peuvent être

mélangés avec d'autres éléments

HTML et composés avec d'autres

parties de la page.

 Pas besoin

 de compilateur

 ni IDE.

 Besoin:

 une connaissance de javascript et

 d’un navigateur qui support

javascript.

Préparation OpenGL/WebGl et Plan de Projection

WebGL

Le WebGL Contexte

index.htm

<!doctype html>

<head>

<title>WebGL Demo</title>

href="./css/webgl.css" type="text/css">

</head>

<body>

<canvas id="glCanvas" width="640"

height="480"> </canvas> <script

src="./js/WebGLMain.js"></script>

</script>

</body>

</html>

HTML Canvas et WebGL Contexte

 WebGL permet au

contenu web

 d’effectuer des rendus

3D dans un <canvas>

HTML

 dans les

navigateurs qui le

supportent,

 Les éléments WebGL

peuvent être mélangés

avec d'autres éléments

HTML et composés avec

d'autres parties de la

page.

 Pas besoin

 de compilateur

 ni IDE.

 Besoin:

 une connaissance

de javascript et

 d’un navigateur

qui support javascript.

 Pour dessiner des graphiques sur l'élément <canvas> on utilise un objet de

contexte Javascript, gl, qui crée des graphiques à la volée.

 La fonction main() ou webGLStart() du code JavaScript est appelée quand

le <script> est chargé. Son but est de créer le contexte WebGL pour rendre

du contenu.

./js/ WebGLMain.js

var gl; // le gl context variable

// Initialize the GL context

function initWebGL(canvas) {

gl = null;

try {

// Try to grab the standard context. If it

fails, fallback to experimental.

gl = canvas.getContext("webgl") ||

canvas.getContext("experimental-webgl");

}catch(e) { }

// If no GL context, give up now

if (!gl) { alert(" navigateur ou machine ne

supporte pas WebGL..");

return gl;

}

// Continuer si WebGL est disponible

return gl;

}

Page web avec Élément Canvas

Préparation OpenGL/WebGl et Plan de Projection

WebGL

Le WebGL Contexte

nomFichier.htm

<!doctype html>

<head>

<title>WebGL Demo</title>

href="./css/webgl.css" type="text/css">

</head><body>

<canvas id="glCanvas" width="640"

height="480"></canvas> <script

src="./js/WebGLCanvasTest.js"></scrip

</script></html>

Plan de Projection

 WebGL permet au

contenu web

 d’effectuer des rendus

3D dans un <canvas>

HTML

 dans les

navigateurs qui le

supportent,

 Les éléments WebGL

peuvent être mélangés

avec d'autres éléments

HTML et composés avec

d'autres parties de la

page.

 Pas besoin

 de compilateur

 ni IDE.

 Besoin:

 une connaissance

de javascript et

 d’un navigateur

qui support javascript

./js/ WebGLCanvasTest.js

function make_resources( ){

//initShaders();

//initBuffers();

}

function render( ){

// Définir la couleur d'effacement noir, et

opaque

gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Effacer le tampon de couleur avec la couleur

d'effacement spécifiée

gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFF

ER_BIT);

// gl.enable(gl.DEPTH_TEST);

drawScene();

}

Page web avec Élément Canvas

 L'élément <Canvas> c’est le plan de projection ou le

contexte javascript dessine la projection des objets

graphiques de la. scène

Préparation OpenGL/WebGl et Plan de Projection

Affichagedu Plan de Projection

static int

make_resources(void)

{

return 1;

}

static void

update_fade_factor(void)

{

}

static void render(void)

{

glClearColor(1.0f,

1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUF

FER_BIT);

glutSwapBuffers();

}

Plan de Projection

Arrivé ici, on écrit le

code:

1. de la fonction

make_resources,

2. des callbacks de

GLUT render, et

fonctionner le

dummy

programme.

3. glClearColor set

une couleur de

fond RGBA (ici

blanche) que

4. glClear utilise

pour remplir le

buffer de coulour

du framebuffer.

5. glutSwapBuffers

amène ensuite

notre coulour

buffer à l'écran.

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

Int make_resources( ) {return 1 ; }

int main(

int argc, char** argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello World");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

glewInit();

if (!GLEW_VERSION_2_0) {

fprintf(stderr, "OpenGL 2.0 not available\n");

return 1; }

if (!make_resources()) {

fprintf(stderr, "Failed to load resources\n");

return 1; }

glutMainLoop();

return 0;

}

on va implementer le modèle de la

camera synthétique selon les

hypotheses discutées :

 Choisir les librairies: soient

OpenGL ou WebGL.

 Implémenter un Contexte qui va

représenter le plan de

projection a deux dimension ou

la scène sera projetée.

 All code below will be

independent of your choice

of OpenGL extensions.

 Les spécifications des objets

de la scène sont

indépendants des

spécifications de la camera.

 Implémenter les objets dans

la scène.

 Définir le frustum.

 Définir la camera

synthétique

 Dessiner l’image sur le plan

de projection.

 Etc…

Plan

Avec tout ça en place, nous

pouvons maintenant compiler

et lancer notre programme.

Préparation OpenGL/WebGl et Plan de Projection

OpenGL et GLUT

WebGL

./js/ WebGLMain.js

function make_resources( ){

//initShaders();

//initBuffers();

}

function render( ){

// Définir la couleur

d'effacement noir, et opaque

gl.clearColor(0.0, 0.0, 0.0,

1.0);

// Effacer le tampon de

couleur avec la couleur

d'effacement spécifiée

gl.clear(gl.COLOR_BUFFER_BI

T|gl.DEPTH_BUFFER_BIT);

// gl.enable(gl.DEPTH_TEST);

drawScene();

}

1. glClearColor set une

couleur de fond RGBA que

2. glClear utilise pour remplir

le buffer de coulour du

framebuffer.

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

static int make_resources(void )

{ return 1;}

static void update_fade_factor

(void){ }

static void render(void){

// Définir la couleur

d'effacement noir, et opaque

glClearColor(1.0f, 1.0f, 1.0f,

1.0f);

// Effacer le tampon de couleur

avec la couleur d'effacement

spécifiée

glClear(GL_COLOR_BUFFER_BIT)

;

glutSwapBuffers();

}

./js/ WebGLMain.js

var gl;

// Initialize the GL context

function initWebGL(canvas) {

gl = null;

try { // standard context. If it

fails, fallback to experimental.

gl = canvas.getContext(

"webgl“) ||

canvas.getContext("experime

ntal-webgl");

}catch(e) { }

// If we don't have a GL

context, give up now

if (!gl) {

alert(" navigateur ou

machine ne supporte pas

WebGL..");

return gl;

}

// Continuer si WebGL est

disponible

return gl;

}

Plan de Projection

Préparation OpenGL/WebGl et Plan de Projection

on va implementer le modèle de la

camera synthétique selon les

hypotheses discutées :

 Choisir librairies: OpenGL WebGL.

 Implémenter un Contexte qui va

représenter le plan de projection a

deux dimension ou la scène sera

projetée.

 All code below will be independent of

your choice of OpenGL extensions.

Le Code a droite pour OpenGL

et WebGL va être utilisé jusqu’a

la fin du cours. Les fonctions

make_resources() et render()

vont être implémenter au fure

et a mesure qu’on avance dans

le cours.

 Les spécifications des objets de la scène

sont indépendants des spécifications de

la camera.

 Implémenter les objets dans la scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

OpenGL et GLUT

WebGL

./js/ WebGLMain.js

function webGLStart() {

const canvas =

document.querySelector(

"#glCanvas");

// var canvas =

document.getElementById('#glCanv

as ');

// Initialisation du contexte WebGL

initWebGL(canvas);

render( ) ;

make_resources( ) ;

}

#int main(int argc, char** argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB |

GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello OpenGL");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

glewInit();

if (!GLEW_VERSION_2_0) {fprintf(stderr,

"OpenGL 2.0 not available\n");

return 1; }

if (!make_resources()) {fprintf(stderr,

"Failed to load resources\n");

return 1; }

glutMainLoop();

return 0;

}

nomFichier.htm

<!doctype html>

<title>Hello WebGL</title>

href="./css/webgl.css"

type="text/css">

</head><body>

<canvas id="glCanvas"

width="640" height="480">

</canvas> </body>

<script src= “

./js/WebGLMain.js">

</script>

</script>

</html>

Plan de Projection

Préparation OpenGL/WebGl et Plan de Projection

on va implementer le modèle de la

camera synthétique selon les

hypotheses discutées :

 Choisir librairies: OpenGL WebGL.

 Implémenter un Contexte qui va

représenter le plan de projection a

deux dimension ou la scène sera

projetée.

 All code below will be

independent of your choice

of OpenGL extensions.

Le Code a droite pour OpenGL

et WebGL va être utilisé jusqu’a

la fin du cours. Les fonctions

make_resources() et render()

vont être implémenter au fure

et a mesure qu’on avance dans

le cours.

 Les spécifications des objets de la scène

sont indépendants des spécifications de

la camera.

 Implémenter les objets dans la scène.

 Définir le frustum.

 Définir la camera synthétique

 Dessiner l’image sur le plan de

projection.

 Etc…

Plan

 OpenGL: Si, make_resources ( ) nos ressources sont correctement chargé,

glutMainLoop prend le relais. Il affiche la fenêtre, recevoir les évents de

l'UI, et appel les fonctions que l'on a configuré en réponse à ses évents (les

callbacks ici render()). glutMainLoop fermera aussi le programme quand on

le quitte. Le return 0 supprime simplement les avertissements du

compilateur et il n'est, de toute façon, jamais réellement atteint.

 Avec la satisfaction d'avoir le plan de projection, on va re-utiliser le même

programme. On est prêt à remplir la fonction make_resources( ) avec des

vertex et à projeter (dessiner) la scène avec la fonction render( ).

 Les prochains chapitres, on introduit les buffers et textures OpenGL.

Fichier html et Page Web

Web gl

Internet et Développement Web

Conception d'une Page Web

Page Web

 Une page Web est un document.

 Elle est enregistrée sur le disque du serveur

 Elle est affichée par le navigateur Web.

 Le navigateur Web affiche le contenu du fichier

enregistré sur le serveur après l'avoir

interprété, il offre donc une interprétation du

fichier.

terminologie:

le fichier est sur le disque dur, tandis que

le document est affiché par le navigateur.

Les termes "fichier" et "document" font référence

au même élément, mais ils ne désignent pas la

même vision de cet élément.

Fichier html et Page Web

Travaux Dirigés: Dans le dossier « lab 5 » créer un

sous dossier avec le nom «monPremierSiteWeb».

Lancer un éditeur de texte exemple: Notepad++

Saisir le code source html suivant:

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Internet et Développement Web

Conception d'une Page Web

Le HTML (HyperText Markup Language) est le

"langage" qui permet à un navigateur Web

d'afficher un document Web selon une certaine

structure.

 Il ne s'agit pas d'un langage à proprement

parler (dans le sens "compilé") mais plutôt d'un

format de document.

 Une page Web est généralement écrite dans un

fichier en HTML (ou assimilé ex: php, jsp ou

asp).

 Ce fichier est en fait du texte, formaté suivant

certaines règles.

 Ainsi, lorsqu'un fichier HTML est ouvert avec

Notepad, on voit du code HTML pur ;

 en revanche, lorsque l'on utilise un navigateur

Web, on voit au contraire un document

correctement présenté :

 le navigateur Web interprète le code HTML

pour présenter le document Web à

l'internaute.

Fichier html et Page Web

Aperçu dans le navigateur:

Conception d'une page web

Travaux Dirigés:

Aperçu par le navigateur:

Pour le moment ne préoccuper pas du contenu, on

verra ce que ça signifie par la suite.

 sauvegardez le fichier dans le sous dossier

« monPremierSitWeb » avec le nom

« index.html » ou « index.htm »

 puis chargez la page dans votre navigateur:

 il suffit de double-cliquer sur le fichier dans

votre explorateur.

 Ou clic droit et choisir le navigateur

préféré.

 Si non, lancer le navigateur préféré et

ouvrir le fichier index.html

Les bases de HTML

 Un fichier HTML se compose de différents

éléments qu'on assemble autour des

différentes parties du contenu pour lui fournir

un sens.

 C'est un langage de balises

 Un fichier HTML se compose de différents

éléments autour d’un Contenu.

Conception d'une page web

Qu'est-ce que HTML ?

 HyperText Markup Language (HTML), c'est le

code utilisé pour structurer le contenu d'une

page web et lui fournir une signification.

 Par exemple, le contenu de votre page pourra

être un ensemble de paragraphes ou une liste. Il

est aussi possible d'avoir des images, des

tableaux de données.

 HTML n'est pas, proprement parler, un langage

de programmation. C'est un langage de balises

utilisé pour fournir la structure et le sens du

contenu qu'on souhaite avoir sur un site web.

 Cette section vous fournira suffisamment

d'information pour que vous puissiez créer

votre page HTML.

Les bases de HTML

3. L'élément : Il est composé de la balise ouvrante,

de la balise fermante et du contenu.

4. Le contenu : C'est le contenu de l'élément, ici

c'est simplement du texte.

Par exemple, avec la ligne de contenu suivante :

Mon chat est fâché

Si vous souhaitez indiquer que ce texte fait partie

d'un paragraphe, on le placera dans un élément de

paragraphe (<p>) :

<p>Mon chat est fâché</p>

 Chaque type de contenu dispose de balises HTML

 En HTML, l’information est organisées à l'aide de

"balises".

 La balise se caractérise par des lettres significatives

encadré des signes inférieur < et supérieur >

Conception d'une page web

 Regardons de plus près cet élément paragraphe

Les composants principaux de notre élément sont :

1. La balise ouvrante : se compose du nom de

l'élément (ici « p »), entre deux chevrons. Il

indique le début de l'élément, pour notre

exemple, le début du paragraphe.

2. La balise fermante : se compose du nom de

l'élément (ici « p »), entre deux chevrons

auxquels on ajoute un barre oblique avant le

nom de l'élément. Cela indique la fin de

l'élément. Pour notre exemple, cela indique la

fin du paragraphe.

Les bases de HTML

Cet exemple contient :

<!DOCTYPE html> — le doctype. Au début de

HTML, dans les années 1991-1992, les doctypes

étaient utilisés pour faire référence à des ensembles

de règles qu'on pouvait utiliser pour dire qu'un

document était du HTML « valide » et détecter les

erreurs de balisage.

Cependant, ceux-ci ne sont plus utilisés aujourd'hui

et sont juste présents pour s'assurer que la page

puisse fonctionner sur les anciens navigateurs.

<html></html> c’est l'élément <html>. Cet élément

encadre tout le contenu de la page. Cet élément est

parfois appelé l'élément racine.

Conception d'une page web

Anatomie d'un document HTML

Pour l'instant nous avons vu quelques éléments HTML de

base. Regardons comment les combiner pour créer une

page HTML complète. L'exemple contenu dans le fichier

index.html qu'on a créé :

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Cet exemple contient :

l'élément racine <html></html> contient principalement

deux parties : 1- Head (l'en-tête) et 1- Body (le corps).

1. l'en-tête et

 <head></head> : L'en-tête (head) c'est un

élément qui n’est pas affiché. C ’est une

succession de balises (tags) permettant au

navigateur Web de savoir de quoi il s'agit.

 C'est dans cet élément qu'on mettra des mots-

clés, une description de la page qui apparaîtra

sur les moteurs de recherche, les liens vers les

fichiers de feuilles de styles, CSS, à utiliser pour la

mise en forme, les déclarations des jeux de

caractères (character sets ou encoding) à utiliser

 On peut y trouver un résumé de la page, les mots

clefs principaux, le titre pour la fenêtre, la

fréquence de mise à jour, etc.

Conception d'une page web

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Cet exemple contient :

l'élément racine <html></html> contient principalement

deux parties : 1- Head (l'en-tête) et 1- Body (le corps).

2. le corps.

 <body></body> : Le corps (body) est

constitué du contenu du document tout le

contenu que a afficher aux visiteurs, cela peut

être:

 du texte,

 <p>: des paragraphes,

 <div>: des divisions,

 <img>: des images,

 des vidéos,

 des jeux,

 etc.

Conception d'une page web

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Cet exemple contient :

Les éléments peuvent aussi avoir des « attributs »,

ce qui ressemble à :

Les attributs contiennent une information

supplémentaire qui porte sur l'élément et qu'on ne

souhaite pas afficher avec le contenu. Dans cet

exemple, l'attribut:

 class= permet d'utiliser un nom propre pour identifier

l'élément du nom commun <p> . Ce nom propre peut

être utilisé plus tard pour la mise en forme ou autre

chose.

Conception d'une page web

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Cet exemple contient :

Un attribut doit toujours avoir :

1. Un espace entre l'attribut et le nom de

l'élément ou l'attribut précédent (s'il y a

plusieurs attributs)

2. Un nom (le nom de l'attribut), suivi d'un signe

égal « = »

3. Des quottes (") pour encadrer la valeur de

l'attribut

Exemple:

Cet élément définit le jeu de caractères des langues

(encoding) utilisé pour le document, ici c'est: utf-8.

Conception d'une page web

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Cet exemple contient :

Anatomie d'un document HTML

 utf-8 regroupe l'ensemble des caractères

connus utilisés dans les différents langages

humains.

 Généralement utf-8 permet de gérer n'importe

quel texte que vous pourriez utiliser sur la page.

 C'est pour cette raison qu'on utilise ce jeu de

caractères car il permet de couvrir l'extrême

majorité des cas.

Conception d'une page web

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

<title> Ma Premiere Page Web!</title>

 Cet élément définit le titre de votre page.

C'est ce titre qui apparaîtra sur l'onglet

lorsque la page sera chargée.

Conception d'une page web

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Baliser le texte

Dans cette section, nous verrons quelques éléments

de base pour baliser le texte.

Les titres

Les éléments de titre permettent de définir des

titres ou sous-titres pour le contenu.

HTML contient des éléments pour 6 niveaux

hiérarchiques de titres : <h1> – <h6>.

La plupart du temps, 3-4 niveaux suffisent :

<h1>Mon titre principal</h1>

<h2>Mon titre de section</h2>

<h3>Mon sous-titre</h3>

<h4>Mon sous-sous-titre</h4>

Conception d'une page web

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Baliser le texte: Les titres

Vous pouvez ajouter un titre adapté à votre page

avec un de ces éléments <h1> … <h6>. .

<h1> Bonjour tout le monde!</h1>

Baliser le texte : Les paragraphes

Comme expliqué auparavant, les éléments <p> sont

utilisés pour contenir des paragraphes de texte.

Vous les utiliserez fréquemment pour placer du

texte sur une page :

<p>placer un paragraphe ici</p>

<p>Voici Ma Premiere Page Web!</p>

Conception d'une page web

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Baliser le texte : Les listes

Une grande partie du contenu sur le Web est

présente sous forme de listes.

HTML a donc des éléments utilisés pour représenter

ces listes.

Les types de listes utilisés fréquemment sont les

listes ordonnées et les listes non-ordonnées :

1. Les listes non-ordonnées

2. Les listes ordonnées

Conception d'une page web

100

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Baliser le texte : Les listes non-ordonnées

sont des listes pour lesquelles l'ordre des éléments

n'a pas d'importance. La balise utilisée pour ces

listes est l'élément <ul> (ul: unordered list qui

signifie liste non-ordonnée en anglais)

Le balisage des listes contient toujours au moins

deux éléments.

<ul>

<li>

</li>

</ul>

Chaque élément d'une liste est balisé avec un

élément <li>.

Conception d'une page web

101

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Baliser le texte : Les listes ordonnées

sont des listes pour lesquelles l'ordre des éléments

est important. La balise utilisée pour ces listes est

l'élément <ol> (ol: ordered list qui signifie liste

ordonnée)

Le balisage des listes contient toujours au moins

deux éléments.

<ol>

<li>

</li>

</ol>

Chaque élément d'une liste est balisé avec un

élément <li>.

Conception d'une page web

102

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Baliser le texte : Les listes

Par exemple:

<p>La communauté universitaire de l’UQO est

composée des étudiant(e)s, professeur(e)s, etc.

travaillent ensemble... </p>

On pourrait faire :

<p>La communauté universitaire de l’UQO est

composée:</p>

<ul>

<li> des étudiant(e)s</li>

<li> professeur(e)s</li>

</ul>

<p>qui travaillent ensemble...</p>

Conception d'une page web

103

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Imbriquer des éléments

 On peut placer des éléments dans d'autres

éléments, c'est ce qu'on appelle l'imbrication.

 Exemple, on peut montrer que mon chat est

vraiment fâché par placer le mot « vraiment »

dans un élément <strong>, ce qui signifie que le

mot sera mis en avant :

<p>Mon chat est <strong> vraiment </strong> fâché.</p>

Imbriquer les éléments l’un dans les autre, dans

l'exemple précédent:

on ouvre l'élément <p>, puis l'élément < strong >.

On ferme l'élément < strong > puis on ferme l'

élément <p>.

Si on utilise le code suivant, ce sera incorrect :

<p>Mon chat est < strong > vraiment fâché.</p></ strong >

Conception d'une page web

104

Travaux Dirigés: Ajouter une liste ordonnée et une

liste non-ordonnée dans votre page.

Voici ma liste non - ordonnée

 Le vert

 Le bleu

 Le rouge

Voici ma liste ordonnée

1. Le premier

2. Le deuxième

3. Le troisième

Enregistrer et afficher.

Les bases de HTML

Images

Une page Web: c’est un document

multimédia textes, images, vidéo…

Regardons l'élément image :

<img src="images/monImage.png" alt="Mon

image de test">

cet élément permet d'intégrer une image

dans la page, à l'endroit où l'élément

apparaît.

L'image utilisée est définie via l'attribut src

(pour source) qui contient le chemin vers le

fichier de l'image.

Note: Diapositive 21, Les éléments peuvent aussi

avoir des « attributs »

Conception d'une page web

105

Imbriquer des éléments

 Les éléments doivent être ouverts et

fermés correctement,

 s'ils se chevauchent, le navigateur essaiera

de choisir la meilleure option,

 qui ne sera peut être pas le résultat

attendu.

 Le HTML est un format structuré.

 Chaque balise peut en contenir d'autres,

de manière hiérarchique.

Les bases de HTML

Les éléments vides

 Certains éléments n'ont pas de contenu.

 Ces éléments sont appelés éléments vides.

 Si on considère l'élément <img> présent dans notre

fichier HTML :

<img src="images/monImage.png" alt="Mon image

teste">

Cet élément

 contient deux attributs mais

 il n'y a pas de balise fermante </img>

 ni de contenu interne.

En effet, l'élément image n‘a pas de contenu, son but

est d'intégrer une image dans la page HTML, à l'endroit

où l'élément est placé.

Conception d'une page web

106

Images

<img src="images/monImage.png" alt="Mon image

de test">

 l'attribut alt (pour alternatif) sa valeur est le

texte « Mon image de test » ou un texte

descriptive de l'image pour :

1.les utilisateurs visuellement handicapés

utilisent généralement des lecteurs d'écrans qui

lisent le texte de cet attribut pour qu’ils

puissent comprendre de quoi il s'agit.

2.quelque chose s'est mal passé ou le navigateur

ne trouve pas le chemin du fichier et que

l'image n'a pu être affichée.

 Le point important a retenir est que le texte

contenu dans cet attribut fournit suffisamment

d'information sur l'image.

Les bases de HTML

Travaux Dirigés:

1. Dans le sous dossier avec le nom

« monPremierSiteWeb » créer un autre sous

dossier « images».

2. Ajouter un fichier image dans le sous dossier

« images »

3. La ligne qui contient <img src="" alt="Mon image

teste"> correspond au code HTML qui insère une

image dans la page. Pour que cela fonctionne, il

faut que nous indiquions dans quel dossier se

trouve l'image. Cette image est à l'intérieur du

dossier images et ce dossier se situe dans le même

dossier qu'index.html. Pour parcourir

l'arborescence des fichiers depuis index.html

jusqu'à l'image, le chemin qu'on ajouter dans src

est: "images/votre-fichier-image".

Conception d'une page web

107

Anatomie d'un document HTML

<!DOCTYPE html>

<html>

<head>

<title> Ma Premiere Page Web!</title>

</head>

<body>

<h1> Bonjour tout le monde!</h1>

<p>Voici Ma Premiere Page Web!</p>

</body>

</html>

Les bases de HTML

Anatomie d'un élément HTML

Les balises qui entourent un mot ou une image

peuvent former:

 un lien hypertexte,

 mettre le texte en italique,

 etc.

Conception d'une page web

108

Travaux Dirigés:

4. Par exemple, si vous avez une image nommée

monImage.png, le chemin à utiliser sera

images/monImage.png.

5. Insérez ce chemin dans le code HTML, entre les

guillemets dans src="".

 si le chemin vers l'image est incorrect : essayez

de modifier le chemin contenu dans votre

attribut src pour voir ce que ça donne. Si le

chemin est bien incorrect, vous devriez obtenir

quelque chose comme alternative:

« Mon image teste ».

Les bases de HTML

Les liens

4. La valeur de l’attribut « href » doit être le lien

du site (ou page) vers lequel on dirige:

 « href » correspond à hypertext reference en

anglais, ce qui signifie « référence hypertexte ».

Conception d'une page web

109

Les liens

 Les liens sont très importants, ils font du web

une toile ou on peut naviguer de page en page.

 Pour créer un lien, il suffit d'utiliser l'élément

<a> (le a est un raccourci pour « ancre »).

 quatre étapes transforment le texte en un lien :

1. Choisissez le texte.

2. Encadrez le texte dans un élément <a> :

3. Fournissez un attribut href pour l'élément <a>,

de cette façon :

Les bases de HTML

Conclusion

 Si vous avez suivi les différentes instructions de

cette page, vous devriez obtenir une page qui

ressemble à celle-ci :

Conception d'une page web

110

Travaux Dirigés: Les liens

Ajouter au fichier index.html l’ élément:

 Attention à ne pas oublier la partie avec https://

ou http:// qui représente le protocole utilisé, au

début de l'adresse. Une fois que vous avez créé

un lien, testez votre page et cliquez dessus pour

vous assurez qu'il fonctionne correctement.

 Enregistrer et réafficher.

Les bases de HTML

Travaux Dirigés: Partie II Questions:

5. Soit l’adresse web suivante :

http://www.yahoo.com:80/index.html

a. C’est à quelle couche du modèle TCP/IP on

fait appel l’adresse au-dessus et par quel

moyen (quel logiciel)?

b. Donner les explications et significations de

chaque partie de l’adresse au-dessus :

1. http://

2. www.yahoo.com

3. :80

4. /index.html

6. Quelles sont les langages utilisés pour écrire

une page web.

Conception d'une page web

111

Travaux Dirigés:

Partie II Questions: Pour répondre aux questions, créer

une page web: réponse_aux_questions.html

Et répondre aux questions suivantes:

1. C'est quoi un Modèle TCP/IP ?

2. Quelle relation entre le modèle de couche OSI et le

modèle TCP/IP?

3. Donner le nom et le rôle de chaque couche dans le

modèle de couche TCP/IP

4. A quoi sert (avec un exemple) les ports, les adresses IP

et les adresses MAC.

Les bases de HTML

Organisation d'un fichier HTML

 alors la balise fermante est très similaire à la

balise ouvrante : le signe < suivi d'une barre

oblique / puis des quelques lettres (les mêmes

que pour la balise ouvrante) et enfin du signe >.

 L'identifiant d'une balise ("body" ou bien "h1"

par exemple) peut être écrit en minuscules,

majuscules ou un mélange des deux mais il est

fortement recommandé d'utiliser

systématiquement les minuscules.

 Toutes les balises HTML peuvent contenir un ou

plusieurs attributs.

 Ce sont comme des paramètres, des

éléments qui nous permettent de préciser

le comportement des balises.

Conception d'une page web

112

Organisation d'un fichier HTML

 Les balises HTML vont généralement par paire :

 l'une ouvre,

 l'autre referme et

 ce qui est situé entre les deux balises « le

contenu » est affecté.

 Toutes les balises de la page sont organisées de

manière hiérarchique.

 Une balise HTML est très simple :

 le signe "inférieur" < suivi de quelques lettres et

enfin du signe "supérieur" >.

 Si la balise est double (c'est souvent le cas) car

elle doit contenir quelque chose « le contenu »,

Les bases de HTML

Organisation d'un fichier HTML

 Une image appelée 'Nom du logo' ayant

comme source 'images/logo.jpg'

 La valeur d'un attribut s'écrit entre

guillemets.

Conception d'une page web

113

Organisation d'un fichier HTML

à titre d'exemple:

href : Principalement dans les liens ;

title : Principalement dans les liens ;

src : Principalement dans les images ;

id : Pour n'importe quelle balise, il est utile pour CSS

et JavaScript (cf. plus loin) ;

name : Dans les contrôles des formulaires.

Exemple:



Un lien appelé 'Description' et renvoi vers

'page.html' :

Les Bases de CSS

 Les CSS répondent à des questions comme :

 «Comment rendre un texte rouge ou noir?»,

 « Comment faire apparaître mon contenu à tel

endroit de l'écran ? »,

 « Comment décorer ma page web avec une

image ou une couleur d'arrière-plan ? ».

Conception d'une page web

114

Qu'est-ce que CSS ?

Les CSS ( Cascading Style Sheets en anglais, ce qui

correspond à « feuilles de style en cascade »)

 Les CSS permettent d'ajouter:

 du style de mise en forme à votre page web

 sans besoin d’ajouter:

 les attributs de mise en forme dans les éléments

html.

 Les règles CSS permettent de définir,

 par exemple : la couleur d'un texte ;

 L'endroit où le contenu devrait être affiché sur

l'écran ;

 quelles devront être les images de fond ou

 les couleurs utilisées pour décorer votre page

web.

Les Bases de CSS

Travaux Dirigés: CSS

 Dans le sous dossier « monPremierSiteWeb »

créer un sous dossier avec le nom « css ».

 copiez ces trois lignes de code CSS:

p {

color: red;

}

dans un nouveau fichier à partir de votre éditeur de

texte puis

 sauvegardez le fichier sous le nom

« monPremierStyle.css » dans votre sous-

dossier « css ».

Conception d'une page web

115

Qu'est-ce que CSS ?

 CSS, comme le HTML, n'est pas vraiment un

langage de programmation.

 CSS c'est un langage de feuille de style qui peut

interagir avec un document HTML pour mettre

en forme ses éléments sélectionnés.

 Par exemple, on peut sélectionner tous les

éléments d'une page HTML qui sont

paragraphes et afficher leurs textes en rouge

avec ce CSS :

p {

color: red;

}

 Faisons un essai :

Les Bases de CSS

Travaux Dirigés: CSS

 Ouvrez votre fichier index.html et copiez la ligne

suivante quelque part au sein de l'élément head

(c.-à-d. entre les balises <head> et </head>) :

rel="stylesheet" type="text/css">

 Sauvegardez index.html puis

 chargez-le dans votre navigateur.

 Vous devriez obtenir quelque chose comme :

Si le texte de votre paragraphe s'affiche en rouge,

félicitations ! Vous venez d'écrire votre premier CSS

qui fonctionne !

Conception d'une page web

116

Qu'est-ce que CSS ?

 Pour que ça fonctionne, il faut indiquer le

chemin du fichier CSS dans document HTML,

 sinon la mise en forme décrite dans le fichier

CSS n'affectera pas l'affichage de la page HTML

dans le navigateur.

Les Bases de CSS

Les CSS sont l'un des éléments qui constituent le

DHTML : Dynamic HTML.

 Avec l’élément html:

rel="stylesheet" type="text/css">

 L'élément HTML <link> définit la relation entre

le document html et une ressource externe qui

peut être un lien vers une feuille de style.

 href: attribut définit l'URL (absolue ou relative)

de la ressource liée.

Conception d'une page web

117

Qu'est-ce que CSS ?

 Une feuille de styles n'est qu'un fichier qui définit

comment une page HTML doit être affichée.

 Avec l’élément html:

rel="stylesheet" type="text/css">

le navigateur Web s'occupe de charger le contenu du

fichier CSS sans que l'internaute doit intervenir ;

 Donc une feuilles css a pour vocation d'agir en arrière

plan.

 En fait, l'idée est que le navigateur parcourt le

document HTML.

 Lorsqu'il rencontre une balise, il demande à la CSS de

quelle manière il doit l'afficher.

 La CSS ne sait rien faire d'autre que dire comment

doit être affiché tel ou tel élément de la page Web.

Les Bases de CSS

style

 Il y a trois manières de définir des styles dans une page

Web.

1. La plus simple est d'utiliser l’attribut « style » dans la

balise que l’on veut modifier.

<h1 style="font-style: italic; size: 1.5em;">Titre de la

page</h1>

À l'intérieur de l'attribut style, il est possible de

mettre n'importe quelle quantité de propriétés CSS :

zéro, une, autant que l'on veut.

Consulter la littérature sur les CSS pour:

 apprendre tout ce dont vous avez besoin pour

commencer la mise en forme de votre page web.

 ajouter des styles de mise en forme dans votre

document html.

Conception d'une page web

118

 Avec l’élément html:

rel="stylesheet" type="text/css">

 rel: attribut indique la relation qui existe entre le

document et la ressource liée. Cet attribut doit être

une liste de types de lien, séparés par des espaces. La

plupart du temps, cet attribut est utilisé pour

caractériser un lien vers une feuille de style et de

valeur stylesheet.

 type: Cet attribut est utilisé pour définir le type de

contenu auquel le lien fait référence. La valeur de cet

attribut doit être un type MIME tel que text/html ou

text/css, etc. si le type de feuille de style utilisé la

valeur est text/css.

 D’autre attributs: target rev methods disabled

title sizes referrerpolicy prefetch media

integrity hreflang crossorigin as

Les Bases de CSS

 En utilisant des styles, il est par exemple

possible de dire que:

 tous les liens, au lieu d'être bleus ou

violets comme on en a l'habitude,

doivent être gris ;

 ou bien que le texte est toujours

orange.

Conception d'une page web

119

 Il y a trois manières de définir des styles

dans une page Web.

2. correspond au code qui est utilisé pour

appliquer un style, mettre en forme votre

page web

p {

color: red;

}

Les Bases de CSS

Anatomie d'une règle CSS

2. Déclaration: C'est une règle simple comme

color: red; qui détermine les propriétés de

l'élément qu'on veut mettre en forme.

3. Propriétés: Les différentes façons dont on peut

mettre en forme un élément HTML (dans ce

cas, color est une propriété des éléments p). En

CSS, on choisi la propriété qu'elle soit affectées

par la règle CSS.

4. Valeur de la propriété: À droite de la propriété,

après les deux points, on a la valeur red de la

propriété.

Conception d'une page web

120

Anatomie d'une règle CSS

Regardons un peu plus en détails ce que nous avons

écrit en CSS :

Cette structure s'appelle un ensemble de règles ou

tout simplement « règle ».

1. Comment s'appellent les différentes parties ?

Sélecteur: Le nom de l'élément HTML se situe

au début de l'ensemble de règles.

Lorsqu'on souhaite manipuler un élément, il faut

d'abord le sélectionner.

 Il permet de sélectionner les éléments sur lesquels

on veut appliquer le style souhaité (ici, l’élément p).

 Pour mettre en forme un élément différent, il suffit

de changer le sélecteur.

Les Bases de CSS

Anatomie d'une règle CSS

Ainsi, si on veut modifier plusieurs propriétés d'un

coup, on peut utiliser plusieurs déclarations dans

une seule règle en les séparant par des points-

virgules :

p {

color: red;

width: 500px;

border: 1px solid black;

}

Conception d'une page web

121

Anatomie d'une règle CSS

Les autres éléments importants de la syntaxe sont :

 Chaque ensemble de règles, à l'exception du

sélecteur, doit être entre accolades ({}).

 Pour chaque déclaration, il faut utiliser deux

points (:) pour séparer la propriété de ses

valeurs.

 Pour chaque ensemble de règles, il faut utiliser

un point-virgule (;) pour séparer les

déclarations entre elles.

Les Bases de CSS

Dans un document CSS, tout ce qui est placé entre

/* et */ est un commentaire CSS :

le navigateur l'ignore.

C'est dans les commentaires qu'on peut

écrire des notes pour mieux expliquer le but

de ce qu'on fait

 par exemple cela pourra vous aider quand

vous révisez votre code dans quelques mois.

Note : un commentaire explique ce que « p »

signifie.

Conception d'une page web

122

Anatomie d'une règle CSS

Sélectionner plusieurs éléments

Il est aussi possible de sélectionner plusieurs types

d'éléments pour tous leur appliquer une même

règle. Il suffit de placer plusieurs sélecteurs, séparés

par des virgules. Par exemple :

p,li,h1 {

color: red;

}

Les Bases de CSS

Anatomie d'une règle CSS

Les différents types de sélecteurs

Voici quelques-uns des types de sélecteur les plus

fréquents :

Conception d'une page web

123

Anatomie d'une règle CSS

Les différents types de sélecteurs

Il est possible de faire des sélections plus

spécifiques.

Nom du

sélecteur

Ce qu'il sélectionne

Exemple

Sélecteur d'élément (parfois appelé « sélecteur de

balise » ou « sélecteur de type »)

Tous les éléments HTML d'un type donné.

sélectionne tous les <p>

Sélecteur d'ID

L'élément d'une page qui possède l'ID fourni (pour

une page HTML donné, on ne peut avoir qu'un seul

élément pour un ID donné).

#mon

-id

sélectionne <p id="mon

-id"> ou <a id="mon-id">

Sélecteur de classe

Les éléments d'une page qui sont de la classe

donnée (pour une page donnée, il est possible

d'avoir plusieurs éléments qui partagent une même

classe).

.ma

-classe

sélectionne <p class="

ma-classe"> et <a class="ma-

classe

Sélecteur d'attribut

Les éléments de la page qui possèdent l'attribut

donné.

img

[src]

sélectionne <

img src="monimage.png"> mais pas

img>

Sélecteur

de pseudo-classe

Les éléments donnés mais uniquement dans un

certain état (par exemple quand on passe la souris

dessus).

a:hover

sélectionne <a> mais uniquement quand le

pointeur de la souris est au

-dessus du lien.

Les Bases de CSS

Les polices (fontes) et le texte

2. Ensuite, supprimez la règle existante dans votre

fichier monPremierStyle.css. Cette règle était

pratique pour tester mais afficher du texte en

rouge n'est pas une meilleure mises en forme.

3. Ajoutez les lignes suivantes à leur place:

html {

font-size: 10px; /* px signifie 'pixels': la taille de base pour

la police est désormais 10 pixels de haut */

font-family: modèle: cela devrait être le reste du résultat

obtenu à partir de Google fonts

}

en remplaçant la ligne avec modèle fournie par

Google Fonts qui contient font-family.

font-family représente la (ou les) police(s) qu'on

veut utiliser pour le texte.

Conception d'une page web

124

Les polices (fontes) et le texte

Maintenant que nous avons vu quelques bases de

CSS, ajoutons quelques règles et informations à

notre fichier monPremierStyle.css pour que notre

exemple soit réussi.

Tout d'abord, améliorons les polices et le texte.

Google Fonts

1. ajoutez l'élément <link ... > quelque part au sein

de head dans le fichier index.html (c'est-à-dire

quelque part entre les balises <head> et

</head>). Ça devrait ressembler à :

<link

href='http://fonts.googleapis.com/css?family=Open

+Sans' rel='stylesheet' type='text/css'>

Les Bases de CSS

Les polices (fontes) et le texte

4. Ensuite:

 fixons les tailles des différents textes dans le corps du

HTML (<h1>, <li>, et <p>).

 également centrer le texte du titre

h1 {

font-size: 60px;

text-align: center;

}

 une taille de ligne et un espacement de caractère

entre les lettres pour que le corps (body) soit lisible :

p, li {

font-size: 16px;

line-height: 2;

letter-spacing: 1px;

Conception d'une page web

125

Les polices (fontes) et le texte

html {

font-size: 10px; /* px signifie 'pixels': la taille de

base pour la police est désormais 10 pixels de haut

font-family: modèle: cela devrait être le reste du

résultat obtenu à partir de Google fonts

}

 Ce premier ensemble de règles définit une

police de base et sa taille pour toute la page

 <html> est l'élément parent de tous les

éléments de la page,

 tous les éléments contenus dans la page

hériteront donc de la même font-size et font-

family

Les Bases de CSS

marge, bordure, rembourrage

1. margin, l'espace extérieur, autour de l'élément (en

français cela correspond à la marge)

2. padding, l'espace autour, proche du contenu (par

exemple, l'espace autour du texte d'un paragraphe)

(en français, on pourrait traduire cela par du «

rembourrage » mais le terme padding étant

communément utilisé lorsqu'on parle de CSS)

3. border, la ligne qui est juste autour du padding(en

français cela correspond à la bordure)

Vous devriez obtenir quelque chose comme ça :

Conception d'une page web

126

Les polices (fontes) et le texte

Vous pouvez ajuster ces valeurs en px comme vous

voulez pour que le style obtenu soit celui que vous

souhaitez.

Vous devriez obtenir quelque chose comme ça :

Les Bases de CSS

 En utilisant des styles, il est par exemple

possible de dire que:

 tous les liens, au lieu d'être bleus ou

violets comme on en a l'habitude,

doivent être gris ;

 ou bien que le texte est toujours

orange.

Conception d'une page web

127

Travaux Dirigés: Dans le dossier « lab 5 » créer un

sous dossier avec le nom

« monPremierSitWeb ».

Les Bases de CSS

Travaux Dirigés: Dans le dossier « lab 5 » créer un

sous dossier avec le nom

« monPremierSitWeb ».

Allons-y :

ajoutons un peu plus de CSS à notre page !.

Changer la couleur de la page

html {

background-color: #00539F;

}

Cette règle permet de définir la couleur utilisée en

arrière plan pour toute la page.

Conception d'une page web

128

marge, bordure, rembourrage

Dans cette section, nous utiliserons :

 width (la largeur de l'élément)

 background-color, la couleur derrière le

contenu de l'élément et son padding

 color, la couleur du contenu de l'élément

(généralement du texte)

 text-shadow, affiche une ombre portée sur le

texte à l'intérieur de l'élément

 display, définit le mode d'affichage d'un

élément.

Les Bases de CSS

Travaux Dirigés:

Comment mettre en forme le corps de la page

(<body>)

Occupons-nous de l'élément body. Cet ensemble de

règles contient plusieurs déclarations, étudions les

une par une :

width: 600px; — cette déclaration impose une

largeur de 600 pixels pour le corps de la page.

background-color: #FF9500; —cela permet de

définir la couleur utilisée en arrière-plan. Ce code

couleur correspond à un rouge orangé qui sera

utilisé pour le corps de la page, cela permettra

d'avoir un contraste avec le bleu foncé utilisé pour

l'élément html. N'hésitez pas à modifier cette valeur

pour voir ce que ça donne, vous pouvez utiliser

white ou une autre valeur si vous préférez.

Conception d'une page web

129

Travaux Dirigés: Dans le dossier « lab 5 »

créer un sous dossier avec le nom

« monPremierSitWeb ».

Comment mettre en forme le corps de la

page (<body>)

body {

width: 600px;

background-color: #FF9500;

margin: 0 auto;

padding: 0 20px 20px 20px;

border: 5px solid black;

}

Les Bases de CSS

Travaux Dirigés:

Comment mettre en forme le corps de la page

(<body>)

Occupons-nous de l'élément body. Cet ensemble de

règles contient plusieurs déclarations, étudions les

une par une :

margin: 0 auto; — Ici on a deux valeurs pour la

propriété. Lorsqu'on utilise deux valeurs sur une

propriété comme margin ou padding, la première

valeur est utilisée pour le haut et le bas de l'élément

(dans ce cas : 0) et la seconde valeur est utilisée

pour les côtés gauche et droit (la valeur auto qu'on

utilise ici est une valeur spéciale qui divise l'espace

horizontal disponible en parts égales entre la

gauche et la droite. Il est aussi possible d'utiliser un,

trois ou quatre valeurs.

Conception d'une page web

130

Travaux Dirigés: Dans le dossier « lab 9 »

créer un sous dossier avec le nom

« monPremierSitWeb ».

Comment mettre en forme le corps de la

page (<body>)

body {

width: 600px;

background-color: #FF9500;

margin: 0 auto;

padding: 0 20px 20px 20px;

border: 5px solid black;

}

Les Bases de CSS

Travaux Dirigés:

Comment mettre en forme le corps de la page

(<body>)

Occupons-nous de l'élément body. Cet ensemble de

règles contient plusieurs déclarations, étudions les

une par une :

padding: 0 20px 20px 20px; — ici on a quatre

valeurs pour le padding afin de créer un peu

d'espace autour du contenu. On n'a donc aucun

espace pour le padding en haut du corps de la page,

on a 20 pixels à gauche, en bas et à droite. Dans

l'ordre, les valeurs correspondent au haut, à la

droite, au bas et à la gauche.

border: 5px solid black; — cette déclaration

permet d'utiliser une bordure pleine, large de 5

pixels pour entourer tout le corps de la page.

Conception d'une page web

131

Travaux Dirigés: Dans le dossier « lab 5 »

créer un sous dossier avec le nom

« monPremierSitWeb ».

Comment mettre en forme le corps de la

page (<body>)

body {

width: 600px;

background-color: #FF9500;

margin: 0 auto;

padding: 0 20px 20px 20px;

border: 5px solid black;

}

Les Bases de CSS

Positionner le titre et le mettre en forme

Ensuite, nous ajoutons 20 pixels de padding en haut

et en bas du titre et on prend la même couleur pour

la police que celle utilisée pour l'arrière-plan de

html.

Travaux Dirigés:

Positionner le titre et le mettre en forme

h1 {

margin: 0;

padding: 20px 0;

color: #00539F;

text-shadow: 3px 3px 1px black;

}

Là aussi, n'hésitez pas à expérimenter et à essayer

différentes valeurs pour voir ce que ça donne.

Conception d'une page web

132

Positionner le titre et le mettre en forme

Vous avez du remarquer qu'il y a un espace horrible

en haut du corps de la page. Cela est dû au fait que

les navigateurs appliquent un style par défaut à

l'élément <h1> (entre autres), même quand vous

n'avez défini aucune règle CSS ! À première vue, on

pourrait penser que c'est une mauvaise idée et que

ce n'est pas au navigateur de décider de la mise en

forme.

Toutefois, il est préférable que n'importe quelle

page, même celles qui n'utilisent pas de CSS,

puissent être lisibles et que le lecteur puisse

distinguer un titre d'un paragraphe. Pour se

débarrasser de cet espace, on « surcharge » le style

par défaut avec une marge nulle grâce à margin: 0;.

Les Bases de CSS

Positionner le titre et le mettre en forme

La troisième valeur correspond au rayon de flou

pour l'ombre, exprimé en pixel. Autrement dit, plus

la valeur est élevée, plus l'ombre sera floue.

La quatrième valeur définit la couleur utilisée pour

l'ombre.

Conception d'une page web

133

Positionner le titre et le mettre en forme

Une propriété intéressante qu'on a utilisé ici est

text-shadow. Cette propriété permet d'applique

une ombre au contenu de l'élément. La déclaration

utilise quatre valeurs :

La première correspond au décalage horizontal,

exprimé en pixels, de l'ombre par rapport au texte.

Autrement dit, plus la valeur est élevée, plus

l'ombre se porte loin. Une valeur négative déplace

l'ombre vers la gauche.

La deuxième valeur correspond au décalage

vertical entre l'ombre et le texte. Autrement dit,

plus la valeur est élevée, plus l'ombre va vers le bas.

Une valeur négative déplace l'ombre vers le haut.

Les Bases de CSS

Travaux Dirigés:

Centrer l'image

img {

display: block;

margin: 0 auto;

}

Centrer l'image

Si c’est compliquée, ça viendra plus tard, une fois

que vous aurez plus utilisé CSS.

Voir d’autres documentations pour d’autres valeurs

qu'on peut utiliser pour display.

Conception d'une page web

134

Centrer l'image

Dernière chose : on va centrer l'image pour que ce

soit plus joli.

On pourrait utiliser margin: 0 auto comme on l'a fait

avant mais on a besoin d'autre chose.

L'élément body est un élément de bloc, cela signifie

qu'il prend de l'espace et qu'on peut lui appliquer

des marges et d'autres valeur pour l'espacement.

En revanche, les images sont des éléments inline (ce

qu'on pourrait traduire par « en ligne »), ce qui

signifie qu'on ne peut pas leur appliquer ces valeurs

d'espacement.

Pour pouvoir appliquer des marges sur l'image

comme pour un bloc, on utilise display: block; pour

que l'image se comporte comme un élément de

bloc.

Les Bases de CSS

Travaux Dirigés:

Conception d'une page web

135

Conclusion

Si vous avez suivi les différentes étapes ,

vous devriez obtenir une page qui

ressemble à celle-ci :

Les Bases de JavaScript

 JavaScript peut être utilisé pour créer de

nombreuses fonctionnalités.

 il peut être utilisé pour réaliser des galeries

d'images, des transformations pour l'affichage

de la page,

 Ce langage a été inventé par Brendan Eich qui

est le co-fondateur du projet Mozilla, de la

fondation Mozilla et de la corporation Mozilla.

 Cette section vous offrira un aperçu des

possibilités offertes par ce puissant langage et

vous montrera comment l'utiliser.

 Comme pour CSS, JavaScript code peut être

introduit dans un fichier html comme script ou

peut être dans un fichier avec extension «.js »)

Conception d'une page web

136

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation qui peut

interagir avec un document HTML pour le rendre

dynamique. Ainsi JavaScript permet de rendre un site web

interactif. par exemple:

 pour réaliser des jeux, cela peut correspondre,

entre autres, aux actions entrainées par l'appui

sur une touche dans un jeu vidéo.

 JavaScript vous permet même de créer des jeux

vidéo, des graphiques animés en 2D ou en 3D,

 afficher des réponses de façon dynamique

lorsque l'utilisateur clique sur un bouton ou

saisit des données, ou

 les effets de style dynamique lors du

remplissage d'un formulaire.

 animer la page.

Les Bases de JavaScript

API JavaScript

 Les API « tierces » développées en dehors des

navigateurs permettent aux développeurs

d'intégrer des fonctionnalités d'autres sites

dans leur site, par exemple: de Twitter ou

Facebook.

 Les frameworks et bibliothèques tierces qui

peuvent être utilisées avec votre code

permettent de rapidement mettre en œuvre

des sites et des applications.

 JavaScript semble vraiment excitant,

 il est l'une des technologies web les plus

puissantes et créatives.

Conception d'une page web

137

API JavaScript

 JavaScript est plutôt compact et très flexible.

 Les développeurs ont écrit de nombreux outils

qui reposent sur JavaScript afin de pouvoir

exploiter des fonctionnalités supplémentaires.

 Parmi ces outils, on retrouve :

 Les Application Programming Interfaces (API)

sont intégrées aux navigateurs web et

permettent:

 de manipuler le HTML,

 de définir les styles CSS,

 de manipuler un flux vidéo depuis la

webcam de l'utilisateur,

 de générer des graphiques en 3D,

 etc.

Les Bases de JavaScript

Travaux Dirigés: «Bonjour tout le monde»

1. Pour commencer, dans le dossier « lab 5» sous

dossier « monPremierSitWeb » créer un sous

dossier avec le nom « js ».

2. Dans le sous dossier « js » créer avec un éditeur

de texte, soit wordpad++, un fichier appelé

« main.js ».

3. Ensuite, dans votre fichier index.html, ajoutez

l'élément suivant sur une nouvelle ligne avant la

balise fermante </body> :

Cet élément a le même rôle que l'élément <link> pour

CSS : il permet d'utiliser le fichier qui contient le code

JavaScript pour l'appliquer sur la page afin qu'il puisse

interagir avec le HTML, le CSS et le reste de la page.

Conception d'une page web

138

L'exemple du « Bonjour tout le monde!»

 Une fois autonome en JavaScript, vous

verrez une nouvelle dimension s'ouvrir

pour vos sites web.

 Il faudra progresser, étape par étape, en

commençant par des petits projets.

 Pour commencer, nous allons utiliser

JavaScript de façon vraiment basique pour

affiche « Bonjour tout le monde!»,

 c'est une « tradition » de commencer un

langage en écrivant un programme qui

affiche «Bonjour tout le monde! ».

Les Bases de JavaScript

L'exemple du « Bonjour tout le monde!»

Note :

 Le code JavaScript doit être appelé par l’attribut

src="" situé dans la balise HTML <script.

 l'élément <script> est appelé presque à la fin du

fichier HTML, plus précisément à la fin de

l'élément body. Pourquoi ?

 Cela permet que JavaScript soit chargé après le

reste du HTML et que la page sera fonctionnelle

même si le JavaScript n'a pas encore été chargé.

 Si l'élément script avait été placé avant et que le

code JavaScript devait interagir avec le contenu

HTML à venir, cela ne fonctionnerait pas et

l'utilisateur verrait une page cassée.

Conception d'une page web

139

Travaux Dirigés: L'exemple du « Bonjour

tout le monde!»

4. Dans le fichier main.js, ajoutez les lignes

suivantes :

var monTitre = document.querySelector('h1');

monTitre.textContent = 'Encore Bonjour tout le monde!!';

5. Assurez-vous que les fichiers HTML et JavaScript

soient enregistrés puis chargez index.html dans

votre navigateur. Vous devriez obtenir quelque

chose comme :

Les Bases de JavaScript

L'exemple du « Bonjour tout le monde!»

Que s'est-il passé ?

 Après, on modifie la valeur de la propriété

textContent de la variable monTitre,

 cette propriété représente le contenu de

l'élément.

 Dans notre exemple, on modifie le contenu de

l'élément avec "Encore Bonjour tout le monde!!".

 La variable mon Titre avait avant la valeur :

'Bonjour tout le monde!!';

 Avec le code JAVASCRIPT est changée à:

monTitre.textContent = 'Encore Bonjour tout le

monde!!';

Conception d'une page web

140

L'exemple du « Bonjour tout le monde!»

Que s'est-il passé ?

Le texte de votre titre a été changé en «Encore

Bonjour tout le monde!!» en utilisant JavaScript.

 Pour cela, on a utilise:

 une fonction appelée querySelector()

 qui fait référence à l'élément de titre ( h1)

 et qu’il le stocke dans une variable appelée

monTitre.

var monTitre = document.querySelector('h1');

C'est assez proche de ce qu'on a fait en CSS avec les

sélecteurs.

Lorsqu'on souhaite manipuler un élément, il faut

d'abord le sélectionner.

Les Bases de JavaScript

Variables

Les variables sont des conteneurs dans lesquels on

peut stocker des variables.

Pour commencer, il faut déclarer une variable avec

le mot-clé « var » suivi du nom qu'on souhaite

utiliser pour la variable :

var maVariable;

Notes :

En JavaScript, les lignes de code doivent terminer par

un point-virgule pour indiquer la fin de l’expression ou

l’instruction ( la phrase). Sinon une erreur.

Vous pouvez utiliser (quasiment) n'importe quel nom

pour nommer une variable. Il y a quelques restrictions:

JavaScript est sensible à la casse, cela signifie que

maVariable sera considéré comme un nom différent de

mavariable.

Conception d'une page web

141

Bref introduction aux bases de JavaScript

 Explorons les fonctionnalités de base de

JavaScript pour qu’ on puisse mieux

comprendre comment il fonctionne.

 Ces fonctionnalités sont communes à la

plupart des langages de programmation,

 si on comprend ces éléments JavaScript,

on serai plus à l'aise pour découvrir un

autre langage et développer avec.

Important : Tout au long de cette section,

vous pouvez saisir les lignes de code dans

votre console JavaScript du navigateur pour

voir ce qui se passe.

Les Bases de JavaScript

Variables

Pourquoi a-t-on besoin de variables ?

 Et bien parce qu'elles sont essentielles à la

programmation.

 Si les valeurs ne pouvaient pas changer, on

ne pourrait rien faire de dynamique.

 Par exemple, on ne pourrait pas

personnaliser un message de bienvenue

ou changer l'image affichée dans une

galerie.

Conception d'une page web

142

Variables

Une fois que vous avez déclaré une variable,

vous pouvez lui donner une valeur :

maVariable = ‘Bob’;

vous pouvez le faire sur une seule ligne.

Pour utiliser la valeur plus loin dans le code, il

suffit de faire appel à la variable en utilisant

son nom :

maVariable;

Une fois qu'on a donné une valeur à une

variable, on peut la changer plus loin :

var maVariable = ‘Patrick';

Les Bases de JavaScript

Variables

Conception d'une page web

143

Variables

Les variables sont réparties en différents types de données:

Variable

Explication

Exemple

String

Une chaîne de texte. Pour déclarer une chaîne de caractères, il

faut placer la valeur entre des quottes (').

var

maVariable = 'Bob';

Nombre

Un nombre. Les nombres n'ont pas de quotte.

var

maVariable = 10;

Booléen

Un valeur qui signifie vrai ou faux.

true/false sont des mots-clés

spéciaux en JavaScript, il n'est pas nécessaire d'utiliser des

quotes

var

maVariable = true;

Tableau

Une structure qui permet de stocker plusieurs valeurs dans une

seule variable.

var

maVariable = [1,'Bob','Patrick',10];

On peut ensuite utiliser chaque membre du

tableau en utilisant

maVariable[0],

maVariable

[1], etc.

Objet

Un objet peut être n'importe quoi. Un objet est un ensemble de

propriétés qui peut être enregistré dans une variable. C'est la

structure la plus utilisée et la plus flexible.

var

maVariable =

document.querySelector

('h1');

Les Bases de JavaScript

Les opérateurs

 Un opérateur est un symbole mathématique qui

produit un résultat en fonction de plusieurs valeurs

 la plupart du temps on utilise deux valeurs et un

opérateur.

Note: Attention lorsque vous utilisez les opérateurs, si

vous utilisez différents types de données avec un même

opérateur, le résultat que vous obtiendrez pourra vous

surprendre.

Pour voir ce que ça donne, essayez de voir le résultat fourni

par "35" + "25" en utilisant cette instruction dans votre

console. Pourquoi obtient-on ce résultat ? Parce que les

nombres sont entourés de guillemets et sont donc

considérés comme des chaînes de caractères, on obtient

donc une chaîne concaténée. Si vous utilisez 35 + 25, vous

obtiendrez le bon résultat.

Conception d'une page web

144

Les commentaires

De la même façon qu'en CSS, il est possible

d'intégrer des commentaires dans du code

JavaScript :

Voici un commentaire qui peut être

sur plusieurs lignes

Si votre commentaire tient sur une seule ligne,

vous pouvez utiliser deux barres obliques pour

indiquer un commentaire :

// Voici un commentaire

Les Bases de JavaScript

Les opérateurs

 Il y a plein d'autres opérateurs mais nous nous

en tiendrons à ceux-là pour le moment.

Conception d'une page web

145

Les opérateurs

Le tableau suivant liste certains des opérateurs les

plus simples ainsi que des exemples que vous

pouvez tester dans votre console JavaScript.

Les Bases de JavaScript

Les structures conditionnelles

L'expression contenue dans if ( ... ) correspond au

test qu'on souhaite effectuer.

Ici, on utilise l'opérateur d'identité pour comparer la

variable parfumGlace avec la chaîne de caractères

"chocolat" et voir si elles sont égales.

Si cette comparaison renvoie true, le premier bloc

de code sera exécuté.

Sinon, c'est le code du second bloc, celui présent

après else qui sera exécuté.

Conception d'une page web

146

Les structures conditionnelles

Les structures conditionnelles sont des éléments du

code qui permettent de tester si une expression est

vraie ou non et d'exécuter des instructions

différentes selon le résultat.

 La structure conditionnelle utilisée la plus

fréquemment est if ... else. Par exemple :

var parfumGlace = 'chocolat';

if (parfumGlace === 'chocolat') {

alert("J'adore la glace au chocolat !");

} else {

alert("J'aurai préféré du chocolat.");

}

Les Bases de JavaScript

Les fonctions

 Si vous voyez quelque chose qui ressemble à un

nom de variable et qui est suivi de parenthèses,

c'est probablement une fonction.

 Les fonctions peuvent utiliser des arguments

pour effectuer leurs calculs.

 Les arguments sont placés entre les

parenthèses, séparés par des virgules s'il y en a

plusieurs.

 Par exemple, la fonction alert() fait apparaître

une fenêtre de pop-up dans la fenêtre du

navigateur et on peut utiliser un argument pour

indiquer à la fonction ce qu'on souhaite écrire

dans cette fenêtre.

Conception d'une page web

147

Les fonctions

 Les fonctions permettent d'organiser des

fonctionnalités qu'on souhaite pouvoir

réutiliser.

 Par exemple, si on veut exécuter deux fois la

même action, plutôt que de recopier le code,

on pourra écrire une fonction une fois puis

l'utiliser aux deux endroits souhaités.

 Nous avons déjà utilisé des fonctions :

var maVariable = document.querySelector('h1');

alert(‘bonjour !');

Ces fonctions (querySelector et alert) sont

disponibles dans le navigateur et vous pouvez

les utiliser.

Les Bases de JavaScript

Les fonctions

Vous pouvez déclarer cette fonction dans le console

avant de l'utiliser plusieurs fois :

multiplier(4,7);

multiplier(20,20);

multiplier(0.5,3);

Note : L'instruction return indique au navigateur

qu'il faut renvoyer la variable resultat en dehors de

la fonction afin qu'elle puisse être réutilisée par

ailleurs.

Cette instruction est nécessaire car les variables

définies à l'intérieur des fonctions sont uniquement

disponibles à l'intérieur de ces fonctions.

C'est ce qu'on appelle une portée.

Conception d'une page web

148

Les fonctions

 En plus des fonctions déjà existantes, vous

pouvez définir vos propres fonctions !

 Par exemple, vous pouvez écrire une fonction

toute simple qui prend deux arguments et qui

renvoie le résultat de la multiplication :

function multiplier(num1,num2) {

var resultat = num1 * num2;

return resultat;

}

Les Bases de JavaScript

Les événements

document.querySelector('html').onclick = function() {

alert('Aïe, arrêtez de cliquer !!');

}

Il existe plein de méthodes pour « attacher » un

événement à un élément.

Dans cet exemple, nous avons sélectionné l'élément

HTML concerné et nous avons défini un

gestionnaire onclick qui est une propriété égale à

une fonction anonyme (elle n'a pas de nom) qui

contient le code à exécuter quand on clique.



Le nom du gestionnaire utilisé commence par

"on" et se poursuit par l'évènement désiré



Exemples:

onload, onsubmit, onmouseover, etc..

Conception d'une page web

149

Les événements

 Pour qu'un site web soit vraiment interactif,

vous aurez besoin d'événements.

 Les événements sont des structures de code:

 qui « écoutent » ce qui se passent dans le

navigateur et

 qui permettent de déclencher des actions

lorsque quelque chose de particulier se passe.

 Le meilleur exemple est l'événement de clic, qui

est déclenché lorsque l'utilisateur clique sur

quelque chose dans le navigateur.

 Pour voir ce que ça donne en pratique, saisissez

ces quelques lignes dans la console puis cliquez

sur la page sur laquelle vous êtes :

Les Bases de JavaScript

Les événements

 Le nom du gestionnaire utilisé

commence par "on" et se poursuit par

l'évènement désiré

 Exemples:

onload, onsubmit, onmouseover, etc..

Changer onclick par onmouseover

Conception d'une page web

150

Les événements

On pourra noter que :

document.querySelector('html').onclick = function()

{};

est équivalent à :

var maHTML = document.querySelector('html');

maHTML.onclick = function() {};

La première syntaxe est simplement plus courte.

Les Bases de JavaScript

Travaux Dirigés:

Renforcer notre page web

Pouvoir changer l'image en cliquant dessus

1. Tout d'abord, trouvez une deuxième

image que vous souhaiteriez afficher sur

votre site. Essayez de prendre une image

de même taille.

2. Enregistrez cette image dans votre dossier

images.

Conception d'une page web

151

Travaux Dirigés:

Renforcer notre page web

Maintenant que nous avons vu quelques

bases en JavaScript, nous allons ajouter

quelques fonctionnalités intéressantes à notre

page web.

Pouvoir changer l'image en cliquant dessus

Dans cette section, nous allons ajouter une

autre image au site et ajouter un peu de

JavaScript pour alterner entre les images

lorsqu'on clique sur l'image affichée.

Les Bases de JavaScript

Travaux Dirigés: Renforcer notre page web

Pouvoir changer l'image en cliquant dessus

4. Sauvegardez les différents fichiers puis chargez

index.html dans votre navigateurs.

5. Quand vous cliquez sur l'image, cela devrait

désormais passer à la deuxième !

Conception d'une page web

152

Travaux Dirigés: Renforcer notre page web

Pouvoir changer l'image en cliquant dessus

3. Dans le fichier main.js, entrez ce code

JavaScript:

var monImage = document.querySelector('img');

monImage.onclick = function() {

var maSrc = monImage.getAttribute('src');

if(maSrc === 'images/nomduPremierImage') {

monImage.setAttribute('src','images/nomduDeuxie

meImage');

} else {

monImage.setAttribute('src','images/nomduPremier

Image');

}

Les Bases de JavaScript

Renforcer notre page web : changer

l'image en cliquant dessus

 Cette fonction définit ce qui se passe à chaque fois

qu'on clique sur l'élément de l'image :

1. On récupère la valeur de l'attribut src de l'image.

2. On utilise une structure conditionnelle pour voir si la

valeur de src est égale au chemin de l'image originale :

a) Si le chemin est égal, on change la valeur de src

pour utiliser le chemin de la deuxième image, ce

qui force cette image à être chargée dans l'élément

<image>.

b) Si le chemin est différent (ce qui signifie que

l'image a déjà été changée), on modifie la valeur de

src pour aller chercher la première image et

l'afficher.

Conception d'une page web

153

Renforcer notre page web : changer l'image en

cliquant dessus

Dans cet exemple:

 nous utilisons une référence vers l‘élément img grâce

à la variable monImage.

var monImage = document.querySelector('img');

 Ensuite, on définit une fonction anonyme qui doit être

utilisée comme gestionnaire d'événement onclick.

monImage.onclick = function() {

{

var maSrc = monImage.getAttribute('src');

if(maSrc === 'images/nomduPremierImage') {

monImage.setAttribute

('src','images/nomduDeuxiemeImage');

} else { monImage.setAttribute

('src','images/nomduPremierImage'); } }

Les Bases de JavaScript

Renforcer notre page web

Ajouter un message d'accueil personnalisé

Continuons en ajoutant encore un peu de code pour

changer le titre de la page afin d'inclure un message

d'accueil personnalisé pour le visiteur du site.

 Ce message d'accueil sera conservé quand

l'utilisateur quittera le site et s'il y revient.

 Nous ajouterons également une option pour

pouvoir changer l'utilisateur et le message

d'accueil si besoin.

Conception d'une page web

154

Renforcer notre page web

: changer l'image en cliquant dessus

Les Bases de JavaScript

3. Ajoutons dans le fichier main.js les

fonctionnalités pour le message d'accueil

personnalisé :

function définirNomUtilisateur() {

var monNom = prompt('Veuillez saisir votre nom.');

localStorage.setItem('nom', monNom);

monTitre.textContent = ‘Bonjour, ' + monNom;}

 Cette fonction utilise la fonction prompt() qui

permet d'afficher une boîte de dialogue.

 Elle fonctionne de façon semblable à alert() sauf

qu'elle permet à l'utilisateur de saisir des

données et d'enregistrer ces données dans une

variable lorsque l'utilisateur clique sur OK.

 Dans notre exemple, la fonction prompt()

demande à l'utilisateur de saisir son nom.

Conception d'une page web

155

Renforcer notre page web

Travaux Dirigés: Ajouter un message d'accueil

personnalisé

1. Dans le fichier index.html, ajoutez la ligne

suivante avant l'élément <script> :

<button>Changer utilisateur </button>

2. Dans le fichier main.js, ajoutez le code

suivant à la fin du fichier :

var monBouton =

document.querySelector('button');

var monTitre = document.querySelector('h1');

Cela fait référence au nouveau bouton qu'on

vient d'ajouter et à l'élément de titre puis

enregistre ces références dans des variables

Les Bases de JavaScript

Travaux Dirigés: Renforcer notre page web

Ajouter un message d'accueil personnalisé

4. Ajoutons ensuite dans le fichier main.js ce bloc

if ... else. Ce code correspond à l'étape

d'initialisation car il sera utilisé la première fois

que la page est chargée par l'utilisateur :

if(!localStorage.getItem('nom')) {

définirNomUtilisateur();

} else {

var nomEnregistré = localStorage.getItem('nom');

monTitre.textContent = ‘Bonjour, ' +

nomEnregistré;

}

Conception d'une page web

156

Travaux Dirigés: Renforcer notre page web

Ajouter un message d'accueil personnalisé

 Ensuite, nous appelons l’API localStorage ( ).

 Cette API permet de stocker des données dans

le navigateur pour pouvoir les réutiliser.

localStorage.setItem('nom', monNom);

 Nous utilisons la fonction setItem() de cette API

pour stocker la donnée qui nous intéresse dans

un conteneur appelé 'nom'.

 La valeur stockée ici est la valeur de la variable

monNom qui contient le nom saisi par

l'utilisateur.

 Enfin, on utilise la propriété textContent du titre

pour lui affecter un nouveau contenu.

monTitre.textContent = ‘Bonjour, ' + monNom;}

Les Bases de JavaScript

Renforcer notre page web

Ajouter un message d'accueil personnalisé

5. Enfin, on associe le gestionnaire onclick au

bouton. De cette façon, quand on clique sur le

bouton, cela déclenchera l'exécution de la

fonction définirNomUtilisateur(). Ce bouton

permettra à l'utilisateur de modifier la valeur s'il

le souhaite:

monBouton.onclick = function() {

définirNomUtilisateur();

}

Conception d'une page web

157

Renforcer notre page web

Ajouter un message d'accueil personnalisé

 Ce bloc utilise l'opérateur de négation ( ! = NON

logique ) pour vérifier si le navigateur possède

une donnée enregistrée appelée nom.

 Si non (c’est le cas où c'est la première visite de

l'utilisateur), la fonction définirNomUtilisateur()

est appelée pour créer cette donnée.

 Si cette donnée est déjà enregistrée (ce qui

correspond au cas où l'utilisateur est déjà venu

sur la page), on la récupère avec la méthode

getItem() et

 on définit le contenu de textContent pour le titre

avec une chaîne suivie du nom de l'utilisateur

(c'est équivalent à ce qu'on fait dans

définirNomUtilisateur()).

Les Bases de JavaScript

Renforcer notre page web

Ajouter un message d'accueil personnalisé

Conception d'une page web

158

Renforcer notre page web

Ajouter un message d'accueil personnalisé

Récapitulons : la première fois que l'utilisateur

visite le site, il sera invité à saisir un nom

d'utilisateur. Ce nom sera utilisé pour afficher un

message d'accueil personnalisé. Si l'utilisateur

souhaite changer son nom, il peut utiliser le bouton.

En supplément, le nom est enregistré pour plus tard

grâce à l'API localStorage, cela permet à l'utilisateur

de retrouver son nom, même s'il a fermé la page

et/ou le navigateur et qu'il revient plus tard !

Conclusion

Si vous avez suivi les étapes détaillées sur cette

page, vous devriez obtenir un résultat semblable à

celui-ci :

Les Bases de JavaScript

function checkForm() {

if(document.getElementById("login").value == "")

{ alert("Formulaire invalide : le nom d'utilisateur

est vide"); return false; } else { alert("Le

formulaire est valide"); return true; } }

 Ici, le comportement de notre page Web est

 Lorsque l'évènement onsubmit est déclenché

par le formulaire (cliquer « envoyer »),

 la fonction checkForm() vérifie si le champ

"login" est rempli.

 Si oui, le formulaire est transmis ; sinon, il n'est

pas envoyé.

 Cela permet d'éviter d'envoyer incomplètes

information au serveur.

 Ici, c'est le navigateur qui se charge de tout

vérifier.

Conception d'une page web

159

Les événements

JavaScript est très souvent utilisé pour gérer des

formulaires en ligne.

Envoyer le formulaire uniquement si le nom

d'utilisateur n'est pas vide + avertir l'internaute :

Ajouter dans index.html la forme suivante:

Nom d'utilisateur :

Mot de passe :

</form>

Les Bases de JavaScript

function checkForm() {

if(document.getElementById("login").value == "")

{ alert("Formulaire invalide : le nom d'utilisateur

est vide"); return false; } else { alert("Le

formulaire est valide"); return true; } }

 Ici, le comportement de notre page Web est

 Lorsque l'évènement onsubmit est déclenché

par le formulaire (cliquer « envoyer »),

 la fonction checkForm() vérifie si le champ

"login" est rempli.

 Si oui, le formulaire est transmis ; sinon, il n'est

pas envoyé.

 Cela permet d'éviter d'envoyer incomplètes

information au serveur.

Conception d'une page web

160

Les événements

JavaScript est très souvent utilisé pour gérer des

formulaires en ligne.

Envoyer le formulaire uniquement si le nom

d'utilisateur n'est pas vide + avertir l'internaute :

Ajouter dans index.html la forme suivante:

Nom d'utilisateur :

Mot de passe :

</form>

Les Bases de JavaScript

conclusion

 Ici, c'est le navigateur qui se charge de tout

vérifier.

Sécurité

Dans l'exemple ci-dessus, le serveur Web ne doit

pas partir du principe que tout formulaire reçu a

été validé :



ce serait une erreur grave.



Le code JavaScript présenté ici sert

uniquement à accélérer l'arrivée des

réponses données à l'utilisateur ; il ne

permet pas d'assurer que 100% des

formulaires transmis sont valides.

Conception d'une page web

161

Les événements

JavaScript est très souvent utilisé pour gérer des

formulaires en ligne.

Envoyer le formulaire uniquement si le nom

d'utilisateur n'est pas vide + avertir l'internaute :

Ajouter dans index.html la forme suivante:

Nom d'utilisateur :

Mot de passe :

</form>

Gestion des fichiers

 Dans cette gestion des fichiers, nous

détaillerons comment mettre en place

une organisation adaptée des fichiers

de votre site web. Tout en expliquant

comment donner une structure

cohérente à votre site web.

Conception d'une page web

162

 Un site web contient plusieurs types de fichiers

et chaque type est composé de nombreux

fichiers (texte, code, styles, media, etc.).

 Construire un site web revient à créer une

structure de fichiers qui peuvent interagir les

uns avec les autres.

 Lors de la construction d'un site web, ces

fichiers doivent être organisés et rangés sur

votre ordinateur afin qu'ils puissent interagir les

uns avec les autres et que le contenu s'affiche

correctement. C’est la gestion des fichiers.

 Une fois que c'est fait, vous pourrez alors

téléverser ces fichiers sur un serveur. C’est ce

qu’on appelle: Hébergement.

Gestion des fichiers

Où placer votre site web sur votre

ordinateur ?

 Sélectionnez un endroit où enregistrer vos

projets de sites web.

 À cet emplacement, créez un dossier appelé

projets-web ou vous pouvez utiliser le nom que

vous souhaitez. On a choisi: monPremierSitWeb

 C'est dans ce dossier que vous placerez vos

différents projets de sites web.

 À l'intérieur de ce dossier, créez un autre

dossier pour y enregistrer votre premier site

web.

 Vous pouvez appeler ce dossier site-test ou

avec le nom que vous voulez.

Conception d'une page web

163

Où placer votre site web sur votre

ordinateur ?

 Lorsque vous travaillez sur votre site web sur

votre propre ordinateur, tous les fichiers liés au

site devraient être présents dans un dossier

dont le contenu reflète la structure des fichiers

sur le serveur.

 Ce dossier peut être n'importe où sur votre

ordinateur, l'idéal étant qu'il soit simple à

retrouver, par exemple:

 sur votre Bureau ou

 dans votre dossier personnel,

 voire à la racine du disque dur.

 Nous avons placé monPremierSitWeb dans le

sous dossier lab 5

Gestion des fichiers

Note sur l'espacement

 Les navigateurs, les serveurs web et les

différents langages de programmation ne

gèrent pas tous les espaces de la même façon.

 Par exemple, si vous utilisez un espace dans le

nom du fichier, certains systèmes considèreront

que le nom du fichier correspond en fait aux

noms de deux fichiers.

 Certains serveurs remplaceront les blancs dans

le nom du fichier avec « %20 » (le code de

caractère pour représenter les espaces dans les

URI) : ce qui cassera tous vos liens.

 Pour cette raison, il est préférable d'utiliser des

tirets ou des tirets bas (underscores) : mon-

fichier.html ou mon_fichier.html.

Conception d'une page web

164

Note sur la casse et l'espacement

Note sur la casse

 Il est généralement conseillé d'avoir des noms

sans majuscule et sans espace car :

 De nombreux ordinateurs, notamment les

serveurs web, sont sensibles à la casse.

Par exemple, si vous placez une image pour

votre site à l'emplacement « site-

test/MonImage.jpg »

et que, dans un autre fichier, vous faites

référence à « site-test/monimage.jpg », cela

ne fonctionnera pas.

Gestion des fichiers

Note sur la casse et l'espacement

Conception d'une page web

165

Note sur la casse et l'espacement

Pour ces raisons, il est préférable d'écrire les noms

des fichiers et dossiers:

 en minuscules et

 sans espace.

Cela vous permettra d'éviter certains problèmes.

Gestion des fichiers

Quelle structure mettre en place pour

votre site web ?

index.html : Ce fichier contiendra généralement le

contenu de votre page d'accueil, c-à-d. le texte et

les positions des images que les gens verront

lorsqu'ils arriveront sur votre site.

Dans votre explorateur de fichier ou dans votre

éditeur de texte, créez un fichier nommé index.html

puis enregistrez le dans votre dossier « site-test ».

Un dossier images : Ce dossier contiendra les

différentes images utilisées pour votre site.

Créez un dossier nommé « images » à l'intérieur de

votre dossier « site-test ».

Conception d'une page web

166

Quelle structure mettre en place pour

votre site web ?

la structure de notre site devrait avoir certains

éléments qu'on retrouve quasiment dans tous les

sites web :

 un fichier d'index HTML,

 des dossiers pour:

 les images,

 les scripts et

 les feuilles de styles.

Bon de créer :

Gestion des fichiers

Quelle structure mettre en place pour

votre site web ?

Un dossier styles : Ce dossier contiendra le code

CSS utiliser pour mettre en forme le contenu de

votre site (par exemple pour définir les couleurs à

utiliser pour le texte et l'arrière-plan).

Créez un dossier appelé « css » à l'intérieur de votre

dossier « site-test ».

Un dossier scripts : Ce dossier contiendra le code

JavaScript qui est utilisé pour ajouter des

fonctionnalités interactives sur votre site (par

exemple, des boutons qui permettent de charger

des données lorsqu'on clique dessus).

Créez un dossier appelé « js » à l'intérieur de votre

dossier « site-test ».

Conception d'une page web

167

Quelle structure mettre en place pour

votre site web ?

la structure de notre site devrait avoir certains

éléments qu'on retrouve quasiment dans tous les

sites web :

 un fichier d'index HTML,

 des dossiers pour:

 les images,

 les feuilles de styles et

 les scripts .

Bon de créer :

Gestion des fichiers

Quelle structure mettre en place pour

votre site web ?

Note : Sur Windows, vous aurez peut être des

problèmes pour voir le nom entier des fichiers.

En effet, Windows possède une option, activée par

défaut, qui Masque les extensions pour les types

de fichiers connus.

Cette option peut être désactivée en allant dans

l'explorateur Windows puis dans l'option Options

des dossiers...,

il faut alors décocher la case Masquer les

extensions pour les types de fichier connus

puis valider en cliquant sur OK.

Conception d'une page web

168

Quelle structure mettre en place pour

votre site web ?

la structure de notre site devrait avoir certains

éléments qu'on retrouve quasiment dans tous les

sites web :

 un fichier d'index HTML,

 des dossiers pour:

 les images,

 les feuilles de styles et

 les scripts .

Bon de créer :

Gestion des fichiers

Les chemins de fichiers

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Conception d'une page web

169

Les chemins de fichiers

Pour que les fichiers puissent communiquer et

s'utiliser les uns les autres, il faut fournir un chemin

vers les fichiers qu'on souhaite utiliser.

Nous allons illustrer cela avec un peu de HTML que

nous allons écrire dans index.html pour que la page

affiche l'image qu'on a choisie.

1. Copiez l'image que vous avez choisie dans

votre dossier « images ».

2. Ouvrez le fichier index.html avec votre

éditeur de texte puis insérez le code suivant.

Gestion des fichiers

Les chemins de fichiers

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Ne vous préoccupez pas trop du contenu pour le

moment.

Conception d'une page web

170

Les chemins de fichiers

3. La ligne qui contient <img src="" alt="Mon

image de test"> correspond au code HTML qui

insère une image dans la page.

 Pour fonctionner, on doit indiquer où

l'image se situe dans le code HTML.

 Cette image est à l'intérieur du dossier

« images » et ce dossier se situe dans le

même dossier de « index.html ».

 Pour parcourir l'arborescence des fichiers

depuis index.html jusqu'à l'image,

 le chemin sera « images/votre-fichier-

image ».

Gestion des fichiers

Les chemins de fichiers

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<img src= "images/monimage.png" alt="Mon image de

test">

</body>

</html>

Conception d'une page web

171

Les chemins de fichiers

4. Insérez le chemin vers le fichier image dans le

code HTML, entre les guillemets dans src="".

5. Sauvegardez votre fichier HTML puis chargez la

page dans votre navigateur (il suffit de double-

cliquer sur le fichier dans votre explorateur).

6. Vous devriez obtenir une nouvelle page web,

qui affiche votre image !

Gestion des fichiers

Les chemins de fichiers

Quelques règles générales à propos des

chemins de fichier :

 Pour faire référence à un fichier qui se situe

dans le dossier parent par rapport au fichier

HTML, il faut écrire deux points. Par exemple, si

votre fichier index.html se situe dans un sous-

dossier de site-test et que mon-image.png se

situe à l'intérieur de site-test, vous pouvez faire

référence à votre image mon-image.png depuis

index.html en écrivant ../mon-image.png.

Ces différentes règles peuvent être combinées

autant que nécessaire : par exemple ../sous-

dossier/autre-sous-dossier/mon-image.png.

Conception d'une page web

172

Les chemins de fichiers

Quelques règles générales à propos des chemins de

fichier :

 Pour utiliser un fichier qui est dans le même

dossier que le fichier HTML, il suffit d'utiliser le

nom du fichier pour le chemin (par exemple

mon-image.jpg).

 Pour faire référence à un fichier dans un sous

dossier, on écrira le nom du dossier, suivi d'une

barre oblique (slash) suivi du nom du fichier. Par

exemple : mon-sous-dossier/mon-image.jpg.

Gestion des fichiers

Les chemins de fichiers

Pour le moment, c'est tout ce qu'il y a à

savoir.

Conception d'une page web

173

Les chemins de fichiers

Note : Le système de fichiers Windows utilise

des barres obliques inversées (backslash : « \

») pour organiser les fichiers au lieu d'utiliser

des barres obliques (slash : « / ») avec par

exemple C:\windows.

Cela n'a pas d'importance pour développer un

site web, même sur Windows, les fichiers Web

utilisent des barres obliques simples (« / ») et

ce sont toujours elles qu'il faudra utiliser.

Hébergement et Nom de Domaine

Quelles sont les différentes options ?

 Nous détaillerons ensuite une méthode qui

devrait convenir dans la majorité des cas pour

un premier projet Web.

Publier votre site web

174

 Une fois que vous avez écrit votre code et

 que vous avez organisé la structure des fichiers,

 vous devez tout mettre en ligne afin que les gens

puissent y accéder.

Cette section décrit comment mettre en ligne votre

site web en un minimum de temps.

Quelles sont les différentes options ?

 La publication d'un site web n'est pas un sujet

simple.

 Cela est dû au fait qu'il existe de nombreuses façon

pour publier un site.

 En revanche, nous discuterons des avantages et des

inconvénients des différentes stratégies.

Hébergement et Nom de Domaine

L'hébergement et le nom de domaine

client FTP: En parallèle, vous aurez besoin d'un

client FTP (pour File Transfer Protocol ou protocole

de transfert de fichiers) (voir chapitre 8 architecture

client serveur) pour transférer les fichiers depuis

votre ordinateur vers le serveur web. C’est

l’hébergement des fichiers dans le serveur web.

 Les différents programmes utilisés pour FTP

varient mais, généralement, il faut se connecter

avec des identifiants fournis par la société

d'hébergement

Publier votre site web

175

L'hébergement et le nom de domaine

Si vous souhaitez complètement contrôler votre site web,

vous aurez probablement besoin de payer pour :

L'hébergement : cela correspond à l'espace, loué par une

société d'hébergement, disponible sur un serveur web.

Vous pourrez utiliser cet espace pour y placer vos fichiers

et le serveur web fournira le contenu aux utilisateurs qui

visitent le site.

Un nom de domaine : cela correspond à l'adresse avec

laquelle les visiteurs pourront accéder à votre site web :

« www.monsiteweb.com ».

 Il est possible de louer un nom de domaines à un

bureau d'enregistrement.

La plupart des sites professionnels sont publiés de cette

façon.

Hébergement et Nom de Domaine

L'hébergement et le nom de domaine

client FTP : Le logiciel utilisé pour FTP affichera ensuite vos

fichiers locaux d'une part et les fichiers présents sur le

serveur d'autre part.

 Vous pourrez utiliser ces deux parties pour transférer

vos fichiers d'une machine à l'autre :

Publier votre site web

176

L'hébergement et le nom de domaine

client FTP : ces identifiants sont généralement

composés d'un nom d'utilisateur, d'un mot de

passe et d'un nom de domaine sur lequel est

situé le serveur.

Hébergement et Nom de Domaine

Hébergement gratuit

 Il existe des services gratuits tels que

Neocities, Blogspot et Wordpress.

 Là aussi, vous en aurez pour votre argent

mais certains de ses services peuvent

convenir pour un premier projet.

 Pour la plupart de ces services, FTP est

derrière scène ou on peut téléverser les

fichiers via une interface web.

 Certaines des sociétés fournissent le nom

de domaine et l'hébergement dans un

même package.

Publier votre site web

177

Conseils sur l'hébergement et les noms de

domaines

 Pour trouver des sociétés d'hébergement et de

noms de domaine, vous pouvez utiliser votre

moteur de recherche préféré.

 Il se peut que votre fournisseur d'accès

Internet fournisse un service d'hébergement

limité pour un petit site web.

 Les fonctionnalités offertes seront limitées

mais pour un premier projet ça peut être

amplement suffisant !

 N'hésitez pas à les contacter pour savoir si ce

service est disponible.

Hébergement et Nom de Domaine

GitHub

 Cela permet de participer à différents

projets et communautés,

 Git est un système de gestion de versions

très populaire.

 GitHub possède une fonctionnalité très

utile pour l'hébergement que sont les

pages GitHub.

 Ces pages vous permettent d'exposer une

page web dont le code est présent sur

GitHub.

Publier votre site web

178

Conseils sur l'hébergement et les noms de domaines

Certains outils vous permettent de publier votre site

web en ligne :

Utiliser un outil en ligne comme GitHub

GitHub est un site de « gestion de versions

collaborative » qui permet de stocker en ligne des «

dépôts » manipulés avec le système de gestion de

versions Git.

 Vous pouvez collaborer sur des projets logiciels

et y stocker des projets open source.

 open source: signifie que tout le monde

pourra trouver les fichiers que vous publiez sur

GitHub, les utiliser et améliorer votre projet.

 Vous pouvez aussi faire de même avec les

autres projets présents sur GitHub.

Hébergement et Nom de Domaine

Utiliser un outil en ligne comme Dropbox

 À la différence d'un environnement

hébergé, ces outils sont gratuits mais

disposent d'un ensemble de

fonctionnalités limitées.

Publier votre site web

179

Conseils sur l'hébergement et les noms de domaines

Certains outils vous permettent de publier votre site

web en ligne :

Utiliser un outil en ligne comme Dropbox

Dropbox est un système de stockage de fichiers qui

permet de sauvegarder des fichiers sur le Web afin

qu'ils soient disponibles sur différents appareils.

 Si les fichiers sont disponibles de façon

publique, n'importe qui pourra y accéder.

 Si le dossier publique contient des fichiers

web, Dropbox servira le site web

automatiquement.

Hébergement et Nom de Domaine

Utiliser un IDE web tel que Thimble

Voici les quelques IDE que vous pouvez

essayer.

Choisissez celui qui vous convient le mieux :

 Notepad++

 JSFiddle

 Thimble

 JSBin

Publier votre site web

180

Utiliser un IDE web tel que Thimble

 Il existe plusieurs applications web qui émulent

un environnement de développement web qui

permet de saisir du HTML, CSS et JavaScript et de

voir le résultat affiché sous la forme du site web.

 Tout ça en une seule fenêtre ! De façon générale,

ces outils sont simples d'utilisation, très utiles

pour apprendre et ils sont gratuits (pour les

fonctionnalités de bases).

 Ils permettent en plus d'afficher la page web finie

avec une adresse donnée.

 Cependant, les fonctionnalités de base sont

plutôt limitées et ne permettent pas de charger

des ressources comme des images.

Hébergement et Nom de Domaine

Publier un site via GitHub

Mise en place basique

 Pour commencer, installez Git sur votre

machine. C'est l'outil sur lequel GitHub est

basé: http://git-scm.com/

 Ensuite, inscrivez-vous sur GitHub .

 Une fois que vous êtes inscrit, connectez-vous

sur github.com avec votre nom d'utilisateur et

votre mot de passe.

 Ensuite, il faut créer un dépôt dans lequel vous

placerez vos fichiers.

 Pour ce faire, cliquez sur le bouton + en haut à

droite sur la page d'accueil GitHub puis

sélectionnez New Repository.

Publier votre site web

181

Publier un site via GitHub

 Nous avons vu différentes options.

Désormais, nous allons voir en détails

comment publier un site sur une page

GitHub .

 Encore une fois, cette méthode n'est pas

nécessairement la meilleure pour votre

projet ou en général mais elle est :

 gratuite

 simple

Hébergement et Nom de Domaine

Publier un site via GitHub

Mise en place basique

Si, par exemple, votre nom d'utilisateur est

monusername, le nom sera

monusername.github.io.

Publier votre site web

182

Publier un site via GitHub

Mise en place basique

 Sur cette page, dans le champ Repository name

box, entrez username.github.io, où username

correspond à votre nom d'utilisateur.

Hébergement et Nom de Domaine

Publier un site via GitHub

Mise en place basique

Téléverser vos fichiers sur GitHub

Nous allons utiliser la ligne de commande pour

placer notre dépôt sur GitHub.

Une ligne de commande permet de saisir des

commandes au clavier pour créer des fichiers et de

lancer des programmes

plutôt que de cliquer sur une interface utilisateur

avec des boutons.

Publier votre site web

183

Publier un site via GitHub

Mise en place basique

6. Cliquez sur Create repository, cela devrait afficher

la page suivante :

Publier votre site web

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

Note : Si vous préférez avoir une interface

graphique et éviter l'interface en ligne de

commande, vous pouvez utiliser une interface

graphique pour Git pour faire la même chose.

Publier votre site web

184

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

6. Une interface en ligne de commandes ressemble

à ça :

Publier votre site web

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

Chaque système d'exploitation possède un outil de

ligne de commande :

Windows : commande qui peut être lancé en

appuyant sur la touche Windows, tapez « Invite de

commande » et sélectionnez le dans la liste.

Attention, Windows possèdent des conventions

différentes de Linux et OS X. Les commandes

pourront être légèrement différentes.

Publier votre site web

185

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

6. Une interface en ligne de commandes ressemble

à ça :

Publier votre site web

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

Chaque système d'exploitation possède un outil de

ligne de commande :

OS X : Terminal qui peut être lancé depuis

Applications > Outils.

Linux : Généralement, il est possible de lancer un

terminal avec Ctrl + Alt + T. Si ça ne fonctionne pas,

vous pouvez chercher Terminal dans le menu

principal.

Cela peut sembler un peu effrayant à première vue.

Ne vous en faites pas. Le terminal est en fait utilisé

pour envoyer des commandes à l'ordinateur une

fois qu'on appuie sur Entrée.

Publier votre site web

186

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

6. Une interface en ligne de commandes ressemble

à ça :

Publier votre site web

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

1. Placez vous dans votre répertoire site-test (si

votre répertoire a un nom différent, remplacez

le nom avec celui que vous utilisez).

 Pour aller dans un répertoire, on utilisera

la commande cd (qui signifie « change

directory » qui signifie « changer de

répertoire »).

 Si votre répertoire s'appelle site-test et

qu'il est sur votre bureau :

cd Bureau/test-site

Publier votre site web

187

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

6. Une interface en ligne de commandes ressemble

à ça :

Publier votre site web

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

2. Une fois que vous êtes dans ce répertoire,

saisissez cette commande qui indique à git de

créer un dépôt dans ce répertoire :

git init

Publier votre site web

188

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

6. Une interface en ligne de commandes ressemble

à ça :

Publier votre site web

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

3. Ensuite, sur le site GitHub, sur la page, allez

dans la section

…or push an existing repository from the

command line,

 vous devrez avoir deux lignes de code.

 Copiez la première ligne dans votre

terminal et appuyez sur Entrée.

 La commande devrait ressembler à :

git remote add origin

https://github.com/jeanbiche/jeanbiche.github.io.git

Publier votre site web

189

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

6. Une interface en ligne de commandes ressemble

à ça :

Publier votre site web

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

4. Ensuite, tapez ces deux commandes suivantes

en appuyant sur Entrée pour chacune. Ces

commandes permettent d'indiquer à git qu'il

faut gérer les fichiers contenus dans le

répertoire et de préparer la connexion entre le

dépôt qui est sur GitHub et le dépôt qui est sur

votre ordinateur.

git add --all

git commit -m 'adding my files to my repository‘

Publier votre site web

190

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

6. Une interface en ligne de commandes ressemble

à ça :

Publier votre site web

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

5. Enfin, on envoie le code sur GitHub grâce à la

deuxième commande qui était listée à l'étape 3:

git push -u origin master

6. Pour voir si cela a bien fonctionné, allez sur

monusername.github.io dans votre navigateur.

Votre site devrait être en ligne ! Vous pouvez

envoyer l'adresse du site par e-mail à vos amis

pour leurs montrer votre talent !

Note : Si vous êtes bloqué, la page GitHub pourra

être d'une aide précieuse.

Publier votre site web

191

Publier un site via GitHub

Mise en place basique

Televerser vos fichiers sur GitHub

6. Une interface en ligne de commandes ressemble

à ça :

Publier votre site web

Publier un site via GitHub

En savoir un peu plus sur GitHub

Le message présent sur la ligne git commit -m peut

être remplacé avec un message qui décrit plus

précisément les changements que vous avez

apportés.

Pour en savoir plus, vous pourrez utiliser le site

GitHub Help.

Conclusion

Après ces différentes étapes, vous devriez disposer

d'un site web, disponible en ligne, accessible à une

adresse donnée. Félicitations !

Publier votre site web

192

Publier un site via GitHub

En savoir un peu plus sur GitHub

Si vous souhaitez apporter d'autres changements à

votre page puis les publier sur GitHub, vous aurez

simplement besoin de modifier les fichiers comme

précédemment.

Une fois les fichiers modifiés et sauvegardés, vous

pouvez utiliser les commandes suivantes (en

appuyant sur Entrée à chaque fois) pour publier vos

modifications sur GitHub :

git add --all

git commit -m 'Mes modifications étaient...'

git push

Publier votre site web

Publier un site via GitHub

En savoir un peu plus sur GitHub

Le message présent sur la ligne git commit -m peut

être remplacé avec un message qui décrit plus

précisément les changements que vous avez

apportés.

Pour en savoir plus, vous pourrez utiliser le site

GitHub Help.

Conclusion

Après ces différentes étapes, vous devriez disposer

d'un site web, disponible en ligne, accessible à une

adresse donnée. Félicitations !

Publier votre site web

193

Publier un site via GitHub

En savoir un peu plus sur GitHub

Serveur Web

Qu'est-ce qu'un serveur web ?

Au niveau des composants matériels,

 un serveur web est un ordinateur hébergeant un

ou plusieurs sites web.

 Cet ordinateur est connecté à Internet et est

généralement accessible via un nom de domaine

tel que uqo.ca.

 Il stocke les fichiers qui composent un site web

(exemple les fichiers HTML, images, de feuilles de

style CSS, les fichiers JavaScript) et qui les envoie

à l'appareil de l'utilisateur qui visite le site.

 Ce sont ces fichiers JavaScript envoyer par le

serveur qui font le dynamisme du cote client

lorsqu’ils ont été interprétés par le navigateurs.

Dynamisme du Web

194

Qu'est-ce qu'un serveur web ?

Comme on a expliquer dans le chapitre 8,

Un serveur peut être défini par extension

comme un ordinateur hébergeant une

application serveur.

 Il est de même, un « serveur web » peut

faire référence à:

1. des composants logiciels (software) ou

2. des composants matériels (hardware) ou

3. des composants logiciels et matériels qui

fonctionnent ensemble.



Serveur Web

Qu'est-ce qu'un serveur web ?

Au niveau des composants logiciels,

 Au niveau le plus simple, à chaque fois qu'un

navigateur a besoin d'un fichier hébergé sur un

serveur web,

 le navigateur demande (on dit qu'il envoie une

requête) le fichier via HTTP.

 Quand la requête atteint le bon serveur web

(matériel), le serveur HTTP (logiciel) renvoie le

document demandé, également grâce à HTTP.

Dynamisme du Web

195

Qu'est-ce qu'un serveur web ?

Au niveau des composants logiciels,

 un serveur web contient différents fragments

qui contrôlent la façon dont les utilisateurs

peuvent accéder aux fichiers hébergés. On

trouvera au moins un serveur HTTP.

 Un serveur HTTP est un logiciel qui comprend

les URL et le protocole HTTP (le protocole utilisé

par le navigateur pour afficher les pages web).

Attention: à ne pas confondre site web et serveur web. Par exemple, si quelqu'un dit « Mon site web ne

répond pas », cela signifie en fait que le serveur web ne répond pas et que, par conséquent, le site web n'est

pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme serveur web

n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans

l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce

serveur n'est pas disponible.

Serveur Web Statique

Serveur Web Dynamique

Un serveur web dynamique possède d'autres

composants logiciels, certains qu'on retrouve

fréquemment dont un serveur d'applications

et une base de données.

 Il est appelé « dynamique » car le serveur

d'applications met à jour les fichiers

hébergés avant de les envoyer au

navigateur via HTTP.

 Par exemple, afin de produire la page web

que vous voyez sur votre navigateur, le

serveur d'applications peut utiliser un

modèle HTML et le remplir avec des

données.

Dynamisme du Web

196

Pour publier un site web, vous aurez besoin

d'un serveur web:

1. statique ou

2. dynamique.

Un serveur web statique est composé d'un

ordinateur (matériel) et d'un serveur HTTP

(logiciel).

 Il est appelé « statique » car le serveur

envoie les fichiers hébergés « tels quels »

vers le navigateur.

Serveur Web Dynamique

 Pour récupérer une page web, votre

navigateur envoie une requête au serveur

web.

 Apache serveur web est le plus connu

d'entre eux.

 Celui-ci traite alors la requête pour le

fichier demandé présent sur son espace

mémoire.

 Lorsqu'il trouve le fichier, le serveur le lit,

le manipule si nécessaire et l'envoie au

navigateur.

 Dans cette section, nous allons décrire en

détails chacune de ces étapes.

Dynamisme du Web

197

 Ainsi, on trouve plusieurs sites web ont

des milliers de pages mais il n'existe pas

un document HTML réel pour chacune de

ces pages.

 En fait, il y a quelques modèles HTML qui

sont utilisés avec une gigantesque base de

données.

 Cette organisation permet de mieux

mettre à disposition le contenu et de

maintenir plus efficacement le site.

Serveur Web Dynamique

 toujours être en fonctionnement

 toujours être connecté à Internet

 conserver la même adresse IP au cours du

temps (tous les fournisseurs d'accès ne

fournissent pas une adresse IP fixe pour

les particuliers

 être maintenu par un fournisseur tiers.

Dynamisme du Web

198

Héberger des fichiers

Un serveur web doit stocker les fichiers

nécessaires au fonctionnement du site web :

 tous les documents HTML et les

ressources liées dont les images, les

fichiers JavaScript, les feuilles de styles, les

fichiers de fontes, les vidéos, etc.

 D'un point de vue technique, il serait tout

à fait possible de stocker tout ces

éléments sur son propre ordinateur.

 Toutefois, il est beaucoup plus pratique

d'utiliser un serveur web destiné

spécifiquement à cela car il devra :

Serveur Web Dynamique

Les Bases de PHP

PHP : Dynamisme du contenu

PHP est un langage de programmation côté

serveur utilisé pour développer des

applications web et des sites dynamiques.

 Lorsque le serveur Web reçoit une

demande de document,

 il sous traite la tâche à PHP afin de pouvoir

retourner à ses affaires :

 c'est PHP (et non le serveur Web APACHE )

qui s'occupe de construire le document.

 Une fois qu'il est prêt, le document est

envoyé de PHP au serveur Web,

 puis du serveur Web au navigateur

Internet (c'est-à-dire à vous, l'internaute).

Dynamisme du Web

199

Logiciel dynamique du serveur web

Sur un serveur web, le serveur HTTP est responsable du

traitement des requêtes reçues et de leurs réponses.

 Une fois qu'il a reçu une requête, le serveur HTTP

vérifie que l'URL demandée correspond à un fichier

existant.

 Si c'est le cas, le serveur envoie le fichier vers le

navigateur du client.

 Sinon, le serveur d'applications génère

dynamiquement le fichier nécessaire.

 Cette applications du serveur est développer par

un script ou langage tels que: PHP, JSP ou ASP,

Python… etc.



Pour créer une suite de documents HTML et faire

une galerie de photos ou un catalogue de produits.

la solution existe : un langage de script tel que PHP !

Les Bases de PHP

Sécurité

Comme on vu malgré JavaScript peut

vérifier la validité du formulaire, le serveur

Web ne doit pas partir du principe que

tout formulaire reçu a été validé :

ce serait une erreur grave.

Le code JavaScript sert uniquement à

accélérer l'arrivée des réponses données à

l'utilisateur ; il ne permet pas d'assurer

que 100% des formulaires transmis sont

valides.

Dynamisme du Web

200

PHP : Dynamisme du contenu



À l'origine, PHP fut créé par Rasmus Lerdorf

pour ses besoins personnels :



Personal Home Page (version 1).



Depuis, le nom fut changé à



Hypertext Preprocessor



ce qui préserve de son utilité principale :

créer dynamiquement des documents HTML.



Depuis le 2 novembre 2006, PHP est en

version 5.2 ; la branche 5.3 était disponible

depuis le 30 juin 2009 ;



La version 6 n’a jamais vu le jour.



Maintenant, on est à la version 7 ou 8.

Les Bases de PHP

Mon premier script PHP : test.php

<html>

<head>

<title>

<?php echo " Bonjour tout le monde!"; ?>

</title>

</head>

<body>

<h1>

<?php echo “Bonjour tout le monde!";?>

</h1>

<p>

<?php echo "Un bonjour."; ?>

</p></body> </html>

Dynamisme du Web

201

PHP : Dynamisme du contenu

 Afin de programmer en PHP,

 À part d'un logiciel d'édition de code et de

votre navigateur Internet, vous aurez

besoin d'un serveur Web.

 Apache serveur web est le plus connu

d'entre eux.

scripts PHP



Un script PHP est identifié par une balise

particulière :



<?php ouvre le script et



?> le referme.



Tout ce qui se trouve à l'intérieur de cette

balise est du PHP.

Les Bases de PHP

Mon premier script PHP : test.php

<?php

$title = " Bonjour tout le monde!";

echo $title;

</title>

</head> <body> <h1>

<?php $title = "Bonjour tout le monde!"; echo $title; ?>

</h1> <p>

<?php

$text = "Un bonjour";

echo $text;

</p> </body> </html>

Dynamisme du Web

202

PHP : Dynamisme du contenu

 Pour visualiser le résultat, il n'est pas

suffisant de double cliquer sur le fichier...

 Il vous faut passer par le serveur Web.

 Ainsi, ouvrez votre navigateur Internet et

chargez la page :

 http://localhost/test.php

 Pour avoir une réponse, il faut que le

serveur Apache soit actif.

 Voyons maintenant avec une variable (une

variable est un mot commençant par le

signe $):

Les Bases de PHP



Ici, on utilise les variables $title et $text.



Cela me permet de ne pas répéter " Bonjour

tout le monde ".



Le gain est ici minime, cependant elles

permettent de réutiliser du texte à l'infini,

sans devoir le réécrire.



Par ailleurs, si je souhaite modifier le titre de

ma page, je n'ai plus qu'à modifier la variable

au début du script pour que toute ma page

soit mise à jour d'un seul coup.



C'est là l'intérêt de PHP, donc la rapidité

d’affichage.



Dans les équations mathématiques, une

variable est une valeur inconnue ou

recherchée.

Dynamisme du Web

203

PHP : Dynamisme du contenu

scripts PHP

<?php $title = " Bonjour tout le monde!";

$text = "Un bonjour."; ?>

<html>

<head>

<title>

<?php echo $title; ?>

</title>

</head>

<body>

</body>

</html>

Les Bases de PHP

une structure de contrôle : la conditionnelle if.

<h1><?php echo $title; ?></h1> <p><?php echo

$text; ?></p> </body> </html>

<?php

if(isset($_GET["title"]))

{

$title = $_GET["title"];

}

else

{

$title = " Bonjour tout le monde ";

}

$text = "$title, je suis!"; ?>

Dynamisme du Web

204

PHP : Dynamisme du contenu

scripts PHP



En PHP, c'est une valeur que l'on connaît mais que

l'on peut modifier à volonté.



Dans les deux cas, on utilise une équation:



"x = 5"



en mathématiques ou bien



"$x = 5; "



en PHP.



Ci-dessus, les lignes qui se trouvent dans les balises

PHP s'appellent des expressions.



Elles sont délimitées par des points virgules.



Il ne faut pas oublier ce point virgule : il est

fondamental car il sépare les expressions.



Si on l'oublie, PHP a tendance à crier "syntax error"

Les Bases de PHP

une structure de contrôle : la conditionnelle if.

<?php

if(isset($_GET["title"]))

{

$title = $_GET["title"];

}

else

{

$title = " Bonjour tout le monde ";

}

$text = "$title, je suis!"; ?>

Dynamisme du Web

205

PHP : Dynamisme du contenu

scripts PHP



Cela s'appelle un paramètre GET.



Dans notre script, nous utilisons une

variable $_GET qui teste la présence d'une

variable "title".



Si elle existe dans $_GET, alors on la met dans

une variable locale que nous appelons $title,

sinon on construit cette variable

locale $title avec une valeur par défaut.

Les Bases de PHP

<title>

<?php echo $title; ?>

</title>

</head>

<body>

<h1>

<?php echo $title; ?>

</h1>

<p>

<?php echo $text; ?>

</p>

</body>

</html>

Dynamisme du Web

206

PHP : Dynamisme du contenu

scripts PHP



Lorsque vous validez le chargement de la page,

le titre et le contenu de la page ont pris la

valeur que vous avez mise dans la barre

d'adresse.

Les Bases de PHP

 En effet, si vous avez déjà fait un site de

plusieurs pages en HTML, vous n'avez pas

manqué de constater que la moindre

modification dans l'un des espaces communs à

toutes les pages, vous oblige à modifier de la

même manière chacune de ces pages.

 PHP vous permet de découper vos pages en

éléments indépendants que vous pouvez

inclure les uns dans les autres, ce qui vous

permet d'avoir un seul script pour chaque

élément.

 Cela simplifie les mises à jour de votre site

puisque chaque élément se situe à un seul

emplacement.

Dynamisme du Web

207

PHP : Dynamisme du contenu

scripts PHP

Les inclusions

 Un autre avantage majeur des scripts PHP

(dits dynamiques) sur les fichiers HTML

(dits statiques) est la possibilité d'appeler un

script depuis un autre script. Ce sont des

inclusions de scripts.

 Une application typique de cette fonctionnalité

est pour les éléments identiques de page en

page sur un site :

 parties en tête (header) et i

 Partie pied (footer),

 menu de navigation,

 espace de publicité, etc.

Les Bases de PHP

contact.php

<?php $title = 'Nous contacter'; include

'header.php'; ?> <h1><?php echo $title;

?></h1> <!-- Mettre ici le formulaire de contact

--> <?php include 'footer.php'; ?>

header.php

<?php if(empty($title)) { $title = 'Nouveau

document'; } ?> <html> <head> <title><?php

echo $title; ?></title> </head> <body>

footer.php

</body> </html>

Dynamisme du Web

208

PHP : Dynamisme du contenu

scripts PHP

Les inclusions

Voici un site minimaliste de trois pages avec des

inclusions :

index.php

<?php $title = 'Bienvenue'; include 'header.php'; ?>

<h1><?php echo $title; ?></h1> <!-- Mettre ici

le contenu de la page d'accueil --> <?php

include 'footer.php'; ?>

catalogue.php

<?php $title = 'Notre catalogue'; include 'header.php';

?> <h1><?php echo $title; ?></h1> <!-- Mettre ici

le contenu de la page catalogue --> <?php include

'footer.php'; ?>

Les Bases de PHP

 Il est principalement utilisé pour des

applications Web, c. -à-d. pour exécuter du

code sur un serveur Web.

Dynamisme du Web

209

PHP : Dynamisme du contenu

scripts PHP

 PHP est un langage de script. Il permet de

développer des applications très performantes

et très utiles.

Liste des références sera donnée ultérieurement.

Références

210

Programmation 2D/3D

Préparation OpenGL/WebGl et Plan de Projection

FIN DU CHAPITRE

211

FIN DU CHAPITRE

Programmation 2D/3D

Préparation OpenGL/WebGl et Plan de Projection

OpenGL et GLUT

OpenGL

3. To install GLUT and GLEW, look for the

binary packages on their respective sites.

MacOS X comes with GLUT preinstalled.

Most Linux distributions have GLUT and

GLEW available through their package

system, though for GLUT, you may need

to enable your distribution's optional

"non-free" package repositories, since its

license is not technically open source.

There is an open-source GLUT clone

called OpenGLUT if you're a stickler for

such things.

4. If you're a seasoned C programmer, you

should be able to install these libraries and

get them working in your development

environment without any trouble. But

before we get our hands dirty with any

code, I'm going to go over some big-picture

concepts. In this first chapter, I'm going to

explain the graphics pipeline and the

dataflow of a rendering job. In the next

chapter, we'll write a simple "hello world"

program that draws the contents of an

image file to the screen, showing how the

pipeline is put into practice.

OpenGL

212

Where do I get OpenGL, GLUT, and GLEW?

1. OpenGL comes standard in some form or another on MacOS X,

Windows, and most Linux distributions. If you want to follow these

tutorials, you'll need to ensure your OpenGL implementation supports

at least version 2.0. MacOS X's OpenGL implementation always

supports OpenGL 2.0, at least in software if the graphics card driver

doesn't provide it. On Windows, you're dependent on your graphics

card drivers to provide OpenGL 2 or later. You can use RealTech's free

OpenGL Extensions Viewer to see what OpenGL version your driver

supports. nVidia and AMD's OpenGL drivers support at least OpenGL

2.0 on all of their video cards released in the past four years. Users of

Intel onboard graphics and older graphics cards are less fortunate. For

a fallback, Mesa provides an open-source, cross-platform software

OpenGL 2.1 implementation that works on Windows and almost all

Unix platforms.

2. Mesa is also the most common OpenGL implementation on Linux,

where it also works with the X server to interface OpenGL with

graphics hardware using "direct rendering interface" (DRI) drivers. You

can see whether your particular DRI driver supports OpenGL 2.0 by

running the glxinfo command from an xterm. If OpenGL 2.0 isn't

supported on your hardware, you can disable the driver to fall back to

Mesa's software implementation. nVidia also provides their own

proprietary OpenGL implementation for Linux targeting their own

GPUs; this implementation should provide OpenGL 2.0 or later on any

recent nVidia card.