Éducation, société et technologie

Les navigateurs Web

André Vincent — 2011-01-11T07:17:00Z

Dans tout projet Web sérieux, la compatibilité avec les divers navigateurs utilisés par les visiteurs est un élément essentiel à prendre en considération. Voici donc un portrait de l'état de la situation en ce début d'année 2012.

Voici donc, en date du 2 janvier 2013, l'état de la situation quant à l'utilisation par les internautes de par le monde (y compris au Canada) des diverses versions des logiciels de navigation. Source : StatCounter Global Stats [1]

Quoi retenir de ces statistiques ?

Les tendances au Canada semblent être semblables que les tendances mondiales.
Internet Explorer de Microsoft, toutes versions confondues, quoiqu'en déclin, accapare encore près de 30% du marché.
Les versions 6 et 7 d'IE sont ,aintenant quasiment disparues, suite à la campagne de Microsoft incitant à leur remplacement.
Les navigateurs alternatifs qui intègrent rapidement les spécifications CSS3 et HTML 5, connaissent ont connu une progression significative et dominent maintenant le marché.
Les versions moins récentes des navigateurs alternatifs (Firefox, Safari, Chrome, Opera), sont très rapidement mises à jour par leurs versions les plus récentes.
Parmi les navigateurs alternatifs, la progression de Firefox s'est stabilisé et a même légèrement décliné, au cours de 2012 alors que les navigateurs basés sur Webkit (dont Safari et Chrome) enregistrent une progression marquée, notamment à cause de leur utilisation dans les appareils mobiles (iPhone, iTouch, iPad, Android, etc...). Opera semble toutefois en déclin et compte pour moins de 0,5% d'utilisateurs.
Les modifications et écarts de progression entre les divers navigateurs alternatifs est peu significative car en général leurs divers moteurs de rendu intègrent rapidement les standards émergents à peu près tous au même rythme.
On peut donc considérer que plus de 90% des navigateurs (en incluant IE8 et IE9) sont en mesure de rendre à peu près correctement des pages Web construites selon les spécifications, normes et standards aujourd'hui en vigueur (HTML 4.01 ou XHTML 1.0 et CSS 2.1).

Pour tout développement sérieux de projets Web, toute utilisation au delà de 1% d'un navigateur par les visiteurs ne peut être négligé. La compatibilité d'un site Web avec IE6 doit donc encore être prise en compte et le restera probablement (et malheureusement) encore pour quelques années [2].

Attention

Les statistiques fournies ici, ne sont qu'une indication. Seules des statistiques issues des réelles visites de SON propre site permettent de réellement dresser un portrait exact du taux d'utilisation de diverses versions des navigateurs les plus en usage présentement sur SON propre site. Google Analytics est particulièrement utile à cet effet.

[1] Les données du site StatCounter Global Stats , en plus de fournir des données par région, semblent représenter assez bien à la fois l'état actuel de la situation et les tendances. Les statistiques de StatCounter Global Stats se situent dans une fouchette à mi-chemin entre celles plus conservatrices de Browser Version Market Share (marketshare.hitslink.com) et plus progressistes de Browser Statistics (www.w3schools.com).

[2] De nombreux développeurs ont d'ailleurs commencé a facturer jusqu'à 35% en supplément à leurs clients pour maintenir une compatibilité avec IE 6

Un conjugueur dans votre site

André Vincent — 2006-02-07T01:07:00Z

Technique d'inclusion dynamique d'un forumulaire en provenance d'un autre site dans votre propre site.

Le code à insérer dans votre page

 src="http://www.la-conjugaison.fr/export/index.php" 
 width="470" 
 height="560">

Le résultat

Les éditeurs HTML

André Vincent — 2005-02-10T22:01:04Z

Bien que l'on puisse éditer des pages web dans n'importe quel éditeur de texte, il existe une foule de logiciels spécialement conçus pour faciliter la production de pages web.

Sommaire

Les caractéristiques indispensables

Génère du code propre, bien formé et valide pour tout type désiré de document HTML ou XHTML (DOCTYPE).
Permet de reconnaître et d'enregistrer le document dans les principaux types d'encodage de caractères utilisés sur le web (CHARSET).
Dispose de menus, commandes, palettes, boutons ou assistants permettant d'insérer aisément et correctement les balises HTML et règles CSS appropriées.
Colore le texte de façon distincte permettant de distinguer les éléments, attributs, propriétés, sélecteurs et valeurs dans le code HTML.
Facile à installer.

Les caractéristiques souhaitables

Chargement (ouverture) et enregistrement du document directement sur le serveur distant par FTP.
Vérificateur de validité et d'accessibilité intégré.
Prévisualition dans tous les navigateurs installés sur le poste.

Les logiciels d'édition HTML ou éditeurs HTML se classent en deux grandes catégories :

Les éditeurs graphiques (WYSIWYG)
Les éditeurs textuels

Les éditeurs graphiques

Commerciaux

Dreamweaver (Mac, Windows) - Disponible en plusieurs langues
Sans doute le plus complet et le plus puissant de cette catégorie. Excellente intégration avec les autres produits de Macromedia, dont Flash. Nombreuses extensions disponibles. Mac et Windows seulement. Exige un environnement informatique passablement musclé. Génère du code relativement valide et propre, si bien configuré. La version MX 2004 rend passablement correctement les feuilles de styles (mais pas complètement). Utilisation assez complexe.
Adobe GoLive (Mac, Windows) - Disponible en plusieurs langues
Très complet et très puissant. Peu d'extension, mais excellente intégration avec les autres produits d'Adobe, dont Photoshop, Illustrator, In Design et Acrobat de même que les objets multimédia tels les séquencces vidéo, sonores et les animations. Ne rend pas toujours correctement les feuilles de styles. Génère du code souvent invalide et malpropre, notamment pour le XHTML. Mac et Windows seulement. Utilisation assez complexe.

Libres ou gratuits

Nvu (Mac, Linux, Windows) - Logiciel libre - Multilingue
Multiplateforme. Intègre en plus un excellent éditeur graphique de feuilles de styles, un gestionnaire de site, de même qu'un outil de "nettoyage" du code HTML et de validation. Le copier/coller d'un texte en provenance de d'autres logiciels, dont Word, est particulièrement bien géré. Le tout, compatible XHTML. Un projet prometteur qui pourrait rivaliser avec Dreamweaver et GoLive. À suivre. Pour une documentation en français, voir :
Framasoft : Tutoriel NVU

Conclusion : aucun des éditeurs graphiques ne répond, pour l'instant, complètement à nos exigences. Seul Dreamweaver (et seulement à compter de la version MX 2004) s'y rapproche. Nvu semble prometteur, mais encore trop buggé.

Les éditeurs textuels

Ce sont ceux en général qui offrent la plus grande souplesse, la meilleure conformité aux normes et standards et la grande productivité et rapidité pour constuire rapidement un site web de qualité, une fois le codage (X)HTML et CSS bien maîtrisé.

Commerciaux

BBedit (Mac) - Anglais seulement
L'un des meileurs et des plus puissants éditeur HTML textuel, toute plateforme confondue. Définitement le choix de très nombreux développeurs de sites web. Génère du code HTML, XHTML et CSS très propre et toujours valide, de nombreux assistants, palettes et raccourcis facilitant la production et l'édition de pages web. Fenêtre de prévisualisation en temps réel. Ouverture et enregistrement direct d'un fichier sur un serveur distant via FTP. Très spartiate à prime abord, l'interface s'avère rapidement très convivial et puissant. Version démo 30 jours disponible.

Libres ou gratuits

Borak HTML (Mac, Linux, Windows) - Logiciel libre - Français
Ultra simple et grande souplesse (via une librairie de codes paramétrables). Produit du code propre et valide. Enregistrement direct sur un serveur distant via FTP. Éditeur de CSS. Pas de coloration du code. Excellent outil d'apprentissage. Une version pour SPIP avec éditeur de boucles est aussi disponible : Spip Squelette.
NoteTab Light (Windows) - Gratuit - Anglais seulement
Interface léger et simple. Nombreuses librairies disponibles (à ajouter en plus) HTML, XHTML, CSS. Génère du code propre et valide. Installatioin de base facile, mais pour une installation dans un contexte de production professionnelle, il faut installer quelques librairies supplémentaires. Utilisation facile et agréable.
HTML-Kit (Windows) - Gratuit - Disponible en plusieurs langues
Très complet... peut-être trop. Interface touffu. Nombreuses extensions. Nombreux assistants. Génère du code propre et valide. Installation relativement facile. Utilisation parfois déroutante, pas toujours facile de s'y retrouver. Probablement qu'avec l'habitude... Documentation en français disponible

Pour une liste plus complètes, vous pouvez consulter :

Les outils générateurs de code

André Vincent — 2004-11-24T19:54:33Z

Pour générer automatiquement le code de menus dynamiques javascript et CSS ou au format Flash ainsi que des formulaires de toute espèce, sans aucune connaisssance en programmation, directement en ligne.

Générateurs de menus Flash, Javascript ou CSS

Générateur de formulaires - voir le démo. Au choix, les résultats peuvent être :
expédiés par couriel à l'adresse de votre choix,
enregistrés dans un fichier texte,
enregistrés dans une base MySql.

Générateur de menu dynamique (horizontal ou vertical)

Référencement auprès des moteurs de recherche

André Vincent — 2004-09-06T06:30:40Z

Si on produit un site web, c'est pour être consulté. Pour être consulté, il faut que le public cible que nous visons puisse facilement nous trouver. Pour cela, les internautes utilisent des moteurs de recherche.

Comment donc obtenir un référencement pertinent auprès des principaux moteurs de recherche ?

Il faut d'abord y être référencé. Il faut donc s'y inscrire.

Mais ce n'est pas tout, encore faut-il que ces moteurs de recherche indexent les pages de votre site de façon pertinente. C'est en général la façon d'organiser et de structurer votre contenu qui permettra aux moteurs de recherche d'indexer correctement et de façon pertinente votre message.

Voici donc, par ordre d'importance les éléments qui ont le plus de poids auprès des principaux moteurs de recherche que sont Google, Lycos, Yahoo ou Alltheweb. Ces éléments sont bien lus avec une forte importance pour répondre à une requête donnée.

Le nom de domaine du site.
L'adresse (URL) de la page.
Le titre de la page. C'est le titre qui s'affiche dans la barre titre de votre navigateur. Dans le code HTML, c'est ce qui est balisé par l'élément TITLE dans l'entête (l'élément HEAD) d'une page web.
Les grands titres d'une page web, et plus paticulièrement ceux de la page d'accueil. Ce sont les titres balisés par l'élément H1.

Exemple pour une recherche sur le terme "sciences variateur graham", seront en général, considérés plus pertinentes les pages suivantes, par ordre d'importance :

Une page dont l'adresse est : http://variateur-graham.org/index.html
Une page dont l'adresse est : http://sciences.org/variateur-graham
Une page dont le titre (élément TITLE dans la partie HEAD de la page) comporte les mots "sciences variateur graham"
Une page dont les termes "sciences variateur graham" se retrouvent dans une balise de titrage de type H1, H2...

D'autres informations contenues dans votre document peuvent améliorer la pertinence de référencement de vos contenus auprès des moteurs de recherche. Mais leur importance est aujourd'hui considérée toute relative par rapport aux moteurs, certains les ignorent, d'autres les lisent et leur accordent une certaine pertinence. Ce sont les informations contenues dans les éléments META dans l'entête (l'élément HEAD) d'une page web.

KEYWORDS
Exemple :

Cette balise indique aux moteurs, quels sont les mots importants de la page. Autrefois très importante pour le référencement, cette information est aujourd'hui complètement ignorée par google et à peine prise en considération par yahoo. Il ne faut donc pas compter uniquement sur cette information pour obtenir un référencement appréciable.

DESCRIPTION
Exemple :

Cet élément se comporte de la même manière que la balise KEYWORDS. Certains moteurs de recherche prennent en compte son contenu au même titre que KEYWORDS, d'autres s'en servent uniquement pour décrire la page dans les résultats de recherche, enfin d'autres l'ignorent complètement.

Référencement croisé

Un autre facteur important, du moins pour Google, c'est le référencement croisé. Plus un site ou une page est référencée par d'autres sites dont l'indice de référencement « page rank » est supérieur au vôtre, plus sa pertinence sera élevée. En d'autres termes, si d'autres sites bien référencés établissent un hyperlien vers votre site, plus Google y accordera d'importance dans ses résultats de recherche.

Une méthode fort simple pour augmenter la pertinence de votre site consiste à l'enregistrer dans le maximum d'annuaires de sites web.

Un autre méthode, moins fastidieuse et fort utilisée par les Weblog, consiste à proposer un fil de syndication, notamment auprès de sites partenaires ou similaires. Ainsi les articles ou nouvelles les plus récentes de votre site se retrouveront automatiquement référencés sur d'autres sites.

Fréquence d'indexation

Une fois référencé auprès des principaux moteurs de recherche, votre site sera visité régulièrement par leurs robots d'indexation, au début, une fois par mois. Ils passeront en revue chacune des pages de votre site à partir de la page d'accueil et en suivant les liens de vos pages. Plus votre page d'accueil sera renouvellée souvent, plus fréquentes seront les visites des robots de recherche et l'indexation de votre contenu. Si le contenu de votre page d'accueil est fréquemment renouvellé, les robots d'indexation des moteurs de recherche y reviendront plus souvent.

Ainsi, les nouvelles pages de votre site seront plus immédiatement référencées et pertinentes auprès des moteurs de recherche.

Conseils

À faire

Dans la mesure du possible, choisissez un nom significatif pour le nom de domaine de votre site et l'adresse (url) de vos pages, réflétant bien le contenu de votre site et de chacune de vos pages.
Utilisez autant que possible des URI (Uniform Resource Identifier) propres, du type :
http://speca.ca.edu/executif_et_comites plutôt que
http://speca.ca.edu/?q=taxonomy/term/1.
Utilisez un titre (balisé par l'élément TITLE) distinctif pour chacune des pages de votre site. Évitez d'utiliser le même titre pour tout votre site.
Placez le contenu pertinent de votre page en tout début de page (avant même les menus de navigation).
Structurez sémantiquement votre contenu, en utilisant au mieux les éléments de titrage (H1, H2, etc.). Les moteurs de recherche accordent souvent plus d'importance aux mots contenus dans les titres que ceux contenus dans des paragraphes ou pire, dans de multiples tableaux imbrigués.
Affichez en page d'accueil un ou des fils de syndication de sites partenaires actifs ou apparentés au contenu de votre site. Ainsi, le contenu de votre page d'accueil sera automatiquement et continuellement renouvellée. Le contenu d'une page d'accueil qui n'est pas fréquemment mise à jour, perd rapidement de sa notoriété auprès des moteurs de recherche.
Mettez bien en évidence sur la première page de votre site les nouveautés (nouveaux articles, nouvelles brèves, nouveaux liens, etc...) de votre site.
Et bien évidemment, enregistrez votre site auprès des principaux moteurs de recherche.
De plus, si votre site génère un fil RSS (syndication XML), enregistrez votre fil RSS auprès des principaux annuaires de Syndication.
Ecouragez vos amis et partenaires à s'abonner et à publier votre fil de syndication sur leurs site. C'est de loin l'une des méthodes les plus efficaces pour améliorer la notoriété et la pertinence de votre site auprès des moteurs de recherche.

À éviter

Éviter les pages d'accueil statiques de type tunnel (splash screen) ne présentant qu'une belle image de bienvenue ou une « zolie » animation Flash of course. Comme il y a peu de contenu à indexer, plusieurs moteurs de recherche considèrent une telle page comme une redirection et accordent conséquemment moins de poids à votre page d'accueil. De plus, vous venez d'ajouter un niveau de profondeur de plus à chacune des pages de votre site et donc d'en diminuer d'autant la pertinencce auprès des moteurs de recherche. Enfin, comme le contenu de cette page d'accueil n'est pas souvent mise à jour, les moteurs de recherche les visitent moins souvent, considérant que ce site n'est pas mis à jour très souvent et en diminuent d'autant la notoriété ou le page ranking.
Éviter les menus de navigation reposant uniquement sur des images, du DHTML (javascript) ou pire des technologies propriétaires non standards (tel Flash).
Éviter les pages d'accueil résultant d'une redirection en provenance d'un autre nom de domaine ou sous-domaine. Google, plus particulièrement, considère cela comme étant un pratique malveillante pour améliorer indûment votre page ranking et vous en pénalise d'autant.

Faites analyser votre site

Visitez abondance.com, l'un des sites phares du référencement pour pratiquer un audit de votre site.

Prenez note des différentes remarques et conseils qui vous sont faits.

En complément d'information

Favelets

André Vincent — 2003-03-12T12:04:08Z

Vous êtes développeur de sites web ? Vous désirez vérifier, explorer, valider une page sur le web, la vôtre ou celle d'un autre ?

Voici des sites qui offrent une liste de liens que vous glissez dans vos Favoris ou dans votre Barre des favoris.

Bookmarklets
Tantek Favelets (surtout Mac IE)

Moteurs de recherche

André Vincent — 2003-03-07T19:53:04Z

Une liste des principaux moteurs de recherche.

Principaux

Secondaires