====== Devweb 102 : Le responsive & Bootstrap ======
Cette seconde formation permet d'avoir une vue plus actuelle du développement web en présentant les outils du développeur d'aujourd'hui.
** Compétences abordées : ** HTML, CSS, Responsive, Media Queries, Inspecteur d’éléments, Bootstrap
===== Prérequis =====
Avoir suivi la formation [[formations:devweb_1]]. Pour accéder aux fichiers depuis son ordi personnel on utilise FileZilla. Son utilisation est décrite ici : [[tutoriels:ssh#transfert_de_fichiers|Transfert de fichiers]].
===== L'Inspecteur d'Éléments =====
L’inspecteur d’éléments fait partie des outils indispensables aux développeurs pour leurs tests de rendu.
En fonction des navigateurs, il a des noms différents :
* **Firefox :** examiner l’élément
* **Google Chrome :** inspecter
* **Safari :** inspecter l’élément
On y accède via clic droit sur le corps de la page qui nous intéresse.
On illustrera l’utilisation de cet outil sur Google Chrome.
==== Interface ====
{{ :formations:inspecteur.png?400 |}}
On voit ici l'interface de l'inspecteur sur Google Chrome. Les sections encadrées en rouge sont celles dont nous nous servons en général.
===Le panneau HTML et le panneau CSS===
{{ :formations:htlmcss-01.png?400 |}}
Grâce au panneau HTML, il est possible d'examiner et d'éditer le code HTML d'une page en direct.
Voici un exemple très simple avec MyCentraleAssos :
{{ :formations:htmledit1.png?800 |}}
{{ :formations:htmledit2.png?800 |}}
On voit ici que le titre, une fois changé dans le code, est modifié sur la vue.
Survoler une ligne dans le panneau HTML le mettra en surbrillance dans la page.
Lorsqu'une ligne du code HTML est sélectionnée, le panneau CSS affiche tous les styles qui s'appliquent à l'élément sélectionné. Il est ainsi possible, ici encore, de modifier les propriétés qui s'appliquent pour chaque élément.
{{ :formations:editcss1-01.png?800 |}}
Ici on a modifié la taille du texte.
Cependant, il arrive que certaines propriétés notées dans "Style" soient pas actives (par exemple la couleur est barrée ci-dessous). Cela est dû à d'autres propriétés surplombant la première.
Attention, éditer le code dans l'inspecteur ne modifiera en aucun cas le code réel de votre page. L'inspecteur n'est là que pour vous permettre d'expérimenter. Si vous voulez rendre vos modifications permanentes, il faut modifier le code source de votre page.
===Le sélecteur d'éléments===
Le sélecteur d'éléments permet de remonter à la position d'un élément dans le code HTML en le sélectionnant sur le corps de la page elle même.{{ :formations:pointer.png|}}
===Le Toggle device mode===
Le Toggle device mode permet d'afficher la page actuelle sur la vue correspondant à une résolution d'écran différente au choix.{{ :formations:toogledevicemode.png|}}
===Console===
La console affiche des informations associées à la page web active. Cela comprend les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité.
Elle permet également d'interagir avec la page web en exécutant du JavaScript.
===Réseau===
===== Responsive, qu'est ce que c'est ? =====
Lorsque l’on construit un site web, il faut veiller à ce que sa lecture soit confortable. Et cela est particulièrement difficile lorsque l'on sait que les différents utilisateurs d'un même site n'utilisent pas le même navigateur par exemple. Cette problématique réapparaît lorsque l'on se penche sur les différents écrans par lesquels un utilisateur aimerait accéder à notre site.
C'est pour cela que l'on va œuvrer à rendre nos site **responsive**, c’est-à-dire que l’on va faire en sorte qu’ils s’adaptent eux même à chaque taille d’écran.
Ainsi, lorsque l'on construit la structure d'un site web, il est important de se poser la question de son apparence en fonction des différentes résolutions d'écran.
====Les Media Queries====
Les media queries sont des règles à appliquer pour changer le design d'un site en fonction des caractéristiques de l'écran.
===== Bootstrap =====
Bootstrap est une boite à outils comprenant plusieurs modules et permettant de faire du responsive assez facilement.
==== Installation de Bootstrap ====
=== Installation rapide (via CDN) RECOMMANDEE LORS DE LA FORMA ===
Pour aller plus vite, on vous conseille, pour cette séance" d'utiliser Bootstrap et jQuery via CDN. Il s'agit tout simplement d'une lien que vous allez ajouter dans votre fichier HTML.
Titre de ma page