Recherche

Web	aidewindows

Index

PCTimeWatch Logiciel de controle parental
PCTimeWatch
Contrôle parental

Concarneau

Ce/tte création est mise à disposition sous un
contrat Creative Commons.

Créer sa page web
Tests, conformité, validité

Utilisation avancée
Conception du site
Tester l'affichage de son site
Vérifier la conformité de ses pages
Firefox : Web Developer et FireDebug
Vérifier la validité des liens hypertexte

Déplacé : Ajouter des fonctionnalités

Déplacé : Restrictions, interdictions, redirections :

Déplacé page suivante :

Utilisation avancée :

Après avoir créé son site perso chez son FAI, on peut avoir envie de passer à la vitesse supérieure ;-)

D'abord au niveau de la conception du site :
- vérifier la conformité de ses pages
- vérifier la validité de ses liens hypertexte,
- incorporer une fonction de recherche,
- utiliser le php (déplacé)

Au niveau de la gestion du site :
- obtenir des statistiques sur la fréquentation de son site,
- référencer son site,
- faire de la publicité sur son site

Au niveau du développement du site :
- acheter un nom de domaine,
- faire héberger son site chez un hébergeur de site web,

Améliorer la conception du site :

D'abord, vérifier la conformité de ses pages, puis,
- utiliser le php, (ex : pour créer un forum),
- incorporer une fonction de recherche,
- vérifier la validité des liens sur le site.

Tester l'affichage de son site :

Il est utile, voir indispensable, de savoir si son site s'affiche correctement sous d'autres navigateurs Internet que celui (ceux) que l'on utilise.
Si on en a la possibilité, il est même souhaitable de vérifier l'affichage sur Macintosh avec le navigateur Safari.

Sur Windows XP :

Il y a trois navigateurs principaux :
- Internet Explorer (5, 6 et 7)
- Firefox,
- Opéra.

Internet Explorer 6 présente des différences notables avec les deux autres, particulièrement si on utilise les feuilles de style (CSS).
- Internet Explorer 7, le nouveau navigateur Microsoft, résoud nombre de différences.d'affichage.

Sur Macintosh OS X :

Il y a deux navigateurs principaux :
- Safari, le plus communément utilisé, très "pointilleux" quant au code CSS utilisé,
- Firefox, semblable à la version Windows.

On peut citer Internet Explorer 5.2, semblable à la version 5.1.7 pour Macintosh Classic, mais cette version n'est plus supportée par Microsoft et peu utilisée.

Sur Windows 98, et Macintosh Classic :

Les deux navigateurs principaux sont :
- Internet Explorer 5 version Windows,
- Internet Explorer 5.1.7 version Macintosh.
La compatibilité est plus difficile à obtenir avec ces deux "vieux" navigateurs.

Et je ne parle pas de Netscape dans ces anciennes versions, et autres...
Mais tout dépend de l'accessibilité que l'on souhaite donner à son site.
De toute façon, l'affichage ne posera pas de problème avec un site conçu avec des tableaux. Mais c'est l'utilisation des feuilles de style qui amènera des incompatibilités d'affichage.

Tester sur deux navigateurs :

On peut installer sur son ordinateur différents navigateurs (Firefox, Opéra), pour vérifier si les pages s'affichent correctement.
Ceci car les navigateurs n'interprêtent pas le contenu des pages de la même façon.

Vérifier particulièrement les différences d'affichage entre Internet Explorer et un autre navigateur.

Sites de test :

Avec Browsershots.org (gratuit) :
http://browsershots.org/
Avec Browsercam.com (payant) :
http://browsercam.com/

Voir également :
Forum.alsacreations.com - Tester son site sous lynx avec windows XP
(il s'agit d'installer Linx (simple) pour tester l'accessibilité de son site en mode texte)

Versions standalone d'Internet Explorer :
http://browsers.evolt.org/?ie/32bit/standalone

Navigateurs :

Entre janvier et mai 2008, sur aidewindows.net :
- 40% des visiteurs utilisent Internet Explorer 7
- 30% des visiteurs utilisent Firefox
- 20% des visiteurs utilisent Internet Explorer 6 SP2 (Windows XP) - 6% utilisent Internet Explorer 6 autre version.

Différents navigateurs sur aidewindows.net d'après Xiti
Analyses effectuées par Xiti

Résolution de l'écran :

On considérera également la largeur des pages :

Entre janvier et mai 2008, sur aidewindows.net :
- 6% des visiteurs utilisent une résolution d'écran de 800 x 600 pixels.
- 40% des visiteurs utilisent une résolution d'écran de 1024 x 768 pixels

Différentes résolutions sur aidewindows.net d'après Xiti
Analyses effectuées par Xiti

Il est donc souhaitable de s'assurer que la consultation sera possible avec cette configuration.

Vérifier la conformité de ses pages :

Pour être sûr que les pages web répondent aux normes internationales définies par l'organisme gérant l'Internet, et donc, qu'elles pourront être lues par n'importe quel navigateur, on peut vérifier leur conformité sur le site officiel :
http://validator.w3.org
On peut également aller sur ce site :
http://www.abondance.com

Deux grandes "normes" sont utilisables :

La spécification HTML 4.01 :
http://www.la-grange.net/w3c/html4.01/

Le XHTML :
http://openweb.eu.org/xhtml/

Vérifier la validité des pages avec Web Developer Extension dans Firefox :

Avec le navigateur Firefox, on peut utiliser Web Developer Extension :
http://chrispederick.com/work/webdeveloper/

W3C

- l'onglet Tool permet de vérifier directement la validité de la page !

Programme semblable Microsoft pour Internet Explorer :
Internet Explorer Developer Toolbar
http://www.microsoft.com/downloads/details.aspx?
FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en

Web Developer en français
http://joliclic.free.fr/mozilla/webdeveloper/

Google : Centre pour les webmasters :

Un ensemble d'outils qui aident à la gestion de son site et à la visibilité de ses pages sur le moteur Google.

google.fr/webmasters

Google : Centre pour les webmasters :
http://www.google.fr/webmasters/

Outils pour les webmasters (notamment Google Sitemaps) :
http://www.google.com/webmasters/sitemaps/?hl=fr

Création d'un fichier sitemap.xml :

Ce ficher énumèrent toutes les pages du site pour faciliter leur indexatation.
On peut y ajouter des indications sur la fréquence de modification.

Extensions de Firefox : Web Developer et FireBug :

Si on utilise Firefox comme navigateur, on la possibilité d'ajouter deux extensions : Web Developer et FireBug

Web Developer :

Site officiel :
http://chrispederick.com/work/web-developer/

Téléchargement pour Firefox :
https://addons.mozilla.org/en-US/firefox/addon/60

Cette extension ajoute une barre d'outils dans Firefox, spécialement conçue pour les développeurs de site web :

Web developer toolbar 1.0

L'onglet "Tools" permet notamment de vérifier la conformité de ses pages, directement, sur Internet.

FireBug :

Site officiel :
http://getfirebug.com/

Téléchargement pour Firefox :
https://addons.mozilla.org/fr/firefox/addon/1843

Voir aussi :
05/12/2006 : FireBug 1.0 Beta : plus qu'une extension, un prodige !
http://www.aozeo.com/blog/55-firebug-1-beta-plus-qu-une-extension-un-prodige

Vérifier la validité des liens hypertexte :

Ce site, qui contient de nombreux liens, en est la preuve : il n'y a pas de liens éternels !
Au lieu de vérifier manuellement la validité des liens, on peut utiliser LinkAlarm.

LinkAlarm vérifie la validité des liens présents sur toutes les pages d'un site (liens internes et liens externes). Un essai gratuit est offert (pour 100 pages).
Il suffit de donner l'adresse du site et son email. On consultera ensuite le rapport sur le site.
http://www.linkalarm.com/

Interdire l'accès au contenu de ses dossiers :

Pour éviter de rendre accessible le contenu de ses dossiers :

Créer un fichier index.php

- placer un fichier index.php à l'intérieur de chaque dossier du site que l'on veut protéger.

Créer le fichier index.php :

- créer un fichier texte ordinaire avec le Bloc-notes,
- copier-coller le texte suivant :

<?
$VersRacine="..";
include ("$VersRacine/index.htm");
?>

Remplacer index.htm par index.php si c'est le nom du fichier index du site.

- menu Fichier, Enregistrer sous...,
- taper :
index.php

- placer une copie de ce fichier à l'intérieur de chaque dossier du site.

Télécharger un fichier index.php :

- si la page index du site est index.htm : cliquer ici
- si la page index du site est index.php : cliquer ici

PS : Sur Wanadoo, l'opération est inutile, car l'accès aux dossiers du site est protégé par défaut.

Autres solutions :

"Pour interdire tout accès à un répertoire (qui contient par exemple des includes php), un fichier .htaccess avec l'interdiction de faire du GET, PUT, POST sur le répertoire.

Ou sinon, s'il s'agit juste d'empêcher le listing du répertoire, un fichier .htaccess avec un "Options -Indexes".

En dernier recourt, un bête fichier index.html ou index.php vide placé dans le répertoire (mais à répéter pour toute une arborescence si nécessaire)."

Voir aussi :

Siteduzero.com - Protéger un dossier avec un .htaccess
Il s'agit de créer une protection par Login / Mot de passe qui empêche l'accès à tous les fichiers du dossier.
Cela se fait avec deux fichiers :
- .htaccess : ce fichier contiendra l'adresse du .htpasswd et quelques autres options que vous pourrez définir. *
- .htpasswd : ce fichier contiendra une liste de logins / mots de passe, pour chaque personne autorisée à accéder aux pages !

Redirection :

Si on modifie le nom d'une page, il faut également effectuer une redirection.
En effet, s'il existe des liens vers cette page, ou si des visiteurs l'ont ajoutée à leurs favoris, elle ne sera plus accessible. A la place, s'affichera une erreur 404.

On conservera donc l'ancienne page, après en avoir supprimé le contenu et on placera une redirection automatique.

PS : En pratique, il vaut mieux, dans la mesure du possible, conserver une page plutôt que de la renommer. Car cela est préjudiciable au référencement de la page sur Internet et les moteurs de recherche. Tant pis donc si le nom est mal trouvé !

Il existe plusieurs moyens pour effectuer une redirection automatique :

En tous les cas, on supprime l'ancien contenu de la page.

1 - en HTML :

On utilise la balise : <meta http-equiv refresh>

- on supprime le contenu de l'ancienne page et on le remplace par :

<html>
<head>
<meta http-equiv="refresh" content="1 ; url=http://www.nouvelle.adresse.com">
</head>
<body>
L'adresse de la page est maintenant : http://www.nouvelle.adresse.com
</body>
</html>

www.nouvelle.adresse.com est à remplacer par le nom de la nouvelle page.

2 - avec un fichier htaccess

Voir ci-dessous.

3 - en php

Si la page à rediriger est en php (voir sur ce site)

4 - en javascript :

Solution déconseillée. Car si le javascript a été désactivé sur le navigateur du visiteur, la redirection ne fonctionnera pas.

.htaccess et robots.txt :

Ce sont deux fichiers que l'on peut être amené à utiliser.
Ils se placent à la racine du site.

.htaccess :

Le fichier htaccess a trois utilisations principales :
- limiter l'accès avec un mot de passe,
- faire une redirection de page,
- paramétrer une page d'erreur 404,

Voir :
http://www.webmaster-hub.com/publication/Le-fichier-htaccess.html
http://fr.selfhtml.org/divers/htaccess.htm

Voir aussi : Redirection web :
http://alexandre.alapetite.net/doc-alex/redirections/index.fr.html

Exemple de fichier .htaccess :

.htaccess est un nom de fichier particulier :
- il commence par un point
- il n'a pas d'extension.

Il est impossible de le créer avec Windows en utilisation normale.
En voici donc un modèle :

cliquer ici pour télécharger un modèle de fichier .htaccess

Exemple de redirection avec un fichier .htaccess :

Le fichier contient la ligne suivante :

Redirect permanent /index.htm http://www.aidewindows.net/

Cette ligne est constituée de 3 parties :
Redirect permanent = la commande de redirection
/index.htm = le fichier à rediriger, ici, le fichier index.htm du site
http://www.aidewindows.net/ = l'adresse de redirection

Evidemment, cette commande n'est donnée qu'à titre d'exemple !
Elle est à modifier suivant ses besoins.

robots.txt :

Le fichier robots.txt permet de gérer l'accès des robots d'indexation au site.
Il permet notamment d'interdire l'accès à certains dossiers ou certains fichiers.

Voir :
http://fr.selfhtml.org/divers/robots.htm

Exemple de fichier robots.txt :

Un fichier robots.txt se crée facilement avec le Bloc-notes.

On peut y mettre :

User-agent: *
Disallow: /images/

Cette commande interdira l'accès du dossier images aux robots d'indexation.

Attention :
Les robots peuvent ignorer les commandes du fichier robots.txt.
Le contenu du fichier robots.txt peut même être une indication sur les dossiers contenants des données importantes.
En conséquence, ne pas utiliser le fichier robots.txt pour dissimuler des données.