Créer sa page web (2)

• Utilisation avancée
• Conception du site
• - Tester l'affichage de son site
• - Vérifier la conformité de ses pages
• - Recherche sur le site
• - Météo sur le site
• - Afficher une vidéo dans une page web
• - Vérifier la validité des liens hypertexte
• - Interdire l'accès au contenu des dossiers (27/01/06)
• - faire une redirection de page (20/03/07)
• - .htaccess et robots.txt (05/11/06)
• - création de diaporama et galeries d'images

Déplacé page suivante :

• Gestion du site
• - Statistiques et classements
• - Référencement
• - Publicité
• . publicité avec Google AdSense
• Evolution du site
• - Nom de domaine
• - Hébergement
• Informations et aide à la création
• - sites d'aide et de conseils
• - sites de téléchargement
• - les forums de discussion
  

Déplacé page suivante :

• - Le Php

 

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 :

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.

 

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.

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

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/

- 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

 

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.

 

Recherche sur le site :

Atomz. Une fenêtre de recherche sur son site, pour trouver une info à l'intérieur de celui-ci (voir en haut de page). Avec réindexation du site à volonté :
http://www.atomz.com/

Atomz a été racheté par WebSideStory. Voir maintenant Google

Recherche sur le Web :

Google. On peut ajouter un rectangle de recherche sur le Web :
http://www.google.com/intl/fr/searchcode.html

Pour avoir le choix : recherche sur le site / recherche sur le web, il faut s'abonner au programme AdSense (voir)

Ou voir Google Custom :
http://www.google.com/services/custom.html

 

Fonction de recherche en php :

On peut concevoir ou adapter soi-même la Recherche sur le site, en utilisant le php.
(voir ici, ou faire une recherche sur Google : scripts PHP moteur de recherche interne)

Voir :
http://www.commentcamarche.net/php/phpmoteur.php3

Moteurs de recherche :
http://www.phpscripts-fr.net/scripts/scripts.php?cat=Moteurs+de+recherche
http://www.comscripts.com/scripts/php.moteurs-de-recherche.sc15.html

Il existe :

PhpDig, en Php et utilisation une base de données MySQL :
http://www.phpdig.net/
http://www.comscripts.com/scripts/php.phpdig.596.html

Moteur'Ed 1.0 :
http://www.echodelta.net/scriptsphp/moteured/moteured.htm

 

Météo sur le site :

Pour insérer un encart météo sur son site :

Avec Free :
- copier-coller la ligne suivante dans le code HTML de la page :
<img src="http://perso0.free.fr/cgi-bin/meteo.pl?dep=29" />
en remplaçant le numéro de département par celui choisi.

Avec Météo France :
http://www.meteofrance.com/FR/partenaires/choixVignette.jsp

 

Voir ma page sur Concarneau

 

 

Afficher une vidéo sur une page web :

Pour afficher une vidéo sur une page web, on peut, tout simplement, passer par les sites spécialisés :
- YouTube.com,
- DailyMotion.
(voir ma page)

On peut également utiliser DivX Converter et DivX Web Player :

Cela se fait en 2 temps :

1 - convertir son fichier .avi en .divx pour réduire sa taille :

avec DivX Converter :
http://www.divx.com/divx/windows/converter/

 

- faire glisser le fichier à convertir dans la fenêtre de DivX Converter

 

Le résultat est impressionnant : 30 Mo au lieu de 420 Mo !

 

2 - créer le code permettant d'afficher la vidéo sur une page web :

avec DivX Web Player Code Generator :
http://labs.divx.com/WebPlayerCodeGenerator

 

 

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 :

- 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 :

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.

 

 

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>

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 qu'il est impossible de 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

Ceci est un 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.

 

 

Création de diaporama ou galeries d'images :

La création de diaporama ou/et galerie photo se fait indépendamment de Dreamweaver ou d'un quelconque éditeur HTML.

Je l'ai fait sur ce site : http://www.marcheavec.fr/galerie.htm
Simple à faire... mais pas très "joli" ni très évolutif par rapport à ce qui se fait.

Les "vraies" solutions" sont en php ou en flash.
Mais ça demande un peu d'investissement intellectuel (ou de recherche sur Internet) car ça n'est pas directement "accessible".
Voir mes liens : partager ses photos sur Internet

J'avais utilisé PhpWebGallery dans le passé.

En flash, voir ce site :
http://www.f-56.com/index_flash.php
(nécessite logiciel et compétences)