Interface Mobile - Classe 1 - Introduction

1. 582-AGR-LI
INTERFACE MOBILE
Classe 1 – Introduction
Par Alexandre Paradis

2. Retour rapide sur certains concepts Web
1. Qu’est-ce qu’une variable JavaScript ?
2. Quel est la règle CSS pour agrandir l’interligne dans un texte ?
3. À quoi sert les balises <meta> dans HTML ?

3. Qu’est-ce que le design Responsive ?

4. Règles du
design
responsive
Le « design responsive » = le design répond à
l’espace disponible.
Notre site web sera disponible en ligne, pour toutes
formes d’écrans.
Ne jamais prendre notre écran de travail comme
l’écran par défaut
Il faut répondre à la largeur (width) de l’écran
toujours en premier
Adapter aussi les fonctions du site web selon la
grosseur de l’écran (menu mobile au lieu d’un menu
d’écran large)

5. La bibliothèque (ou
framework) Bootstrap
◦ https://getbootstrap.com/
◦ Un ensemble d’outils pour construire des sites web
rapidement, avec un système de design Responsive
« mobile en premier » inclus.
◦ Contient des outils et des ensembles de codes:
◦ HTML
◦ CSS
◦ JavaScript

6. 5 points d’arrêts principales Bootstrap pour le Design
Responsive
0 px
< 576px
≥ 576px
< 768px
≥ 768px
< 992px
≥ 992px
< 1200px
X-Small Small Medium Large
> 1200px
X-Large
N.B. - il existe bien un autre point d’arrêt moins utilisé : le XX-Large qui débute à 1400px

7. Les Gabarits ne
sont pas des
largeurs d’écrans
fixes!
◦ Les gabarits Bootstrap ne représentent pas des largeurs
spécifiques, mais bien une région où un site web s’ajustera.
◦ En-dessous d’une largeur précise, on change le design pour
l’ajuster, mais ce dernier doit toujours s’ajuster entre telle et
telle largeur (ou « width »)
◦ Aujourd’hui, les sites web sont affichés dans des milliers de
gadgets électroniques. Il est impossible de prédire dans quel
largeur le site sera présenté.

8. Concept du
« mobile en premier » ?
◦ Ce concept est très simple:
◦ En premier, on développe tous les éléments pour qu’ils soient
responsives en tout temps
◦ À mesure que les largeurs d’écrans grandissent, on ajuste l’affichage
des éléments
◦ Version mobile => version tablette => version ordinateur
◦ Pourquoi ?
Pour s’assurer que tous les éléments s’affichent en tout temps

9. Comment appliquer un design responsive dans un site?
Avec CSS
◦ Requête des médias (media requests)
◦ Conditions après ( ou avant ) un largeur
◦ Vérification de l’outil qui observe le site
(tablette, cellulaire)
◦ Utilisation des pourcentages comme
dimensions de certains éléments
Avec JavaScript
◦ Requête des médias (media requests)
◦ Interactivité avec des éléments du DOM
◦ Contrôle d’affichage des éléments du DOM
&

10. Qu’est-ce que l’hiérarchie
d’objet Javascript
◦ Javascript est un langage construit avec des objets plutôt
qu’avec des classes.
◦ Ses objets sont des éléments qui sont fixe et délimités avec
des propriétés et associé avec des méthodes (ou fonctions).
◦ En Javascript, les objets sont hiérarchisés. Ils correspondent
aux éléments qui apparaissent dans une page web.
◦ Le premier objet est Document qui représente toute la page
web. Tout les autres objets du site web découle de cette
dernière.
◦ Ces objets sont disponibles en tout temps et permet
d’accéder directement au DOM du HTML.

11. Exemple
d’un DOM
avec des
éléments
HTML
dedans

12. Fonctions utiles JavaScript pour les objets
document.getElementById() : permet d’aller sélectionner un item dans le DOM en
recherchant son identifiant unique ( « ID » )
document.getElementsByClassName() : permet d’aller sélectionner un ou des
items dans le dom en recherchant une classe ( « class » )
document[…].style : permet d’attribuer des valeurs selon des propriétés de style à un
élément ( « style.color », pour la couleur du texte )
setAttribute : permet d’ajouter un attribut à l’élément ( voir les attributs possibles
pour chaque élément HTML )

13. Préparation pour les exercices en classe
1. Aller sur le site https://replit.com/
2. Créer un compte (Sign up) en utilisant votre courriel
3. Suivez le tutoriel d’installation
4. Choisissez le langage « HTML, CSS, JS » et 2 autres langages de votre choix
5. À la section « start coding an idea », sélectionnez « HTML, CSS, JS » créer un
nouveau « repl » nommé : InterfaceMobileEx1
6. Cliquer sur le bouton « Invite » en haut à droite
7. Inviter le compte « AParadLimoilou » dans votre projet
8. Remplacer le texte de « index.html » par le code envoyé par le professeur

14. Exercice!
◦ À l’aide du fichier script.js seulement, transforme la couleur d’arrière-plan des
trois éléments suivants:
◦ Le corps de la page (ou le « body »)
◦ Le div ( avec id « big_wrapper » )
◦ Les deux paragraphes séparément
◦ Chaque élément doit avoir une couleur d’arrière-plan différent
◦ Chaque paragraphe doit avoir une couleur de texte différent
◦ N’oubliez pas de commenter votre code JavaScript! ( //Ceci est un commentaire )
◦ Dès que vous avez fini, faites signe et je ferai la révision

15. La semaine
prochaine :
Renforcement ES5/ES6
Exercice JavaScript
Introduction librairie
jQuery