Outils pour Tester la Compatibilité de Pages HTML et CSS

La lecture d'une page HTML
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :
1. Apprendre à tester les pages HTML et CSS sur différents navigateurs et plateformes.
2. Comprendre l'importance des simulateurs de dispositifs mobiles.
3. Analyser les statistiques des navigateurs et des résolutions d'écran pour une meilleure optimisation.

Découvrez les outils essentiels pour tester vos pages HTML et CSS sur différents navigateurs et plateformes.

Dans cette leçon, nous étudierons les différents outils dont vous aurez besoin pour tester vos pages créées en HTML et CSS. Les internautes utilisent une variété de navigateurs et de plateformes pour accéder à vos sites web, tels que Chrome, Firefox, Opera et Safari. Il est crucial de s'assurer que vos pages s'affichent correctement à travers ces différentes versions de navigateurs et systèmes d'exploitation.

Nous explorerons également les simulateurs de dispositifs mobiles comme l'iPhone et l'iPad, qui sont essentiels pour vérifier l'affichage sur des téléphones et tablettes. Comprendre les statistiques des navigateurs et des résolutions d'écran est également important pour optimiser la conception de vos pages web pour une variété d'utilisateurs. Enfin, nous aborderons l'importance de choisir des résolutions d'écran communes pour créer un design statique ou responsive. Suivez ces recommandations pour garantir une expérience utilisateur cohérente et optimale, quelle que soit la plateforme d'accès.

Voir plus
Questions réponses
Pourquoi est-il important de tester les pages web sur différents navigateurs et plateformes ?
Il est crucial de tester les pages web sur différents navigateurs et plateformes pour assurer une expérience utilisateur cohérente et optimale, étant donné que chaque navigateur peut interpréter le code HTML/CSS différemment.
Quels sont les principaux navigateurs à considérer lors des tests ?
Les principaux navigateurs à considérer sont Chrome, Firefox, Internet Explorer, Safari et Opera. Ces navigateurs couvrent la majorité des utilisations par les internautes.
Qu'est-ce qu'un simulateur de dispositif mobile et pourquoi est-il utilisé en test web ?
Un simulateur de dispositif mobile est un logiciel qui permet de tester l'affichage et la fonctionnalité des pages web sur des appareils mobiles virtuels, comme les smartphones et tablettes, ce qui est essentiel pour s'assurer que les sites sont adaptés à ces dispositifs.
Dans ce tuto, nous allons voir les différents outils dont vous aurez besoin pour tester les pages que vous allez créer en HTML et CSS. En effet, un internaute ira voir vos pages avec un navigateur et ce navigateur sera différent suivant la plateforme qu'il utilisera ou suivant le système d'exploitation. Certains internautes utilisent des Macintosh, d'autres des PC avec des systèmes d'exploitation parfois différents. Suivant ces systèmes, il existe parfois différents types de navigateurs et différentes versions de navigateurs. Donc, votre travail sera de vous assurer que les pages que vous allez réaliser s'affichent de manière correcte et identique sur les différentes plateformes et sur les différentes versions des navigateurs. C'est un travail parfois assez complexe, puisqu'il est parfois assez difficile de remonter à des versions de navigateurs assez anciennes. Dans les différents tutoriels que nous aborderons par la suite, nous considérons que les navigateurs seront de génération, soit dernière génération, soit une ou deux générations précédentes. Alors, nous allons regarder une page, cette page que nous allons réaliser dans les tutoriels suivants. Cette page s'affiche pour l'instant de le navigateur Chrome. À présent, dans Firefox, elle s'affiche de manière identique. Sous le logiciel Opera, nous avons également le même résultat. Et enfin, comme je travaille sur Safari, nous pouvons l'afficher également sur Safari. Sur un Macintosh, je ne peux malheureusement pas vous présenter cette page sous Internet Explorer. Nous allons également regarder cette page, lorsque c'est possible, sous un autre device. En effet, les internautes utilisent maintenant beaucoup leurs téléphones mobiles ou bien leurs tablettes pour visualiser les pages web. Alors voici, je peux à présent regarder cette page sous un simulateur iPhone. L'usage d'un tel simulateur est parfois assez difficile à mettre en œuvre, car il faut s'inscrire auprès du site Apple en tant que développeur, puis télécharger le logiciel qui se nomme Xcode. L'ensemble de la procédure étant gratuite. Il faut également avoir obligatoirement un Macintosh. Vous pouvez éventuellement télécharger ce logiciel qui pèse autour de 1,5 à 2Go. Donc je peux visualiser cette page sous un simulateur, mais vous pourriez également, une fois mis en ligne, regarder votre page depuis votre propre téléphone mobile ou votre propre tablette. Donc la page que j'ai réalisée s'affiche de manière correcte sur un téléphone. Elle n'est pas forcément optimisée pour un téléphone, car pour un téléphone, nous changerions peut-être un tout petit peu la mise en forme. Avec mon simulateur, je peux également changer de matériel et regarder cette page sur un iPad. Voici cette même page depuis une tablette iPad. Nous avons vu que notre page est correctement réalisée et qu'elle s'affiche de la même manière sur tous les navigateurs. Nous allons à présent regarder quelques statistiques au niveau des navigateurs et au niveau des écrans. Voici une copie d'écran d'un site qui se nomme gs.statcounter.com. Cette copie d'écran est récente et elle montre les différentes utilisations. En statistiques, des navigateurs. Le premier navigateur, sur la courbe verte, est le navigateur Chrome. Vient ensuite le navigateur Firefox. Et enfin Internet Explorer, Safari étant le quatrième. Si vous téléchargez l'ensemble de ces navigateurs, si vous pouvez visualiser votre page sur l'ensemble des navigateurs, vous allez couvrir pratiquement la globalité des usages des internautes. Sachant que l'on voit dans la partie inférieure un usage avec Android, donc avec un système d'exploitation pour téléphone. Nous allons passer maintenant à la deuxième statistique, qui est une statistique concernant les résolutions d'écran. Alors ça c'est très important, puisque lors de la conception d'un site web, vous allez devoir vous demander dans quelle taille vous allez faire vos maquettes. Alors ça c'est important lorsque l'on réalise un site de manière statique, c'est-à-dire une page qui ne s'adapte pas à l'écran. Donc une page qui n'est pas un responsive design. Mais quand bien même, il est important de connaître globalement l'usage, la disponibilité des différents écrans auprès des internautes. Donc les écrans les plus couramment utilisés sont les écrans de 1366 par 768 pixels. Nous avons ensuite différentes résolutions que nous ne connaissons pas. Puis les écrans de 1900 et 1280, et enfin tout en bas, dans la partie verte, 1024. Donc globalement, si vous voulez réaliser une page statique commune à tous les internautes, qui va s'afficher correctement sans ascenseur, vous pouvez partir d'une base de 1024 par 768. Mais si vous voulez faire un site un peu plus grand, vous pouvez aller sur 1280 ou bien 1300. Mais a priori, 1024 ou 1280 semblent être des résolutions parfaitement correctes et parfaitement communes à l'ensemble des internautes. Vous voilà à présent prêts à commencer la conception de votre site Internet pour pouvoir réaliser votre première page web.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5