CHAPITRE 4 -- Interactions Humains - Machines (IHM) sur le web
Mini projet web: html, css, js, php, client/serveur, protocoles et méthodes réseau, archi réseau
Énoncé du TP 6 : 6-TP6-i11-html_css_responsive-jgal.odt
Ressources sur le chapitre : IHM sur le web
Diaporama explicatif : ihmweb__diaporama.pdf
Ne pas confondre :
Il est préférable de faire une séparation claire des codes HTML (extension .html), CSS (extension .css) et Javascript (extension .js).
La structure en langage HTML
Le style en langage CSS
- Pré-requis : Le langage CSS
- Introduction au responsive design
- Mémento CSS
- ATTENTION : pour actualiser le style, il faut purger le cache du navigateur. En effet, le navigateur ne recharge pas le style CSS d'une page déjà affichée, et donc si vous avez modifier le style de votre page, vous ne verrez pas la modification, à moins de forcer le navigateur à recharger les fichiers CSS.
Pour recharger une page web en purgeant le cache avec des raccourcis clavier :
- Firefox (Windows et Linux) : Ctrl + F5 ou Maj + Ctrl + R
- Firefox (Mac OS) : Maj + ⌘ + R
- Chrome (Windows) : Ctrl + F5 ou Maj + F5 ou Maj + Ctrl + R
- Chrome (Linux) : Maj + Ctrl + R
- Chrome (Mac OS) : ⌘ + Maj + R
- Safari : Pas de raccourci 🙁 Allez dans Safari > Vider le cache
- Edge : Ctrl + F5
- Internet Explorer : Ctrl + F5 ou Alt + X
- Sur mobile : le moyen le plus simple consiste à ouvrir la page dans un onglet de navigation privée.
La programmation évenementielle en langage JS
La programmation web avec PHP
PHP est un langage de script utilisé le plus souvent côté serveur : dans cette architecture, le serveur interprète le code PHP des pages web demandées et génère du code (HTML, XHTML, CSS par exemple) pouvant être interprétés et rendus par un navigateur web.
Pour utiliser PHP en local (c'est-à-dire sur votre machine) :
- Installer PHP sur une machine Linux :
- Ouvrir un terminal (raccourci clavier Ctrl + Alt + t)
- Taper la commande : sudo apt-get install php-cli.
- Entrer votre mot de passe (si demandé).
- Saisir o puis taper sur Entrée pour accepter l'installation.
- Attendez la fin de l'installation.
- Démarrer le serveur PHP local avec la commande : php -S localhost:8000 -t votre_répertoire (remplacer "votre_répertoire" par votre répertoire avec vos fichiers PHP et HTML, par exemple "/home/nsi2/TP6/")
- Dans le navigateur, aller à l'URL localhost:8000 pour afficher votre page web.