Réaliser une application web permettant de noter la disponibilité de bénévoles de l'association Du vent dans la tête afin de faciliter l'organisation d'événement au sein de l'association en question.
Fait maison non documenté sur internet.
Type MVC (model, view, controller).
Créer l'arborescence de fichiers.
- Aller dans le répertoire personnel de développement
cd ~/development
- Créer un dossier pour le TP
mkdir blimp
- Ouvrir un explorateur de fichier et créer l'arborescence de fichiers suivante dans le dossier
~/development/blimp
:
o application
o controllers
<vide>
o helpers
<vide>
o models
<vide>
o templates
<vide>
o views
<vide>
o css
<vide>
o framework
o helpers
<vide>
o images
<vide>
o js
<vide>
o library
<vide>
- Importer les images dans le projet
Copier les images du dossier \TousCom\Supports de cours - TD - TP 2015-2016\3iL\I2 FE\Web\images\
dans le dossier ~/development/blimp/images
Il y a 7 images en tout :
blimp-logo.png
blimp-logo-small.png
couronne.png
groupe.png
like.png
sourire.jpg
stylots.jpg
Importer le projet dans Netbeans.
-
Ouvrir Netbeans
-
Créer un projer :
File
>New project
-
Sélectionner le type de projet
PHP
>PHP Application with Existing Sources
et cliquer surNext
-
Définir le projet :
-
Cliquer sur
Browse
, sélectionner le dossier~/development/blimp
puis cliquer surOk
-
Dans Project Name, entrer :
Blimp
-
Cliquer sur
Finish
-
Créer votre premier fichier HTML.
-
Dans l'explorateur de fichiers de Netbeans, déplier l'arborescence de Blimp en cliquant sur les petits
v
-
Cliquer droit sur
Source files
>New
>HTML file...
-
Dans
File name
, entrermaquette_accueil
puis cliquer surFinish
ℹ️ le fichier maquette_accueil.html
s'ouvre tout seul et contient déjà du code, c'est normal.
Observation du HTML généré automatiquement.
-
DOCTYPE
<!DOCTYPE html>
signifie que le document est formaté en HTML.- Pas besoin de la fermer (de mettre une balise fermante
</DOCTYPE>
).
-
Commentaires
<!-- texte -->
est une balise permettant de délimiter des commentaires.- N'est pas interprêtée par le navigateur (comprendre : elle n'est pas visible sur la page web).
- Sert à rajouter des informations au code pour le rendre plus lisible, notamment.
- balise ouvrante :
<!--
- balise fermante :
-->
-
HTML
<html></html>
doit encadrer tout le code HTML de la page.- balise ouvrante :
<html>
- balise fermante :
</html>
-
HEAD
<head></head>
encadre les réglages de la page web.- balise ouvrante :
<head>
- balise fermante :
</head>
-
TITLE
<title></title>
contient le titre de la page web (affiché dans le titre de l'onglet du navigateur).- balise ouvrante :
<title>
- balise fermante :
</title>
-
META
<meta></meta>
porte les "méta données" de la page.- Contient des choses variées.
- La plus importante :
<meta charset="UTF-8">
qui définit l'encodage des caractères de la page (UTF-8
, autorise les caractères spéciaux comme les lettres accentuées notamment). <meta name="viewport" content="width=device-width, initial-scale=1.0">
définit les dimensions de la page lors de l'affichage.- Pas besoin de la fermer.
-
BODY
<body></body>
contient le corps de la page web.- balise ouvrante :
<body>
- balise fermante :
</body>
-
DIV
<div></div>
peut contenir des images, du texte, des liens...- Sert à délimiter les différentes partie de la page web
- balise ouvrante :
<div>
- balise fermante :
</div>
Supprimer le HTML inutile pour le TP.
-
Effacer le commentaire HTML (lignes 2 à 6, comprises)
-
Effacer la balise
META
viewport
en plaçant le curseur sur la ligne et en faisantctrl
+E
Éditer le fichier pour l'utiliser dans Blimp.
- Dans la balise
TITLE
, remplacerTODO supply a title
parBlimp
Ouvrir la page dans le navigateur.
- Ouvrez votre navigateur, cliquer sur
Fichier
>Ouvrir un fichier...
et selectionnez le fichier~/development/blimp/maquette_accueil.html
Créer votre premier fichier CSS.
-
Dans l'explorateur de fichiers de Netbeans, cliquer droit sur le dossier
css
>New
>Cascading Style Sheet...
-
Dans
File name
, entrerblimp
puis cliquer surFinish
ℹ️ le fichier blimp.css
s'ouvre tout seul et contient déjà du code, c'est normal.
Observation du CSS généré automatiquement.
-
Commentaires
/* texte */
est une balise permettant de délimiter des commentaires.- N'est pas interprêtée par le navigateur.
- Sert à rajouter des informations au code pour le rendre plus lisible, notamment.
- balise ouvrante :
/*
- balise fermante :
*/
Supprimer le CSS inutile pour le TP.
- Effacer tous les commentaires : le fichier est maintenant vide.
Éditer le fichier pour l'utiliser dans Blimp.
- Colorer tout l'arrière plan de la balise
BODY
en rouge en copiant le codebody
: à appliquer sur les balises<body>
background-color
: couleur d'arrière-planred
: rouge (il existe quelques raccourcis pour les couleurs :blue
,grey
, ...){ }
: délimite les contraintes à appliquer à la balise
body {
background-color: red;
}
- Appeler le fichier dans la maquette HTML
maquette_accueil.html
en rajoutant dans leHEAD
la baliseLINK
<link ...>
: lien vers un document externe dont la page a besoin pour fonctionnertype="text/css"
: le document est formatté en CSShref="..."
: le chemin d'accès au fichier
<link rel="stylesheet" type="text/css" href="css/blimp.css">
Vérifier que ça a fonctionné.
- Raffraichir la page dans le navigateur en appuyant sur
F5
.
🎉 si votre page est rouge, votre fichier CSS est bien chargé, passer à la suite.
Ouvrir la console de debug.
- Dans votre navigateur, appuyez sur
F12
Explorer la console de debug.
-
Regardez un peu ce qu'il y a dedans (les titres des onglets et leur ordre dépend des navigateurs)
-
Trouver le deux parties les plus importantes et retenir leur emplacement :
- Arborescence du HTML
- Arborescence des règles CSS
Observer le comportement de la console de debug.
- Le panneau des règles CSS ouvert, cliquer sur une balise HTML : les règles CSS appliquées à cette balise sont affichées dans le pannel CSS
Aperçu des erreurs dans la console de debug.
- Une petite démonstration de la manière d'utiliser la console pour débug :
ℹ️ Chaque navigateur a des règles CSS de base lui étant propre (largeur des bords, marges, taille de police...), mais dans Blimp, nous n'en voulons pas.
Effacer le contenu de blimp.css
.
- La vérification du CSS étant ok, il devient inutile de conserver le background rouge.
Insérer un fichier de "reset CSS" qui remet tout à zéro.
- Copier le fichier
reset.css
du dossier\TousCom\Supports de cours - TD - TP 2015-2016\3iL\I2 FE\Web\css\
dans le dossier~/development/blimp/css
ℹ️ il s'agit du reset.css d'Eric Meyer, version 2.0.
- Appeler le fichier dans la maquette HTML
maquette_accueil.html
en rajoutant dans leHEAD
la baliseLINK
<link rel="stylesheet" type="text/css" href="css/reset.css">
LINK
avant la balise pour blimp.css, dans cet ordre c'est blimp.css qui écrasera reset.css et pas l'inverse (voir gif de la console).
ℹ️ il existe également la mise en page fluide (le contenu de la page prend toute la largeur de la fenêtre) et le responsive design (la mise en forme de la page change radicalement en fonction de la largeur en pixel de la fenêtre).
Fabriquer deux blocs dans la maquette.
-
Dans Netbeans, ouvrir
maquette_accueil.html
. -
Dans le
BODY
, enlever laDIV
existante (ctrl
+E
) -
Dans le
BODY
, rajouter deuxDIV
id
: attribut (se place dans la balise ouvrante) identifiant la balise
<div id="bloc1">Bloc 1</div>
<div id="bloc2">Bloc 2</div>
id
.
- Formater le code en faisant
alt
+shift
+F
Styliser les deux blocs.
-
Dans Netbeans, ouvrir
blimp.css
-
Colorer le fond du premier bloc en rouge et du second bloc en vert
#texte
: pour tous les éléments ayant l'id
=texte
, appliquer les règles CSS
#bloc1 {
background-color: red;
}
#bloc2 {
background-color: green;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
reset.css
, les couleurs vertes et rouges sont collées aux bords de la fenêtre, comme dans le screenshot.
Fixer la largeur des blocs.
- Dans Netbeans, ouvrir le fichier
blimps.css
et rajouter aux blocs une largeur fixewitdh
: propriété définissant la largeur d'un élément de typeblock
#bloc1 {
[...]
width: 200px;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
ℹ️ les éléments HTML peuvent être manipulés grâce à plusieurs propriété CSS
Center les blocs.
- Dans Netbeans, ouvrir le fichier
blimps.css
et donner aux blocs des marges automatiquesmargin
: propriété définissant les marges d'un élément de typeblock
margin-left
: marge de gauche de l'élémentmargin-right
: marge de droite de l'élément
#bloc1 {
[...]
margin-left: auto;
margin-right: auto;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
Englober les DIV
des deux blocs dans une nouvelle DIV
.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, au dessus de laDIV
#bloc1
, ajouter une balise ouvranteDIV
[...]
<body>
<div id="main">
<div id="bloc1">Bloc 1</div>
[...]
- En dessous de la
DIV
#bloc2
, ajouter une balise fermanteDIV
[...]
<div id="bloc2">Bloc 2</div>
</div>
</body>
[...]
- Formater le code en faisant
alt
+shift
+F
Colorer le fond de la balise principale en gris.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter le code
#main {
background-color: grey;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
ℹ️ pour permettre à la majeure partie des utilisateur de voir le site sans avoir à défiler horizontalement, il faut adapter le site à une visualisation sur 1024px de large maximum (moins les bordures d'écrans, les scrollbars...). 960px semble être un bon compromis : en dessous de 1024, facilement divisible (multiple de 2, 3, 4, 5, 6, 8, 10, 12 et 16) et il reste de l'espace pour écarter les blocs histoire d'aérer la page.
Consulter le site 960.gs.
- Rendez-vous sur https://960.gs/demo.html pour observer le phénomène.
Supprimer le code inutile.
-
Dans Netbeans, dans le fichier
maquette_accueil.html
, supprimer le contenu de la baliseBODY
(sélectionner les lignes et fairectrl
+E
). -
Dans Netbeans, dans le fichier
blimp.css
, supprimer tout le code.
Créer les quatre parties de la page.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, dans leBODY
, ajouter quatre balises<header></header>
: section d'introduction d'un article, d'une autre section ou du document entier<section></section>
: section générique regroupant un même sujet, une même fonctionnalité<main></main>
: représente le contenu principal duBODY
du document ou de l'application, doit être unique<footer></footer>
: section de conclusion d'une section ou d'un article, voire du document entier- se comportent comme des
DIVS
- apportent du sens pour les algorythmes d'indexation des moteurs de recherche
- rendent le HTML plus lisible
- introduits avec la dernière version d'HTML, le HTML5
- se comportent comme des
<header id="page-header"></header>
<section id="login-box"></section>
<main></main>
<footer id="page-footer"></footer>
Rajouter les conteneurs pour chaque partie de la page.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, dans chacune des quatre balises ajoutée précédemment, ajouter uneDIV
class="truc"
: attribut définissant un élément en tant quetruc
, plusieurs éléments peuvent porter la mêmeCLASS
(à l'inverse desID
)
<div class="container"></div>
- Dans chaque
DIV
container
, rajouter quelques mots (exemple : pour la premièreDIV
, mettrepage-header
).
<div class="container">page-header</div>
Colorer chaque section.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter les règles permettant de colorer chacune des quatre parties de la page#nnnnnn
: identifiant hexadécimal d'une couleur, voir http://paletton.com notamment,n
est toujours compris entre0
etf
#page-header {
background-color: #BBDFD9;
}
#login-box {
background-color: #F8EDD8;
}
main {
background-color: white;
}
#page-footer {
background-color: #4F7B7E;
}
Réduire les containers pour atteindre les 96opx et les centrer.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter les règles permettant de définir une largeur de 960px auxDIV
container
.truc
: cible tous les éléments portant laCLASS
truc
.container {
width: 960px;
margin-left: auto;
margin-right: auto;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
Supprimer le code inutile.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, supprimer le mot dans lecontainer
duHEADER
.
Ajouter l'image.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, dans lecontainer
duHEADER
, rajouter une image<img>
: insère une imagesrc="chemin/image.png"
: chemin vers l'imagealt="texte"
: texte qui remplacera l'image si elle ne parvient pas à charger et qui est lu par les lecteurs d'écrans des aveugles et mal voyants
<header id="page-header">
<div class="container">
<img src="images/blimp-logo.png" alt="Blimp logo">
</div>
</header>
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
Supprimer le code inutile.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, supprimer le mot dans lecontainer
de laSECTION
.
Ajouter le formulaire.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, dans lecontainer
de laSECTION
, rajouter le formulaire HTML<form></form>
: délimite un formulaire, contenant des zones de saisie<input>
: zone de saisietype="text"
: la zone de saisie permet de contenir un peu de textetype="password"
: la zone de saisie permet de contenir un mot de passeplaceholder="texte"
: texte d'aide à la saisie affiché dans la zone de saisie (il disparaît quand l'utilisateur commence à écrire)name="texte"
: nom sous lequel on pourra récupérer les données qui étaient écrites dans la zone de saisie
<button></button>
: boutontype="submit"
: au clic, le bouton enverra le formulaire et tout ce qui est dedans
<section id="login-box">
<div class="container">
<form>
<input id="login" name="login" type="text" placeholder="Login">
<input id="motdepasse" name="motdepasse" type="password" placeholder="Mot de passe">
<button type="submit">Connexion</button>
</form>
</div>
</section>
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
ℹ️ les INPUT
sont de type inline-block
, ils agissent comme du texte, il est donc possible de les aligner comme on aligne du texte dans une DIV
.
Centrer le contenu de la DIV
conteneur
de la SECTION
.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter une règle CSS pour cibler laDIV
conteneur
de laSECTION
et centrer son contenuselecteur_1 > selecteur_2
: cible tous les élémentsselecteur_2
directement enfants deselecteur_1
(enfant : qui est à l'intérieur de parent)
#login-box > .container {
text-align: center;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
Aérer le contenu de la DIV
conteneur
de la SECTION
.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter une règle CSS pour cibler laSECTION
#login-box
et ajouter une marge intérieurepadding: 30px
: définit une marge intérieure à l'élément
#login-box {
[...]
padding-top: 30px;
padding-bottom: 30px;
}
Écarter les zones de saisie et le bouton de validation les uns des autres.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter une règle CSS pour cibler le secondINPUT
et ajouter une marge extérieureselecteur_1 selecteur_2
: cible tous les élémentsselecteur_2
enfants (directs ou indirects) d'un élémentselecteur_1
(enfant : qui est à l'intérieur de parent)selecteur_1 + selecteur_2
: cible tous les élémentsselecteur_2
frères d'un un élémentselecteur_1
(frère : qui sont dans le même élément tous les deux)margin: 20px
: définit une marge extérieure à l'élément
#login-box input + input {
margin-left: 20px;
margin-right: 20px;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter une règle CSS pour cibler lesINPUT
et les personnaliserborder
: bord de l'élémentcolor
: couleur du texte de l'élément30%
: largeur de l'élément définie dynamiquement en fonction de la largeur de l'élément parent
#login-box input {
border: none;
padding: 10px;
background-color: #F4FAFB;
color: #AF7B8E;
width: 30%;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter une règle CSS pour cibler leBUTTON
et le personnaliserfont-weight
: épaisseur de la police de caractère
#login-box button {
border: none;
padding: 10px;
background-color: #D2E9E6;
color: #4F7B7E;
font-weight: bold;
}
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
Supprimer le code inutile.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, supprimer laDIV
container
deMAIN
.
Ajouter les deux images.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, dans leMAIN
, rajouter uneSECTION
contenant les images<span></span>
: contient du texte- sert à délimiter une partie de texte particulière
- n'est pas un
BLOCK
donc ne prend pas toute la largeur de la page - est de type
INLINE
, sa largeur et la hauteur dépendent de son contenu - balise ouvrante :
<span>
- balise fermante :
</span>
<section id="images">
<div>
<div>
<img src="images/stylots.jpg" alt="coordination"/>
<div>
<div>
<span>coor</span><span>dina</span><span>tion</span>
</div>
<div>
Blimp et l'outil ultime de coordination pour un groupe de personnes.
</div>
</div>
</div>
<div>
<img src="images/sourire.jpg" alt="simplification"/>
<div>
<div>
<span>simp</span><span>lific</span><span>ation</span>
</div>
<div>
Blimp et l'outil ultime de coordination pour un groupe de personnes.
</div>
</div>
</div>
</div>
</section>
Centrer les deux images.
- Dans Netbeans, dans le fichier
maquette_accueil.html
, dans laSECTION
#images
, éditer la premièreDIV
en lui rajoutant.container
<section id="images">
<div class="container">
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.
Préparer les deux DIV
pour qu'elles puissent se plcer l'une à côté de l'autre.
- Dans Netbeans, dans le fichier
blimp.css
, ajouter une règle CSS pour cibler les deuxDIV
contenant chacune une image et les alignerdisplay: inline-block
: change la manière de gérer laDIV
: au lieu d'être unBLOCK
, elle sera unINLINE-BLOCK
inline-block
: les élémentsINLINE-BLOCK
s'alignent les un après les autres (alors que lesBLOCK
se placent toujours les uns en dessous des autres)
#image > .container > div {
display:inline-block;
width:460px;
margin-right:10px;
margin-left:10px;
}
- Dans Netbeans, dans le fichier
maquette_accueil.html
, dans laSECTION
#images
, effacer tous les espaces et le saut de ligne entre lesDIV
contenant les imagesinline block
considère les espaces comme devant être affichés, donc il faut elever ceux utilisés pour l'indentation
<section id="images">
<div class="container">
<div>
<img src="images/stylots.jpg" alt="coordination"/>
[...]
</div><div>
<img src="images/sourire.jpg" alt="simplification"/>
[...]
</div>
</div>
</section>
Vérifier que ça fonctionne.
- Dans votre navigateur, raffraichissez la page avec
F5
.