Commit 00e31bf9 authored by Stéphane Bouvry's avatar Stéphane Bouvry
Browse files

Contenu Base HTML

parent 685b91c9
Pipeline #2257 failed with stages
in 56 seconds
# Note de développement
## Intégration web
- [Présentation des technologies du web](integration-web/presentation-html5.html)
- [Première page web](integration-web/premiere-page-web.html)
- [Modèle de boîte](integration-web/modele-de-boite.html)
- [Mise en page avec les **Flexbox**](integration-web/css3-flexbox.html)
## UI
## Développement PHP
# Comprendre les FLEXBOX
Les **flexbox** sont un dispositif de mise en page introduit avec le *CSS3* pour faciliter l'organisation des contenus. Ils remplacent avantageusement les mécanismes basés sur `float` utilisés en **CSS2**.
## préambule
Voice le code de base que nous allons faire évoluer tout au long de l'article :
```html
<!-- Code CSS -->
<div class="conteneur">
<div class="element orange">A</div>
<div class="element jaune">B</div>
<div class="element cyan">C</div>
<div class="element rouge">D</div>
<div class="element vert">E</div>
</div>
```
```css
/**** MISE en PAGE ****/
.conteneur {
/* Y'aura du code ici... */
}
.element {
/* ... et là */
}
/**** MISE en FORME ****/
/* Cette partie sert uniquement à gérer l'apparence afin
de rendre le résultat plus 'visuel' */
.conteneur {
background: purple;
padding: 1em;
}
.elem {
font-size: 2em;
}
.orange { background: orange; }
.jaune { background: yellow; }
.cyan { background: cyan; }
.rouge { background: red; }
.vert { background: green; }
```
Ce qui donne :
![Rendu de base](../../images/css3-flexbox-rendu-001.png)
## Les bases
### flex et inline-flex
Le modèle de boîte doit s'activer **sur l'élément conteneur** (celui qui contient les éléments à mettre en page), en renseignant la valeur `display` avec les valeurs `flex` ou `inline-flex` .
```css
/**** MISE en PAGE ****/
.conteneur {
display: flex;
}
```
![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-002.png)
La valeur `inline-flex` ajoute un compotement **inline** au conteneur :
```css
/**** MISE en PAGE ****/
.conteneur {
display: inline-flex;
}
```
![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-003.png)
L'activation des *flexbox* se déclenche en utilisant les valeurs :
* `flex` : le conteneur se comporte comme un **block**
* `inline-flex` : le conteneur se comporte comme un élément **inline**
### Gérer la direction avec `flex-direction`
La propriété `flex-direction` permet de fixer le comportement général des éléments dans le conteneur. par défaut, les éléments s'affichent en ligne (valeur `row`).
```css
/**** MISE en PAGE ****/
.conteneur {
display: inline-flex;
flex-direction: row;
}
```
Les valeurs disponibles sont :
* `row` *(par défaut)* Le conteneur se comporte comme une ligne d'éléments alignés à gauche dans le sens de la lecture,
* `row-reverse` Les éléments sont alignés à droite et sont inversés
* `column` Le conteneur se comporte comme une colonne, les éléments sont affichés de haut en bas
* `column-reverse` Idem, mais les éléments sont inversés
A noter que la valeur `column-reverse` justify les éléments en bas du conteneur. Vous pouvez le vérifier en appliquant arbitrairement une hauteur à ce dernier : `height: 250px`
```css
/**** MISE en PAGE ****/
.conteneur {
display: flex;
flex-direction: column-reverse;
height: 250px;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-004.png)
### Réorganiser les éléments avec `order`
La propriété `order` permet de modifier l'ordre d'affichage d'un élément spécifique. Par défaut, cette valeur est fixée à 0, mais elle peut être modifié sur chaque éléments pour réorganiser l'enchainement des éléments dans le conteneur.
```css
.conteneur {
display: flex;
}
.rouge {
order: -1;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-005.png)
Vous pouvez ainsi complètement modifier la disposition des éléments dans le conteneur.
### Emballage des éléments avec `flex-wrap`
Dans notre exemple, les éléments ont assez de place pour tenir dans le conteneur car ils comportent peu de contenu. Mais il faut garder à l'esprit que la règle **le contenu l'emporte** s'applique également aux flexbox :
Ajouter un peu de contenu dans les éléments HTML :
```html
<div class="conteneur">
<div class="element orange">ORANGE</div>
<div class="element jaune">JAUNE</div>
<div class="element cyan">CYAN</div>
<div class="element rouge">ROUGE</div>
<div class="element vert">VERT</div>
</div>
```
Puis réduisez la largeur de la fenêtre en largeur, vous verrez le contenu disparaître vers la droite :
![Sans flex-wrap, le contenu dépasse sur la droite](../../images/css3-flexbox-rendu-006.png)
La propriétés `flex-wrap` (*nowrap*, `wrap`, `wrap-reverse`) va forcer la *flexbox* à adapter l'embalage.
La valeur `wrap` va autoriser la flexbox à ajouter des lignes (ou des colonnes) pour garantir l'affichage du contenu :
```css
.conteneur {
display: flex;
flex-wrap: wrap;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-007.png)
La valeur wrap-reverse inverse la disposition des lignes.
A noter que `flex-wrap` ne semble pas donner de résultat si `flex-direction` est réglé sur `column`. Mais il a bien un effet, pour l'observer, ajouter une hauteur au conteneur :
```css
.conteneur {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 7em;
}
```
## Gérer la taille des éléments
La taille des éléments d'un flexbox s'ajuste avec 3 propriétés :
* `flex-grow` : Agrandissement
* `flex-shrink` : Contraction
* `flex-basis` : Taille optimale
* `flex` : Forme compacte de ces 3 propriétés
### Élargir les éléments avec `flex-grow`
La propriété `flex-grow` permet, au sein d'un item, de définir la façon dont la taille de l'élément peut être élargi. Par défaut, `flex-grow` est fixé à 0, donc les éléments ne s'élargissent, leurs taille maximum correspond à leur taille initiale.
En mettant la valeur 1 à tout les éléments, la *flexbox* va recalculer la largeur des éléments en équilibrant leur occupation (tous à la même taille) pour occuper toute la largeur disponible dans le conteneur :
```css
.conteneur {
display: flex;
}
.element {
flex-grow: 1;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-008.png)
En jouant sur la largeur de la fenêtre, vous verrez la largeur des éléments s'adapter en fonction de l'espace disponible. Vous pouvez constater que la largeur est identique pour chaques éléments, peut importe son contenu.
Vous pouvez ensuite jouer avec la valeur de `flex-grow` (qui doit être un entier strictement positif) pour répartir la distribution de l'espace disponible différement en fonction de l'élément :
```css
.conteneur {
display: flex;
}
.element {
flex-grow: 1;
}
.orange {
/* orange sera 3 fois plus grand que les autres */
flex-grow: 3;
}
.vert {
/* Vert n'est pas autorisé à grandir */
flex-grow: 0;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-009.png)
Pour observer le résultat avec un direction en colonne avec `flex-direction:column`, pensez à ajouter une hauteur au conteneur :
```css
.conteneur {
display: flex;
flex-direction: column;
height: 350px;
}
.element {
flex-grow: 1;
}
.orange {
flex-grow: 3;
}
.vert {
flex-grow: 0;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-010.png)
### Taille initale avec flex-basis
Par défaut, la taille des éléments est établie en fonction du contenu. la propriété `flex-basis` permet de définir la taille initiale d'un élément avant que l'espace disponible soit redistribué entre les éléments.
Par exemple, nous pouvons indiquer comme largeur optimale 200px, et interdire le bloc orange de grandir en fixant `flex-grow` à 0 :
```css
.conteneur {
display: flex;
}
.element {
flex-grow: 1;
}
.orange {
flex-grow: 0;
/* Taille initiale de 200 */
flex-basis: 200px;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-011.png)
En jouant sur la largeur de la fenêtre, vous constaterez que la zone orange peut rétrécir, mais ne dépasse pas les 200 pixels en largeur lorsque l'on élargi la fenêtre.
### Contraction avec `flex-shrink`
La propriétés `flex-shrink`permet quand à elle de configurer le rétrécissement des éléments (C'est la même mécanique de `flex-grow`, mais ).
```css
.conteneur {
display: flex;
}
.element {
flex-grow: 1;
}
/* Orange ne peut pas rétécir ou s'agrandir.
Sa taille est de 200px */
.orange {
flex-shrink: 0;
flex-grow: 0;
flex-basis: 200px;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-012.png)
### Forme compacte avec `flex`
TODO
## Alignement et positionnement des éléments
### Justification et alignement
#### `Alignement dans l'axe principal : justify-content`
La propriété `justify-content` permet de définir la façon ton les éléments vont s'aligner le long de l'axe principal (Axe horizontal).
Petit récap des valeurs possibles :
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-013.png)
##### flex-start
Les éléments sont alignés au début de la *flexbox* ; à gauche ou en haut selon la valeur de `flex-direction`. C'est le réglage par défaut.
```css
.conteneur {
display: flex;
justify-content: flex-start;
}
```
##### flex-end
Les éléments sont alignés à la fin de la *flexbox* ; à droite ou en bas selon la valeur de `flex-direction`
```css
.conteneur {
display: flex;
justify-content: flex-end;
}
```
##### center
Les éléments sont alignés à la fin de la *flexbox* ; à droite ou en bas selon la valeur de `flex-direction`
```css
.conteneur {
display: flex;
justify-content: center;
}
```
\ No newline at end of file
# CSS : Le modèle de boîte
Une des clefs pour maîtriser la mise en page avec CSS, c'est de bien comprendre le **modèle de boîte**.
##
# Débuter en HTML (Votre première page web)
## Page web, document HTML
Le code HTML s'écrit dans des **fichiers HTML** ; Les fichiers HTML sont de simples fichiers texte.
N'importe quel éditeur de texte suffit pour éditer du HTML.
Par convention, on utilise l'extention `*.html` (ou `*.htm` pour les puristes).
Pour tester le résultat, il suffit de l'ouvrir dans un navigateur.
## Editeur
Pour faire du HTML, il faut un éditeur de texte, pour débuter voici quelques éditeurs très performants :
- **Sublim Text** (Presque payant) Un des plus populaire chez les développeurs web
- **Notepad++** Très utilisé sous Windows
- **Bracket** Très pratique pour débuter (coloration du code, aperçu en directe) http://brackets.io/
- **Atom** Un éditeur léger et efficace https://atom.io/
## Premier contenu
Créez un fichier `index.html` dans l'éditeur avec ce contenu :
```
Bonjour Monde !
```
Utilisez le menu Fichier/ouvrir du navigateur pour afficher le fichier :
![Résulat](../../images/html-bonjour-monde.png)
<div class="info">Même rudimentaire, nous avons une page web</div>
## HTML
Le **code source** HTML permet de structurer les informations avec des **balises**.
Les balises sont **toujours entourées de chevrons**
Dans 99% des cas, un nom de balise est écrit en minuscule et ne contient pas de caractères accentués, ni espaces.
![Résulat](../../images/balise.svg)
## Types de balises
On distingues différentes formes de balises :
- Les balises ouvrantes, ex: `<h1>`, `<p>`,
- Les balises fermantes, ex: `</h1>`, `</p>`,
- Les balises orphelines (ou auto-fermantes)ex: `<br />`,
## Balises ouvrantes et fermantes
Les balises **ouvrantes** et **fermantes** permettent de délimiter du contenu. C'est le cas le plus répandu :
```html
<h1>Ce contenu sera un titre</h1>
<p>
Ce contenu sera un paragraphe,
avec
<strong>
ce texte en gras
</strong>
</p>
```
![Résultat](../../images/balises-ouvrantes-fermantes.svg)
## Balises auto-fermantes
Certaines balises ne délimitent aucune information, elles sont utilisées pour indiquer la présence d'un contenu spécifique (présence d'une image par exemple).
Plutôt que de les ouvrir et de le refermer, sans qu'elles ne délimitent aucun contenu ex :`<balise></balise>`, on utilise une syntaxe raccourci : `<balise />`
```html
<!-- Liseré horizontal -->
<hr />
Texte avec un retour chariot<br />
Ce texte est à la ligne
```
![Balises autofermantes](../../images/balise-auto-fermante.svg)
## Récapitulatif
![Récapitulatif](../../images/balise-recap.svg)
## Imbrication
Nous venons de voir que les balises sont utilisées pour **délimiter du contenu**, dans les exemples précédents, le contenu été uniquement du contenu texte, mais généralement, le contenu est souvent un aggrégat de texte contenant lui-même des balises, pouvant à son tour contenir des balises. (à la manière de poupées russes). Ce formalisme est appelé **l'imbrication**.
```html
<body>
<h1>Bonjour monde !</h1>
<p>
Ceci est ma première page<br/>
elle contient du
<strong>HTML</strong> !
</p>
</body>
```
L'imbrication respecte la règle : **Première ouverte, dernière fermée**. Less balises qui *se croisent* ou qui ne sont pas refermée peuvent provoquer des erreurs d'interprétation.
## Arbre DOM
De part sa nature, l'imbrication peut être représenté sous la forme d'un arbre, on parle de l'arbre DOM (Document Object Model).
![L'arbre DOM](../../images/html-imbrication.png)
## Commentaires
Un code source HTML peut devenir rapidement dense et atteindre plusieurs centaines de ligne(on écrit beaucoup de code).
Les **commentaires** sont très utilisés pour permettre aux intégrateurs d'annoter le code source sans que ce commentaire apparaisse dans le rendu final.
Un commentaire débute par la séquence `<!--` et se termine avec `-->`
```html
<body>
<!-- Titre de la page -->
<header>
<h1>Bonjour monde !</h1>
</header>
<!-- Menu principale -->
<nav>
<a href="#">Accueil</a>
<a href="gallery.html">Galerie</a>
</nav>
<!-- Contenu -->
<p>Contenu de la page</p>
<!-- Pied de page -->
<footer>
Credit © Unicaen.fr
</footer>
</body>
```
L'utilisation des commentaires est également pratique pour désactiver certaines parties du code.
```html
<body>
<!-- Titre de la page -->
<header>
<h1>Bonjour monde !</h1>
</header>
<!-- Menu principale (désactivé) -->
<!--
<nav>
<a href="#">Accueil</a>
<a href="gallery.html">Galerie</a>
</nav>
-->
<!-- Contenu -->
<p>Contenu de la page</p>
<!-- Pied de page -->
<footer>
Credit © Unicaen.fr
</footer>
</body>
```
## Validation
Vous pouvez tester la validité d'un code HTML en utilisant le [Validateur W3C](http://validator.w3.org/)
![Validateur W3C](../../images/validator.jpg)
# Technologies du web
La création de contenu pour le web est l'aggrégat d'un **ensemble de technologies** que l'usage profane regroupe généralement sous le terme **technologies HTML/Web**.
## HTML
Le HTML est une technologie utilisée pour :
- Créer des documents web (pages HTML)
- Structurer les interfaces web (Webapp)
Le HTML est un langage :
- Description de contenu par **balise**
- Conçu pour être facile à utiliser/partager
- **Sémantique** (Il sert à structurer une informations - pas à la mise en forme)
<div class="info">
HTML n'est généralement pas considéré comme un **langage de programmation**. Il est en effet purement descriptif et ne propose aucun mécanisme logique.
</div>
## Petite histoire
### 1990
**Tim Berners** pose les bases du web :
- Premier navigateur,
- le protocole HTTP (pour l'accès aux document HTML),
- et le langage HTML
Le terme de **World Wide Web** est déjà consacré.
![Tim Berners Lee](../../images/berners.jpg)
### 1993
Le **Web** s'étend à la communauté scientifique et se popularise grâce à **NCSA Mosaic**, un navigateur capable d'afficher... des images.
![Le navigateur NCSA Mosaic](../../images/ncsa-mosaic.jpg)
### 1994-1996
**Netscape navigator** popularise le web hors des universités en permettant de réaliser les premiers sites *visuels*.
- Fondation du **W3C** (World Wide Web Consortium)
- Apparition d'**Internet Explorer**
- 1995/96 : Spécification de HTML 2.0 est publiée.
Cette période voit également s'affronter les éditeurs de navigateur Netscape et Explorer dans ce qu'on appelle **Le guerre des navigateurs**. Ces derniers n'hesitant pas à prendre de grandes liberté quand au rendu et aux fonctionnalités HTML/CSS
![Le navigateur NCSA Mosaic](../../images/disquette-netscape-navigator.jpg)
### 1997/2000 : Normalisation
**HTML 3.2** Syntètise les améliorations apportées par netscape et Internet explorer, en vu de normaliser les usages des 2 navigateurs.
**HTML 4** sort dans la foulée. Arrivée en force des **style CSS** et des scripts (Javascript). Le W3C arrive à imposer ce standard
La production de contenu Web se professionnalise
![W3C](../../images/w3c.png)
### 2000/2008 : Web 2.0
Le **XHTML** s'impose dans l'usage professionnel, il est la version **strict** de HTML 4. Il scèle une bonne fois pour toute la sacro-sainte séparation du contenu (XHTML) et de la forme (CSS).
La production de site web se professionnalise, les métiers d'**intégrateur web** / **Webdesigner** sont reconnus comme des disciplines hautement technique et plus seulement comme des activités complémentaires à des domaines plus générale (Designers / Informaticiens).
### Maintenant
**XHTML 2**, une nouvelle norme développée depuis plusieurs années a été définitivement abandonné ; rejetée par la communauté avant même d'être publié.
Le **HTML5** et le **CSS3**, encore en brouillon, sont déjà largement adoptés par les principaux navigateurs (Firefox, Chrome, Edge). Imposant définitivement l'aire du **Web Sémantique**.
![Web sémantique](../../images/semantic.svg)