7 UPB - 2022 - Technologies - Web - 1 - CSS - JS - Bootstrap

UPB Technologies Web : Intro/Rappel
Technologies Web
Notion de Javascript et
Bootstrap
M. GODE Emmanuel 2022-2023

Plan
1- Introduction Générale
2- Quelles Technologies Web
3- Rappel HTML
4- Rappel CSS
5- Notion de Javascript
5- Bootstrap
2/32
Introduction
Généralités
Le World Wide Web ; littéralement la « toile (d’araignée) mondiale », abrégé www ou le Web), la toile
mondiale ou la toile1, est un système hypertexte public fonctionnant sur Internet. Le Web permet de
consulter, avec un navigateur, des pages accessibles sur des sites.
3/32
Introduction
Technologies Web
Technologies Web ?
4/32
Rappel HTML
HTML 5
 Code minimal d'une page HTML :
5/32
Rappel HTML
HTML 5
 Balises d'en-tête :
6/32
Rappel HTML
HTML 5
 Balises de structuration du texte :
7/32
Rappel HTML
HTML 5
 Balises de listes :  Balises de tableau :  Balises de formulaire :
8/32
Rappel HTML
HTML 5
 Balises sectionnantes : Balises de tableau :  Balises génériques :
Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id, style 9/32
Rappel CSS
CSS 3
 Propriétés de mise en forme du texte
10/32
Rappel CSS
CSS 3
 Propriétés de couleur et de fond
11/32
Rappel CSS
CSS 3
 Propriétés des boîtes
12/32
Rappel CSS
CSS 3
 Propriétés des boîtes
13/32
Rappel CSS
CSS 3
 Propriétés de positionnement et d'affichage
14/32
Rappel CSS
CSS 3
 Propriétés des listes :  Propriétés des tableaux
 Autres propriétés
15/32
Rappel CSS
CSS 3: Responsive Web Design - Media Queries
 Qu'est-ce qu'une requête média ?

 La requête média (Media query) est une technique CSS introduite dans CSS3.
 Il utilise la règle @media pour inclure un bloc de propriétés CSS uniquement si une certaine condition
est vraie.
 Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une
application en fonction du type d'appareil (impression ou écran par exemple) et de ses
caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple)
 Exemple :  min-width ou max-width :
@media only screen and (max-width: 600px) { @media only screen and (min-width: 600px) {
body { body {
background-color: lightblue; background-color: lightblue;
} }
} } 16/32
Rappel CSS
CSS 3: Responsive Web Design - Media Queries
 Type de media : Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les
opérateurs logiques not ou only
 all : Valeur par défaut. Nos règles vont s’appliquer à tous les appareils
 printer : Nos règles ne s’appliqueront que pour les imprimantes
 screen : Nos règles ne vont s’appliquer qu’aux appareils dotés d’un écran ;
 speech : Nos règles ne s’appliqueront qu’aux liseurs d’écran qui sont capable de rendre le contenu
d’une page de manière sonore.
 Exemple:
17/32
Notion de Javascript
Généralités
 JavaScript
• Créé en 1995 par Netscape et Sun Microsystems
• Fait partie des langages web dits « standards » avec le HTML et le CSS
• Le JavaScript est un langage dynamique, un langage (principalement) côté client, un langage interprété,
un langage orienté objet,
• But: interactivité dans les pages HTML, traitements simples sur le poste de travail de l'utilisateur
• Moyen : introduction de scripts dans les pages HTML
• Norme: https://www.ecma-international.org/publications-and-standards/standards/ecma-262/
Ce langage va nous permettre de manipuler des contenus HTML ou des styles CSS et de les modifier en
fonction de divers évènements ou variables.
Un évènement peut être par exemple un clic d’un utilisateur à un certain endroit de la page tandis qu’une
variable peut être l’heure de la journée.
18/32
Généralités
 JavaScript permet:
• de programmer des actions en fonction d'événements utilisateurs (déplacements de souris, focus, etc.) ;
• d'accéder aux éléments de la page HTML (traitement de formulaire, modification de la page)
• d'effectuer des calculs sans recours au serveur
 Domaines d'application historiques :

• petites applications simples (calculette, conversion, etc.)
• aspects graphiques de l'interface (événements, fenêtrage, etc.)
• tests de validité sur des interfaces de saisie
 Exemples de nouvelles applications possibles en JavaScript :

• Vidéos affichées en HTML5 sans Flash (ex : YouTube)
• Jeux
• Bureautique (ex : Google Docs)
19/32
Où écrire le code JavaScript ?
 On va pouvoir placer du code JavaScript à trois endroits différents :

• Directement dans la balise ouvrante d’un élément HTML ;
• Dans un élément script, au sein d’une page HTML ;
• Dans un fichier séparé contenant exclusivement du JavaScript et portant l’extension js
 Exemple:
20/32
 Placer le code JavaScript dans la balise ouvrante d’un élément HTML
21/32
 Placer le code JavaScript dans

un élément script, au sein
d’une page HTML
Cette méthode est meilleure

que la précédente mais le fait
qu’on mélange du JavaScript et
du HTML peut rendre
l’ensemble confus et complexe à
comprendre dans le cadre d’un
gros projet.
22/32
 Placer le code JavaScript dans

un fichier séparé
C’est la méthode conseillée, elle permet une

excellente séparation du code et une
maintenabilité optimale de celui-ci 23/32
Exemples
 Calculatrice basique  Indication :

 Dessinez la calculatrice avec du code
HTML/CSS
 Possibilité d’utiliser la fonction JavaScript
eval() qui permet d'évaluer du code
JavaScript représenté sous forme d'une
chaîne de caractères.
 Possibilité de créer des fonctions :
calculer(), afficher(), effacer()
24/32
Les méthodes de Window
 Afficher des boites de dialogue dans une fenêtre :
o la méthode alert() permet d’afficher une boite d’alerte :
alert("Message à afficher ");
o la méthode prompt() affiche une boite de dialogue permettant aux utilisateurs de nous envoyer du
texte: prompt("texte","chaine par défaut");
o la méthode confirm() ouvre une boite avec un message (facultatif) et deux boutons pour
l’utilisateur : un bouton Ok et un bouton Annuler. Si l’utilisateur clique sur « Ok », le booléen true
est renvoyé par la fonction ce qui va donc nous permettre d’effectuer des actions en fonction du
choix de l’utilisateur.
25/32
Événements reconnus par Javascript
o click : un clic du bouton gauche de la souris sur une cible

o focusin : une activation d'une cible
o focusout : perte du focus d'une cible
o change : une modification du contenue d'une cible
o submit : une soumission d'un formulaire
o load : lors du chargement d'un élément
o keydown : appui d'une touche clavier
o keyup : relâchement d'une touche clavier
o mousedown : clic souris
o mouseup : relâchement d'un clic souris
26/32
Bootstrap
Avantages de Bootstrap
les principaux avantages de bootstrap sont :
o Responsive : Vous obtiendrez un site web responsive de base, ce qui n'est pas négligeable, cela est
même indispensable de nos jours avec les smartphones et tablette !
o Un site web jolie : Il existe plusieurs thèmes préfaits de haute qualité et une multitude de classes css que
l'on peut utiliser !
o Un gain de temps : Vous ne vous occupez quasiment plus que d'écrire le code Html et d'appeler des
classes CSS pré-existantes. Il devient très rapide de monter la mise en forme d'une page web.
o Compatibilité : A priori, la présentation visuelle sera la même sur tous les navigateurs.
o Graphisme : Lorsqu'on développe en programmation, cela nous permet d'avoir une apparence de site
sans écrire une seule ligne de CSS (à l'origine, bootstrap a justement été créé pour simplifier le travail de
présentation visuelle aux développeurs côté back). Cela est une aubaine pour les développeurs qui
préfèrent la partie fonctionnelle à la partie graphique 27/32
Bootstrap
le système de grille 12 colonnes
Bootstrap repose sur un système de grille à 12 colonnes. C'est l'un de ses fondements et on ne peut
pas prétendre maitriser Bootstrap sans connaitre ce concept de base
28/32
Bootstrap
Exemple:
29/32
Bootstrap
Exemple:
30/32
Bootstrap
Les tailles d'emplacements possibles:
xs = extra small screens (mobile - écran petit)
sm = small screens (tablette - écran réduit)
md = medium screens (ordinateur portable - écran moyen)
lg = large screens (ordinateur de bureau - grand écran)
31/32
Bootstrap
Les tailles d'emplacements possibles:
Pour le comprendre, voici un tableau récapitulatif avec les 4 tailles majeures d'écrans et de
résolutions :
32/32

7 UPB - 2022 - Technologies - Web - 1 - CSS - JS - Bootstrap

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

7 UPB - 2022 - Technologies - Web - 1 - CSS - JS - Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

UPB Technologies Web : Intro/Rappel

M. GODE Emmanuel 2022-2023

2- Quelles Technologies Web

 Propriétés de mise en forme du texte

 Propriétés de couleur et de fond

 Propriétés des boîtes

 Propriétés des boîtes

 Propriétés de positionnement et d'affichage

 Propriétés des listes :  Propriétés des tableaux

 Qu'est-ce qu'une requête média ?

 Exemple :  min-width ou max-width :

 Domaines d'application historiques :

 Exemples de nouvelles applications possibles en JavaScript :

 On va pouvoir placer du code JavaScript à trois endroits différents :

 Placer le code JavaScript dans la balise ouvrante d’un élément HTML

 Placer le code JavaScript dans

Cette méthode est meilleure

 Placer le code JavaScript dans

C’est la méthode conseillée, elle permet une

 Calculatrice basique  Indication :

o click : un clic du bouton gauche de la souris sur une cible

xs = extra small screens (mobile - écran petit)

sm = small screens (tablette - écran réduit)

md = medium screens (ordinateur portable - écran moyen)

lg = large screens (ordinateur de bureau - grand écran)

Vous aimerez peut-être aussi