LucileDT/web-varren-tp.md

## web-varren-tp.md

      
    Raw
  

              web-varren-tp.md
            
          
    Sujet de TP Web

But

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.
Framework

Fait maison non documenté sur internet.
Type MVC (model, view, controller).
TP

Création du projet

Étape 1

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

Étape 2

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 sur Next


Définir le projet :


Cliquer sur Browse, sélectionner le dossier ~/development/blimp puis cliquer sur Ok


Dans Project Name, entrer : Blimp


Cliquer sur Finish


Introduction HTML

Étape 1

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, entrer maquette_accueil puis cliquer sur Finish


ℹ️ le fichier maquette_accueil.html s'ouvre tout seul et contient déjà du code, c'est normal.
Étape 2

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>


Étape 3

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 faisant ctrl + E


Étape 4

Éditer le fichier pour l'utiliser dans Blimp.

Dans la balise TITLE, remplacer TODO supply a title par Blimp

Étape 5

Ouvrir la page dans le navigateur.

Ouvrez votre navigateur, cliquer sur Fichier > Ouvrir un fichier... et selectionnez le fichier ~/development/blimp/maquette_accueil.html


Introduction CSS

Étape 1

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, entrer blimp puis cliquer sur Finish


ℹ️ le fichier blimp.css s'ouvre tout seul et contient déjà du code, c'est normal.
Étape 2

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 : */


Étape 3

Supprimer le CSS inutile pour le TP.

Effacer tous les commentaires : le fichier est maintenant vide.

Étape 4

Éditer le fichier pour l'utiliser dans Blimp.

Colorer tout l'arrière plan de la balise BODY en rouge en copiant le code

body : à appliquer sur les balises <body>
background-color : couleur d'arrière-plan
red : 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 le HEAD la balise LINK

<link ...> : lien vers un document externe dont la page a besoin pour fonctionner
type="text/css" : le document est formatté en CSS
href="..." : le chemin d'accès au fichier


    <link rel="stylesheet" type="text/css" href="css/blimp.css">
Étape 5

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.
Introduction à la console de debug du navigateur

Étape 1

Ouvrir la console de debug.

Dans votre navigateur, appuyez sur F12


Étape 2

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


Étape 3

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


Étape 4

Aperçu des erreurs dans la console de debug.

Une petite démonstration de la manière d'utiliser la console pour débug :


Reset CSS

ℹ️ 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.
Étape 1

Effacer le contenu de blimp.css.

La vérification du CSS étant ok, il devient inutile de conserver le background rouge.

Étape 2

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 le HEAD la balise LINK

    <link rel="stylesheet" type="text/css" href="css/reset.css">
⚠️ mettre cette balise 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).
Introduction mise en page centrée

ℹ️ 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).
Étape 1

Fabriquer deux blocs dans la maquette.


Dans Netbeans, ouvrir maquette_accueil.html.


Dans le BODY, enlever la DIV existante (ctrl + E)


Dans le BODY, rajouter deux DIV

id : attribut (se place dans la balise ouvrante) identifiant la balise


<div id="bloc1">Bloc 1</div>
<div id="bloc2">Bloc 2</div>
⚠️ sur une même page, il ne faut pas avoir deux éléments ayant le même id.

Formater le code en faisant alt + shift + F

Étape 2

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;
}
Étape 3

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


⚠️ si votre page charge correctement le fichier reset.css, les couleurs vertes et rouges sont collées aux bords de la fenêtre, comme dans le screenshot.
Étape 4

Fixer la largeur des blocs.

Dans Netbeans, ouvrir le fichier blimps.css et rajouter aux blocs une largeur fixe

witdh : propriété définissant la largeur d'un élément de type block


#bloc1 {
    [...]
    width: 200px;
}
Étape 5

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

Étape 6

Center les blocs.

Dans Netbeans, ouvrir le fichier blimps.css et donner aux blocs des marges automatiques

margin : propriété définissant les marges d'un élément de type block
margin-left : marge de gauche de l'élément
margin-right : marge de droite de l'élément


#bloc1 {
    [...]
    margin-left: auto;
    margin-right: auto;
}
Étape 7

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Introduction à l'imbrication des éléments

Étape 1

Englober les DIV des deux blocs dans une nouvelle DIV.

Dans Netbeans, dans le fichier maquette_accueil.html, au dessus de la DIV #bloc1, ajouter une balise ouvrante DIV

[...]
<body>
    <div id="main">
    <div id="bloc1">Bloc 1</div>
[...]

En dessous de la DIV #bloc2, ajouter une balise fermante DIV

[...]
    <div id="bloc2">Bloc 2</div>
    </div>
</body>
[...]

Formater le code en faisant alt + shift + F

Étape 2

Colorer le fond de la balise principale en gris.

Dans Netbeans, dans le fichier blimp.css, ajouter le code

#main {
    background-color: grey;
}
Étape 7

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Précision par rapport à la résolution d'écrans

ℹ️ 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.
Étape 1

Consulter le site 960.gs.

Rendez-vous sur https://960.gs/demo.html pour observer le phénomène.

Mise en place du squelette de la page

Étape 1

Supprimer le code inutile.


Dans Netbeans, dans le fichier maquette_accueil.html, supprimer le contenu de la balise BODY (sélectionner les lignes et faire ctrl + E).


Dans Netbeans, dans le fichier blimp.css, supprimer tout le code.


Étape 2

Créer les quatre parties de la page.

Dans Netbeans, dans le fichier maquette_accueil.html, dans le BODY, 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 du BODY 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


<header id="page-header"></header>
<section id="login-box"></section>
<main></main>
<footer id="page-footer"></footer>
Étape 3

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 une DIV

class="truc" : attribut définissant un élément en tant que truc, plusieurs éléments peuvent porter la même CLASS (à l'inverse des ID)


<div class="container"></div>

Dans chaque DIV container, rajouter quelques mots (exemple : pour la première DIV, mettre page-header).

<div class="container">page-header</div>
Étape 4

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 entre 0 et f


#page-header {
    background-color: #BBDFD9;
}

#login-box {
    background-color: #F8EDD8;
}

main {
    background-color: white;
}

#page-footer {
    background-color: #4F7B7E;
}
Étape 5

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 aux DIV container

.truc : cible tous les éléments portant la CLASS truc


.container {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
Étape 6

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Ajout de l'image dans le header

Étape 1

Supprimer le code inutile.

Dans Netbeans, dans le fichier maquette_accueil.html, supprimer le mot dans le container du HEADER.

Étape 2

Ajouter l'image.

Dans Netbeans, dans le fichier maquette_accueil.html, dans le container du HEADER, rajouter une image

<img> : insère une image
src="chemin/image.png" : chemin vers l'image
alt="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>
Étape 3

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Formulaire de login

Étape 1

Supprimer le code inutile.

Dans Netbeans, dans le fichier maquette_accueil.html, supprimer le mot dans le container de la SECTION.

Étape 2

Ajouter le formulaire.

Dans Netbeans, dans le fichier maquette_accueil.html, dans le container de la SECTION, rajouter le formulaire HTML

<form></form> : délimite un formulaire, contenant des zones de saisie
<input> : zone de saisie

type="text" : la zone de saisie permet de contenir un peu de texte
type="password" : la zone de saisie permet de contenir un mot de passe
placeholder="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> : bouton

type="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>
Étape 3

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Centrer le formulaire de connexion

ℹ️ 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.
Étape 1

Centrer le contenu de la DIV conteneur de la SECTION.

Dans Netbeans, dans le fichier blimp.css, ajouter une règle CSS pour cibler la DIV conteneur de la SECTION et centrer son contenu

selecteur_1 > selecteur_2 : cible tous les éléments selecteur_2 directement enfants de selecteur_1 (enfant : qui est à l'intérieur de parent)


#login-box > .container {
    text-align: center;
}
Étape 2

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Aérer le formulaire de connexion

Étape 1

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 la SECTION #login-box et ajouter une marge intérieure

padding: 30px : définit une marge intérieure à l'élément


#login-box {
    [...]
    padding-top: 30px;
    padding-bottom: 30px;
}
Étape 2

É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 second INPUT et ajouter une marge extérieure

selecteur_1 selecteur_2 : cible tous les éléments selecteur_2 enfants (directs ou indirects) d'un élément selecteur_1 (enfant : qui est à l'intérieur de parent)
selecteur_1 + selecteur_2 : cible tous les éléments selecteur_2 frères d'un un élément selecteur_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;
}
Étape 3

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Personnaliser les INPUT du formulaire de connexion

Étape 1


Dans Netbeans, dans le fichier blimp.css, ajouter une règle CSS pour cibler les INPUT et les personnaliser

border : bord de l'élément
color : couleur du texte de l'élément
30% : 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%;
}
Étape 2

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Personnaliser le BUTTON du formulaire de connexion

Étape 1


Dans Netbeans, dans le fichier blimp.css, ajouter une règle CSS pour cibler le BUTTON et le personnaliser

font-weight : épaisseur de la police de caractère


#login-box button {
    border: none;
    padding: 10px;
    background-color: #D2E9E6;
    color: #4F7B7E;
    font-weight: bold;
}
Étape 2

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Rajouter les IMG dans la partie principale

Étape 1

Supprimer le code inutile.

Dans Netbeans, dans le fichier maquette_accueil.html, supprimer la DIV container de MAIN.

Étape 2

Ajouter les deux images.

Dans Netbeans, dans le fichier maquette_accueil.html, dans le MAIN, rajouter une SECTION 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>
Étape 2

Centrer les deux images.

Dans Netbeans, dans le fichier maquette_accueil.html, dans la SECTION #images, éditer la première DIV en lui rajoutant .container

<section id="images">
    <div class="container">
Étape 3

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.


Aligner horizontalemet les IMG dans la partie principale

Étape 1

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 deux DIV contenant chacune une image et les aligner

display: inline-block : change la manière de gérer la DIV : au lieu d'être un BLOCK, elle sera un INLINE-BLOCK
inline-block :  les éléments INLINE-BLOCK s'alignent les un après les autres (alors que les BLOCK 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 la SECTION #images, effacer tous les espaces et le saut de ligne entre les DIV contenant les images

inline 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>
Étape 3

Vérifier que ça fonctionne.

Dans votre navigateur, raffraichissez la page avec F5.