Archive pour la catégorie ‘html’

Comment tester un site sur la majorité des navigateurs ?

En fonction des navigateurs, des versions de ceux-ci et du système d'exploitation, un site peu s'afficher différemment.

Donc avant publication de celui-ci, il convient de le tester dans la majorité des situations.

Pour ce faire, il faut :

1- avoir un Mac

Car un même navigateur s'affichera différemment suivant le système d'exploitation, et le Mac OS X n'est pas virtualisable à ma connaissance.

2- un logiciel de virtualisation pour tester sur Linux et Windows

Pour éviter d'avoir plusieurs ordinateurs.

Par exemple, Virtualbox est gratuit et fait très bien l'affaire.

3- avoir Windows Vista ou Seven

Pour pouvoir le virtualiser et installer internet explorer 9.

4- installer les principaux navigateurs avec les principales versions

Aujourd'hui, je teste sur :

  • Firefox 3.0 et 3.6
  • Chrome dernière version
  • Safari dernière version
  • Opera dernière version
  • Internet explorer 7, 8 et 9

Et internet explorer 6 ?
J'ajoute le bandeau ie6nomore pour expliquer que, comme facebook et beaucoup d'autres, j'arrête le support de ce navigateur obsolète.

Pour tester IE 7 et 8, pas besoin de les installer : sur IE 9, il suffit d'aller dans les "outils de développement", et cliquer sur "Mode de navigateur". Par contre, dans certains cas, il peut y avoir des différences entre le mode de compatibilité et le vrai IE7 ou 8 intégré avec le système d'exploitation (cf l'article de jpvincent). Donc je conseille de faire un ultime test sur des machines virtuelles contenant le vrai IE7 et IE8 avant de publier le site.

5- tester sur les smartphones

Et sans mac ou sans installer tous ces navigateurs ?

C'est quand même possible d'avoir des captures d'écran (mais ça ne permet pas de tester du code javascript par exemple) grâce à des sites internet :

Intégrer une vidéo dans un site web, compatible ie, firefox, safari, chrome, opera, iphone, ipad, android, …

Comment afficher une vidéo sur une page internet en combinant les technologies HTML5 avec la balise <video> et flash pour les navigateurs non compatibles ?

Avec un code HTML qui affiche les liens vers 3 formats de fichiers vidéo dans cet ordre :

  1. HTML5 MP4
  2. HTML5 WebM
  3. HTML5 OGG
  4. Flash MP4 (pas besoin de FLV depuis la version 9 rev 3 de flash)

Le navigateur sautera le format qu'il ne connait pas jusqu'à trouver celui qu'il sait lire.

Un script javascript permettra d'afficher les boutons de contrôle (plein écran, …).

Méthode :

  1. Encoder la video dans ces 3 formats : MP4, WebM (VP8) et Theora (Ogg/Ogv) avec le logiciel gratuit et open source mirovideoconverter (mac et windows).
  2. Faire une capture de la vidéo au format png, de la même taille que la vidéo.
  3. Télécharger le script gratuit et open source videojs et le décompresser.
  4. Éditer le fichier demo.html pour remplacer les fichiers "oceans-clip" par vos liens (attentions à changer .ogg par .ogv) et adaptez les "width" et "height" à ceux de votre vidéo.
  5. Charger les vidéos sur un serveur performant comme amazon s3 par ex.

Démo

Sources

Expliquent très bien le fonctionnement et donnent des détails qui peuvent être utiles – Anglais :

Un site prêt pour HTML5 et CSS3, compatible avec la majorité des navigateurs actuels

Le but ici est de construire un site internet qui sera compatible avec les navigateurs actuels et prêt pour le passer en HTML5 et CSS3.

1- Choisir des technologies compatibles avec les navigateurs actuels

Voir sur le site caniuse.com

2- Éviter les attributs non compatibles avec HTML5

Balise(s) concernée(s) :
 Attribut(s) à ne pas utiliser avec HTML5 :
link et a rev et charset
a shape et coords
img et iframe longdesc
link target
area nohref
head profile
html version
img (utiliser id à la place) name
meta scheme
object archive, classid, codebase, codetype, declare et stetby
param valuetype et type
td et th axis et abbr
td scope
caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead et tr align
body alink, link, text et vlink
body background
table, tr, td, th et body bgcolor
table et object border
table cellpadding et cellspacing
col, colgroup, tbody, td, tfoot, th, thead et tr char et charoff
br clear
dl, menu, ol et ul compact
table frame
iframe frameborder
td et th height
img et object hspace et vspace
iframe marginheight et marginwidth
hr noshade
td et th nowrap
table rules
iframe scrolling
hr size
li, ol et ul type
col, colgroup, tbody, td, tfoot, th, thead et tr valign
hr, table, td, th, col, colgroup et pre width

Source

3- Vérifier la compatibilité des déclarations CSS

Voir sur le site quirksmode.org

Au passage, je signale la page du siteduzero qui compile la liste des propriétés css les plus courantes. (à garder sous la main !).

4- Choisir le bon doctype

Vous pouvez utiliser le générateur de d'alsacreations.com

Vous pouvez déjà choisir d'avoir votre site en HTML5 sans risque, sans utiliser les balises spécifiques au HTML5 qui ne sont pas encore bien supportées. Dans ce cas, un page type serait :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>Le titre de mon site</title>
    <meta name="description" content="Description de mon site" />
    <meta name="keywords" content="liste de mots clés" />
    <meta name="author" content="Mon nom" />
    <meta name="owner" content="Nom du propriétaire" />
    <meta name="geo.placename" content="Ville, Département, Pays" />
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
  </head>
  <body>
  </body>
</html>

5- Vérifier que votre site est bien valide

Grâce au validateur du w3.org qui reconnait désormais l'HTML5

Retourner au début

Blog Pastel.pro

Ce blog est destiné à partager notre expérience sur la conception de sites web (programmation, design, référencement, ...) aux webmasters. Chaque sujet présente l'essentiel, avec un minimum de texte.

Partager ce blog