Pourquoi le navigateur est important
Le navigateur est le programme qui nous permet de voir les sites web. Comme je vous l'ai expliqué plus tôt, le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel !
On ne dirait pas, mais un navigateur est un programme extrêmement complexe. En effet, comprendre le code HTML et CSS n'est pas une mince affaire. Le principal problème, vous vous en rendrez vite compte, c'est que les différents navigateurs n'affichent pas le même site exactement de la même façon ! Il faudra vous y faire et prendre l'habitude de vérifier régulièrement que votre site fonctionne correctement sur la plupart des navigateurs.
Les navigateurs sur ordinateur
Télécharger les navigateurs
Il existe de nombreux navigateurs différents. Voici les principaux à connaître :
La figure suivante vous montre un aperçu du résultat produit par quelques-uns de ces principaux navigateurs sur la page d'accueil de Google.
Comprendre les différences entre navigateurs
Comme je vous le disais plus tôt, les navigateurs n'affichent pas toujours un même site webexactement de la même façon. Pourquoi ? Cela est dû au fait que les navigateurs ne connaissent pas toujours les dernières fonctionnalités de HTML et CSS. Par exemple, Internet Explorer a longtemps été en retard sur certaines fonctionnalités CSS (et paradoxalement, il a aussi été en avance sur quelques autres).
Pour compliquer les choses, plusieurs versions des navigateurs co-existent :
- Firefox 2, Firefox 3.5, Firefox 3.6, Firefox 4 ;
- Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9 ;
- Chrome 8, Chrome 9, Chrome 10 ;
- etc.
Chaque version prend en charge de nouvelles fonctionnalités mais, si les utilisateurs ne mettent pas à jour leur(s) navigateur(s), cela devient un problème pour les webmasters comme vous qui créent des sites web.
Chrome a résolu en grande partie le problème en mettant en place des mises à jour automatiques, sans intervention de l'utilisateur. Les utilisateurs de Firefox ne pensent pas toujours à mettre à niveau leur navigateur ; quant à Internet Explorer, les utilisateurs sont d'autant moins incités à mettre à jour leur navigateur que les dernières versions nécessitent aussi de passer à une version récente de Windows (Internet Explorer 9 n'est pas disponible pour Windows XP, par exemple).
Chrome a résolu en grande partie le problème en mettant en place des mises à jour automatiques, sans intervention de l'utilisateur. Les utilisateurs de Firefox ne pensent pas toujours à mettre à niveau leur navigateur ; quant à Internet Explorer, les utilisateurs sont d'autant moins incités à mettre à jour leur navigateur que les dernières versions nécessitent aussi de passer à une version récente de Windows (Internet Explorer 9 n'est pas disponible pour Windows XP, par exemple).
Des sites comme normansblog.de et caniuse.com tiennent notamment à jour une liste des fonctionnalités CSS prises en charge par les différentes versions de chaque navigateur (figure suivante).
Les fonctionnalités gérées par les différents navigateurs
Comme vous le voyez, c'est… compliqué.
L'essentiel des soucis viendra le plus souvent des anciennes versions d'Internet Explorer (IE6, IE7, IE8). Il faudra vérifier comment le site s'affiche sous ces anciennes versions… Attendez-vous à des surprises ! Vérifiez surtout que votre site s'affiche sans erreur, sans chercher à obtenir exactement le même rendu sur les vieilles versions de ces navigateurs.
Les navigateurs sur mobile
En plus des navigateurs que je vous ai présentés, il faut savoir qu'il existe des variantes de ces navigateurs conçues pour les téléphones portables, en particulier pour les smartphones.
De plus en plus de personnes consultent aujourd'hui des sites web sur leur portable, il faut donc connaître un minimum le fonctionnement des navigateurs des téléphones.
De plus en plus de personnes consultent aujourd'hui des sites web sur leur portable, il faut donc connaître un minimum le fonctionnement des navigateurs des téléphones.
En fait, vous n'allez pas être dépaysés : la plupart des navigateurs sur smartphones sont les mêmes que sur ordinateur, dans une version plus légère adaptée aux mobiles. Tout dépend du type de téléphone.
- iPhone : sur l'iPhone d'Apple, le navigateur utilisé est Safari Mobile. Il s'agit d'une version lightet néanmoins très complète de Safari pour ordinateur.
- Android : les portables sous Android bénéficient du navigateur Chrome Mobile. Là encore, il s'agit d'une version adaptée aux mobiles.
- Windows Phone : sous Windows Phone, on retrouve… Internet Explorer Mobile ! Le principe est le même que pour les précédents navigateurs : il s'agit d'une version dédiée aux mobiles.
- Blackberry : les Blackberry font exception car ils ont leur propre navigateur (il n'existe pas d'équivalent sur ordinateur). Néanmoins, les versions les plus récentes de ce navigateur se basent sur un noyau commun à Safari et Chrome (il s'agit du moteur de rendu Webkit). Par conséquent, l'affichage est en général proche de celui proposé par Safari et Chrome.
Les navigateurs pour mobiles prennent en charge la plupart des dernières fonctionnalités de HTML et CSS. De plus, le système de mise à jour automatisé des mobiles nous garantit que les utilisateurs auront le plus souvent les dernières versions.
Sachez néanmoins que des différences existent entre ces différents navigateurs mobiles et qu'il est conseillé de tester son site sur ces appareils aussi ! En particulier, l'écran étant beaucoup moins large, il faudra vérifier que votre site s'affiche correctement.
En résumé
- Le Web a été inventé par Tim Berners-Lee au début des années 1990.
- Pour créer des sites web, on utilise deux langages informatiques :
- HTML : permet d'écrire et organiser le contenu de la page (paragraphes, titres…) ;
- CSS : permet de mettre en forme la page (couleur, taille…).
- Il y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont HTML5 et CSS3.
- Le navigateur web est un programme qui permet d'afficher des sites web. Il lit les langages HTML et CSS pour savoir ce qu'il doit afficher.
- Il existe de nombreux navigateurs web différents : Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera… Chacun affiche un site web de manière légèrement différente des autres navigateurs.
- Dans ce cours, nous allons apprendre à utiliser les langages HTML et CSS. Nous travaillerons dans un programme appelé « éditeur de texte » (Notepad++, jEdit, vim…).
0 commentaires:
Enregistrer un commentaire